Civic tech accessibility presentation

1. Civic Tech for A11(y)
FOR DESIGNERS AND DEVELOPERS

2. Who benefits
Blind Seniors
Degenerative
Diseases
Deaf Soldiers Color Blind
Everyone (A11y is part of Usability)

3. Designing for A11y
Images of text
Color contrast
“Press the green button”
Mouse only interactions
What to look for:

4. Designing for A11y
Color Contrast app:
http://www.paciellogroup.com/resources/
contrastanalyser/

5. Designing for A11y
Check color contrast online:
https://www.ssbbartgroup.com/reference/
index.php/Color_Contrast_Checker

6. Keyboard A11y
Navigate through the site using only
◦ Tab key
◦ Enter key
◦ Space Bar

7. Keyboard A11y
Tab order
Traps
Skipping page elements
Sudden changes
What to look for:

8. Keyboard A11y
Good things to have:
Skip links
Headings
Instructions
A tester who is blind

9. Common issues with Bootstrap
Background Images with no alternative text
Colors do not provide enough contrast
Hamburger menu is not announced in mobile devices
Slideshows
Data tables

10. Common issues with Bootstrap
Bootstrap-like framework for A11y
http://whatsock.com/
@accdc on github
Bryan Garaventa (supastarrr)

11. Common issues with Bootstrap
Bootstrap Accessibility Plugin:
http://paypal.github.io/bootstrap-accessibility-plugin/
demo.html
For modal dialogs, dropdown menus, page tabs, alerts, accordians/FAQs, image carousels

12. Using Graphical Elements
Colors and maps don’t translate well
Must use alternative text representations:
Data tables
Well-structured content

13. Using Graphical Elements
Data tables must announce column headers
Organize data in a way that is easy to navigate:
Use headers
Anchor links
Be creative

14. Mobile devices
1. Turn on Voiceover (ask Siri nicely)
2. Navigate through your site
3. Listen

15. Mobile Devices
Navigate through the site using only
◦Swiping (left to right)
◦Double tapping

16. We’re hiring
SSB BART Group
ssbbartgroup.com
lamar.jordan@ssbbartgroup.com