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 […]

The post A little bit about WCAG Success Criterion 2.5.3: Label in Name appeared first on Geoff Graham.


This content originally appeared on Geoff Graham and was authored by Geoff Graham

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>

The post A little bit about WCAG Success Criterion 2.5.3: Label in Name appeared first on Geoff Graham.


This content originally appeared on Geoff Graham and was authored by Geoff Graham


Print Share Comment Cite Upload Translate Updates
APA

Geoff Graham | Sciencx (2020-12-12T00:05:23+00:00) A little bit about WCAG Success Criterion 2.5.3: Label in Name. Retrieved from https://www.scien.cx/2020/12/12/a-little-bit-about-wcag-success-criterion-2-5-3-label-in-name/

MLA
" » A little bit about WCAG Success Criterion 2.5.3: Label in Name." Geoff Graham | Sciencx - Saturday December 12, 2020, https://www.scien.cx/2020/12/12/a-little-bit-about-wcag-success-criterion-2-5-3-label-in-name/
HARVARD
Geoff Graham | Sciencx Saturday December 12, 2020 » A little bit about WCAG Success Criterion 2.5.3: Label in Name., viewed ,<https://www.scien.cx/2020/12/12/a-little-bit-about-wcag-success-criterion-2-5-3-label-in-name/>
VANCOUVER
Geoff Graham | Sciencx - » A little bit about WCAG Success Criterion 2.5.3: Label in Name. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2020/12/12/a-little-bit-about-wcag-success-criterion-2-5-3-label-in-name/
CHICAGO
" » A little bit about WCAG Success Criterion 2.5.3: Label in Name." Geoff Graham | Sciencx - Accessed . https://www.scien.cx/2020/12/12/a-little-bit-about-wcag-success-criterion-2-5-3-label-in-name/
IEEE
" » A little bit about WCAG Success Criterion 2.5.3: Label in Name." Geoff Graham | Sciencx [Online]. Available: https://www.scien.cx/2020/12/12/a-little-bit-about-wcag-success-criterion-2-5-3-label-in-name/. [Accessed: ]
rf:citation
» A little bit about WCAG Success Criterion 2.5.3: Label in Name | Geoff Graham | Sciencx | https://www.scien.cx/2020/12/12/a-little-bit-about-wcag-success-criterion-2-5-3-label-in-name/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.