[Robin]: Lately in the newsletter, we’ve written about neat things we’ll be able to do with CSS in the future. CSS nesting! Container queries! Query units! New pseudo-elements! All this is very exciting but I think we need to slow our horses a little bit and so for this week let’s focus on accessibility instead.
How can we make our sites more accessible? What do we need to be cautious of? How do we enable folks who use devices that might not be so common?
That’s what this week’s newsletter is all about. Let’s get into it.
📘
First up I spotted this post from Varun Vachar about how to run automatic accessibility tests with Storybook:
Automated tools audit the rendered DOM against a set of heuristics based on WCAG rules and other industry-accepted best practices. They act as the first line of QA to catch blatant accessibility violations.
For example, Axe, on average, finds 57% of WCAG issues automatically. That allows teams to focus their expert resources on the more complex issues that require manual review.
You can install Axe as an add-on to Storybook which will then show you a list of problems with a component and how it doesn’t meet WCAG rules. Just like this:
This looks incredibly useful and although it shouldn’t stop us from doing accessibility testing on real devices, it’s a good first line of defense for capturing the obvious accessibility problems that pop up.
⌨️
Here’s Paul Ratcliffe with a big ol’ deep dive on skipping to content via the keyboard:
[…] if you want keyboard users to actually use your website rather than getting bored and going somewhere else, you need to do a bit of work behind the scenes to make skipping straight to your main content quicker and easier. You can find all sorts of techniques for this scattered across the web (including here at CSS-Tricks) but most are missing a trick or two and many recommend using outdated or deprecated code. So, in this article, I’m going to take a deep dive into skipping to content and cover everything in a 2021-friendly fashion.
There’s a real good breakdown of how to make it easier to skip to content for folks with accessibility devices like JAWS or VoiceOver. Paul takes a “before” snapshot of HTML (which is just a bunch of divs) and replaces it with accessible markup to make it easier for folks to navigate via keyboard.
One tip here that I feel a bit embarrassed that I didn’t know is that we should be using the aria-label attribute on nav elements to describe them:
<nav aria-label=“Main menu”>
<!-- items -->
</nav>🌅
Good alt text is hard. Great alt text? Get out of here. In fact, I always struggle to write alt text that’s used to help describe an image, like this:
How would you describe this with HTML? Perhaps something like this:
<img src="runner.jpg" alt="A runner, running" />Okay, that’s truly horrible and not useful at all but you see what I mean. Should I explain precisely what the image is in painful detail or is brevity preferable? How much complexity in the image should we describe? The context matters too. If this is an image for the tourism board of Sydney then we maybe should describe the city instead.
Jake Archibald wrote about this very problem the other day and how to write great alt text:
The relevant parts of an image aren’t limited to the cold hard facts. Images can make you feel a particular way, and that’s something that should be made available to a screen reader user.
Jake argues that we should care for alt text just as much as regular text and make it as charming as possible and, most importantly, make alt text emotive.
Léonie Watson wrote about this all the way back in 2011 when she described “emotion rich images”:
A good alt text can conjure up wonderfully stimulating mental images. A friendly smile is the same in print, photo or wax crayon. Whether you listen to an image or see it, the emotional response is the key factor, so why should we recommend that these emotion rich images should be given a null alt text and hidden from screen reader users?
Perhaps it’s time we introduced another group of images: Emotion rich images and encouraged the practice of providing descriptive alt texts for them. If people don’t want to listen to the alt text, they won’t. If people don’t want to pause and look at the image, they won’t. In either case, it’s good to have the choice.
And Eric Bailey riffed on all this a few weeks ago when he said that images are not decorative:
In modern web design and development, displaying an image is a highly intentional act. Alternate descriptions allow us to explain the content of the image, and in doing so, communicate why it is worth including.
Just because an image displays something fanciful doesn’t mean it isn’t worth describing. Announcing its presence ensures that anyone, regardless of ability or circumstance, can fully understand your digital experience.
🪟
Here’s a smart trick unrelated to accessibility but caught my eye this week nonetheless: Ryan Mulligan built a horizontal scrolling gallery that aligns itself the parent container’s max-width whilst it overflows outside of it. That was certainly a mouthful huh. Here, a gif describes it best:
Make sure to check out Ryan’s demo on CodePen because it’s pretty neat. I know some folks that are _extremely_ against horizontal scrolling like this but I think it’s pretty dang neat! I wonder if you could also add loading="lazy" to each of these images to make sure they don’t download until they scroll into view.
🎨
Direction-aware hovering is something I’ve maybe never seen on a website before but Mikael Ainalem shows just how neat it is. In this demo as you hover over the card then an animation in the direction your mouse is moving will take over:
It’s all just CSS, too. Smart stuff!
Sponsor
WordPress.com Growth Summit
Are you a blogger looking for ways to drive traffic and attract more visitors? Are you a small business owner that wants to start selling products and services on your site? Are you an artist or creator who wants to learn how to share your work and generate leads? The WordPress.com Growth Summit will cover these topics (and many more). We’ll provide indispensable advice to help you succeed!
Register today to take advantage of the special rate of $25 USD at checkout. Special pricing ends July 31!
Sponsor
Detect, diagnose, and resolve errors with ease
Ship better quality code faster with Raygun Error Monitoring and Crash Reporting. Get real-time code-level insights into the health of your software and start fixing the errors impacting your end-users experience.
[Chris]: Say you’re watching a conference and the speaker shares their screen. If it’s just some slides, that’s fine, that’s what you expect. But if they actually share their normal screen and just do stuff, that’s always extra interesting. A little sneak peek into how a fellow nerd computers! A lot of us computer like a lot, so it occupies a lot of our brainspace. We can talk about how we computer, but actually watching someone else do it is extra voyeuristic and it’s hard to look away.
That’s why personal posts about what hardware and software people use are also so appealing (to me at least). Especially the ones that aren’t from someone that is some professional reviewer, but a random dev like you or me that felt compelled to share something about their computer setup.
Shawn Wang’s “My 2021 New Mac Setup” is like that. I get to cheer him on for some things. “Preferences → show filename extensions” — heck yes! Gotta do it! And jeer him for others. “Fix trackpad direction: Trackpad -> Scroll & Zoom – Natural off” No way! Natural forever! My favorite little find in there: Display Anchors. Clever little browser extension that slaps on ID links to the page for when you’re trying to find and link to them.