Walking Down the A11y Road - Lessons Learned from Working on Accessibility of a Django Project

Walking Down the A11y Road - Lessons Learned from Working on Accessibility of a Django Project

Despite being a legal requirement and having sound business logic, accessibility is often an afterthought for no good reason. Delivering universal design need not be a burden even for small teams and projects. This is story of how implementing small steps towards making a product more accessible raises the awareness and preparedness of the whole team for future development challenges.

Talk presented at DjangoConUS conference in Philadelphia PA (USA), on July 19, 2016.

D26501f808bfef110292844fd5904c1a?s=128

Radina Matic

July 29, 2016
Tweet

Transcript

  1. 1.

    Walking Down the A11y Road Lessons Learned from Working on

    Accessibility of a Django Project Radina Matic radina@learningequality.org @RadinaMatic
  2. 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
  3. 3.
  4. 4.
  5. 6.

    Who benefits? World Health Organization fact sheet from 2014 Disabled

    people in the world (1000 millions) People living in Europe (742 millions)
  6. 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
  7. 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)
  8. 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)
  9. 15.

    DISCOVERABILITY FEEDBACK & It's not you. Bad doors are everywhere

    https://www.youtube.com/watch?v=yY96hTb8WgI Don Norman about “Norman Doors”
  10. 18.
  11. 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; }
  12. 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=“”
  13. 23.

    Links and Forms Links - Concise - Descriptive Click More

    Here Forms -Labels -Fieldsets for grouping -Tabbing order
  14. 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
  15. 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}}
  16. 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.
  17. 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
  18. 37.
  19. 38.
  20. 39.
  21. 40.
  22. 41.
  23. 42.
  24. 43.

    <a v-link="link"> <content-icon v-if="kind" :kind="kind" :progress="progress"> </content-icon> <img :src="validatedThumbnail" class="thumbnail"

    v-if="showThumbnail" alt=""> <div class="thumbnail" v-else>&nbsp;</div> <h3> <span class="visuallyhidden">{{ progress }} {{ kind }} </span>{{ title }} </h3> </a>
  25. 44.

    <template> <img :src="src" :alt="altText"> </template> <script> module.exports = { props:

    { … computed: { altText() { // TODO - I18N return `${this.progress} - ${this.kind}`; }, … }, }; </script> /content-icon/index.vue
  26. 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)
  27. 50.
  28. 51.

    Guidelines -Web Content (WCAG) -User Agent (UAAG) -Authoring Tools (ATAG)

    -WAI ARIA: Accessible Rich Interactive Applications
  29. 53.

    General A11y Tools WAVE Web Accessibility Evaluation Tool http://wave.webaim.org/ (Firefox

    toolbar & Chrome extension) OpenAjax Alliance (OAA) Accessibility Extension https://addons.mozilla.org/EN-US/firefox/addon/openajax- accessibility-exte/ AInspector Sidebar https://addons.mozilla.org/en-US/firefox/addon/ainspector-sidebar/ Accessibility Evaluation Toolbar https://addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation- toolb/ Automated A11y testing pa11y - https://github.com/nature/pa11y quails - http://quailjs.org/ Tanaguru - https://github.com/Tanaguru/Tanaguru TENON - http://tenon.io
  30. 54.

    Document Structure-Tools Juicy Studio Accessibility Toolbar https://addons.mozilla.org/en-uS/firefox/addon/juicy-studio- accessibility-too/ Jim Thatcher’s

    Favelets http://jimthatcher.com/favelets/ NCAM Accessibility QA Favelet http://ncam.wgbh.org/invent_build/web_multimedia/tools- guidelines/favelet Visual ARIA Bookmarklet http://whatsock.com/training/matrices/visual-aria.htm tota11y - an accessibility visualization toolkit - http://khan.github.io/tota11y/
  31. 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
  32. 57.

    Writing -Plain language -Sentences up to 25 words -Paragraphs up

    to 3-4 sentences -Active voice -Consistent vocabulary -Bulleted lists -Consistent format & navigation
  33. 59.