A little bit about WCAG Success Criterion 2.5.3: Label in Name

I was editing an article on this earlier today. If I’m being honest, I went into it thinking I already knew what it was going to say. Use labels with inputs, right? Not too complicated.

But I was proven wrong, and I’m glad for it. The key lesson for me is that there are two components to accessible (or rather, inclusive) labelling. The first is pretty obvious, the visible label. That can be content inside a <label> or <button>. The second is less obvious, the programmatic name. It’s less obvious because it isn’t visible on the front end, but instead is spoken by assistive technologies, like screen readers.

A component’s visible label and programmatic name need a little harmony between them. It’s not so much that they have to match word-for-word. It’s more that they need to communicate the same function so the experiences between users with different capabilities is consistent. That might mean a keyword, like “Submit Now” as the label and “Submit” as the name.

<button aria-label="Submit">Submit Now</button>