Introduction to accessibility
Download as PPTX, PDF2 likes1,170 views
This document provides an introduction to accessibility. It discusses different types of disabilities, understanding accessibility barriers, and the Accessibility for Ontarians with Disabilities Act (AODA). It covers the Web Content Accessibility Guidelines (WCAG) 2.0 and places to start improving accessibility, such as adding text alternatives, using semantic HTML, providing captions, and ensuring sufficient color contrast. Resources for further information on accessibility are also listed.
![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](https://image.slidesharecdn.com/introductiontoaccessibilitya11ytojan2017-170126143803/85/Introduction-to-accessibility-24-320.jpg)
Introduction to accessibility
- 1. Introduction to Accessibility Joseph McLarty (in 20 minutes… somehow)
- 2. 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
- 4. 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
- 6. Understanding accessibility What is accessibility? "It simply means giving people of all abilities opportunities to participate fully in everyday life."
- 7. Understanding accessibility 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.
- 8. Understanding accessibility How do we remove these barriers? • Awareness • Policy improvements • Built environment changes • Legislation - AODA
- 9. Accessibility for Ontarians with Disabilities Act (AODA)
- 10. 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.
- 11. 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.
- 12. Web Content Accessibility Guidelines 2.0 (WCAG)
- 13. 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.
- 14. 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.
- 15. Places to start
- 16. 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>
- 17. 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.”
- 18. 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” /> …
- 19. 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)
- 20. 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
- 21. 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>
- 22. 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)
- 23. 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>
- 24. 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
- 25. Questions?
Editor's Notes
- #5: Cognitive, Developmental, intellectual, mental, physical, sensory
- #8: Photo of a wheelchair ramp with a tree in the middle of it.
- #11: Chart showing a breakdown of the regulations and standards contained within the AODA
- #12: Future proof yourself - Aim for WCAG 2.0 level AA right now
- #15: 1 Perceivable 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. 1.2 Provide alternatives for time-based media. 1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure. 1.4 Make it easier for users to see and hear content including separating foreground from background. 2 Operable 2.1 Make all functionality available from a keyboard. 2.2 Provide users enough time to read and use content. 2.3 Do not design content in a way that is known to cause seizures. 2.4 Provide ways to help users navigate, find content, and determine where they are. 3 Understandable 3.1 Make text content readable and understandable. 3.2 Make Web pages appear and operate in predictable ways. 3.3 Help users avoid and correct mistakes. 4 Robust 4.1 Maximize compatibility with current and future user agents, including assistive technologies.