Basics of creating accessible code for websites

Challenge to produce accessible websites (A11y)

ByElianna James, President

I Break Websites LLC

I Break Websites LLC Ⓒ

I Break Websites LLC Ⓒ

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 Ⓒ

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 Ⓒ

You are coding to communicate • To other people:

• To get paid $$$$• To get a point across

I Break Websites LLC Ⓒ

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 Ⓒ

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/Compliance3. 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 Ⓒ

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 standards1. Notice what values conform and which do not2. Use the color contrast analyzer to improve the results3. Think about your own color choices and whether they would

conform or not

I Break Websites LLC Ⓒ

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 Ⓒ

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 Ⓒ

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 Ⓒ

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 Ⓒ

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 Ⓒ

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 Ⓒ

Thank you!• More questions?• Elianna James• President, I Break Websites LLC• http://ibreakwebsites.com

• 720-425-1001• eliannaj@yahoo.com