This document discusses the importance of website accessibility (A11y) and compliance with laws like the Americans with Disabilities Act (ADA). It provides an overview of key accessibility priorities like ensuring all elements are operable via keyboard, labeling all form fields, adding alt text to images, using proper headings, color contrast, and tab order. Tools for testing accessibility issues are recommended, such as the WAVE toolbar and Color Contrast Analyzer. The importance of semantic HTML, ARIA roles and states for assistive technologies, and resources for web accessibility are also covered.

1. Challenge to produce accessible
websites (A11y)
By
Elianna James, President
I Break Websites LLC
I Break Websites LLC Ⓒ

2. Background - brief
• ADA - Americans with Disabilities Act - 26 years ago
• Architecture - wheelchair ramps; room to get into bathrooms; buses that can
lift a wheelchair;
• Section 508 - Federal Govt. laws re software, hardware - 2001
• Time marches on - internet evolves - legislation (finally!) catches up
• “Place of public accommodation”
• Increased lawsuits, settlements
• DOJ - letters of inquiry
• CU-Boulder - 2014, resolved 2015, new FTE positions, increased monitoring of
procurement of software
• 2017 new law to be enacted which brings in WCAG 2.0 and other
guidelines
I Break Websites LLC Ⓒ

3. Who are you creating software/ apps for?
• Office of Student Disabilities CU @2k
• @30 blind/ visually impaired (VI)
• 75% or more cognitive issues/ mental health issues
• ADHD
• Dyslexia and other learning disabilities
• Traumatic brain injury (TBI)
• Depression/ anxiety disorders/ recovering mental illnesses
• Aging population
• Overall population @ 20% have a disability including hidden disabilities
• Aging population (one 2014 study shows that as many as 38% of older Americans have at
least one disability)
I Break Websites LLC Ⓒ

4. You are coding to communicate
• To other people:
• To get paid $$$$
• To get a point across
I Break Websites LLC Ⓒ

5. Top priorities for Accessibility (A11y)
• Make all interactive screen elements accessible via keyboard (TAB,
Enter up/ down arrows)
• Label all form fields (First name, Last name, address)
• Give all images an alt text (note: ok to use “” for blank alt text)
• Headings!
• Color contrast (you want people to see what you’ve done)
• Tab order
• Links (code properly and give them unique names - not ‘Read more’)
I Break Websites LLC Ⓒ

6. WAVE toolbar for Chrome
• http://wave.webaim.org/extension/
• Install on your Mac and use to look at these pages:
1. http://www.directemployers.org/
2. http://criterion508.com/Compliance
3. Your choice. Try a site you use a lot or really like
1. Notice what issues come up, do some quick research on what that
means, think about your own coding to see if you are missing these
items
I Break Websites LLC Ⓒ

7. Color Contrast Analyzer
• Download to your machine from here:
https://www.paciellogroup.com/resources/contrastanalyser/
• Go back to the pages you looked at in last slide and test for color
conformance to ADA standards
1. Notice what values conform and which do not
2. Use the color contrast analyzer to improve the results
3. Think about your own color choices and whether they would
conform or not
I Break Websites LLC Ⓒ

8. More tools and cool stuff
• Built by developers at Khan academy for their entire team to
empower all employees to test for accessibility and report bugs.
• It’s a small Javascript file that fits on page and reports on some
common violations. Khan academy is actively seeking feedback.
• http://khan.github.io/tota11y/
• Go here, click on little blue man on bottom right of screen. Explore
the built-in accessibility options. Thanks to AudioEye for their
implementation:
• http://www.mutualofomaha.com/
I Break Websites LLC Ⓒ

9. Q & A
• What did you notice?
• Why would it matter to a person who needs to use a Keyboard Only
or a screen reader or who is color blind?
• What about someone who is deaf? Could they tell what is going on in
the website?
I Break Websites LLC Ⓒ

10. Why role and state is soooo important!
• Assistive Technology (AT) uses info gleaned from accessibility APIs to
translate what is going on via screen reader, refreshable Braille or by
allowing a keyboard to reach all active parts of the screen.
• Role = what does the control do?
• State = what is the current configuration?
• If my AT cannot tell whether the control is a button, checkbox or form
field how can I know what to do with it?
• Clean, obvious code is your first line of defense in accessibility.
I Break Websites LLC Ⓒ

11. ARIA
• Web Accessibility Initiative from W3C Designed to id features that
users interact with, relationships between elements and current
state. Helps with navigation (i.e. landmarks, regions)
• WAI-ARIA (Accessible Rich Internet Application) (Mozilla)
• Using the button role from developer.mozilla (using ARIA)
I Break Websites LLC Ⓒ

12. Resources
• WCAG 2.0 - https://www.w3.org/WAI/WCAG20/glance/
• Color Contrast Analyzer (includes color blindness tests)
https://www.paciellogroup.com/resources/contrastanalyser/
• Chrome developer tools:
https://github.com/GoogleChrome/accessibility-developer-tools
• Tenon.io: use limited fashion for free. Enterprise level developer tool
https://tenon.io/
I Break Websites LLC Ⓒ

13. Resources Two
• How to provide cross-browser focus:
• https://ghinda.net/article/mimic-native-focus-css/
• CNIB low vision simulator. Interactive:
• http://www.cnib.ca/en/your-eyes/eye-conditions/eye-
connect/Pages/EyeSimulator.aspx#diabetic-retinopathy
I Break Websites LLC Ⓒ

14. Thank you!
• More questions?
• Elianna James
• President, I Break Websites LLC
• http://ibreakwebsites.com
• 720-425-1001
• eliannaj@yahoo.com
I Break Websites LLC Ⓒ