Introduction to accessibility

Introduction to
Accessibility
Joseph McLarty
(in 20 minutes… somehow)

What we are going to cover
• Different disabilities
• Understanding accessibility
• Accessibility for Ontarians with Disabilities Act (AODA)
• The Accessibility Standard for Information and Communications
• Web Content Accessibility Guidelines (WCAG) 2.0
• Places to start
• Resources
• Questions

Different disabilities
Cognitive/Intellectual
• Dyslexia, brain injury (stroke), neurodegenerative
(Parkinson's, Alzheimer's, etc.)
Physical
• Spinal cord injury, neuromuscular disorders,
limb amputation
Sensory
• Vision loss, hearing loss
Remember:
Disabilities are not binary
and one person could
have some combination
of these impairments

Understanding accessibility
What is accessibility?
"It simply means giving people of all
abilities opportunities to participate
fully in everyday life."

Example barriers to accessibility
• Attitudinal issues
• Assuming a person with a speech
impairment cant understand you
• Physical barriers
• A person who uses a wheelchair not
being able to enter a public building
because there is no ramp.
• Technology barriers
• “invisible” issues with digital websites
and communication materials.

How do we remove these barriers?
• Awareness
• Policy improvements
• Built environment changes
• Legislation - AODA

Accessibility for Ontarians with
Disabilities Act
(AODA)

Accessibility for Ontarians with Disabilities Act
The government enacted the Accessibility for Ontarians with
Disabilities Act (AODA) in 2005, which set out a clear goal and
timeframe to make Ontario accessible by 2025.

Accessibility for Ontarians with Disabilities Act
Accessibility Standard for Information and Communications
• Beginning January 1, 2014:
• If you launch a new public website or your existing site undergoes a
significant refresh, the site and any of its web content published after January
1, 2012, must conform to the World Wide Web Consortium Web Content
Accessibility Guidelines (WCAG) 2.0, Level A.
• Beginning January 1, 2021:
• All public websites and all web content on those sites published after January
1, 2012, must conform with WCAG 2.0 Level AA, other than providing
captions on live videos or audio descriptions for pre-recorded videos.

Web Content Accessibility
Guidelines 2.0
(WCAG)

Web Content Accessibility Guidelines (WCAG) 2.0
• WCAG 2.0 is an internationally accepted standard for web
accessibility developed by the World Wide Web Consortium (W3C),
The governing body of the web.
• Each guideline has success criteria spread across three levels of
conformance – Level A, Level AA and Level AAA.

Web Content Accessibility Guidelines (WCAG) 2.0
• The Web Content Accessibility Guidelines (WCAG) 2.0 are broken
down into the following four principles:
• Perceivable - Information and user interface components must be
presentable to users in ways they can perceive.
• Operable - User interface components and navigation must be operable.
• Understandable - Information and the operation of user interface must be
understandable.
• Robust - Content must be robust enough that it can be interpreted reliably by
a wide variety of user agents, including assistive technologies.

Places to start
Provide text alternatives for images
Screen reader software will scan an image or to find a description and
read it aloud
• In the example below a button element contains a search icon, the
text alternative is a description of what the button does – “search”
• There are situations where having blank alt attribute are appropriate
(alt=“ ”) *note the space in-between quotes*
• An image is purely decorative and provides no function or benefit beyond
aesthetics.
• Consider including decorative images using CSS instead of inline HTML
<button>
<img src="images/search.png" width="74" height="29" alt="Search">
</button>

Places to start
Use semantic HTML
"Semantic HTML is the use of HTML markup to
reinforce the semantics, or meaning, of the
information in webpages rather than merely to
define its presentation or look.”

Places to start
Use semantic HTML
Semantics and accessibility are part of HTML by design
• Making use of the proper HTML element is very important
• Avoid using tables for layout/design
• CSS Styling does not create a button - <span class=“btn”>Click here</span>
• Use the <button> element (keyboard events and tabindex are included)
• Code your visual headings with the proper HTML heading element
• <h1> to <h6> – hierarchy is important.
• Form fields need a proper label
• Label creates larger click area
• Guarantees that the label will be
read properly with an input
…
<label for="username">Your
username</label>
<input type="text" id="username” />
…

Places to start
Verify that all functionality can be completed with a keyboard
Make sure that keyboard users can use their tab key (among others) to
navigate the content and functionality of your app
• Maintain keyboard focus states
(:focus pseudo-class and outline CSS property)

Places to start
Verify that all functionality can be completed with a keyboard
• Don’t use positive tabindex attribute values (ex. tabindex=“3”)
• If needed, add elements into the tab order with tabindex=“0”
• Beware of mouse only script triggers
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
Key mapping
Tab: 9
Enter: 13
esc: 27
space: 32
Pageup: 33
pagedown: 34
end: 35
Home: 36
Left: 37
Up: 38
Right: 39
Down: 40

Places to start
Captioning videos
Providing captions allow deaf, hard-of-hearing or those learning English to
following along with your content
• Embed videos using YouTube if you can.
• Amazing subtitle support and transcription timing tools to help create subtitles
• Don’t have to worry about browser and video file type support
• HTML5 Video element with subtitles
• Wide support across modern browser versions (IE 9+, firefox, chrome, safari, opera)
• Small browser constrains still remain
• Ex. Internet Explorer <track> support starts at version 10
<!– simple video embed with subtitles -->
<video src="videofile.mp4”>
<track kind="subtitles" src=”captions.vtt" srclang="en" label="English">
</video>

Places to start
Provide a strong colour contrast
A lack of contrast between foreground text and background
impacts people with low vision and people who are colour blind
• Aim for passing WCAG AA ratio - 4.5:1
• Helpful tools
• WebAIM: Color Contrast Checker
• Snook.ca - Colour Contrast Check
• Colorsafe.co
• Colour Contrast Analyser (CCA)
(software download)

Places to start
Help users avoid and correct mistakes
• Avoid using a generic “error” message on form
submissions.
• Provide messages that explain the issue and assist in
correcting the problem
• “field is required” vs “Please enter a valid email address”
• Don’t use colour as the only method to determine
“required” fields
(ex - “Fields in red are required”)
• Markup is important
• Custom keyboards on touch devices
with HTML5 inputs (tel, email, etc)
• Mark required fields with the
“required” attribute on your <input>

Resources
• Twitter
• #a11y = a[ccessibilit]y
• #a11yTO = accessibility toronto
• Accessibility for Ontarians with Disabilities Act
• Web Content Accessibility Guidelines 2.0
• How to meet WCAG 2.0
• Web accessibility tutorials (W3C)
• HTML5 Video element documentation

Introduction to accessibility

Recommended

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to Introduction to accessibility (20)

Recently uploaded (20)

Introduction to accessibility

Editor's Notes