over 2 years ago Syntax Podcast
A11y Treats - Labels & Roles
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
