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

Different disabilitiesCognitive/Intellectual• Dyslexia, brain injury (stroke), neurodegenerative

(Parkinson's, Alzheimer's, etc.)Physical• Spinal cord injury, neuromuscular disorders,

limb amputationSensory• Vision loss, hearing loss

Remember:Disabilities are not binary and one person could have some combination of these impairments

Understanding accessibility

Understanding accessibilityWhat is accessibility?

"It simply means giving people of all abilities opportunities to participate fully in everyday life."

Understanding accessibilityExample 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.

Understanding accessibilityHow 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 ActThe 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 ActAccessibility 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

Places to startProvide text alternatives for imagesScreen 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 startUse 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 startUse semantic HTMLSemantics 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 startVerify 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 startVerify 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 Eventmousedown keydown

mouseup keyup

click keypress

mouseover focus

mouseout blur

Key mappingTab: 9Enter: 13esc: 27space: 32Pageup: 33pagedown: 34

end: 35Home: 36Left: 37Up: 38Right: 39Down: 40

Places to startCaptioning 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 startProvide a strong colour contrastA 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 startHelp 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 deviceswith 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

Questions?