Web Accessibility: Understanding & Practice!

Web Accessibility
Understanding & Practice!
Class of MIS students, University of Ottawa
Rabab Gomaa
@RubysDo
Feb 4, 2019

Speaker, Rabab Gomaa
Rabab Gomaa is a web developer with over 15 years of
experience and in-depth knowledge of web design and
web integration. She currently works at increasing the
accessibility awareness and improving the accessibility of
websites & web applications for the Agriculture and Agri-
Food Canada (AAFC) and the Government of Canada.
Rabab is a co-organizer of the a11yOttawa (Ottawa
Digital Accessibility and Inclusive Design) and presented
in several conferences including a11y.tours 2018,
Confoo.ca 2017, the Accessibility Conference of
University of Guelph 2014 & 2016, 2017, CodeFest4
(2016), a11yYOW 2014 and a11yQC 2016.
2 of 31
Rabab Gomaa @RubysDo “Accessibility Understanding & Practise” PPT
Photo of Rabab with Guide Dog - Leo

Introduction & welcome
In turn
•Your name
•Your field of experience
•Your level of comfort with HTML
•Your learning objectives
3 of 31

Objective
By the end of the session you will be able to:
•Recognize the components of web accessibility
•Identify accessibility failures according to WCAG 2
•Experience various tools to evaluate the accessibility of your website
against WCAG 2
4 of 31

Content
• Accessibility Overview
– Disability Profiles
– Why to care
– Components
– Idea in practice
• Web Content Accessibility Guidelines (WCAG 2)
– 1. Perceivable
– 2. Operable
– 3. Understandable
– 4. Robust
• Compliance
– Validation Tools
– Screen readers
• Get Engaged
• Summary
5 of 31

Web Accessibility Overview
- What web accessibility means
• “Web accessibility means that people with disabilities can
equally perceive, understand, navigate, and interact with
websites and tools. It also means that they can contribute
equally without barriers.”
(Introduction to Web Accessibility, W3C Web Accessibility)
• Benefits:
– People with disability
– Older web users
– Mobile web users
– All users
Reference: Web Accessibility Initiative (WAI) (2019, Feb 3). Accessibility, Usability, and Inclusion. Retrieved from
https://www.w3.org/WAI/fundamentals/accessibility-usability-inclusion/
6 of 31
Accessibility Overview
. Disability Profiles
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

- Disability profiles
• visual
(blind, low vision, color blindness)
• auditory
(deaf, hard hearing, vestibular issues)
• cognitive
(attention, memory-related, literacy/dyslexia)
• speech
• physical
(fine motor control, low-strength, single-handedness)
7 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

- Why to care
1. It is the right thing to do.
2. Usability:
Accessibility improves usability for all including mobile users.
3. Legal Requirement:
- Government of Canada: Web Accessibility Standard
- Ontario Government: Accessibility for Ontarians with
Disabilities Act (AODA)
- USA Government: Section 508 of the Rehabilitation Act
- BILL C-81 Accessible Canada Act (Second Reading in the
Senate)
4. Easier to Maintain:
Well designed accessible websites are easier to maintain and
enhance (Web Content Accessibility and Mobile Web, W3C Web Accessibility Initiative)
8 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

- Components of web accessibility
The seven components of web accessibility must work together in order
to make the web content accessible.
9 of 31
Digital Image Reference: Web Accessibility Initiative (WAI) (2019, Feb 3). Illustration showing how components relate, detailed description at
/WAI/fundamentals/components/examples/#relate. Retrieved from https://www.w3.org/WAI/fundamentals/components/
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

- Idea in practise
When choosing a design template think of:
Large text size, readable fonts
Sufficient color contrast
Structure of the content
Headings logical order
Practise : HTML5 Up https://html5up.net/
•Choose an accessible template to start with or at lease
look at one that can be tweaked to be accessible
10 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

