Creating Accessible Webpages

Transcription

1 Creating Accessible Webpages Facilitated by: Anne Mullen, Accessibility & Human Rights Manager, OHREA Marcin Pulcer, Manager, Web Services & Systems Support, ITS 2016 Employee Engagement & Development Department of Human Resources

2

3 Creating an Accessible Web Presence Anne Mullen, Accessibility and Human Rights Manager Office of Human Rights, Equity and Accessibility Marcin Pulcer, Manager, Web Services & Systems Support Information Technology Services February 3 rd 2016 Experience JAWS

4 Agenda 1. Understanding accessibility 2. Legislative Framework 3. Content Managers what are your responsibilities? 4. Examples of common errors, barriers and ways to fix them 5. Tools to check for accessibility 6. Accessibility Audit of your Websites Disability by the Numbers As of 2010, 1 in 7 Ontarians has a disability. This number is increasing, it is projected that by 2036, 1 in 5 Ontarians will have a disability.¹ Accessibility just makes sense and it is the right thing to do. ¹Accessibility Directorate of Ontario:

5 Disability Under the Ontario Human Rights Code and the AODA, the definition of disability includes: -any degree of physical disability, including diabetes mellitus, epilepsy, a brain injury, any degree of paralysis, amputation, or lack of physical co-ordination blindness or visual impediment, -deafness or hearing impediment -physical reliance on a guide dog or other animal or on a wheelchair or other remedial appliance or device, -a condition of mental impairment or a developmental disability, -a learning disability -a mental disorder The population of people with disabilities is the world s largest minority, of which anyone can become a member at any time. Barriers Disability itself is not a barrier, but barriers exist that can exclude people with disabilities. There are 5 types of barriers: 1. Physical Example: No curb cuts along sidewalks 2. Architectural Example: creating meeting areas that can only be accessed by stairs 3. Information and Communications Example: refusing to provide information in an alternate format (e.g. Sign Language Interpreter, PDF, etc.) 4. Policy (Systemic) Example: Considering any accommodation made as a favour, not a right 5. Attitudinal Example: persons who require additional time to access a service and the service provider is rude, impatient or unwilling to provide the assistance.

6 What Does Web Accessibility Mean? That online content can be effectively used by people who fall into the following disability groups: Persons who are blind, or who have severe visual impairments; Persons with upper body motor impairments; Persons with either visual or cognitive processing difficulties; Persons with hearing impairments¹ ¹Coombs, Norman. Making Online Teaching Accessible Accessibility for Ontarians with Disabilities Act, 2005 (AODA) Implemented by the provincial government in 2005 Vision of a barrier-free Ontario by 2025 Developed on four principles: dignity, independence, integration and equality of opportunity First of its kind in Canada Complements the Ontario Human Rights Code

7 Regulations Integrated Accessibility Standards, Ontario Regulation 191/11 (2011) (IASR) Most requirements have already come into effect ( ) Section 14 requires that by January 1 st 2014, new internet websites and web content on those sites must conform with WCAG 2.0 Level A.

8 What is WCAG Level 2.0 A? Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally. ¹ WCAG s Reference List: 1.Text Alternatives 2.Time-based media (closed-captioning) 3.Adaptable 4.Distinguishable 5.Keyboard Accessible 6.Enough Time 7.Seizures 8.Navigable 9.Readable 10.Predicable 11.Input Assistance 12.Compatible ¹Web Accessibility Initiatives p Text Alternatives What is required? 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 Ensure Alt Text it added to all pictures, charts, graphics

9 Time-Based Media What is required? Provide alternatives for time-based media (pre-recorded audio or video). All videos or audio recordings added to internet web pages must be closed-captioned. Intranet web pages (password protect pages, e.g. course websites) must be closed captioned upon request. CTL provides closed-captioning Services and can be contacted at: Short videos uploaded to YouTube can be closed-captioned free of charge. For a tutorial please visit: Adaptable What is required? Create content that can be presented in different ways (for example simpler layout) without losing information or structure. Information / Relationships Meaningful Sequence Sensory Characteristics

10 Distinguishable What is Required? Make it easier for users to see and hear content including separating foreground from background. Use of Colour / Contrast Line / Content Spacing Images of Text Keyboard Accessible What is Required? Make all functionality available from a keyboard. Keyboard Accessible No Keyboard Traps

11 Enough Time What is Required? Provide users enough time to read and use content. Timing Adjustable widgets Navigable What does this mean? Provide ways to help users navigate, find content, and determine where they are. Bypass Blocks Page Titles Focus Order Link Purpose Breadcrumbs Headings

12 Readable What is required? Make text content readable and understandable Language of the page Jargon / Idioms Abbreviations Reading Level Compatible What is required? Maximize compatibility with current and future user agents, including assistive technologies Markup

13 Making Word and PDF Documents Accessible Alt Text What is Required? 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 Ensure Alt Text is added to all pictures. Best practices include: Not exceeding 100 characters in length Do not over exaggerate the description of the image. Imagine listening to your lengthy description when using a screen reader program. Good Example of Alt Text: "Two ducks in a pond surrounded by lily pads". Poor Example for Alt Text: "Springtime at Waterfield Marsh". Poor Example of Alt Text: "A male and female duck swimming in the pond. One duck has a green head and the other has brown feathers. There are several lily pads in the water". How to Add Alt Text 1.Once you have added the picture, right click over the picture. A list of options will appear, click on Format Picture. 2.Click on the Alt text icon, circled, below. 3.Add the Title and/or Description.

14 Use Proper Formatting Ensure the use of the following functions when creating word documents: 1.Headings - create structure for visitors and give persons the opportunity to jump to areas of interest. 2.Page Breaks prevent unnecessary speech by the screen reader (e.g. enter, enter, enter) Avoid the following: Colour and Font Using only colour to convey information Using font that is too small or Example: Pie Chart Showing Shirt Colours in the Room Font styles that are difficult to read read Best practices: Minimum 12 point font, 16 point for large print Times New Roman and Arial are good fonts to use 24

15 Image information and Verbal Descriptions Particularly for maps, provide verbal information in addition to the information conveyed on the map. Example of Properly Formatted Document

16 Resources CNIB s Clear Print Guidelines : OCAD University s Accessible Digital Office Document Project Web Accessibility Evaluation Tool: University of Windsor Purchasing Policy: %202012%20Final%20v2.pdf WCAG Level A Requirements: WCAG20/conformance.html#uc-levels-head