Making your web site ADA compliant is a must. This presentation touches on what you, as a developer need to know to be accessible.

1. A Developers Role in
Web Accessibility
LYN SAWYER
Lyn.m.sawyer@gmail.com
@lynsawyer81

3. 19% OF US IS DISABLED IN SOME WAY

4. What does it mean to be web
accessible?
 Removing the barriers
to people with
disabilities so that all
people can interact with
websites

5.  Visual
 Blind
 Legally Blind
 Color Blind
 Hearing
 Deaf
 Hearing Loss
 Motor
 Physical Limitations
 Vestibular Disorders
 Cognitive
 Easily Distracted
 Problem Solving
 Learning Disabilities

6. Why should we care
 Americans with Disabilities Act (ADA)
 Section 508 and the law
 Title III of the ADA makes it unlawful to
discriminate against disabled persons in
the full and equal enjoyment of public
accommodations
 Expect to see an increase in lawsuits
 It’s the right thing to do

7. Accessibility tools
 Screen Readers
 Screen Magnification Software
 Captioning
 Transcripts
 Keyboards
 Alternative Input Devices
 Eye trackers
 Speech input
 Head pointers
 Switch access

8. What can we do
 Companies can set compliance policies based on the WCAG 2.0 success
criteria
 A – Basic level
 AA – Recommended to achieve
 AAA – not recommended for entire sites
 Full pages only
 WCAG 2.0 Guidelines
 Perceivable
 Observable
 Understandable
 Robust

9. Perceivable
INFORMATION AND USER INTERFACE COMPONENTS
MUST BE PRESENTABLE TO USERS IN WAYS THEY CAN
PERCEIVE.

10.  Provide alternatives for non-text content so that it can be changed into
other forms people need, such as large print, braille, speech, symbols, or
simpler language

11.  Provide alternatives for time-based media
 Transcripts for pre-recorded video and/or audio files
 Captions for pre-recorded video
 Description for video files with no audio
 Captioning for live video/audio files (level AA)
 Sign Language interpretation (level AAA)

12.  Create content
that can be
presented in
different ways
(e.g., simpler
layout) without
losing
information or
structure

13.  Make it easier for users to see and hear content including separating
foreground from background
 Color only is not used to convey meaning
 Ability to stop, pause, adjust volume on audio running longer than 3 seconds
 Criteria AA
 Color contrast 4.5:1
 Text can be doubled without losing functionality
 Criteria AAA
 Color contrast 7:1
 Very low or no background noise on audio https://www.w3.org/WAI/wcag-curric/sam26-0.htm

14. Operable
USER INTERFACE COMPONENTS AND NAVIGATION
MUST BE OPERABLE

15.  Keyboard accessible
 Avoid Keyboard traps

16.  Provide users enough time to read and use content
 Time adjustable
 Pause, stop, and hide
 Criteria AAA
 No timing
 Postpone or turn off interruptions
 User is returned to last page upon reauthentication with no loss of data

17.  Do not design content that is known to cause seizures
 Flashing content doesn’t flash more than 3 times in a second OR
 Flashing content is below the “general” and “red” thresholds
 http://trace.umd.edu/peat/

18.  Provide ways to help users navigate, find content, and determine where
they are
 Bypass blocks
 Link to skip blocks of content
 Link to skip to groups of content
 Titles on the page
 Focus order
 DOM order
 Tab order
 Link purpose

19.  Criteria AA
 Multiple ways to get to another page in the site
 Headings and labels
 Focus Visible
 Criteria AAA
 Location
 Link only Link purpose
 Section Headings

20. Understandable
INFORMATION AND THE OPERATION OF USER
INTERFACE MUST BE UNDERSTANDABLE

21.  Readable
 The default human language of each Web page can be programmatically
determined (Criteria A)
 The human language of each passage or phrase in the content can be
programmatically determined(Criteria AA)
 Unusual words, abbreviations, pronunciation, reading level (Criteria AAA)
 Predictable
 Consistent
 Warn of content changes resulting from input events
 Help users avoid and correct mistakes
 Error identification
 Labels
 Error suggestions and prevention (Criteria AA)

22. Robust
CONTENT MUST BE ROBUST ENOUGH THAT IT CAN
BE INTERPRETED RELIABLY BY A WIDE VARIETY OF
USER AGENTS, INCLUDING ASSISTIVE TECHNOLOGIES

23.  Maximize compatibility with current and future user agents, including
assistive technologies
 Proper markup
 Opening and closing tags
 Nesting
 No duplicate attributes
 Unique ID’s
 UI components
 Proper use of Name, Role, and Value

24. Accessible Documents
 PDF
 Tags to assist screen readers
 Microsoft WORD
 Structure
 Alt text on images
 Microsoft PowerPoint
 Choose a theme or colors that fit the contrast ratio
 Structure
 Logical reading order

25. Testing our sites
 Validate the HTML
 http://validator.w3.org/
 https://addons.mozilla.org/en-US/firefox/addon/html-validator/
 Check compatibility
 https://www.powermapper.com/products/sortsite/
 http://wave.webaim.org/extension/ WAVE Extension
 Manual check
 Visually look over the HTML
 Use your keyboard

26. Learn more
 Web Accessibility in Mind – https://webaim.org
 Web Accessibility Initiative – https://www.w3.org/WAI/
 Web Content Accessibility Guidelines –
https://www.w3.org/WAI/WCAG20/quickref/

27. Questions?
 https://www.w3.org/WAI/WCAG21/quickref/?versions=2.1only&currentsidebar=%23col_customize
 https://www.w3.org/WAI/WCAG20/quickref/
 https://webaim.org/
 https://www.w3.org/WAI
 https://www.adobe.com/accessibility/products/acrobat.html
 Lyn Sawyer
 Lyn.m.sawyer@gmail.com
 @lynsawyer81

29. https://creativemarket.com/blog/90s-web-designs