Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

701: A11y Treats - Labels & Roles

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

In this episode of Syntax, Wes and Scott explain ARIA, aria-label, Roles, and the overall importance of accessibility in your web projects. <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"> <a href="#t=00:25">00:25</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:18">01:18</a> Syntax Brought to you by Sentry</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=01:44">01:44</a> 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"> <a href="#t=02:48">02:48</a> 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"> <a href="#t=06:36">06:36</a> 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"> <a href="#t=08:34">08:34</a> 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"> <a href="#t=11:53">11:53</a> What are Roles for?</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=16:33">16:33</a> 6 different types of Roles</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=21:25">21:25</a> What is aria-labelledby?</li> </ul> <pre><code class="has-line-data" data-line-start="22" data-line-end="29"> I agree to the Terms and Conditions. </code></pre> <ul> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=23:13">23:13</a> Checking your code for accessibility</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href= "https://www.npmjs.com/package/eslint-plugin-jsx-a11y">eslint-plugin-jsx-a11y - npm</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://wave.webaim.org/">WAVE Web Accessibility Evaluation Tools</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://polypane.app/">Polypane</a></li> <li class="has-line-data" data-line-start="33" data-line-end="35"> <a href="#t=24:31">24:31</a> Feedback and future show ideas</li> </ul> <h3 class="code-line" data-line-start="35" data-line-end="36"> <a id="Hit_us_up_on_Socials_35"></a>Hit us up on Socials!</h3> Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a>

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     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?
  I agree to the Terms and Conditions.  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

Aplikace Youradio Talk

701: A11y Treats - Labels & Roles

Poslechněte si podcast