Web Content Accessibility Guidelines (WCAG 2)
- WCAG Structure
• WCAG 2 is a stable, reference-able technical
standard.
11 of 31
WCAG is structured in 4 principles that are divided in guidelines. In each guideline, there
are testable success criteria, which are at three levels: A, AA, and AAA.
Screenshot Reference: How to Meet WCAG 2 (Quick Reference) (2019, Feb 3). Screenshot with four annotations pointing to an example of principle, guideline, success
criteria and techniques & failures. Retrieved from https://www.w3.org/WAI/WCAG21/quickref/
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

- Demo on use of WCAG quick ref
• Get to the url - Google “wcag quick ref”
• Filter the reference
– Explore the type of techniques
– Find technique H37 and relate it to success criteria
• For the conformity of WCAG we have to apply the
sufficient techniques and avoid the failures begin
with F
12 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

- WCAG Principles
• WCAG 2.0 Principles:
– 1: Perceivable
– 2: Operable
– 3: Understandable
– 4: Robust
13 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

- WCAG Principles: 1. Perceivable 2. Operable 3. Understandable 4. Robust
Principle 1. Perceivable:
•Web content is made available to the senses - sight, hearing,
and/or touch
Checks associated:
•Do informative images have a descriptive alt text? (1.1.1)
•Do decorative Images are given null alt text (alt="")? (1.1.1)
•Is a text transcript provided for multimedia videos? (1.2.8)
•Are data tables coded with <th> and do captions, if present, are associated
to data tables? (1.3.1)
•Are text labels are associated with form input elements? (1.3.1)
•Group of related items are they coded in a list? (1.3.1)
•Do text and images of text has a contrast ratio of at least 4.5:1? (1.4.3)
•Are heading tags H1-H6 used to structure the page AND follow hierarchical
order? (1.3.1)
14 of 31
Useful Resource! WebAIM (2019, Feb 3). WebAIM's WCAG 2 Checklist.
Retrieved from https://webaim.org/standards/wcag/checklist/
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

- Success criteria 1.1.1 – Images
• Images must have text alternatives that describe the
information or function represented by them.
– Informative images have a descriptive alt text
– Decorative Images are given null alt text (alt="")
Demo on type of Images and how to make them
accessible
• An image is worth a thousand words, but
https://dokumen.tips/internet/an-image-is-worth-a-thousand-words-but.html
15 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

Find principle 1 failure!
<img src="xyz.jpg“ alt=“image of oatmeal” >
16 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

<img src="xyz.jpg“ alt=“image of oatmeal” >
Failure success criteria: 1.1.1
G94: Providing short text alternative for non-text content that serves the same
purpose and presents the same information as the non-text content
•alt=“image of oatmeal”: alt text does not represent the information on the image
•Suggested solution: Change with descriptive text alternative e.g.
alt="Understanding a Food Label - Canadian Food Inspection Agency,
Government of Canada">
17 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

Principle 2. Operable:
• Interface forms, controls, and navigation are operable
Checks associated:
•Do interactive elements (such as links, form fields) receive
keyboard focus? (2.1.1)
•Do Carousels or animations can be paused or stopped? (2.2.2)
•No page content flashes more than 3 times per second? (2.3.1)
•Are Link text describing the purpose of the link (click here links are
avoided)? (2.4.4)
•A mechanism is available to bypass blocks e.g. skip to main content
(2.4.1)
•Does the web page have a descriptive page title? (2.4.2)
•As you tab through the page, is the keyboard focus visible on links
e.g. About us (2.4.7)
18 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

Interaction with the Keyboard is essential!
19 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary
• Blind users
{use of screen reader e.g. JAWS, NVDA, Voice Over, etc.}
• Motor / physical disability
{Parkinson disease, hand tremor, heart attack consequence}
Snapshot sources:
Keyguard retrieved from from https://www.youtube.com/watch?v=zFv2myGVhl8
Mouse stick and head Wand retrieved from from http://webaim.org/articles/motor/assistive
Mouse stick user snapshot retrieved from https://www.w3.org/WAI/perspectives/keyboard.html
Keyguard is raised above the keyboard to
guide him to the specific key without making
mistakes
Mouse stick Rubber tip to give better traction on
keyboard, and end to insert into the mouth.
Head Wand: A person moves the head to make the head
wand type characters, navigate through web pages

