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.

Transcript

1. Walking Down the A11y Road
   Lessons Learned from Working on
   Accessibility of a Django Project
   Radina Matic
   radina@learningequality.org
   @RadinaMatic
   

   View Slide

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
   

   View Slide

3. View Slide

4. View Slide

5. Why do we care?
   

   View Slide

6. Who benefits?
   World Health Organization fact sheet from 2014
   Disabled people in the world
   (1000 millions)
   People living in Europe
   (742 millions)
   

   View Slide

7. Who benefits?
   EU-Statistics on Income and Living Conditions from 2014
   Millions!
   

   View Slide

8. People with disabilites?
   

   View Slide

9. EVERYBODY
   

   View Slide

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
    

    View Slide

11. Don’t put up fires
    Plan accessibility
    as early as
    possible, don’t
    wait for QA
    

    View Slide

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)
    

    View Slide

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)
    

    View Slide

14. OFFER
    ALTERNATIVES
    

    View Slide

15. DISCOVERABILITY
    FEEDBACK
    &
    It's not you. Bad doors are everywhere https://www.youtube.com/watch?v=yY96hTb8WgI
    Don Norman about “Norman Doors”
    

    View Slide

16. Document Structure
    • Page language
    

    View Slide

17. Document Structure
    • Title
    (unique and
    descriptive; H1)
    • Page landmarks
    (semantic HTML5
    or ARIA)
    

    View Slide

18. Headings
    

    View Slide

19. Keyboard navigation
    - Tab & Shift Tab through all the links
    - Arrow keys through menus
    - Skip-to links on top (first element after )
    Define visible focus state!
    :focus {
    outline: 0;
    }
    

    View Slide

20. Keyboard navigation
    

    View Slide

21. Keyboard navigation
    

    View Slide

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=“”
    

    View Slide

23. Links and Forms
    Links
    - Concise
    - Descriptive
    Click
    More
    Here
    Forms
    -Labels
    -Fieldsets for grouping
    -Tabbing order
    

    View Slide

24. Color & Contrast
    foreground vs. background
    3:1 for large text
    4.5:1 for smaller text
    

    View Slide

25. {% if settings.DEBUG %}
    
    {% endif %}
    

    View Slide

26. Color & Contrast
    

    View Slide

27. OFFER ALTERNATIVES
    Color & Contrast
    

    View Slide

28. OFFER ALTERNATIVES
    Accessible Multimedia Players
    Able Video Player - http://www.washington.edu/doit/videos/
    

    View Slide

29. OFFER ALTERNATIVES
    Don’t Autoplay!
    http://devtoolschallenger.com/
    

    View Slide

30. OFFER ALTERNATIVES
    Let it play!
    

    View Slide

31. Screenreader-only output
    

    View Slide

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
    

    View Slide

33. Screenreader-only output
    {{_ "In this topic " }}
    
    {{_ "there are " }}
    
    
    {{#unless n_pl_videos}}no{{/unless}}
    {{#if n_pl_videos}}{{n_pl_videos}}{{/if}}
    
    
    {{_ " videos." }}
    
    {{#ifcond vid_pct_started "<" 100}}
    {{_ "You are still working on " }}
    {{ >{{vid_pct_started}}%
    {{/ifcond}}
    {{#ifcond vid_pct_started "===" 100}}
    {{_ "You are still working on all of them." }}
    {{vid_pct_started}}%
    {{/ifcond}}
    

    View Slide

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.
    

    View Slide

35. A11y from the start
    

    View Slide

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
    

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. 
    
    
    
     
    
    {{ progress }} {{ kind }} {{ title }}
    
    
    

    View Slide

44. 
    
    
    <br/>module.exports = {<br/>props: {<br/>…<br/>computed: {<br/>altText() {<br/>// TODO - I18N<br/>return `${this.progress} - ${this.kind}`;<br/>},<br/>…<br/>},<br/>};<br/>
    /content-icon/index.vue
    

    View Slide

45. How did we get here?
    

    View Slide

46. A11Y Pills & Passion
    @LearnEQ Accessibility Pills
    

    View Slide

47. A11y Tools Repository
    

    View Slide

48. Accessibility is
    a shared responsibility
    http://www.w3.org/
    community/wai-engage/wiki/
    Accessibility_Responsibility_Breakdown
    

    View Slide

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)
    

    View Slide

50. Resources
    

    View Slide

51. Guidelines
    -Web Content (WCAG)
    -User Agent (UAAG)
    -Authoring Tools (ATAG)
    -WAI ARIA: Accessible Rich Interactive
    Applications
    

    View Slide

52. POUR principles
    Information must be:
    Perceivable
    Operable
    Understandable
    Robust
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

55. http://webaim.org/articles/gonewild/#alttext
    http://accessibility.psu.edu/images/
    http://ncam.wgbh.org/experience_learn/educational_media/desc
    ribing-images-for-enhanced
    http://diagramcenter.org/webinars.html
    (resources for accessible images & math)
    Describing images -Tools
    

    View Slide

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
    

    View Slide

57. Writing
    -Plain language
    -Sentences up to 25 words
    -Paragraphs up to 3-4 sentences
    -Active voice
    -Consistent vocabulary
    -Bulleted lists
    -Consistent format & navigation
    

    View Slide

58. Accessible Video Players
    http://www.icant.co.uk/easy-youtube/
    Web-Based Media Player Accessibility Comparison Table
    

    View Slide

59. View Slide

60. Thank you!
    Radina Matic
    radina@learningequality.org
    

    View Slide