Eric Eggert (he/him/his)

• 🇩🇪 Co-founder & Co-owner of outline Consulting (2011)
• 🇸🇪 Web Accessibility Specialist at Axess Lab (2022)
• 🇦🇹 Lecturer at FH Joanneum (2015)
• 🇺🇸 Director of Accessibility Services at Knowbility (’16–’22)
• 🌏 Web Accessibility Specialist at W3C/WAI (’13–’20)

📍 Wissen, Germany 🇩🇪

Users

No User
is the Same

The “Average Man”?

Thanks Matt!

Does The Average Person Exist? — standupmaths

Why do we design like they are?

Why do we develop like they are?

What Does Inclusive Design Even Mean?

Screen Reader Differences

VoiceOver and Safari remove list element semantics when list-style: none is used.

Scott O’Hara: “Fixing” Lists

All web developers

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?

John Doe-veloper

Nothing.

A Time Line

• 2014: First Commit
• 2015: Additional Code
• …
• 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

The same is true
for screen readers:
They don’t all need to
produce the same output.

There is no control

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)

High Contrast Mode

Users!

Variable levels of knowledge of their AT

Users often don’t know what their computers can do for them.

Other users hack assistive technology to work with inaccessible sites.

Some users write CSS and JavaScript to change websites to their needs.

User =
Disability Type × Proficiency × Accessibility Support

More Tools

Reader Mode

Reader Mode Support

• Safari (since 2010, can set to default since 2015)
• Firefox (2015)
• Edge (2015)
• Chrome (soon??????)

More Website Settings

Leveraging
Operating System
Preferences

prefers-reduced-motion
Media Query

            @media (prefers-reduced-motion: reduce) {
  * {
      transition: none !important;
      animation: none !important;
  }
}
          

Or, progressively enhanced:

            @media (prefers-reduced-motion: no-preference) {
  /* All animation code */
}
          

“Defensive use of prefers-reduce-motion” à la Patrick H. Lauke

Source: Can I Use

On Windows … it’s complicated

Short note on prefers-reduced-motion and puzzled (Windows) users by Patrick H. Lauke @ TPG Blog

prefers-color-scheme
Media Query (Dark Mode)

            :root {
  --color: #333;
  --bgcolor: #eee;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color: #eee;
    --bgcolor: #333;
  }
}

html {
  color: var(--color);
  background-color: var(--bgcolor);
}
          

Source: Can I Use

But wait…
There’s more!

inverted-colors MQ

• none
• inverted

Experimental. Supported in Safari macOS & iOS.

prefers-contrast MQ

• no-preference
• more
• less

Experimental. Supported in Blink and Safari.

forced-colors MQ

• none
• active

Experimental. Supported in Blink and Firefox. (And generally mostly on Windows, similar to -ms-high-contrast.)

User preferences come in
different combinations

• Test with diverse settings and users
• Let users decide which tools they need, including assistive tech
• Describe, not prescribe the user interface
• Support existing conventions and defaults

Thank you!

Eric Eggert

• Website: yatil.net
• YouTube: youtube.com/yatil
• Mastodon: @yatil@toot.cafe
• Twitter: @yatil
• Email: mail@yatil.net