POWER TO THE PEOPLE
Freedom for Your Code
Eric Eggert
Eric Eggert works with Knowbility and the W3C on improving the Web for People with Disabilities, and everyone else.
Eric Eggert
- Web Developer
- Teacher
Web Development
Talking & Planning
Graphic Design (of an image of a website)
HTML/CSS/JavaScript
CMS
Content
Iterations
Hotfixes
Quality Control
Accessibility
Performance
Security
Data protection
Accessibility is a sign of good quality.
“Designing inclusive software results in improved usability and customer satisfaction.”
— Microsoft’s app developer guide
Accessibility must be a foundational value
Accessible Web Development is Complicated
Observations
- 60% of the 1 million home pages had ARIA present.
- Home pages with ARIA present averaged 11.2 more detectable errors than pages without ARIA.
- Pages with a valid HTML5 doctype had significantly more page elements (average of 844 vs. 605) and errors (average of 61.9 vs. 53.3) than those with other doctypes.
- 2.1M layout tables were detected compared to only 114k data tables.
More Complex ==
Less Accessible
Taming that complexity comes with more complexity
Screen Reader Differences
“VoiceOver and Safari remove list element semantics when
list-style: none is used.”
“This was a purposeful change due to rampant ‘list’-itis by web developers.”
– James Craig
What does it mean for me as a web developer that Safari is not reading lists when it doesn't look like a list?
Nothing.
A time line
2014: First Commit
2015: Additional Code
…
No Changes
…
2019: The Web Notices
“Customers seem much happier in the 3 years since this change went in.”
– James Craig
dowebsitesneedtolookexactlythesameineverybrowser.com
The same it true for screen readers:
They don’t all need to produce the same output.
There is
no Control.
Other Differences
Go <figure>
JAWS has the best support for announcing native figures and their captions, though support is not perfect or consistent depending on the browser and JAWS’s verbosity settings.
IE11 requires the use of role="figure" and an aria-label or aria-labelledby pointing to the figcaption to mimic native announcements.
Edge won’t announce the presence of a figure role at all, regardless if ARIA is used or not.
🤦🏻♂️
Chrome and Firefox offer similar support, however JAWS (with default verbosity settings) + Chrome will completely ignore a figure (including the content of its figcaption) if an image has an empty alt or is lacking an alt attribute.
Testing NVDA version 2018.4.1 with IE11, Edge, Firefox 64.0.2 and Chrome 71, there was no trace of figures.
<figure role="figure" aria-label="Caption for the figure.">
<!-- figure content. if an image, provide alt text -->
<figcaption>
Caption for the figure.
</figcaption>
</figure>
<!--
aria-label for macOS VoiceOver + Chrome
role="figure" for IE11.
IE11 needs an accessible name (provided by aria-label).
If not for the fact VO + Chrome doesn't support an
accessible name from aria-labelledby, that attribute
would have been preferred / pointed to an ID on
the <figcaption>.
-->Presently, mobile screen readers won’t announce figures, nor Edge unless paired with Narrator (sort of), or any browser paired with NVDA.
ARIA can help, but not in every situation.
Accessibility is not only Screen Readers
Most non-Screen-Reader assistive technology does not work well with ARIA.
Most non-Screen-Reader assistive technology does not work well with ARIA.
Source: http://simplyaccessible.com/article/dragon-aria/ (2014)
And then, there are the users
Knowledge Levels Vary
Greatly!
Users often don’t know what their computers can do for them.
Other Users hack their assistive technology to work with inaccessible sites.
Some users write style sheets and JavaScripts to change websites to their needs.
Type of Disability
Proficiency
Accessibility Support
Your Users are Everywhere here.
Test with Diverse Users
Give Users Agency
Allow use of assistive technology that suits a particular user’s needs.
Try not to prescribe how to use a component.
Use HTML & CSS to describe elements.
Don’t expect any proficiency from users.
Don't break conventions!
We get a lot more
tools to use!
prefers-reduced-motion
Media Query
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}Support
On Windows
…it’s complicated
prefers-color-scheme
Media Query
:root {
--color: #333;
--bgcolor: #eee;
}
@media (prefers-color-scheme: dark) {
:root {
--color: #eee;
--bgcolor: #333;
}
}
html {
color: var(--color);
background-color: var(--bgcolor);
}:root {
--color: #333;
--bgcolor: #eee;
}
@media (prefers-color-scheme: dark) {
:root {
--color: #eee;
--bgcolor: #333;
}
}
html {
color: var(--color);
background-color: var(--bgcolor);
}:root {
--color: #333;
--bgcolor: #eee;
}
@media (prefers-color-scheme: dark) {
:root {
--color: #eee;
--bgcolor: #333;
}
}
html {
color: var(--color);
background-color: var(--bgcolor);
}Media Queries Level 5(?)
- inverted-colors: none | inverted
- prefers-reduced-transparency: no-preference | reduce
- prefers-contrast: no-preference | high | low
Tack så mycket!
Slides and Links: https://talks.yatil.net/ysWYmI
Follow me:
@yatil everywhere!