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

MarcySutton.com in 2008

MarcySutton.com in 2008: It used tables and spacer images

MarcySutton.com in 2011

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

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

Today

Let’s talk about NEW CSS
and
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: MarcySutton.com

The new MarcySutton.com laid out in Illustrator - top half
The new MarcySutton.com laid out in Illustrator - bottom half

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
Rearranged DIVs

* this also applies to Flexbox

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

Caniuse.com for CSS Flexbox

:focus-visible


 :focus:not(.focus-visible) {
	outline: 0;
 }
 :focus-visible,
 data-focus-visible-added {
	outline: 3px solid greenyellow;
 }
					
div[role=button]

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

Caniuse.com for CSS focus-visible

:focus-within


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

Caniuse.com 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

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)

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

Caniuse.com for prefers-reduced-motion

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

Thanks, CSUN!

Slides: https://marcysutton.github.io/emerging-css-a11y

Twitter: https://twitter.com/marcysutton

Email: marcy@gatsbyjs.com

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