Space Jam, a 1996 website

Space Jam: it had focus states!

Inspecting Space Jam in Chrome DevTools

Captain Marvel: it's new but made to look old!

Emerging CSS Techniques & What They Mean for Accessibility

By Marcy Sutton
Head of Learning, Gatsby.js

MarcySutton.com in 2003-2007

MarcySutton.com in 2003-2007: It used tables and spacer images

MarcySutton.com in 2008-2009: ALL FLASH EVERYTHING

MarcySutton.com in 2011

Target Corporate Website

Working Together

Microsoft's Inclusive Design Toolkit

MarcySutton.com About page in 2011

MarcySutton.com in 2011: It used the Cufon font rendering technique

Cufon: fonts for the people (discontinued)

sIFR 2.0: Rich Accessible Typography for the Masses

Who remembers JavaScript rounded corners?

🙋‍♀️

All Flash everything?

🙅‍♀️

CSS is so much better now

And we have great debugging tools!

Today

Let’s talk about NEW CSS
and
Accessible User Experience

• CSS Grid
• Flexbox
• :focus-visible
• :focus-within
• CSS Animations
• prefers-reduced-motion
• CSS-in-JS
• *

CSS Grid Layout

🙌

Grid Concepts

• Fixed and flexible track sizes
• Item placement
• Creation of additional tracks to hold content
• Alignment control
• Control of overlapping content

Just read everything from @RachelAndrew and @JenSimmons

And Dark Side of the Grid from @mmatuzo

A real life site example: MarcySutton.com

MarcySutton.com in Firefox Grid inspector

The "nav-wrap" element in the header uses display: grid, grid-template-columns: 225px 1fr, and width: auto. It contains the MarcySutton.com logo and navigation items.

List of talks on MarcySutton.com in Firefox Grid inspector

an unordered list has display: grid, grid-template-columns: repeat(3, 1fr), and grid-gap: 1em. It falls back to CSS column layout for IE11.

Grid list of talks still has the list role

Lesson 1: use mini-grids inside your semantic markup

* Until we have subgrids

Lesson 2: always check to make sure roles aren’t being overridden

display:contents and table {display: block} come to mind...

Hidde de Vries on Grid and display: contents

🚨 CSS Grid Order 🚨

Grid layout gives authors great powers of rearrangement over the *visual* document. However, these are not a substitute for correct ordering of the document source. - MDN web docs

Be careful with
ORDER
and interactive controls

Caniuse.com for CSS Grid

Flexbox

In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. https://www.w3.org/TR/css-flexbox-1/

CSS Flexbox Guide on CSS Tricks

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

If you are adding widths to all your flex items, you probably need grid.

-Rachel Andrew

Flexbox on MarcySutton.com - nav links

🚨 Ordering Flex Items 🚨

“Authors must not use order or the -reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.” - MDN web docs

flex-direction, -reverse

  ul {
    display: flex;
    flex-direction: row-reverse;
  }
						

  ul {
    display: flex;
    flex-direction: column-reverse;
  }
						

MarcySutton.com with nav links reversed

Accessibility Insights for Chrome

image 1: Marcysutton.com with Accessibility Insights tab stop tester on skip link

image 2: Marcysutton.com with Accessibility Insights tab stop tester on first homepage nav link, on right side

image 3: Marcysutton.com with Accessibility Insights tab stop tester on lower page content

Caniuse.com for CSS Flexbox

Focus styles are !important

https://www.gatsbyjs.org/blog/2019-07-11-user-testing-accessible-client-routing/

:focus-visible

 :focus:not(.focus-visible) {
	outline: 0;
 }
 :focus-visible,
 data-focus-visible-added {
	outline: 3px solid greenyellow;
 }
					

Angular Material issue number 556 on Github: "md-button stays focused after a click"

Button Focus Hell

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the user agent determines via heuristics that the focus should be made evident on the element. https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo

But why tho?

Note: The intent of :focus-visible is to allow authors to provide clearly identifiable focus styles which are visible when a user is likely to need to understand where focus is, and not visible in other cases.

More specific tools at our disposal prevent outline: none

Ideally: make focus personalized

💍 ☑️

Caniuse.com for CSS focus-visible

What Input

What Input in Action

import 'what-input'
							

[data-whatintent='mouse'] *:focus {
  outline: none;
}
							

:focus-within

CSS pseudo class

	/* Selects a <div> when one of its descendants is focused */
	div:focus-within {
	    background: greenyellow;
	}
					

Caniuse.com for CSS focus-within

focus-within polyfill

CSS Animations

Add motion without JavaScript!

• Hardware acceleration
• Keyframes are cool
• Use SVG!
• Not all CSS can be animated

Animation example

p {
	animation-duration: 3s;
	animation-name: slidein;
}
@keyframes slidein {
	from {
		margin-left: 100%;
		width: 300%; 
	}
	75% {
		font-size: 300%;
		margin-left: 25%;
		width: 150%;
	}
	to {
		margin-left: 0%;
		width: 100%;
	}
}
						

