Download - Plan For Accessibility - TODCon 2008
![Page 1: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/1.jpg)
From concept to implementation
Presented by Denise R. Jacobs
Planning for Accessibility
![Page 2: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/2.jpg)
Overview of Accessibility
For the purposes of this presentation, "accessibility" refers to making web sites accessible to people with disabilities, and at the same time to people using different operating systems, web browsers and devices.
![Page 3: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/3.jpg)
Who Cares?
“If anybody asks me what the Internet means to me, I will tell him without hesitation: To me (a quadriplegic), the Internet occupies the most important part in my life. It is my feet that can take me to any part of the world; it is my hands which help me to accomplish my work; it is my best friend — it gives my life meaning.”
— Dr. ZhangXU
![Page 4: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/4.jpg)
Accessibility matters to…
The UserThe Client User Interface Designer(s) The Search Engine The Host
![Page 5: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/5.jpg)
7 Real-Life Situations where Web Accessibility is a Must
1) Users cannot see. 2) Users cannot hear. 3) User cannot move. 4) Users cannot understand complex text. 5) Users have slow Internet connections and
the images either take too long to download or do not download at all.
6) Users are not native speakers and have difficulties understanding the foreign language.
7) The situation prevents for the user from using their hands, eyes or ears to access a web page.
![Page 6: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/6.jpg)
Knowledge is power
Know yourself, know your audienceIt's important to make sure that you know what outcome you want with the end-product of your website and how your site will best serve your audience.
~ 10% of the population has disabilities
What are your audience's needs?What are your internal needs?
![Page 7: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/7.jpg)
If the users have…sight disabilities
correct page semantics for screen readers
audio equivalents to audio pieces
color schemes optimized for contrast and people with color blindness
Know what to provide in each situation
![Page 8: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/8.jpg)
Know what to provide in each situation, 2
If the users have… hearing disabilities
text equivalents to any audio pieces
motor disabilities easily navigatable
pages (by multiple methods: click, tab, keyboard)
content chunked well cognitive disabilities
content chunked well clear, simple
presentation of content
content written in clear, simple language
![Page 9: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/9.jpg)
Know what to provide in each situation, 3
If the users have… different browsers and
operating systems thorough cross-
browser testing
alternative media alternative stylesheets
updated easily in the future: progressive enhancement correct page semantics
(proper HTML coding) properly styled
implementation that can be altered
![Page 10: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/10.jpg)
Trends in accessibility
Adhering to Web Standards:Following the specifications created by the W3C for the version of markup or scripting language that you are using.
![Page 11: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/11.jpg)
Trends in accessibility
Web Standards make for good businessAccessibilityUsability Compatibility Substantially increased performance Higher search engine rankings Powerful designs
![Page 12: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/12.jpg)
Trends in accessibility
Standards Harmonization"Standards Harmonization" refers to the adoption of a consistent set of international technical standards for accessibility of:
Web content browsers and media players authoring tools
![Page 13: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/13.jpg)
Accessibility and Your Website Project
Integrate accessibility standards into design process
Examples of design requirements for people with different kinds of disabilities include:
Visual: described graphics or video; well marked-up tables;
keyboard support, screen reader compatibility Hearing:
captioning for audio, supplemental illustration
![Page 14: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/14.jpg)
Accessibility and Your Website Project
(continued) Physical, Speech:
keyboard or single-switch support; alternatives for speech input on voice portals
Cognitive, Neurological: consistent navigation, appropriate language
level; illustration; no flickering or strobing designs
![Page 15: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/15.jpg)
Site wireframing and designing
Incorporating accessibility into wireframes and design – what to look for
• The wireframes/design should have logical and consistent navigation.
• Elements should be grouped and relationships between elements should be evident.
• The design should not rely on color alone to convey information.
• As a client, do NOT require browser pop-up windows for your site (pop-up divs are different, however).
![Page 16: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/16.jpg)
Site wireframing and designing
Some (potentially) tough design choices:
Submit buttons – standard buttons have full functionality, whereas Javascript buttons may pose accessibility issues.
Use (and/or abuse) of Ajax – Ajax is a combination of technologies that is not reliable from an accessibility standpoint. Be sure that any Ajax desired on the site is proven to be accessible.
Color - luckily, most of the unusable color combinations are also visually unappealing. However, it is still important to test the colors for contrast and color blindness.
![Page 17: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/17.jpg)
Site wireframing and designing
The Goal: Graceful Transformation
“Graceful Degrading” – backwards degrading: the site works well in its simplest form.
“Progressive Enhancement" – while users are still able to see everything with a basic browser, JavaScript can overwrite and add functional richness if necessary. Also, if the site is redesigned, conceivably, only styles would need to be changed, but the page semantics and hierarchy are still solid.
![Page 18: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/18.jpg)
Site wireframing and designing
Accessible is BeautifulOnce you get past all of the hard thinking to make sure you have all of your accessibility bases covered, then the fun can begin! Don’t think that just because a site is accessible, it can’t be beautiful too!
![Page 19: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/19.jpg)
Content creation
Some Accessibility Guidelines for Web Content :
Provide context and orientation information. Link text should be meaningful enough to
make sense when read out of context - no more "click here"!
Place distinguishing information at the beginning of headings, paragraphs, lists, etc.
Use the clearest and simplest language appropriate for a site's content.
![Page 20: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/20.jpg)
Accessibility and Implementation
You have the power…But with power comes responsibility!
The WC3 has created the WCAG Guidelines, the standards by which web developers can create sites that are accessible to all audiences.
![Page 21: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/21.jpg)
Accessibility and Implementation
Here are some of the guidelines we will cover: Guideline 1. Provide equivalent alternatives to auditory and
visual content. Guideline 3. Use markup and style sheets and do so properly. Guideline 5. Create tables that transform gracefully. Guideline 6. Ensure that pages featuring new technologies
transform gracefully. Guideline 9. Design for device-independence. Guideline 12. Provide context and orientation information. Guideline 13. Provide clear navigation mechanisms.
![Page 22: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/22.jpg)
Accessibility and alternate browsers
Most web browsers on mobile devices, such as PDAs or cell phones generally render sites with minimal css and no javascript.
Consequently, all of the issues that affect screen readers also affect these mobile browser applications.
(WCAG Guideline 9)
![Page 23: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/23.jpg)
Accessible HTML: General
Use Headings Properly
Include more than just “read more” in links.
Skip Navigation/Jump to Content Link
![Page 24: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/24.jpg)
Distinguish betweenPresentational ImagesContent-Based Images
Accessible HTML: Images
![Page 25: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/25.jpg)
Tables Are Not For LayoutTabular DataHow the Blind “s
ee” on the web
Semantic FormsUse Required flag to promote important content
Accessible HTML: Tables and Forms
![Page 26: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/26.jpg)
Similar to the table tag being used for layout, iframes are another tag that can make navigation with a screen reader difficult. Keeping track of content with more than one page, and the difficulties of tracking which link opens in which frame, can be a headache. It is best avoided.
(WCAG Guideline 12)
Accessible HTML: Iframes
![Page 27: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/27.jpg)
Flash: Provide an alternativeMost Flash is not developed with accessibility in
mind. Because of the difficulty of Flash working properly
with screen readers, most screenreader users don’t even have flash installed.
If a user doesn’t have Flash installed, you should show the user alternate text. Flash files that use dynamic content can be reproduced in HTML as an alternate text version.
(WCAG Guidelines 1, 6)
Accessible HTML: Flash
![Page 28: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/28.jpg)
Lists for Navigation
Definition Lists
Accessible HTML: Lists
![Page 29: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/29.jpg)
The main way increase blog accessibility is to maximize the ways to get to content. categorized content is essentialtagged contentpopular/rated content
Accessible Blogs
![Page 30: Plan For Accessibility - TODCon 2008](https://reader036.vdocuments.mx/reader036/viewer/2022062513/55557604b4c9058a5a8b4d78/html5/thumbnails/30.jpg)
Conclusion
"Accessibility is a Process, Not a Product."
- Bob Regan, Macromedia
Questions? Comments?