Respecting User Preferences on the Web Eric Eggert · CSUN2020 · March 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
Slide 5
No User is the Same
Slide 6
The “Average Man”?
Slide 7
Slide 8
Thanks Matt! Does The Average Person Exist? — standupmaths
Slide 9
Why do we design like they are?
Slide 10
Why do we develop like they are?
Slide 11
What Does Inclusive Design Even Mean?
Slide 12
Slide 13
Screen Reader Differences
Slide 14
“VoiceOver and Safari remove list element semantics when list-style: none is used.” — Scott O’Hara: “Fixing” Lists
Slide 15
Slide 16
“This was a purposeful change due to rampant ‘list’-itis by web developers.” — James Craig, Apple, bugs.webkit.org
Slide 17
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 18
Nothing.
Slide 19
A Time Line → 2014: First Commit → 2015: Additional Code → … → 2019: The Web Notices
Slide 20
“Customers seem much happier in the 3 years since this change went in.” — James Craig, Apple, bugs.webkit.org
Slide 21
dowebsitesneedtolookexactlythesameineverybrowser.com
Slide 22
The same it true for screen readers: They don’t all need to produce the same output.
Slide 23
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 24
The same goes for punctuation. Some users might opt to hear most or all of the punctuation, some only to hear a couple.
Slide 25
You can even overwrite certain abbreviations or symbols. You can even make VoiceOver pronounce GIF as jiff, if you want to.
Slide 26
You Have No Control.
Slide 27
Slide 28
ARIA can help, but not in every situation.
Slide 29
Accessibility is not only Screen Readers
Slide 30
Most non-Screen-Reader assistive technology does not work well with ARIA.
Slide 31
Slide 32
How Dragon Naturally Speaking works with ARIA » Simply Accessible (2014)
Slide 33
High Contrast Mode
Slide 34
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 35
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 36
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 37
Users!
Slide 38
Knowledge Levels Vary Greatly
Slide 39
Users often don’t know what their computers can do for them.
Slide 40
Other Users hack their assistive technology to work with inaccessible sites.
Slide 41
Some users write CSS and JavaScript to change websites to their needs.
Slide 42
User Disability Type Proficiency Accessibility Support
Slide 43
Test with Diverse Users
Slide 44
Allow any assistive technology that suits a particular user’s needs.
Slide 45
Try not to prescribe how to use a component.
Slide 46
Use HTML & CSS to describe elements.
Slide 47
Don’t expect any proficiency from users.
Slide 48
Don’t break with conventions!
Slide 49
Reader Mode
Slide 50
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 51
You can change fonts and colors to your liking.
Slide 52
Reader Mode Native Support: → Safari (since 2010, can set to default since 2015) → Firefox (2015) → Edge (2015) → Chrome (soon??)
Slide 53
This is the reader mode in Firefox.
Slide 54
It can read the content to you, which is important for users with cognitive disabilities.
Slide 55
It also has theme options.
Slide 56
More Website Settings
Slide 57
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 58
It’s also possible to get an overview, and change, the settings on a site basis.
Slide 59
Leveraging Operating System Preferences
Slide 60
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 61
prefers-reduced-motion Media Query
Slide 62
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
Slide 63
Or, better, progressively enhance: @media (prefers-reduced-motion: no-preference) { “/* All animation code “*/ }
Slide 64
Support Source: Can I Use Support across browsers is very good.
Slide 65
On Windows …it’s complicated
Slide 66
Short note on prefers-reduced-motion and puzzled (Windows) users Patrick H. Lauke @ TPG Blog
Slide 67
prefers-color-scheme Media Query
Slide 68
:root { !—color: #333; !—bgcolor: #eee; } @media (prefers-color-scheme: dark) { :root { !—color: #eee; !—bgcolor: #333; } } html { color: var(!—color); background-color: var(!—bgcolor); }
Slide 69
DEMO
Slide 70
Support Source: Can I Use Support across browsers is very good.
Slide 71
We also get a lot more tools to use! 3 3 Designers & Developers
Slide 72
Media Queries Level 5(?)
Slide 73
inverted-colors 4 → none → inverted Supported in Safari macOS & iOS. 4 Planned in Media Queries Level 5
Slide 74
prefers-reduced4 transparency → no-preference → reduce No support yet. 4 Planned in Media Queries Level 5
Slide 75
prefers-contrast 4 → no-preference → high → low No support yet. 4 Planned in Media Queries Level 5
Slide 76
forced-colors → none → active No support yet. 4 Planned in Media Queries Level 5 4
Slide 77
Environment MQs 4 4 Planned in Media Queries Level 5
Slide 78
light-level → dim → normal → washed No support yet. 4 Planned in Media Queries Level 5 4
Slide 79
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. → 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. No support yet. 4 Planned in Media Queries Level 5
Slide 80
Nice :focus Styles → JavaScipt → We don’t need JS. → Thanks currentColor!
Slide 81
:focus-within
Slide 82
Thank You! Eric Eggert Web: yatil.net E-Mail: mail@yatil.net Social: @yatil
