Web Standards and Accessibility Primer
School of the Museum of Fine Arts, 11/11/06
Scott Jehl
Designer/Developer
Boston, MA
General Information
- What are Web Standards?
- Who benefits from Web Standards?
- Where standards sometimes fall short
[any material that should appear in print but not on the slide]
What are Web Standards?
- “Web standards” refers to a set of specifications put forth by organizations such as the W3C, to provide a standardized platform for web content.
- Using “web standards” typically refers to the practice of designing and developing websites with proper use of html, css, and javascript
- They're what all the cool kids use.
[any material that should appear in print but not on the slide]
Who benefits from Web Standards? (a)
Designers/Developers
- No need for multi-platform development in a traditional sense
- Separating layers allows for greater organization and control
- Achieve visual effects beyond what html alone can do
- Easier Debugging (cleaner)
[any material that should appear in print but not on the slide]
Who benefits from Web Standards? (b)
Users
- Browse using a range of devices
- More pleasant experience for users with disabilities
- Search Visibility
- Flexibility and control (text resize, fluid layouts, user css, etc)
[any material that should appear in print but not on the slide]
Who benefits from Web Standards? (c)
Client
- Cost Savings in Bandwidth
- Faster Page Loads
- Cheaper/Faster Redesigns
- Larger audience (screen, readers, mobile)
- Search Visibility
- Forward-compliance
- Liability and Customer Care (legal concerns for certain clients)
[any material that should appear in print but not on the slide]
Where standards sometimes fall short
- HTML Email (particularly Outlook)
- Video (mpeg, wmp, flv, mov, etc)
- Animation/Multimedia beyond Javascript (always necessary?)
[any material that should appear in print but not on the slide]
Web Standards Development
Separation of Layers
- Structure: HTML
- Presentation: CSS
- Behavior: Javascript
[any material that should appear in print but not on the slide]
HTML (Structure)
3 Flavors
- Strict
- Transitional
- Framesets
[any material that should appear in print but not on the slide]
XHTML vs. HTML
Differences in XHTML
- Elements must be properly nested
- Replaced elements must be closed.
- Markup must be lowercase
- One HTML element per page
Which Should I use?
[any material that should appear in print but not on the slide]
Semantics
- What does semantic markup mean?
- Are Tables wrong?
- What about font “tags”?
- Image usage (bg vs. img)
- Listed Navigation
- Deprecated Elements
[any material that should appear in print but not on the slide]
Accessibility
- Not just about users with disabilities
- Valid != Accessible
- Design Considerations
- Text Size
- Color usage
- Link Styling
- Headings, lists, etc
- Source Order and Skip Navigation
- Pragmatism
[any material that should appear in print but not on the slide]
CSS (Presentation)
- Keep in central, external location
- Take advantage of the Cascade
- Hacks and workarounds - pros/cons
[any material that should appear in print but not on the slide]
Javascript/DOM Scripting (Behavior)
- Keep in central, external location
- Keep it unobtrusive (plug & play)
- Reward those who have it, but don't punish those who don't
[any material that should appear in print but not on the slide]
Web Standards: Real-world examples (a)
ScottJehl.com
- Separation of Layers
- Layout Toggle
- Graceful Degradation
- Javascript New Windows (also show print link)
- Print CSS
- Microformats
[any material that should appear in print but not on the slide]
Web Standards: Real-world examples (b)
Journal Watch
- Skip Navigation
- Article Print CSS
[any material that should appear in print but not on the slide]
Web Standards: Real-world examples (c)
Aspen Snowmass Resorts
- Rich Internet Experience
- Showing/Hiding
- Drop Menus
- Slideshow
[any material that should appear in print but not on the slide]
Web Standards: Real-world examples (d)
WFCF Radio
- Animation
- Ajax
[any material that should appear in print but not on the slide]
Web Standards: Real-world examples (e)
Florida School for the Deaf and the Blind
- 508 requirements/target audience
- High Contrast
- Skip To Content
[any material that should appear in print but not on the slide]