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 Radina Matic [email protected] @RadinaMatic

Radina Matic - translator & technical writer - open software
& technology enthusiast Web and Data Visualization at Rectory Stats Office, University of Barcelona Foundation for Learning Equality [email protected] [email protected] @RadinaMatic

Why do we care?

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

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

People with disabilites?

EVERYBODY

Good for Business - Benefits SEO - Improves mobile access
and overall usability - Increases market share - PR impact derived from corporate social responsibility - Reduces legal risk

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

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)

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)

OFFER ALTERNATIVES

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

Document Structure • Page language

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

Headings

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; }

Keyboard navigation

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

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

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

{% if settings.DEBUG %} <script type="text/javascript" src="{% static 'js/tota11y.min.js' %}"></script>
{% endif %}

Color & Contrast

OFFER ALTERNATIVES Color & Contrast

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

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

OFFER ALTERNATIVES Let it play!

Screenreader-only output

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

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}}

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.

A11y from the start

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

<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>

<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

How did we get here?

A11Y Pills & Passion @LearnEQ Accessibility Pills

A11y Tools Repository

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

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)

Resources

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

POUR principles Information must be: Perceivable Operable Understandable Robust

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

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/

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

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

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

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

Thank you! Radina Matic [email protected]

Walking Down the A11y Road - Lessons Learned fr...

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

More Decks by Radina Matic

Other Decks in Programming

Featured

Transcript