An Introduction to the Web Accessibility

For website operators

About me

• Web usability and accessibility specialist, information architect.

• HCD-Net Certified Human Centered Design Professional.

@caztcha

Prelude

“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

■■■■■ ■■■

Screen Reader

Cool ! I can hear what this website says. ☺

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

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, ...)

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 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! 

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

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)

Allow users to zoom

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.

Clear information chunks and layout

Avoid unnecessary motion and time limit

http://shouldiuseacarousel.com/

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

■■■■■ ■■■

Oh, I can’t hear my screen reader…

☹

Shhhhhhhhhhhhh, This is the public space !

☹

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.

Web Accessibility Check Tools

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)

Guidelines

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

Let’s make the Web a better place

for all of us!

Thank You!http://website-usability.info

https://twitter.com/caztcha