Walking Down the A11y Road - Lessons Learned from Working on Accessibility of a Django Project
•
1 like•365 views
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.
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (16)
Similar to Walking Down the A11y Road - Lessons Learned from Working on Accessibility of a Django Project
Similar to Walking Down the A11y Road - Lessons Learned from Working on Accessibility of a Django Project (20)
Recently uploaded
Recently uploaded (20)
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
- 5. Why do we care?
- 6. Who benefits? World Health Organization fact sheet from 2014 Disabled people in the world (1000 millions) People living in Europe (742 millions)
- 7. Who benefits? EU-Statistics on Income and Living Conditions from 2014 Millions!
- 9. EVERYBODY
- 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)
- 15. DISCOVERABILITY FEEDBACK & It's not you. Bad doors are everywhere https://www.youtube.com/watch?v=yY96hTb8WgI Don Norman about “Norman Doors”
- 16. Document Structure • Page language
- 17. Document Structure • Title (unique and descriptive; H1) • Page landmarks (semantic HTML5 or ARIA)
- 18. Headings
- 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
- 24. Color & Contrast foreground vs. background 3:1 for large text 4.5:1 for smaller text
- 25. {% if settings.DEBUG %} <script type="text/javascript" src="{% static 'js/tota11y.min.js' %}"></script> {% endif %}
- 26. Color & Contrast
- 27. OFFER ALTERNATIVES Color & Contrast
- 28. OFFER ALTERNATIVES Accessible Multimedia Players Able Video Player - http://www.washington.edu/doit/videos/
- 30. OFFER ALTERNATIVES Let it play!
- 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.
- 35. A11y from the start
- 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
- 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> </div> <h3> <span class="visuallyhidden">{{ progress }} {{ kind }} </span>{{ title }} </h3> </a>
- 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
- 45. How did we get here?
- 46. A11Y Pills & Passion @LearnEQ Accessibility Pills
- 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)
- 50. Resources
- 51. Guidelines -Web Content (WCAG) -User Agent (UAAG) -Authoring Tools (ATAG) -WAI ARIA: Accessible Rich Interactive Applications
- 52. POUR principles Information must be: Perceivable Operable Understandable Robust
- 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
- 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/
- 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
- 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
- 58. Accessible Video Players http://www.icant.co.uk/easy-youtube/ Web-Based Media Player Accessibility Comparison Table