Respecting User Preferences on the Web Eric Eggert · AFutureDate.com · April 2020
Slide 1
Slide 2
Eric Eggert Eric Eggert is a Web Developer and Teacher who works with on improving the Web for People with Disabilities, and everyone else. 2013–2020: W3C/Web Accessibility Initiative 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 have donate 50% of my work time to W3C over the last threw years in a fellowship for which I’m very grateful.
Slide 3
Users
Slide 4
No User is the Same
Slide 5
“Designing inclusive software results in improved usability and customer satisfaction.” — Microsoft’s app developer guide Don’t take my word for it.
Slide 6
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.
Slide 7
[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.]
Slide 8
Accessible Web Development is Complicated
Slide 9
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.
Slide 10
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 Here are some more detailed observations from the study.
Slide 11
More Complex == Less Accessible
Slide 12
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.
Slide 13
[alt: Jodie Whittaker as Doctor Who, saying “I am too nice. This is what happens when you try to be nice.”]
Slide 14
Screen Reader Differences
Slide 15
“VoiceOver and Safari remove list element semantics when list-style: none is used.” — Scott O’Hara: “Fixing” Lists
Slide 16
Slide 17
“This was a purposeful change due to rampant ‘list’-itis by web developers.” — James Craig, Apple, bugs.webkit.org
Slide 18
What does it mean for me as a web developer that Safari is not reading lists when they don’t look like a list?
Slide 19
Nothing.
Slide 20
A Time Line 2014: First Commit 2015: Additional Code … No Changes … 2019: The Web Notices
Slide 21
“Customers seem much happier in the 3 years since this change went in.” — James Craig, Apple, bugs.webkit.org
Slide 22
dowebsitesneedtolookexactlythesameineverybrowser.com
Slide 23
The same it true for screen readers: They don’t all need to produce the same output.
Slide 24
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.
Slide 25
The same goes for punctuation. Some users might opt to hear most or all of the punctuation, some only to hear a couple.
Slide 26
You can even overwrite certain abbreviations or symbols. You can even make VoiceOver pronounce GIF as jiff, if you want to.
Slide 27
There is no Control.
Slide 28
Slide 29
Other Differences
Slide 30
Go <figure>
Slide 31
Slide 32
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.
Slide 33
IE11 requires the use of role=”figure” and an aria-label or aria-labelledby pointing to the figcaption to mimic native announcements.
Slide 34
!!! Edge won’t announce the presence of a figure role at all, regardless if ARIA is used or not. 1 1 EdgeHTML-Version as published in 2018.
Slide 35
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.
Slide 36
Testing NVDA version 2018.4.1 with IE11, Edge, Firefox 64.0.2 and Chrome 71, there was no trace of figures.
Slide 37
<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>. —>
Slide 38
Presently, mobile screen readers won’t announce figures, nor Edge unless paired with Narrator (sort of), or any browser paired with NVDA.
Slide 39
Thanks, Scott! 2 How do you figure? | scottohara.me 2
Slide 40
ARIA can help, but not in every situation.
Slide 41
Accessibility is not only Screen Readers
Slide 42
Most non-Screen-Reader assistive technology does not work well with ARIA.
Slide 43
How Dragon Naturally Speaking works with ARIA » Simply Accessible (2014)
Slide 44
Screen shot courtesy of Eric Bailey This screen shot 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.)
Slide 45
Screen shot 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.
Slide 46
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.
Slide 47
Users!
Slide 48
Knowledge Levels Vary Greatly
Slide 49
Users often don’t know what their computers can do for them.
Slide 50
Other Users hack their assistive technology to work with inaccessible sites.
Slide 51
Some users write style sheets and JavaScripts to change websites to their needs.
Slide 52
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.
Slide 53
Test with Diverse Users
Slide 54
Give Users Agency
Slide 55
Allow use of assistive technology that suits a particular user’s needs.
Slide 56
Try not to prescribe how to use a component.
Slide 57
Use HTML & CSS to describe elements.
Slide 58
Don’t expect any proficiency from users.
Slide 59
Don’t break conventions!
Slide 60
Users get a lot more tools to use!
Slide 61
Reader Mode
Slide 62
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.
Slide 63
You can change fonts and colors to your liking.
Slide 64
Reader Mode Native Support: → Safari (since 2010, can set to default since 2015) → Firefox (2015) → Edge (2015)
Slide 65
This is the reader mode in Firefox.
Slide 66
It can read the content to you, which is important for users with cognitive disabilities.
Slide 67
It also has theme options.
Slide 68
More Website Settings
Slide 69
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.
Slide 70
It’s also possible to get an overview, and change, the settings on a site basis.
Slide 71
OS As in Operating System
Slide 72
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:
Slide 73
prefers-reduced-motion Media Query
Slide 74
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
Slide 75
Support Support across browsers is very good.
Slide 76
On Windows …it’s complicated
Slide 77
Short note on prefers-reduced-motion and puzzled (Windows) users Source: Patrick H. Lauke, TPG
Slide 78
Defensive preferes-reduced-motion use @media (prefers-reduced-motion: no-preference) { .animation { animation: vibrate 0.3s linear infinite both; } } Source: Patrick H. Lauke, TPG
Slide 79
prefers-color-scheme Media Query
Slide 80
:root { —color: #333; —bgcolor: #eee; } @media (prefers-color-scheme: dark) { :root { —color: #eee; —bgcolor: #333; } } html { color: var(—color); background-color: var(—bgcolor); }
Slide 81
DEMO
Slide 82
We also get a lot more tools to use! 3 3 Designers & Developers
Slide 83
Media Queries Level 5(?)
Slide 84
inverted-colors 4 → none → inverted 4 Planned in Media Queries Level 5
Slide 85
prefers-reduced4 transparency → no-preference → reduce 4 Planned in Media Queries Level 5
Slide 86
prefers-contrast 4 → no-preference → high → low 4 Planned in Media Queries Level 5
Slide 87
forced-colors → none → active 4 Planned in Media Queries Level 5 4
Slide 88
Environment MQs 4 4 Planned in Media Queries Level 5
Slide 89
light-level → dim → normal → washed 4 Planned in Media Queries Level 5 4
Slide 90
environment-blending 4 → opaque → The document is rendered on an opaque medium, such as a traditional monitor or paper. Black is dark and white is 100% light. 4 Planned in Media Queries Level 5
Slide 91
Thank You! Eric Eggert Web: yatil.net E-Mail: mail@yatil.net Social: @yatil
