December 4th, 2023 × #accessibility#a11y#webdev
A11y Treats - Labels & Roles
Discussion on using ARIA roles and labels to make web apps more accessible, including legal requirements, providing context for UI elements, and testing tools.
Wes Bos Host
Scott Tolinski Host
In this episode of Syntax, Wes and Scott explain ARIA, aria-label, Roles, and the overall importance of accessibility in your web projects.
Show Notes
- 00:25 Welcome
- 01:18 Syntax Brought to you by Sentry
- 01:44 What is ARIA?
- WAI-ARIA Roles | MDN
- An in-depth guide to ARIA roles - The A11Y Project
- 02:48 What is aria-label?
// A button with an ARIA role and label
<button role="button" aria-label="close">
<img src="close-icon.svg" alt="">
</button>
- 06:36 What's the difference between a title and aria-label on a button?
- 08:34 Are you really going to get sued if your website isn't accessible?
- 11:53 What are Roles for?
- 16:33 6 different types of Roles
- 21:25 What is aria-labelledby?
<span
role="checkbox"
aria-checked="false"
tabindex="0"
aria-labelledby="tac"></span>
<span id="tac">I agree to the Terms and Conditions.</span>
- 23:13 Checking your code for accessibility
- eslint-plugin-jsx-a11y - npm
- WAVE Web Accessibility Evaluation Tools
- Polypane
- 24:31 Feedback and future show ideas
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