Bootstrap Template https://bootsnipp.com/snippets/NjR9z
20 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

Bootstrap Template https://bootsnipp.com/snippets/NjR9z
Failure success criteria: 2.2.2
F16: Failure of Success Criterion 2.2.2 due to including scrolling content where
movement is not essential to the activity without also including a mechanism to
pause and restart the content
•Carousel: example of moving content that starts automatically and lasts more
than five seconds but has no pause/stop mechanism
•Suggested solution: Allow pause/stop buttons.
Example of accessible carousel Tabbed Interface – Carousel
https://wet-boew.github.io/v4.0-ci/demos/tabs/tabs-carousel-en.html
21 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

Principle 3. Understandable:
•Information and the operation of user interface must be
understandable.
Checks associated:
•When links and form fields receive focus AND When user types
interact with a form field, there is no change initiated without user
awareness e.g. open in new window? (3.2.1) (3.2.2)
•Is language of the page defined <html lang="en">? (3.1.1)
•Is there a validation done for required form fields & type of input?
(3.3.1)
•Are form instructions provided via instructions or examples in the
label? (3.3.2)
•Do users have the ability to review content before proceeding with
transactions? (3.3.4)
22 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

Principle 4. Robust:
•Content must be robust enough that it can be interpreted by
a wide variety of user agents, including assistive
technologies
Checks associated:
•Does the source code pass at http://validator.w3.org/? (4.1.1)
•Is the Markup used in a way that facilitate accessibility? Example
elements role, value, name in the code represents what the user sees
on the interface (4.1.2)
•Is WAI-ARIA used appropriately to enhance accessibility when HTML
is not sufficient?(4.1.2)
23 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

Accessibility Compliance
- Validation Tools
• Important! Automated validation tools can help but manual
check is essential to measure compliance against WCAG
• Testing tools include:
– W3C validator
https://validator.w3.org/
– Color contrast analyzer
https://developer.paciellogroup.com/resources/contrastanalyser/
– Firefox web developer
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
– Firefox Code Inspector
– Firefox WAVE toolbar
https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/
– Complex Data Table Markup Toolbar
https://www.visionaustralia.org/services/digital-access/resources/complex-data-table-markup-toolbar
– Total Validator
https://www.totalvalidator.com/
• Screen reader testing
24 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

- Demo on Validation Tools
• W3C validator
https://validator.w3.org/
• Color contrast analyzer
https://developer.paciellogroup.com/resources/contrastanalyser/
• Firefox web developer
https://addons.mozilla.org/en-US/firefox/addon/web-developer/
• Firefox Code Inspector
• Firefox WAVE toolbar
https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/
25 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

- Exercise use of WAVE
• Assess Information Studies (MIS) using WAVE!
26 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

- Screen reader testing
``A screen reader is a software application which, rather than
presenting web content visually, converts text into ‘synthesized
speech' allowing user to alternatively listen to content`` Wikipedia ,
2019
•Some examples of screen readers are:
Reference of survey results: WEBAIM (2017, December 21). Screen Reader User Survey #7 Results. Retrieved from
https://webaim.org/projects/screenreadersurvey7/#primary
27 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

- Screen reader testing: Interaction
Users navigate content using:
• Arrow keys
Move focus to the previous/next character or line instead of
scrolling the page.
• Keyboard commands / shortcut keys / Keystrokes
Navigate through HTML elements e.g. ‘h’ for headings, R
for regions/ARIA landmarks
• Virtual HTML features / List of elements / Elements
Dialogue
Get a list of HTML elements in the page e.g. Ctrl+F3 in
JAWS, NVDA + F7 in NVDA
28 of 31
Useful Resource! Rabab Gomaa (2018, Feb 27). Accessibility Testing Using Screen Readers.
Retrieved from https://www.slideshare.net/RababGomaa/accessibility-testing-using-screen-readers-88684678
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

