The other day I was in a meeting discussing alt text and while I’m fairly savvy about Accessibility, I finally made the simplest of all connections: alt text is like a paragraph. Word pictures. Basic I know, but it helps me contextualize how to write good alt text as well as source order of my code.

See this basic markdown example1…

![Cats](unsplash.com/cats.jpg)

# Why React 17 will change everything

The next version of React will be a release of React 16, but it will be skipped due to focus on React 17. React 16 will be released with a handful of fixes to XHR, and will be available for the React developers and React Native developers.

Now if we pretend that image is just regular old paragraph text.

Cats

# Why React 17 will change everything

The next version of React will be a release of React 16, but it will be skipped due to focus on React 17. React 16 will be released with a handful of fixes to XHR, and will be available for the React developers and React Native developers.

This illuminates a few problems that I maybe didn’t see before when I had a cool image in there:

  1. That alt text sucks. What are the cats doing? How are they relevant in this context? Even if it was more descriptive, I clicked on a link about React, why are we talking about cats?
  2. Why is there text dangling above the main heading? If I scan the article by headings (visually or with a screen reader), I’d miss these cats entirely, do they belong under the main heading?
  3. Is the text even necessary? Looks entirely unrelated to the content, purely decorative, I bet alt="" is the right choice here.

I’m using a blog post as an example, but this happens on the micro level as well. Contexts like card UIs, product pages, shopping carts also share these concerns. The main takeaways I’ve been in discussions about are that images or .badge components dangling above a heading level element may look good from a design perspective, but is just weird from an aural cognition perspective and may be skipped entirely. If they’re important (e.g. the badge says “Sale” or “New”) they probably need to be moved in the source order. If they’re not important, then why are they in there in the first place? This might be the one place I’ve ever heard of where you’d actually want to use the CSS order property (😲) even though that’s generally frowned upon in Accessibility Land due to manipulating tab order flow.

Again, this is basic and I’m familiar with good alt text already, but in that meeting a switch flipped in my brain from “alt text is for accessibility” to “alt text is for crafting good content” and that gives me good vibes. And I’d be remiss if I failed to clarify that just because alt text is like paragraphs, that doesn’t mean people want paragraphs in their alt text. Keep it succinct, yet informative to the context.

Anyway, I’m learning a lot about the importance of context in Accessibility and some of the limitations of design systems on my current project. I hope to share more thoughts one day.

  1. I used GPT-3 to generate this article because I know nothing about React 17 and apparently neither does AI. ↩