701: A11y Treats - Labels & Roles

<p class="has-line-data" data-line-start="0" data-line-end="1">In this episode of Syntax, Wes and Scott explain ARIA, aria-label, Roles, and the overall importance of accessibility in your web projects.</p> <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:25">00:25</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:18">01:18</a></strong> Syntax Brought to you by Sentry</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=01:44">01:44</a></strong> What is ARIA?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href= "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles"> WAI-ARIA Roles | MDN</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href= "https://www.a11yproject.com/posts/an-indepth-guide-to-aria-roles/"> An in-depth guide to ARIA roles - The A11Y Project</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=02:48">02:48</a></strong> What is aria-label?</li> </ul> <pre><code class="has-line-data" data-line-start="11" data-line-end="16">// A button with an ARIA role and label <button role="button" aria-label="close"> <img src="close-icon.svg" alt=""> </button> </code></pre> <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=06:36">06:36</a></strong> What’s the difference between a title and aria-label on a button?</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=08:34">08:34</a></strong> Are you really going to get sued if your website isn’t accessible?</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=11:53">11:53</a></strong> What are Roles for?</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href