[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index] [List Home]
[orion-dev] Web Accessibility Tip of the Day: Tip #3

Tip #3: Every focusable element needs a name.

When an element gets focus, screen readers ask the browser for the element's name (aka label) so that it can be spoken aloud or rendered on a Braille display.
You can specify an element's name in several ways:
1) If the element has innerHTML and if it's a type of element that can use content as its name, i.e. <button>Name</button>, then give it a good name and you're done.
2) If there's a visible element that can be used as a label, then use the aria-labelledby attribute to use the text from the other element for the name (you can actually concatenate text from multiple elements).
3) If there's no visible element to use as a label, you can provide a name string with aria-label.
4) Provide <label> for <input> elements.
5) Provide alt text if the element is an <img> or other object that supports alt.
6) Optionally provide a title.

For grins, here is the somewhat complex algorithmic advice given to "User Agents" (aka browsers) for computing the name of an element: