Space Jam, a 1996 website

Warning: there are some large GIF files in this presentation.

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

Who is Marcy Sutton?

  • I work at Gatsby
  • Used to work at Deque, Adobe, Substantial, POP Agency
  • Went to art school
  • Thought I would be a photojournalist
  • But it turned out I really love the web in 2008 in 2008: It used tables and spacer images in 2011 About page in 2011 in 2011: It used the Cufon font rendering technique

Cufon: fonts for the people (discontinued)

sIFR 2.0: Rich Accessible Typography for the Masses

sIFR: Accessibility

sIFR is fully accessible to screenreaders and other assistive technology. Don’t take our word for it. Ask Matt May of the W3C who endorses it as an accessible method to create rich typography on the web. Or ask Joe Clark, one of the world’s leading accessibility experts, whose interest in typography is only trumped by his interest in accessibility.

Who remembers JavaScript rounded corners?


PSD sliced table layouts with text embedded in images?


All Flash everything?


CSS is so much better now

And we have great debugging tools!

Chrome color picker in DevTools


Let’s talk about NEW CSS
Accessible User Experience

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

CSS Grid Layout


Newspaper layout for Radio News, November 1928

How to lay pages out before CSS Grid

  • Layout tables
  • Floats
  • Multi-column layout
  • display: inline-block
  • Absolute positioning
  • Padding hacks
  • Manually splitting text content

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:

The new laid out in Illustrator - top half
The new laid out in Illustrator - bottom half 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 logo and navigation items.

List of talks on 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
Rearranged DIVs

* this also applies to Flexbox for CSS Grid


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.

CSS Flexbox Guide on CSS Tricks

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

-Rachel Andrew

Flexbox on - nav links for CSS Flexbox


 :focus:not(.focus-visible) {
	outline: 0;
 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.

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 for CSS focus-visible


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

CSS Animations

Add motion without JavaScript!

Sarah Drasner is a pro at this

CSS 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%;

Doggo ipsum the neighborhood pupper clouds most angery pupper I have ever seen he made many woofs, borkdrive.

Automated Testing Tips

  • Asserting keyboard focus in animated regions is hard
  • You could try the Web Animations API
  • Or the transitionend event
  • Or a big negative CSS transition-delay


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)

OSX System Preferences: Accessibility, reduce motion iOS System Preferences for Reduce Motion for prefers-reduced-motion

CSS is Awesome (overflowing its container because it's funny)

Thanks, CSUN!




Bonus: Prototyping Accessible JavaScript Routing (get in touch!)