Building Accessible Websites in WordPress - Birmingham WordCamp 2014
Basics of creating accessible code for websites
-
Upload
elianna-james -
Category
Internet
-
view
79 -
download
0
Transcript of Basics of creating accessible code for websites
![Page 1: Basics of creating accessible code for websites](https://reader035.fdocuments.in/reader035/viewer/2022070519/58ee3f751a28ab524e8b4629/html5/thumbnails/1.jpg)
Challenge to produce accessible websites (A11y)
ByElianna James, President
I Break Websites LLC
I Break Websites LLC Ⓒ
![Page 2: Basics of creating accessible code for websites](https://reader035.fdocuments.in/reader035/viewer/2022070519/58ee3f751a28ab524e8b4629/html5/thumbnails/2.jpg)
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
![Page 3: Basics of creating accessible code for websites](https://reader035.fdocuments.in/reader035/viewer/2022070519/58ee3f751a28ab524e8b4629/html5/thumbnails/3.jpg)
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)
![Page 4: Basics of creating accessible code for websites](https://reader035.fdocuments.in/reader035/viewer/2022070519/58ee3f751a28ab524e8b4629/html5/thumbnails/4.jpg)
I Break Websites LLC Ⓒ
You are coding to communicate • To other people:
• To get paid $$$$• To get a point across
![Page 5: Basics of creating accessible code for websites](https://reader035.fdocuments.in/reader035/viewer/2022070519/58ee3f751a28ab524e8b4629/html5/thumbnails/5.jpg)
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’)
![Page 6: Basics of creating accessible code for websites](https://reader035.fdocuments.in/reader035/viewer/2022070519/58ee3f751a28ab524e8b4629/html5/thumbnails/6.jpg)
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
![Page 7: Basics of creating accessible code for websites](https://reader035.fdocuments.in/reader035/viewer/2022070519/58ee3f751a28ab524e8b4629/html5/thumbnails/7.jpg)
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
![Page 8: Basics of creating accessible code for websites](https://reader035.fdocuments.in/reader035/viewer/2022070519/58ee3f751a28ab524e8b4629/html5/thumbnails/8.jpg)
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/
![Page 9: Basics of creating accessible code for websites](https://reader035.fdocuments.in/reader035/viewer/2022070519/58ee3f751a28ab524e8b4629/html5/thumbnails/9.jpg)
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?
![Page 10: Basics of creating accessible code for websites](https://reader035.fdocuments.in/reader035/viewer/2022070519/58ee3f751a28ab524e8b4629/html5/thumbnails/10.jpg)
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.
![Page 11: Basics of creating accessible code for websites](https://reader035.fdocuments.in/reader035/viewer/2022070519/58ee3f751a28ab524e8b4629/html5/thumbnails/11.jpg)
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)
![Page 12: Basics of creating accessible code for websites](https://reader035.fdocuments.in/reader035/viewer/2022070519/58ee3f751a28ab524e8b4629/html5/thumbnails/12.jpg)
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/
![Page 13: Basics of creating accessible code for websites](https://reader035.fdocuments.in/reader035/viewer/2022070519/58ee3f751a28ab524e8b4629/html5/thumbnails/13.jpg)
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
![Page 14: Basics of creating accessible code for websites](https://reader035.fdocuments.in/reader035/viewer/2022070519/58ee3f751a28ab524e8b4629/html5/thumbnails/14.jpg)
I Break Websites LLC Ⓒ
Thank you!• More questions?• Elianna James• President, I Break Websites LLC• http://ibreakwebsites.com
• 720-425-1001• [email protected]