701

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.

or

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

// 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>

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Share