Upload
kazuhiko-tsuchiya
View
108
Download
2
Embed Size (px)
Citation preview
About me
• Web usability and accessibility specialist, information architect.
• HCD-Net Certified Human Centered Design Professional.
@caztcha
“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
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
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
Keyboard Operation and Voice Input Capability
Cool ! I can use the Web though I can’t use the mouse. ☺
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, ...)
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 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/
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!
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
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.)
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.)
Color scheme (for color blindness)
Accessible London Underground Maphttp://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)
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.
Avoid change of context automatically, without users trigger.
Category ACategory BCategory 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
Text alternative for non-text content
• “Alt” attributes for images • Transcript for audio content • Captioning for video content
“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. ☺
Transcript for audio content
http://learningenglish.voanews.com
Captioning for Video Content (https://www.youtube.com/watch?v=BEFgnYktC7U)
Audio Control
• Allow users to stop audio content playback• Allow users to adjust audio content volume
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
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.
General Checkers • “Web Developer” Add-on
For Chromehttps://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
For Firefoxhttps://addons.mozilla.org/ja/firefox/addon/web-developer/
Visual Design Checkers• Colour Contrast Analyser
http://www.paciellogroup.com/resources/contrastanalyser/
Visual Design Checkers• No Coffee Vision Simulator
https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl
Screen Readers• NVDA (for Windows)
http://www.nvaccess.org/
• VoiceOver (for OS X and iOS)
• Talkback (for Android)
WCAG 2.0• Web Content Accessibility Guidelines
(WCAG) 2.0http://www.w3.org/TR/WCAG20/
• Understanding WCAG 2.0http://www.w3.org/TR/2013/NOTE-UNDERSTANDING-WCAG20-20130905/
• Accessibility – W3Chttp://www.w3.org/standards/webdesign/accessibility
Thank You!http://website-usability.info
https://twitter.com/caztcha