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

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

Only 2.2% of the top 1 million websites are not inaccessible according to a study by our friends at WebAIM.

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

Jodie Whittaker as Doctor Who, saying “I am to 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.”

“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.

Nuance released the lucky version 13 of Dragon Naturally Speaking. I’ve been doing some preliminary testing and here’s what Dragon 13 supports (so far) in terms of ARIA:  role="button" role="link" role="radio" role="checkbox" aria-label That’s just in about 30 mins of testing, so there’s definitely more to test, but this is a huge step.

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!

Made with Slides.com