Do you know

Elements become ghosts! 👻

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.purple {
  display: contents;
}

It's like display: none for the element, but not its descendants

But… there's a problem.

Most browsers takes that too literally.

How much does CSS affect accessibility?
🤕

👉 Let's see another example

VoiceOver on Mac

list item count link index	list item count link index	¯\_(ツ)_/¯

Screen readers inspect…

The Accessibility Tree

Many elements are mapped 1-1:

• 👉 <nav> → navigation
• 👉 <header> → banner
• 👉 <ul>, <ol> → list
• 👉 <a> → link
• 👉 …

The Accessibility Tree

It's <em>really</em> important

The Accessibility Tree

And others are expanded:

A good web developer should take care of the accessibility tree that comes out of the DOM

… but how is the tree generated?

Browsers and heuristics

DevTools to the rescue 🦺

Did you know that…

Planned for…

Accessibility isn't just about blindness

In a nutshell…

readability
>
legibility

Use sufficient line-height too!

Do you pay for screen pixels?!

One last thing…

Speaking of content…

The oldest dev trick

<img src="image.png">

img:not([alt]) {
  &:not([role]), &:not([role=presentation]) {
  outline: 1px solid red;
}
}

But… have you ever used these images?

But what's behind that?

<i class="fa fa-home"></i>

.fa-home::before {
  content: '\f015';
}

Screen readers do announce generated content

So you either:

• ☝️ put aria-hidden="true", or
• ✌️ aria-label="home" in the markup

Alternative text for CSS Generated Content

.icon-home::before {
  content: '\f015' / 'home';
}

Meanwhile, in Safari…

.icon-home::before {
  content: '\f015';
  alt: 'home';
}

Just two gotchas 🤫

Although…

<i class="icon icon-home" data-meaning="Home"></i>

.icon-home::before {
  content: '\f015' / attr(data-meaning);
}

How do screen readers read a page?

@media screen and (min-width: 1025px) {
  #app {
    display: grid;
    grid-template-columns: 15% auto 20%;
    grid-template-area: "head head head"
                        "nav  main side"
                        "nav  main ads";
  }
}

<div id="app">
  <header>...</header>
  <nav>...</nav>
  <aside>...</aside>
  <aside class="ads">...</aside>
  <main>...</main>
  <footer>...</footer>
</div>

Media Queries Level 5

• 👉 prefers-reduced-motion
• 👉 prefers-color-scheme
• 👉 prefers-contrast
• 👉 prefers-reduced-transparency
• 👉 forced-colors
• 👉 inverted-colors
• 👉 light-level

prefers-reduced-motion

Values: reduce | no-preference

• ✋ carousels;
• ✋ parallax effects;
• ✋ modal animations;
• ✋ layout transitions…

prefers-color-scheme

Values: light | dark | no-preference

… also nice for everyone!

It's still just a draft

😞

Are you sure your text has enough

contrast? contrast?

You might know that…

Contrast ratio for:

• 👍 AA: 3.0
• 🙌 AAA: 4.5

But what's this "contrast ratio"?

We have hsl()

Why do we need luminance?

There are other things to consider…

WCAG 2.1 requirements

“Large” text?

• ☝️ 14pt and bold, or
• ✌️ 18pt or larger

Toss a coin to your witcher,
o valley of plenty

Toss a coin to your witcher,
o valley of plenty

DevTools can help!

Visual deficiencies emulation ( 83+)

Lighthouse Accessibility report

There are extensions too

• 👉 WAVE Evaluation Tool
• 👉 axe
• 👉 Tota11y Toolkit
• 👉 ChromeLens

Links

• 🔗 CSS Generated Content Module Level 3 drafts.csswg.org/css-content-3/
• 🔗 Media Queries Level 5 drafts.csswg.org/mediaqueries-5/
• 🔗 Definition of relative luminance (WCAG 2.1) w3.org/TR/WCAG21/#dfn-relative-luminance

That's all, folks!
👋

maxart2501.github.io/css-accessibility-talk/css-day/

@each $question in $questions {
  @include answer($question);
}