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

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads