Walking Down the A11y Road - Lessons Learned from Working on Accessibility of a Django Project
60
Walking Down the A11y Road Lessons Learned from Working on Accessibility of a Django Project Radina Matic [email protected] @RadinaMatic
-
Upload
radina-matic -
Category
Technology
-
view
106 -
download
2
Transcript of Walking Down the A11y Road - Lessons Learned from Working on Accessibility of a Django Project
Walking Down the A11y RoadLessons Learned from Working on
Accessibility of a Django Project
Radina [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]@learningequality.org@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=yY96hTb8WgIDon Norman about “Norman Doors”
Document Structure• Page language
Document Structure
• Title(unique anddescriptive; H1)
• Page landmarks(semantic HTML5or 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
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 FormsLinks- Concise- Descriptive
ClickMoreHere
Forms-Labels-Fieldsets for grouping-Tabbing order
Color & Contrast
foreground vs. background3:1 for large text4.5:1 for smaller text
{% if settings.DEBUG %}
<script type="text/javascript" src="{% static 'js/tota11y.min.js' %}"></script>
{% endif %}
Color & Contrast
OFFER ALTERNATIVESColor & Contrast
OFFER ALTERNATIVESAccessible Multimedia Players
Able Video Player - http://www.washington.edu/doit/videos/
OFFER ALTERNATIVESDon’t Autoplay!
http://devtoolschallenger.com/
OFFER ALTERNATIVESLet it play!
Screenreader-only output
Screenreader-only outputHeading 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 outputHeading 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 - I18Nreturn `${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:
PerceivableOperableUnderstandableRobust
General A11y ToolsWAVE 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 Toolbarhttps://addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-
toolb/
Automated A11y testingpa11y - https://github.com/nature/pa11y
quails - http://quailjs.org/
Tanaguru - https://github.com/Tanaguru/Tanaguru
TENON - http://tenon.io
Document Structure-ToolsJuicy Studio Accessibility Toolbarhttps://addons.mozilla.org/en-uS/firefox/addon/juicy-studio-accessibility-too/
Jim Thatcher’s Faveletshttp://jimthatcher.com/favelets/
NCAM Accessibility QA Favelethttp://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines/favelet
Visual ARIA Bookmarklethttp://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/describing-images-for-enhanced
http://diagramcenter.org/webinars.html
(resources for accessible images & math)
Describing images -Tools
Color & Contrast - ToolsContrast 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
