Today we're wrapping up our series on accessibility by talking about labeling. 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
In this episode of Polycasts I'll demonstrate all three approaches so you can better understand when to use each in your specific app or element.
138