Power to the people, freedom for your code
A presentation at John Slatin AccessU in in Austin, TX, USA by Eric Eggert
POWER TO THE PEOPLE
Freedom For Your Code
Eric Eggert, Knowbility · AccessU · May 2019
Eric Eggert
Eric Eggert is a Web Developer and Teacher who works with Knowbility and the W3C on improving the Web for People with Disabilities, and everyone else. My name is Eric Eggert and I work with Knowbility and the W3C to improve the Web for People with Disabilities. I work with Knowbility and they donate 50% of my work time to W3C as a fellowship.
Web Development
My background is standards-based web development and I focus on accessibility for over 10 years now, and teaching about my experience and learning is very important to me. Web development is complicated…
- Talking & Planning
- Graphic Design (of an image of a website)
- HTML/CSS/JavaScript
- CMS
- Content
- Iterations
- Performance
- Security
- Hotfixes
- Data protection
- Quality Control
- Accessibility
…and often is carried out in less-than desired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.
Accessibility is a sign of good quality.
And that despite that we all know that accessibility is a sign of a good process and caring for it can result in a process that produces better quality websites.
“Designing inclusive software results in improved usability and customer satisfaction.” — Microsoft’s app developer guide
Donʼt take my word for it.
Accessibility must be a foundational value
But that also means accessibility needs to be a foundational value in the process and everyone needs to live it and embrace it.
[alt: Neil Patrick Harris with a stack of papers that he arranges neatly, saying “hopes and dreams” on the cover. Then throwing it away behind himself.]
Accessible Web Development is Complicated
WebAIM Million
Only 2.2% of the top 1 million websites are not inaccessible according to a study by our friends at WebAIM. Thatʼs bad.
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
Many developers that get the task of implementing complex widgets add ARIA in an attempt to ensure accessibility. But that makes it even more complex.
[alt: Jodie Whittaker as Doctor Who, saying “I am too nice. This is what happens when you try to be nice.”]
Screen Reader Differences
“VoiceOver and Safari remove list element semantics when list-style: none is used.” — Scott O’Hara: “Fixing” Lists
[alt: Four Doctor Who gifs, all saying “What?”]
“This was a purposeful change due to rampant ‘list’-itis by web developers.” — James Craig, Apple, bugs.webkit.org
What does it mean for me as a web developer that Safari is not reading lists when they don’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, Apple, bugs.webkit.org
dowebsitesneedtolookexactlythesameineverybrowser.com
We realized for a long time that websites do not need to look the same in every browser.
The same it true for screen readers: They don’t all need to produce the same output.
Screen readers have extremely granular verbosity settings. In VoiceOver, you can chose between Medium, Low and High verbosity. Users can chose individually the level of verbosity they are comfortable with.
The same goes for punctuation. Some users might opt to hear most or all of the punctuation, some only to hear a couple.
You can even overwrite certain abbreviations or symbols. You can even make VoiceOver pronounce GIF as jiff, if you want to.
There is no Control.
[alt: Three Doctors Who putting on sunglasses with Caption “Deal With It”]
Other Differences
Go <figure>
[alt: Text with a figure that shows a South African Swallow and a European Swallow. They have differences which would be described in the alternative text while the figure caption reads: “Left: South African Swallow, Right: European Swallow.”]
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.
*EdgeHTML-Version as published in 2018.
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.
Thanks, Scott!
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.
How Dragon Naturally Speaking works with ARIA » Simply Accessible (2014)
Screenshot courtesy of Eric Bailey
This screenshot shows a couple of links: Normal links, placeholder links without href, links that are faked using ARIA, even one without a button. On the right, thereʼs a paragraph of text with a styled ARIA link in it (Non-underlined dark blue text link in black text paragraph.)
Screenshot courtesy of Eric Bailey.
This is the same page with High Contrast Mode enabled. Only real links are colored differently compared to the normal text. ARIA links have the same color as the text.
The same goes for buttons – when you use aria-disabled=true, the disabled button will not look inactive, like a button that has the disabled attribute set. This can confuse users.
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.
Users are somewhere on this spectrum between type of disability, accessibility support of the tools they use and the proficiency that they have to actually use those tools.
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!
Users get a lot more tools to use!
Reader Mode
This is reader mode in Safari. Clicking on the reader mode icon in the top left transforms the page (in the first screen shot) to an easy to read layout that focuses on the content of the page.
You can change fonts and colors to your liking.
Reader Mode
Native Support:
- Safari (since 2010, can set to default since 2015)
- Firefox (2015)
- Edge (2015)
- Chrome (soon)
This is the reader mode in Firefox.
It can read the content to you, which is important for users with cognitive disabilities.
It also has theme options.
More Website Settings
You can nowadays set different default settings for a website. Here I set to use reader mode when it is available, enable content blockers and never auto-play video on medium.com.
Itʼs also possible to get an overview, and change, the settings on a site basis.
OS
As in Operating System
OS Settings
The Operating System, here macOS, has a diverse set of settings, including “invert colors”, “reduce motion”, “use greyscale”, “increase contrast” and “reduce transparency”. We can use those settings on the web:
prefers-reduced-motion Media Query
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}
Support
Support across browsers is very good.
On Windows …it’s complicated
Source: Patrick H. Lauke, Twitter, ThreadReader
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);
}
We* also get a lot more tools to use!
- Designers & Developers
Media Queries Level 5(?)
inverted-colors
- none
- inverted
prefers-reduced-transparency
- no-preference
- reduce
prefers-contrast
- no-preference
- high
- low
forced-colors
- none
- active
Environment MQs
light-level
- dim
- normal
- washed
environment-blending
- opaque
- The document is rendered on an opaque medium, such as a traditional monitor or paper. Black is dark and white is 100% light.
- additive
- The display blends the colors of the canvas with the real world using additive mixing. Black is fully transparent and white is 100% light. For example: a head-up display in a car.
- subtractive
- The display blends the colors of the canvas with the real world using subtractive mixing. White is fully transparent and dark colors have the most contrast. For example: an LCD display embedded in a bathroom mirror.
SVG
Scalable Vector Graphics
See Doug’s Session Yesterday!
Scalable Vector Graphics
- Can adapt to the viewport (or embed size).
- Can use the font color of the text.
- Can have “real” text in it.
<details> & <summary>
<details id="examples">
<summary>
<h2>Examples</h2>
</summary>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Doloribus non amet perferendis quasi similique
impedit maxime, iusto fuga magni. Similique sint a
expedita esse alias voluptate illum porro placeat
est?</p>
</div>
</details>
<details id="examples" open>
<summary>
<h2>Examples</h2>
</summary>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Doloribus non amet perferendis quasi similique
impedit maxime, iusto fuga magni. Similique sint a
expedita esse alias voluptate illum porro placeat
est?</p>
</div>
</details>
Nice :focus Styles
- JavaScipt
- We don’t need JS.
- Thanks
currentColor!
Thank You!
Eric Eggert
Web: yatil.net
E-Mail: mail@yatil.net Social: @yatil
Coding for accessibility can be challenging: Which assistive technologies should I consider? What is their support for specific coding patterns? Developers often add supplementary code to their projects to control the behaviour of assistive technologies like screen readers.
Eric Eggert shows how graceful degradation and progressive enhancement allow people to use their tools in a way they are comfortable with, while at the same time keeping your project’s code simple and easier to maintain.
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
The Business Case for Digital Accessibility | Web Accessibility Initiative (WAI) | W3C
This article examines the rationale for organizations to address accessibility. It includes tangible and intangible benefits and the risks of not addressing accessibility adequately. It explores how accessibility can:
- Drive Innovation: Accessibility features in products and services often solve unanticipated problems.
- Enhance Your Brand: Diversity and inclusion efforts so important to business success are accelerated with a clear, well-integrated accessibility commitment.
- Extend Market Reach: The global market of people with disabilities is over 1 billion people with a spending power of more than $6 trillion. Accessibility often improves the online experience for all users.
- Minimize Legal Risk: Many countries have laws requiring digital accessibility, and the issue is of increased legal concern.
-
How Dragon Naturally Speaking works with ARIA » Simply Accessible
The latest and greatest Dragon Naturally Speaking (version 13) finally catches up, at least partially, with a critical web standard: WAI-ARIA.
-
“Fixing” Lists | scottohara.me
In September of 2017 Gerard K. Cohen of Unfettered Thoughts posted an article on the how VoiceOver and Safari (Webkit) (macOS and iOS) remove list element semantics when list-style: none is used. And it’s not just the use of list-style: none, but any CSS that would remove the bullet or number indicators of a list’s items will also remove the semantics.
-
The WebAIM Million - An accessibility analysis of the top 1,000,000 home pages
In February 2019, WebAIM conducted an accessibility evaluation of the home pages for the top 1,000,000 web sites using the WAVE stand-alone API (with additional tools to collect site technology parameters). While this research focuses only on automatically detectable issues, the results paint a rather dismal picture of the current state of web accessibility for individuals with disabilities.
-
“Fixing” Lists | scottohara.me
In September of 2017 Gerard K. Cohen of Unfettered Thoughts posted an article on the how VoiceOver and Safari (Webkit) (macOS and iOS) remove list element semantics when list-style: none is used. And it’s not just the use of list-style: none, but any CSS that would remove the bullet or number indicators of a list’s items will also remove the semantics.
-
How do you figure? | scottohara.me
Introduced as part of HTML5, the figure and figcaption elements are meant to create a meaningful markup structure that:
- provides a descriptive label to a piece of content that…
- is relevant to the current document, but not vital to its understanding.
To get more specific, let’s look at these elements individually.
-
How Dragon Naturally Speaking works with ARIA » Simply Accessible
The latest and greatest Dragon Naturally Speaking (version 13) finally catches up, at least partially, with a critical web standard: WAI-ARIA.
-
Working with High Contrast Mode – Eric Bailey
Accessibility is more than just making things work in a screen reader. This talk discusses Windows High Contrast Mode’s capabilities and limitations, and how to best design and develop for it.
-
prefers-reduced-motion on Windows – a Thread by @patrick_h_lauke
-
Adapting to user preferences | justmarkup
Over the last years, browsers implemented various features to react to user preferences on the web using CSS, JavaScript or by checking for preferences on the server-side. In this article, I would like to show which user preferences are currently exposed by browsers, the best way to handle them and a look in to the future to see what might be available soon.
-
(Editor’s Draft) Media Queries Level 5
