2. Designing for Accessibility
The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect.
3. What is Disability?
Sight disability – for example, blind, partially sighted or color blind
Hearing disability – for example, deaf or hard of hearing
Motor disability – for example, problems with motor skills or slow movement
Cognitive disability – for example, learning difficulties or problems with
concentration or reading
4. It’s the law. - USA
Designing accessible websites is not just a good thing to do – it’s the law.
Section 508
Sections 501 and 505
Section 503
Section 504
5. It’s the law. - Canada
Organizations with 50 or more employees in Ontario have to meet web
accessibility standards
Any content published after January 1, 2012, must conform to the WCAG 2.0
Level A
Beginning January 1, 2021, all public websites must conform to WCAG 2.0
Level AA
Organizations don’t have to modify content posted before 2012 unless they
are asked.
7. Principles of web Accessibility
When websites are properly designed, written and programmed using WCAG
2.0 principles, they offer universal access to information.
8. The Web Content Accessibility Guidelines 2.0 are organised into three levels of
conformance:
Level A – the most basic web accessibility features
Level AA – deals with the biggest and most common barriers for disabled
users
Level AAA – the highest (and most complex) level of web accessibility
WCAG 2.0 Levels
9. Principle #1: Perceivable
People with visual impairments often require text alternatives
A user with significant visual impairment may also use a screen reader
The key to ensuring readability for users with low vision is contrast
Difficulty distinguishing between red and green, or yellow and blue
(Make sure that colors are not your only method of conveying important information)
Use a contrast analyzer to ensure there is enough differentiation between
text and background colours
10. Principle #1: Perceivable - Tools
A few popular assistive technologies that you might want to research are:
BrowseAloud
JAWS (Job Access With Speech)
Lynx
Microsoft Magnifier
Window-Eyes
11. Principle #1: Perceivable - Examples (A)
Text Alternatives
Audio-only and Video-only (Pre-recorded)
Captions (Pre-recorded)
Audio Description or Media Alternative (Pre-recorded) Provide a link to a full text
transcript or Make an alternative version of the video where the regular soundtrack is replaced
by one with audio description and link to this from near the regular content
Use of Color
12. Principle #1: Perceivable - Examples (AA)
Captions (Live)
Audio Description for video content (Pre-recorded) - Alternative version of your video
with an audio description soundtrack and link to it from near the original content.
Contrast (Minimum) - Color Contrast Checker
Resize Text - up to 200% without losing content or functions
Images of Text - (quotes as text, do not use an image of text)
13. Principle #1: Perceivable - Examples (AAA)
Sign Language (Pre-recorded)
Extended Audio Description (Pre-recorded)
Media Alternative (Pre-recorded) - Media without audio (Provide a link to a full text
transcript for all video, media content and animation, whether it has audio or not)
Audio-only (Live) - All live content with an audio element is captioned by a professional subtitler and
displayed near the original content
Contrast (Enhanced)
14. Principle #1: Perceivable - Examples (AAA)
Visual Presentation
Enable the user to select from a number of background and foreground colours
Text blocks must be no wider than 80 characters
Text is not justified to both sides of the webpage
Enable the user to select from a number of line and paragraph spacing options
Text can be resized in a browser up to 200% without requiring the user to scroll horizontally on
an average monitor or laptop screen
15. Principle #2: Operable
All functionality fully accessible from a keyboard
Create large, clickable targets for those using a mouse
If there are tables, include a text-format alternative
http://www.w3.org/WAI/demos/bad/
16. Principle #2: Operable - Examples (A)
Keyboard Accessible
Keyboard Trap
Timing Adjustable
Pause, Stop, Hide (Moving, blinking, scrolling and auto-updating information)
Three Flashes or Below(“The combined area of flashes occurring concurrently occupies no more than a total of .006
steradians within any 10 degree visual field on the screen (25% of any 10 degree visual field on the screen) at typical viewing distance”)
Bypass Blocks
18. Principle #2: Operable - Examples (AAA)
Keyboard (No Exception) - Pointer-controlled content
No Timing
Interruptions
Re-authenticating
Three Flashes
Location
19. The information and the operation of user interface must be understandable.
The W3C says:
Make text readable and understandable.
Make content appear and operate in predictable ways.
Help users avoid and correct mistakes
Principle #3: Understandable
20. Language of Page
On Focus
On Input
Error Identification
Labels or Instructions
Principle #3: Understandable - Examples (A)
21. Language of Parts
Consistent Navigation
Consistent Identification
Error Suggestion
Error Prevention (Legal, Financial Data)
Principle #3: Understandable - Examples (AA)
23. “Content must be robust enough that it can be interpreted reliably by a
wide variety of user agents, including assistive technologies.”
● The foundation for any website should be semantic HTML, with CSS
recommended for the presentation layer and JavaScript deployed to guide
and support user behaviour.
● With functional HTML as a base, website content should be accessible
through all browsers, regardless of what tools are deployed by individual
users.
Principle #4: Robust
24. ● Parsing - Assistive technology may encounter issues that regular browsers can ignore. HTML must be
checked for errors
● Name, Role, Value
Principle #4: Robust - Examples (A)