Animation demo: card flip

Animation example - handling focus

Animation & Focus Tips

Keyboard focus in dynamic animated regions is hard.

• window.setTimeout is the most common of hacks
• The transitionend event is a better tool
• MutationObserver could work
• You could also try the Web Animations API
• React: the useEffect hook or maybe Suspense

prefers-reduced-motion

Detect if the user has requested the system minimize animation or motion

	.animation {
		-webkit-animation: vibrate 0.3s linear infinite both;
		animation: vibrate 0.3s linear infinite both; 
	}

	@media (prefers-reduced-motion: reduce) {
		.animation {
			animation: none;
			-webkit-animation: none;
		}
	}
					

Reduced Motion Demo

(flashing content warning)

Caniuse.com for prefers-reduced-motion

Do you even need
JavaScript?

It depends™

Screen readers announce pages as rendered
...including JavaScript

You probably need JavaScript
to make accessible custom widgets

JavaScript and ARIA are BFFs
for accessible custom widgets

Bonus pattern: modal dialogs

Accessible Rich Internet Applications
(ARIA)

• role: what is it?
  role="tab"
• state: what is the current state of it?
  aria-selected="false"
aria-hidden="true"
• property: what qualities does it have?
  aria-label="Favorites"

https://www.w3.org/WAI/PF/aria/states_and_properties

ARIA Authoring Practices 1.1

Widget Testing Tips

• Use the keyboard
• Test with a screen reader
  (esp. Windows & mobile)
• Run an automated accessibility checker

Amazon.com run through the axe extension

Relying completely on
client-rendered JavaScript
will leave users behind.

Delta.com with JavaScript disabled

Gatsbyjs.org homepage

MarcySutton.com with JavaScript turned off

CSS-in-JS

• Styled components
• Emotion
• ...and much more

How ‘bout that CSS-in-JS? pic.twitter.com/mcR9scUhQq— Brad Frost (@brad_frost) May 8, 2018

Why do developers choose CSS-in-JS?

• Limiting scope in components
• Dead code elimination
• Fast performance
• Dynamic styling
• Developer ergonomics*

For users & accessibility,
it’s about what gets rendered

• Inline or remote CSS 🤷‍♀️
• Valid HTML markup
• Fast performance
• Human-readable class names

CSS-in-JS class name output on Max Stoiber's website

Why not use CSS-in-JS?

• Mixing of concerns
• Migrating code is harder
• Embrace the CSS cascade
• Don’t ship invalid HTML markup
• Less inclusive tech stacks 😢

Don’t mess up user-stylesheets

Cached class names aren’t human friendly, e.g. class="sc-bdVaJa"

	import React from 'react'
	import { styled } from 'styled-components'

	const MegaHeader = styled.header`
	    background-color: rebeccapurple;
	`
	const Layout = () => {
	  return (
	    // add a stable CSS class
	    <MegaHeader className={`site-wrap`}>
	      <h1>My Gatsby Site</h1>
	    </MegaHeader>
	  )
	}
						

Don’t mess up user-stylesheets

Cached class names aren't human friendly, e.g. class="sc-bdVaJa"

(className highlighted)

	import React from 'react'
	import { styled } from 'styled-components'

	const MegaHeader = styled.header`
	    background-color: rebeccapurple;
	`
	const Layout = () => {
	  return (
	    // add a stable CSS class
	    <MegaHeader className={`site-wrap`}>
	      <h1>My Gatsby Site</h1>
	    </MegaHeader>
	  )
	}
						

Styled-components output without CSS class

Styled-components output with CSS class

You don’t have to use CSS-in-JS with Gatsby

You can use regular CSS files!

 import "./src/css/default.css"	

								

 import React from 'react'
 import {useStaticQuery, graphql } from 'gatsby'
 
 import "./src/css/default.css" // <-- yas!

 import Header from './header'
 import Footer from './footer'
								

You can use CSS modules!

  import React from "react"
  import containerStyles from "./container.module.css"

  export default ({ children }) => (
    <section className={containerStyles.container}>
      {children}
    </section>
  )
						

  .container {
    margin: 3rem auto;
    max-width: 600px;
  }

						

https://www.gatsbyjs.org/tutorial/part-two/

On CSS & JS:

Working with team members?

Honor their strengths!

Prototype UIs with HTML, CSS and little to no tooling 🔥

Recap

• CSS is FUN and designs can absolutely be made accessible
• Beware of flex & grid order vs. source order
• :focus-visible :focus-within === styling powers
• Test focus in animated elements
• CSS-in-JS is common for good reasons, even if we don’t all like it

Accessibility Resources

https://marcysutton.com/web-accessibility-resources

Thanks!

• Slides: https://marcysutton.github.io/emerging-css-a11y
• Twitter: https://twitter.com/marcysutton
• Email: marcy@gatsbyjs.com