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.

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.

38. Web Accessibility
Check Tools

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!

46. Thank You!
http://website-usability.info
https://twitter.com/caztcha