An Introduction to the Web Accessibility
1 like708 views
The document provides an introduction to web accessibility for website operators. It discusses how web accessibility benefits those with disabilities by allowing them to access websites through assistive technologies like screen readers and braille displays. The document outlines best practices for web accessibility, including using proper typography, sufficient color contrast, clear labeling and layouts, captions and transcripts, keyboard navigation, and compliance with guidelines like WCAG. The goal of web accessibility is to ensure the web can be used by all people regardless of ability or disability.
![Keyboard Operation
• Confirm if your website can be navigable
by [Tab] key and [Enter] key.
• Screen reader users also use keyboard
with some command (or shortcut) keys.
https://www.youtube.com/watch?v=QP1rzxMRap4](https://image.slidesharecdn.com/introductiontoweba11y-150622212642-lva1-app6892/85/An-Introduction-to-the-Web-Accessibility-36-320.jpg)
An Introduction to the Web Accessibility
- 1. An Introduction to the Web Accessibility For website operators
- 2. About me • Web usability and accessibility specialist, information architect. • HCD-Net Certified Human Centered Design Professional. @caztcha
- 3. Prelude
- 4. “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, W3C Director and inventor of the World Wide Web.
- 5. Imagine if you have… Visual impairment (blindness, low vision, color-blindness); ... then, you can't see printed media (such as books and magazines, news papers, brochures), television and video. Hearing impairment (deafness, hard-of- hearing); … then you can't hear audio media, such as radio, television and video (audio track).
- 6. The Web is available for everyone! For the visual impairment (blindness, low vision, presbyopia) • Assistive technologies such as “screen reader” and “braille display” • Display zoom capability
- 7. ■■■■■ ■■■ Screen Reader Cool ! I can hear what this website says. ☺
- 8. Braille Display (Source : Google image search)
- 9. Display Zoom Capability (Example : Internet Explorer)
- 10. The Web is available for everyone! For the hearing impairment (deafness, hard-of-hearing) • Transcript (or full text) for audio content • Captioning (or subtitle) for video content
- 11. Captioning for Video Content
- 12. The Web is available for everyone! For the motor disability (inability to use a mouse, slow response time, limited fine motor control) • Keyboard operation capability • Voice input capability
- 13. Keyboard Operation and Voice Input Capability Cool ! I can use the Web though I can’t use the mouse. ☺
- 14. And the Web is “ubiquitous” today! A variety of devices… • PCs (desktop/notebook) • Tablets • Smartphones • Smart watches or other wearable gadgets
- 15. And the Web is “ubiquitous” today! A variety of situations… • At home • In the office • In public spaces • While shopping • While moving (train, bus, taxi, airport, ...)
- 16. The Web is “Ubiquitous” Today
- 17. To put it simply, the “Web accessibility” is... Whenever and wherever he/she wants, he/she can access and use the web, regardless of his/her condition and context.
- 18. Why should we tackle with it? For human rights • The Web is our basic social infrastructure. • There are some accessibility-related laws around the world. http://blog.powermapper.com/blog/post/ government-accessibility-standards/
- 19. Why should we tackle with it? For preventing “opportunity loss” • Are all of your customers young, with no disabilities, and using mouse-connected- PCs with high bandwidth? No!
- 20. Some Tips to Improve Web Accessibility
- 21. Legibility and Visibility • Typography (font, size, line spacing) • Color contrast (for low vision users, as well as for under-the-daylight situations) • Color scheme (for color blindness) • Allow users to zoom
- 22. Typography (font, size, line spacing) I traveled Thailand when I was a college student. (Chiang Mai, Bangkok, Kanchanaburi, Ayutthaya, then left for Penang, KL, Maracca, JB, Singapore by Malayan Railways.) I traveled Thailand when I was a college student. (Chiang Mai, Bangkok, Kanchanaburi, Ayutthaya, then left for Penang, KL, Maracca, JB, Singapore by Malayan Railways.)
- 23. Color contrast (for low vision users, as well as for under-the-daylight situations) I traveled Thailand when I was a college student. (Chiang Mai, Bangkok, Kanchanaburi, Ayutthaya, then left for Penang, KL, Maracca, JB, Singapore by Malayan Railways.) I traveled Thailand when I was a college student. (Chiang Mai, Bangkok, Kanchanaburi, Ayutthaya, then left for Penang, KL, Maracca, JB, Singapore by Malayan Railways.)
- 24. Color scheme (for color blindness) Accessible London Underground Map http://paul-wynne.blogspot.jp/2010/07/map-of-london-underground-for.html Protanopia (Red-Green Color Blindness) Deuteranopia (Green-Red Color Blindness) Tritanopia (Blue-Yellow Color Blindness)
- 25. Allow users to zoom
- 26. Lowering cognitive load • Clear information chunks and layout • Clear and specific labels (wording) • Avoid unnecessary motion (animation) • Avoid unnecessary time limit • Avoid flashing to prevent epilepsia • Avoid change of context automatically, without users trigger.
- 27. Clear information chunks and layout
- 28. Avoid unnecessary motion and time limit http://shouldiuseacarousel.com/
- 29. Avoid change of context automatically, without users trigger. Category A Category B Category C Choose the category Category B Page 001 Page 002 I just changed the category selection, and wanted to confirm if it’s OK. But the page has changed automatically… ☹ No submit button
- 30. Text alternative for non- text content • “Alt” attributes for images • Transcript for audio content • Captioning for video content
- 31. “Alt” attributes for images <img src=“xx.jpg” alt=“London Bus” /> “London Bus” Cool ! I can hear that there is a picture of London Bus. ☺
- 32. Transcript for audio content http://learningenglish.voanews.com
- 33. Captioning for Video Content (https://www.youtube.com/watch?v=BEFgnYktC7U)
- 34. Audio Control • Allow users to stop audio content playback • Allow users to adjust audio content volume
- 35. ■■■■■ ■■■ Oh, I can’t hear my screen reader… ☹ Shhhhhhhhhhhhh, This is the public space ! ☹
- 36. Keyboard Operation • Confirm if your website can be navigable by [Tab] key and [Enter] key. • Screen reader users also use keyboard with some command (or shortcut) keys. https://www.youtube.com/watch?v=QP1rzxMRap4
- 37. Information structures (This is a bit technical but…) Request your Web designer to ensure your website “Machine-Readable”. • Semantic HTML markup • WAI-ARIA for rich interaction By doing so, screen reader users can recognize the current content and condition in real-time.
- 39. General Checkers • “Web Developer” Add-on For Chrome https://chrome.google.com/webstore/detail/web-developer/ bfbameneiokkgbdmiekhjnmfkcnldhhm For Firefox https://addons.mozilla.org/ja/firefox/addon/web-developer/
- 40. Visual Design Checkers • Colour Contrast Analyser http://www.paciellogroup.com/resources/contrastanalyser/
- 41. Visual Design Checkers • No Coffee Vision Simulator https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl
- 42. Screen Readers • NVDA (for Windows) http://www.nvaccess.org/ • VoiceOver (for OS X and iOS) • Talkback (for Android)
- 43. Guidelines
- 44. WCAG 2.0 • Web Content Accessibility Guidelines (WCAG) 2.0 http://www.w3.org/TR/WCAG20/ • Understanding WCAG 2.0 http://www.w3.org/TR/2013/NOTE-UNDERSTANDING- WCAG20-20130905/ • Accessibility – W3C http://www.w3.org/standards/webdesign/accessibility
- 45. Let’s make the Web a better place for all of us!