- Screen reader testing: NVDA demo
29 of 31
Demo: Navigation of content on Virtual/Browse mode of NVDA
https://youtu.be/Na7mBcce2Ls
001-screenreader-interaction-virtualmodeNVDA.jpg
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

- Screen reader testing: NVDA focus highlight
30 of 31
Tools>Manage add-ons>Add-on Manager
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

- How screen reader users navigate a page
Q: When you arrive on a new, unfamiliar web page, for which
you have no prior knowledge or expectations, what actions
do you perform first?
•Searching for headings and landmarks
•If I’m looking for a link I’ll call up the links dialogue.
•If there are no regions or headings
I normally commence swearing!
31 of 31
Example of answers from Heydonworks.com (2016, June30). Responses To The Screen Reader Strategy Survey. Retrieved from
http://www.heydonworks.com/article/responses-to-the-screen-reader-strategy-survey
Opss! No one
wants that 
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

- Reporting compliance against WCAG
• Average of compliance: Use of assessment methodology to
generate a score for the average of compliance e.g.
Web Accessibility Assessment Methodology (Level AA)
https://wet-boew.github.io/v4.0-ci/demos/wamethod/wamethod-AA-en.html
• Communication of failures: Including related success
criteria, reference a technique or failure and if possible user
scenario that generates the failure
• One issue may generate multiple WCAG failures
Input fields with no labels associated.
Placeholders used instead of labels
 Failure 1.3.1 Info and Relationship
 Failure 2.4.6 Headings and Labels
 Failure 3.3.2 Labels and Instructions
32 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
. Reporting compliance
Get Engaged
Summary

Get Engaged
- What is happening and how to be engaged
•Inclusive design {engage people with disability from the start to ensure
accessibility of the end product}
•Bill C81 Accessible Canada Act
•WCAG 2.1
•Follow #a11y on twitter
•Accessible Navigation
https://www.blindsquare.com/indoor/
•Be My Eyes
https://www.bemyeyes.com/
•Global Accessibility Awareness Day (GAAD) on May 16
https://www.globalaccessibilityawarenessday.org/
•Conferences and camps
• A11yYOW- Community of accessibility in Ottawa
https://www.meetup.com/a11yOttawa/
• A11yTO
http://a11yto.com/
• CSUN Assistive Technology Conference
http://www.csun.edu/cod/conference/2019/sessions/index.php/
33 of 31
. Why to care
. Components
. Idea in practice
WCAG 2
1. Perceivable
2. Operable
3. Understandable
4. Robust
Compliance
. Validation Tools
. Screen readers
Get Engaged
Summary

Summary
• Components of web accessibility must work together in order to make the
web content accessible
• Content Accessibility Guideline (WCAG 2) is a technical standard to use in
order to make web content accessible
• Automated tools can help but manual assessment is crucial to measure
compliance
Resources
• How to Meet WCAG 2 (Quick Reference)
https://www.w3.org/WAI/WCAG21/quickref/
• WCAG 2.0 and WCAG 2.1 Checklist
https://webaim.org/standards/wcag/checklist
• Web Experience Toolkit (WET) Working examples
https://wet-boew.github.io/wet-boew/demos/index-en.html
• Canada.ca Content Style Guide
https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-style-guide.html
• Accessibility responsibility breakdown (WCAG 2.0)
https://wet-boew.github.io/v4.0-ci/demos/arb-rra/arb-rra-en.html
• Web Accessibility Assessment Methodology (Level AA)
https://wet-boew.github.io/v4.0-ci/demos/wamethod/wamethod-AA-en.html
• Web Accessibility Perspectives: Explore the Impact and Benefits for Everyone
https://www.w3.org/WAI/perspective-videos/
34 of 31

Thank you for your attention
Rabab Gomaa
@RubysDo
35 of 31
Become a catalyst for
accessibility & inclusion!
Photo: Rabab seating beside Leo,
a lovely guide dog who retired recently

Web Accessibility: Understanding & Practice!

More Related Content

What's hot (20)

Similar to Web Accessibility: Understanding & Practice! (20)

Recently uploaded (20)

Web Accessibility: Understanding & Practice!

Editor's Notes