Connecting the Accessibility Dots (Full Day Workshop)

Connecting the Accessibility Dots

Eric Eggert · Accessibility Club Summit · November 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 in a fellowship for which I’m very grateful.

Stars in the night sky.

Sagittarius

Stars connected to show Sagittarius in the night sky.

Connecting arbitrary dots that fits one’s own view.

Carina

Carina is a star constellation that is only visible from the Southern Hemisphere, so most of you might have never seen it.

Images: Till Credner, https://commons.wikimedia.org/wiki/User:Till_Credner

Let’s change perspectives!

Our rough plan for today:

10h–13h

• This.
• Intros.
• Disabled People.
• Guidelines.
• Assistive Tech.

14h–17h

• Planning & Managing.
• Q&A.
• Discussion.
• The how and why of different solutions.
• W3C Resources.

Who are you?

Disabled People & Guidelines & Assistive Technologies

You cannot talk about **accessibility** without talking about **disabilities.**

EJ Mason:

Love 2 b called “differently abled” because it suggests that I have some kind of paranatural ability beyond the ken of mortal man. And I do, but you can still just call me “disabled”. Promise.

Twitter: https://twitter.com/codeability/status/1195471433754796033

Disabled people are often shown as superheroes in media (here: Daredevil), with other senses becoming more strong, overcompensating for the disability. That is not the case in real life. Yes, blind people have techniques to use their hearing to augment and navigate the world but it is never a drop-in replacement for the ability to see.

Hallway fighting in Daredevil

The development of websites and apps 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.

Talking & Planning

…and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

Graphic Design (of an image of a website)

…and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

HTML/CSS/JavaScript

…and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

CMS

…and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

Content

…and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

Iterations

…and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

Performance

…and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

Security & Hotfixes

…and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

Data protection

…and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

Quality Control

…and often is carried out in less-thandesired ways: After talking and designing, implementing is often done before performance, content, security, data protection and, yes, accessibility, are considered.

Accessibility

…and often is carried out in less-thandesired 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.]

Pace Layers

Jeremy Keith introduced Pace Layers at Beyond Tellerrand:

The lowest level, Nature moves slowest, then, barely quicker moves culture, then governance, then infrastructure and commerce. Each changing a little bit quicker. On top there’s fashion which tries stuff out that gets commercially viable and can then slowly descend through the layers.

Basically the strategy is the lowest moving layer, then there’s scope, structure, skeleton and surface.

On the web, everything is built onto TCP/IP, then HTTP, URLs, HTML, CSS and Javascript, where the experimentation happens in JavaScript.

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. Here are some more detailed observations from the study.

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

“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

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.

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

Presently, mobile screen readers won’t announce figures, nor Edge unless paired with Narrator (sort of), or any browser paired with NVDA.

Thanks, Scott! 2 How do you figure? | scottohara.me 2

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)

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

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.

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); }

DEMO

We also get a lot more tools to use! 3 3 Designers & Developers

Media Queries Level 5(?)

inverted-colors → none → inverted 4 Planned in Media Queries Level 5 4

prefers-reduced4 transparency → no-preference → reduce 4 Planned in Media Queries Level 5

prefers-contrast → no-preference → high → low 4 Planned in Media Queries Level 5 4

forced-colors → none → active 4 Planned in Media Queries Level 5 4

Environment MQs 4 Planned in Media Queries Level 5 4

light-level → dim → normal → washed 4 Planned in Media Queries Level 5 4

4 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. 4 Planned in Media Queries Level 5

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.

An Accordion in 5 5 Lines of JS 5 OK, jQuery in this instance.

Nice :focus Styles → JavaScipt → We don’t need JS. → Thanks currentColor!

:focus-within

Thank You! Eric Eggert Web: yatil.net E-Mail: mail@yatil.net Social: @yatil