An Introduction to the Web Accessibility For website operators
About me @caztcha • Web usability and accessibility specialist, information architect. • HCD-Net Certified Human Centered Design Professional.
“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.
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).
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
Cool ! ■■■■■ I can hear what ■■■ this website says. ☺ Screen Reader
Braille Display (Source : Google image search)
Display Zoom Capability (Example : Internet Explorer)
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
Captioning for Video Content
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
Cool ! I can use the Web though I can’t use the mouse. ☺ Keyboard Operation and Voice Input Capability
And the Web is “ubiquitous” today! A variety of devices… • PCs (desktop/notebook) • Tablets • Smartphones • Smart watches or other wearable gadgets
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, ...)
The Web is “Ubiquitous” Today
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.
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!
Some Tips to Improve Web Accessibility
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
I traveled Thailand when I was a college student. I traveled Thailand when I was a college (Chiang Mai, Bangkok, student. (Chiang Mai, Bangkok, Kanchanaburi, Ayutthaya, then left for Kanchanaburi, Ayutthaya, Penang, KL, Maracca, JB, Singapore by Malayan Railways.) then left for Penang, KL, Maracca, JB, Singapore by Malayan Railways.) Typography (font, size, line spacing)
I traveled Thailand when I I traveled Thailand when I was a college student. was a college student. (Chiang Mai, Bangkok, (Chiang Mai, Bangkok, Kanchanaburi, Ayutthaya, Kanchanaburi, Ayutthaya, then left for Penang, KL, then left for Penang, KL, Maracca, JB, Singapore Maracca, JB, Singapore by Malayan Railways.) by Malayan Railways.) Color contrast (for low vision users, as well as for under-the-daylight situations)
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.
Page 001 Page 002 Choose the category I just changed the category selection, Category A Category B and wanted to Category B Category C confirm if it’s OK. But the page has changed automatically… ☹ No submit button Avoid change of context automatically, without users trigger.
Text alternative for non- text content • “Alt” attributes for images • Transcript for audio content • Captioning for video content
“London Bus” Cool ! I can hear that there is a picture of London Bus. <img src=“xx.jpg” alt=“London Bus” /> ☺ “Alt” attributes for images
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.