Accessible Components: Labeling — Polycasts #51

Video News
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.

W3C ARIA Authoring Practices 1.1

Polymer Slack:

Subscribe to the Chrome Developers channel at

Products You May Like

Articles You May Like

Samsung Galaxy A55 Reportedly Enters Internal Testing, Tipped to Run on Exynos 1480 SoC
Tecno Phantom V Flip 5G Hands-on Video Leaked Online; Price in India Tipped
Google Pixel 8 Pro Pre-Order Customers in US Tipped to Get Free Pixel Watch 2
Announcing Microsoft Copilot, your everyday AI companion
Photography Ideas: 100+ Things to Photograph in 2023

Leave a Reply

Your email address will not be published. Required fields are marked *