I dig Universal Design

I hate kickers, aka eyebrow copy (no shade to Casey Lawrence’s article, it does look great). It’s not because I think words above a heading look weird. It’s because on the web, content that supports a heading is supposed to come after the heading. That’s because one common way that people use screen readers to navigate a page is by listening to a list of headings then moving to one of those headings. If eyebrow copy is above the headline, that means the eyebrow copy isn’t read.

There are ways around this, you can use CSS to keep the eyebrow copy above the heading visually while putting the eyebrow copy after the heading for screen reader users. But then, a developer is the one designing the experience for some of your users. I don’t know if you’ve looked around this site, but developers aren’t the best designers out there.

Deep dive on equity from an internet meme

It reminds me of this meme about equity vs equality.

In the first example a tall person, a medium height person, and a short person were at a fence and each was standing on a box trying to watch a baseball game. The tallest person loomed well over the fence standing on his box, the medium height person cleared the fence just fine, and the short person couldn’t see over the fence with just one box.

In the second example, the tall person gave the short person their box, and the short person was able to see over the fence and everyone could see the game.

Don’t be clever.

I used to think doing my CSS tricks was making my work more equitable and giving my box to that small person watching the game.

When designers, user experience people, and content strategists aren’t involved in decisions around the experience, you’re not lifting that shortie up, you’re telling them to go watch some different team because very different people made their experience. This other team has fewer players, where everyone’s a good pitcher and no one can hit a ball. In other words, your developers are creating the experience for some of your users.

We’re making experiences that are separate but not equal.

Sure people can now see the game, and I guess that’s better than nothing. But that’s a different experience. It’s a separate experience. And singling out a group of people and giving them a separate experience should sound alarm bells and make you want to run in a different direction (gestures at all of US history).

The boxes in this metaphor aren’t something we do to make websites usable, the boxes are assistive technology, like screen readers or wheel chairs. It’s the tab button on a keyboard that lets a user explore a website without a mouse. The usability of our websites is equivalent to the height of the fence. And honestly, we shouldn’t have a fence.

Ok, here’s why I dig Universal Design

This is why I dig Universal Design. I dig it because of it’s first principle:

Provide the same means of use for all users: identical whenever possible; equivalent when not.

Centre for Excellence in Universal Design

WCAG(Web Content Accessibility Guidelines) define how we need to build websites, but Universal Design gives us principles for building them. They’re like Gestalt Design Principles but for interaction (or actually architecture, but hey, they work super well for interaction, too).

So for my pesky kicker(eyebrow) copy, providing an identical or equivalent experience means opening up a screen reader as the developer, designer, content person or whoever you are, and thinking about how you can make one great equitable experience for everyone. Maybe you stick with the CSS cleverness, because you feel like that’s fine. Maybe you move the eyebrow copy under the heading, so it’s one unified experience.

The way you get a unified experiences is having the whole team doing their jobs for everyone. Even for people who don’t interact with the world like you do. Because they deserve the output of your big awesome brain.