Radina Matic presented lessons learned from working on the accessibility of a Django project. Some key points included:
1) Plan for accessibility from the start by including requirements in style guides and considering accessibility for frameworks and components.
2) Automated accessibility testing should begin as early as possible.
3) Accessibility is a shared responsibility and involves guidelines, tools, principles of perceivability, operability, understandability and robustness.
AWS Community Day CPH - Three problems of Terraform
Walking Down the A11y Road - Lessons Learned from Working on Accessibility of a Django Project
1. Walking Down the A11y Road
Lessons Learned from Working on
Accessibility of a Django Project
Radina Matic
radina@learningequality.org
@RadinaMatic
2. Radina Matic
- translator & technical writer
- open software & technology enthusiast
Web and Data Visualization at Rectory
Stats Office, University of Barcelona
Foundation for Learning Equality
radina.matic@ub.edu
radina@learningequality.org
@RadinaMatic
10. Good for Business
- Benefits SEO
- Improves mobile access and overall usability
- Increases market share
- PR impact derived from corporate social
responsibility
- Reduces legal risk
11. Don’t put up fires
Plan accessibility
as early as
possible, don’t
wait for QA
12. Standards & Laws
- US - Section 508 (1998) & ADA
- 21st Century &
Video Accessibility Act (2010)
- European Standard on accessibility
requirements for public procurement of ICT
products and services (EN 301 549 - 2014)
- Web Content Accessibility Guidelines
(WCAG) 2.0 as ISO/IEC 40500 (2012)
13. Accessibility mishaps
make headlines (and courtrooms)
- National Federation of the Blind v. TARGET (2008)
- National Association of the Deaf (NAD) v. Netflix (2012)
- Google Books (2012)
- Harvard & MIT (edX) MOOCs (2015)
http://www.karlgroves.com/2011/11/15/
list-of-web-accessibility-related-litigation-
and-settlements/ (~230 cases up to 2015)
19. Keyboard navigation
- Tab & Shift Tab through all the links
- Arrow keys through menus
- Skip-to links on top (first element after <body>)
Define visible focus state!
:focus {
outline: 0;
}
22. Images - The elusive ALT attribute
- alt=“?????”
- DESCRIBE the image
convey both content and functionality
- Do not put text inside images (localization)
- Decorative images – empty alt=“”
23. Links and Forms
Links
- Concise
- Descriptive
Click
More
Here
Forms
-Labels
-Fieldsets for grouping
-Tabbing order
32. Screenreader-only output
Heading level two clickable link
What is addition? What is
subtraction?
two
two hundred percent
Heading level two clickable link
Converting between fractions and
decimals
ten forty percent sixty percent
three hundred percent
33. Screenreader-only output
<div class="sr-only">{{_ "In this topic " }}</div>
<div class="progress-indicator {{vid_status}}">
<span class="sr-only">{{_ "there are " }}</span>
<div class="sidebar-icon">
<span class="progress-indicator content-counter">
<div class="sr-only">{{#unless n_pl_videos}}no{{/unless}}</div>
{{#if n_pl_videos}}{{n_pl_videos}}{{/if}}
</span>
</div>
<span class="sr-only">{{_ " videos." }}</span>
</div>
{{#ifcond vid_pct_started "<" 100}}
<span class="sr-only">{{_ "You are still working on " }}</span>
<span aria-hidden="true" role="presentation">{{ >{{vid_pct_started}}%</span>
{{/ifcond}}
{{#ifcond vid_pct_started "===" 100}}
<span class="sr-only">{{_ "You are still working on all of them." }}</span>
<span aria-hidden="true" role="presentation">{{vid_pct_started}}%</span>
{{/ifcond}}
34. Screenreader-only output
Heading level two clickable link
What is addition? What is
subtraction?
In this topic there are two
videos. You haven't started to
watch videos!
There are two exercises. You are
still working on all of them.
Heading level two clickable link
Converting between fractions and
decimals
In this topic there are ten
videos. Of those you have
completed forty percent. You are
still working on sixty percent.
There are three exercises. You
are still working on all of them.
36. A11y from the start
- Include a11y requirements into the Usability
Style Guide
- Leverage the standard HTML5 semantic elements
- Take a11y into account when choosing the
libraries and frameworks
- Make accessible web components available from the
beginning
- Start including automated a11y tests as soon as
possible
48. Accessibility is
a shared responsibility
http://www.w3.org/
community/wai-engage/wiki/
Accessibility_Responsibility_Breakdown
49. Put A11Y in your
dev team life
• A11y Pills & lots of passion
• Make accessibility a SHARED responsibility
• Start a Tools Repository
• Don't rely exclusively on checklists and
automated testing (Involve the USERS!)
• Accessibility is a process, not a project
problem (John B. Metz)
56. Color & Contrast - Tools
Contrast Analyzer -
http://www.paciellogroup.com/resources/contrastanalyser/
Accessibility Color Wheel -
http://gmazzocato.altervista.org/colorwheel/wheel.php
CONTRAST-A-WEB - http://dasplankton.de/ContrastA/ Color Safe -
http://colorsafe.co/
WCAG Contrast checker
https://addons.mozilla.org/ca/firefox/addon/wcag-contrast-checker/
Color Palette Accessibility Evaluator -
http://accessibility.oit.ncsu.edu/tools/color-contrast/
Color Extractor Bookmarklet - http://accessibility.oit.ncsu.edu/tools/color-
extractor/ & http://accessibility.oit.ncsu.edu/tools/color-contrast-chrome/
Color Contrast Visualizer
http://www.stainlessvision.com/blog/projects/colour-contrast-visualiser
57. Writing
-Plain language
-Sentences up to 25 words
-Paragraphs up to 3-4 sentences
-Active voice
-Consistent vocabulary
-Bulleted lists
-Consistent format & navigation