Accessible Components: Labeling

Author: Rob Dodson

Today we’re wrapping up our series on accessibility by talking about labelling. While it’s important to make sure our elements have great keyboard support and semantics, we also need to make sure we can tell the user what our control is being used for.

For example, if you were using a screen reader and you landed on a control that just said “button”, you wouldn’t really know what to do with it. Imagine instead that the button said “Main Menu, button”, that would be much nicer! The way we achieve that affect is by providing our element with an appropriate label.

In the world of ARIA there are three ways to label an element.

• aria-label: This generates a text alternative for an element and it will be read instead of reading the element’s contents
• aria-labelledby: This let’s us point at another element to say “that element is my label”!
• name by content: For small elements it’s possible to just generate the label by its content

Check out the W3C ARIA Authoring Practices 1.1 for more information https://goo.gl/8qs7VF or join the Polymer Slack: http://goo.gl/WHjzMH