i# Accessibility
- Annual Disability Statistics Compendium
- Webvision: The Organization of the Retina and Visual System
- Prevalence of Refractive Error in the United States, 1999-2004
Principles (POUR)
- Perceivable
- Operable
- Understandable
- Robust
- Focus on keyboard
- Semantics
- Styling and visual design
- ChromeVox
Focus determines where keyboard events go in the page
Move focus around the page using your keyboard:
https://webaim.org/standards/wcag/checklist#sc2.1.1
TABwill move focus forwardSHIFT - TABwill move focus backwards- Arrow keys can be used to navigate inside of a component
Tab order
Implicity focusable automatically in the tab order + built-in keyboard event handling
Not all elements are focusable
WebAIM checklist items:
1.3.2: http://webaim.org/standards/wcag/checklist#sc1.3.2
tabindex on MDN
https://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute
tabindex="-1"
- not in the natural tab order
- can be programmatically focused with focus() method
tabindex="0"
- in the natural tab order
- can be programmatically focused
tabindex="5"
- in the natural tab order
- jumped to the front of tab order
- anti-pattern! (can be confusing for screen reader users)
Focus behavior in interactive controls
You can skip ahead to Lesson 6 to learn how to change or remove the focus ring from an element. In this case, since we're managing focus and headers are typically not interactive it's probably OK to remove their focus ring. However, you should never remove the focus indicator from an interactive element unless you're going to replace it with something else. Otherwise a keyboard user might have no idea which element is currently focused!
You can read more about skip links in this article on the Web AIM site.
https://webaim.org/techniques/skipnav/
https://developers.google.com/web/updates/2016/03/focus-start-point?hl=en
<a href="#maincontent" class="skip-link">Skip to main content</a>
<nav>
...
</nav>
<main id="maincontent" tabindex="-1">
...
</main>.skip-link {
position: absolute;
top: -40px;
left: 0;
background-color: #bf1722;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}The ARIA Authoring Practices doc (or "ARIA Design Patterns doc") is a great resource for figuring out what kind of keyboard support your complex components should implement.
WAI-ARIA Authoring Practices
https://www.w3.org/TR/wai-aria-practices/
Take a look at the ARIA Authoring Best Practices guide to read more about the Radio pattern.
ARIA Authoring Best Practices (Radio Group)
https://www.w3.org/TR/wai-aria-practices-1.1/#radiobutton
https://www.w3.org/TR/wai-aria-practices/#aria_ex
Roving focus
<li tabindex="0" checked>
<li tabindex="-1">
<li tabindex="-1">
<li tabindex="-1">
<li tabindex="-1">
<li tabindex="-1">
<li tabindex="0" checked> .focus()
<li tabindex="-1">
<li tabindex="-1">
<li tabindex="-1">To find your missing focus you can type the following into your console:
document.activeElement
Read more about Document.activeElement on MDN https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement
display: none; or visibility: hidden; display: block; or visibility: visible;
WebAIM checklist items:
https://webaim.org/standards/wcag/checklist#sc2.1.2
on MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog- devices
- softwares
- tools
screen reader, braille display, magnification, voice control, switch access, sip and puff, eye tracking
Programatically expressd semantics
https://www.w3.org/TR/WCAG21/#name-role-value
Role, Name, State, Value
(N) Round trip, (S) selected, (R) radio button
(N) Full name, (R) edit text,
(V) No preference, (N) Prefered seat type, (S) collapsed, (R) combo box
(N) Search, (R) button
main
├── form
| ├── radio button { name: "Round trip", state: selected }
| ├── edit text { name: "Full name" }
| ├── combo box { value: "No preference", name: "Seat type", state: collapsed }
| ├── button { name: "Search" }
implicit semantic meaning
WebAIM Guideline 1.1: http://webaim.org/standards/wcag/checklist#g1.1
The MDN page on demonstrates the two options for associating a with the thing it's labelling. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
The W3C spec has a list of what types of elements work with a tag. https://www.w3.org/TR/html5/forms.html#category-label
Visible labels and Text alternative (not visible)
WebAIM checklist items:
- 1.3.2: http://webaim.org/standards/wcag/checklist#sc1.3.2
- 2.4.10: http://webaim.org/standards/wcag/checklist#sc2.4.10
- 1.3.1: http://webaim.org/standards/wcag/checklist#sc1.3.1
- 2.4.1: http://webaim.org/standards/wcag/checklist#sc2.4.1
- 2.4.6: http://webaim.org/standards/wcag/checklist#sc2.4.6
JavaScript headings snippet:
var hs = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
for (var i = 0; i < hs.length; i++) {
console.log(hs[i].textContent.trim() + " " +
hs[i].tagName,
hs[i]);
}Shortcuts mentioned:
- CMD+F5 to turn on VoiceOver on OS X
- Normal keyboard operation (TAB, Shift+TAB, arrow keys etc.) work as normal with VoiceOver running
- CMD+L to jump to address bar
- CTRL+Option+U to open Web Rotor
- Type search term with Web Rotor open to search within Web Rotor
- CTRL + Option + ← ↑ ↓ → to explore content
- CTRL + Option + CMD + H to move forward by heading
- CTRL + Option + CMD + Shift + H to move backward by heading
WebAIM's article on Using VoiceOver to evaluate Web Accessibility has a full introduction to VoiceOver from the point of view of evaluating accessibility, including most keyboard commands available. https://webaim.org/articles/voiceover/
If you don't have a Mac device, NVDA is a free, open source screen reader available for Windows. WebAIM's introduction to NVDA covers the basics of using NVDA to check accessibility. https://www.nvaccess.org/ https://webaim.org/articles/nvda/
If you only use Linux, Orca is available in the Gnome desktop manager, although this screen reader is much more rarely used and suffers from poor support by web browsers. https://help.gnome.org/users/orca/stable/
WebAIM checklist items:
- 1.3.2: http://webaim.org/standards/wcag/checklist#sc1.3.2
- 2.4.10: http://webaim.org/standards/wcag/checklist#sc2.4.10
- 1.3.1: http://webaim.org/standards/wcag/checklist#sc1.3.1
- 2.4.1: http://webaim.org/standards/wcag/checklist#sc2.4.1
- 2.4.6: http://webaim.org/standards/wcag/checklist#sc2.4.6
JavaScript headings snippet:
for (var i = 0, headings = $$('h1,h2,h3,h4,h5,h6');
i < headings.length; i++) {
console.log(headings[i].textContent.trim() + " " +
headings[i].tagName,
headings[i]);
}Shortcuts mentioned:
- CTRL+Option+U to open Web Rotor
- ← and → to change panes within Web Rotor
- Type search term with Web Rotor open to search within Web Rotor
- Enter to move VoiceOver focus to item from Web Rotor
- CTRL + Option + Spacebar to activate link/button/other element
- CTRL + Option + ← ↑ ↓ → to explore content
- CTRL + Option + CMD + H to move forward by heading
- CTRL + Option + CMD + Shift + H to move backward by heading
- CTRL + Option + W to have a word spelled out
WebAIM's article on accesskey: http://webaim.org/techniques/keyboard/accesskey
WebAIM's articles on VoiceOver and NVDA:
http://webaim.org/articles/voiceover/ http://webaim.org/articles/nvda
WebAIM checklist item 2.4.9: http://webaim.org/standards/wcag/checklist#sc2.4.9
link anti-patterns (1)
<span class="link" onclick="doSomething()">I'm not a link</a>
<a onclick="changeView()">You might think I'm a link, but I'm not either</a>link pattern
<a href="#internal">Now I'm a link</a>- shows up in links list
- works with the keyboard
- can be bookmarked
link anti-patterns (2)
v code smell
<a href="#" onclick="doSomething()">Do something</a>
<button class="link" onclick="doSomething()">Do something</button>link anti-patterns (3)
<a href="/">
<img src="logo_wordmark.svg" alt="Udacity">
</a>link (text) anti-pattern
Responsive layouts
lorem
<a>Read more</a>link (text) pattern
Responsive layouts
lorem
<a>Read more about responsive layout</a>
<!-- or -->
<a>Responsive layouts</a>
lorem<header>
<nav>
<main>
<section>
<article>
<aside>
<section>
<hx>
<footer>- Make sure to use meaningful headings and link text as well as good pay structure
- You shouldn't try to control the experience a screen reader user will have
- DOM Order
- Focus
- Keyboard
- Semantics
- Labeling
- Headings
- Landmarks
- Links
ARIA spec https://www.w3.org/TR/wai-aria-1.1/
You can play with this example yourself, if you want! http://udacity.github.io/ud891/lesson5-semantics-aria/02-why-aria/index.html
<label>
<input type="radio" checked name="tType" value="0">
Round Trip
</label>
"Round Trip, selected, radio button"WAI-ARIA -> Web Accessibility Initiative - Accessible Rich Internet Applications
<label>
<input type="checkbox">
Receive promotional offers
</label>
checkbox
-> name: "Receive promotional offers"
-> state: checked<div class="checkbox checked">
Receive promotional offers
</div>
text
value: Receive promotional offers
<div class="checkbox checked" tabindex="0" role="checkbox" aria-checked="true">
Receive promotional offers
</div>- ✅ modify accessibility tree
- ❌ modify element appearance
- ❌ modify element behaviour
- ❌ add focusability
- ❌ add keyboard event handling
ARIA spec https://www.w3.org/TR/wai-aria-1.1/
Modify semantics
<button class="toggle" checked>
Enable
</button>
button
-> name: Enable
<button class="toggle" checked role="switch" aria-checked="true">
Enable
</button>
switch
-> name: Enable
-> state: checkedExpress more UI semantics
<ul role="tree">
<li role="treeitem" aria-expanded="true">
Accessibility course
</li>
<ul role="group">
<li role="treeitem" aria-expanded="false">
Introduction
</li>
<li role="treeitem" aria-expanded="false">
Focus
</li>
</ul>
</ul>Extra label and descriptions
<button class="glyph" aria-label="Filter">
<div class="menu-glyph"></div>
</button>
button
-> name: "Filter"Relationships
<button aria-expanded="false" aria-controls="advanced-settings">
<h2>Advanced setting</h2>
</button>
<div id="advanced-setting">
...
</div>Live updates
<div role="alert">
Could not connect!
</div>- ARIA 1.0 roles: https://www.w3.org/TR/wai-aria-1.0/#roles
- ARIA 1.1 roles (draft): https://www.w3.org/TR/wai-aria-1.1/#roles
- ARIA 1.1 practices guide (draft): https://www.w3.org/TR/wai-aria-practices-1.1/
ARIA in HTML spec, including guidance on what ARIA roles may and may not be used with which HTML elements: https://www.w3.org/TR/html-aria/
https://www.w3.org/TR/wai-aria-1.1/#attrs_relationships
https://accessibilityresources.org/aria-setsize
Hidden In Plain Sight
For more information on screen reader-only text, check out WebAIM's article on "invisible content".
https://www.w3.org/TR/wai-aria-1.1/#aria-hidden
https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute
https://developer.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
https://www.w3.org/TR/wai-aria-1.1/#treeitem
https://www.w3.org/TR/wai-aria-1.1/#button
https://www.w3.org/TR/wai-aria-1.1/#checkbox
Check out the number input demo yourself, if you like.
aria-live="off"
aria-live="polite"
aria-live="assertive"aria-atomic="true|false(default)"
aria-relevante="additions|removals|text|all|additions text(default)"
aria-busy="true|false"WebAIM checklist items:
2.4.7: http://webaim.org/standards/wcag/checklist#sc2.4.7
:focus pseudo-class https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
outline CSS property https://developer.mozilla.org/en-US/docs/Web/CSS/outline
:hover pseudo-class https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
::before pseudo-element https://developer.mozilla.org/en-US/docs/Web/CSS/::before
:moz-focusring pseudo-class https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring
Proposing CSS input modality article http://radar.oreilly.com/2015/08/proposing-css-input-modailty.html
Input modality shim https://github.com/alice/modality
CSS attribute selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Author's note:
Just noticed in this example that we left off tabindex="0" (hopefully you caught that as well)! When you're building custom controls be sure to include tabindex so keyboard users can easily interact with the elements.
WebAIM checklist items:
1.4.4: http://webaim.org/standards/wcag/checklist#sc1.4.4
Udacity course on Responsive Web Design Fundamentals https://www.udacity.com/course/responsive-web-design-fundamentals--ud893
Responsive web design basics on Web Fundamentals https://developers.google.com/web/fundamentals/design-and-ux/ux-basics/
Material Design Accessibility recommendations for touch targets https://material.google.com/usability/accessibility.html#accessibility-layout
Author's Note: On older browsers (particularly Mobile Safari) developers would add user-scaleable=no because it would disable the 350ms click delay in that browser. As of Safari 9.1 this is no longer the case, and using width=device-width in your viewport will handle removing that click delay.
Since we’re on the subject of responsive design, I thought it would be a good chance for us to get our hands dirty and try out a mobile screen reader. I’m going to walk you through the steps of enabling the screen reader on both iOS and Android and in the next lesson you’ll need to do some basic screen reader commands to navigate to a secret element on the page.
Note that if you’re on an Android device, you can skip straight to the Android tutorial. And if you’re on an iOS device, you can skip to the iOS tutorial.
After you’ve learned how to turn on your screen reader, feel free to move on to the Using Mobile Screen Readers exercise.
WebAIM checklist items:
1.4.3: http://webaim.org/standards/wcag/checklist#sc1.4.3
1.4.6: http://webaim.org/standards/wcag/checklist#sc1.4.6
WebAIM checklist items:
1.4.1: http://webaim.org/standards/wcag/checklist#sc1.4.1
NoCoffee Chrome extension https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl?hl=en-US
For more information on color blindness, check out the Colour Blind Awareness site. http://www.colourblindawareness.org/colour-blindness/
You can follow this link to get the Chrome High Contrast extension. Try it out on one of your sites to verify that everything works well for low vision users.
https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph?hl=en
Author's Note: The example that shows a "subtle background color" in the navbar really does have a background color, we promise! It doesn't show up very well on YouTube, which I guess proves the point that just because a subtle color might look good on your screen doesn't always mean it'll look good on someone else's monitor.