Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

674: A11y Treats - Heading Design

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 Hasty Treat, Scott and Wes talk about headings on your website, why you should care, how to structure your headings, and what tooling is there for testing your website? <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:26">00:26</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:21">01:21</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:41">01:41</a> Why do we care about Headings?</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href= "https://www.a11yproject.com/posts/how-to-accessible-heading-structure/"> How-to: Accessible heading structure - The A11Y Project</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=03:12">03:12</a> Heading design provides an outline for your website</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=08:45">08:45</a> Using H1 classes?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=10:28">10:28</a> Is the logo an H1?</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=13:03">13:03</a> Giving an ARIA level</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=17:14">17:14</a> Can headings be visually hidden?</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=21:00">21:00</a> Benefits of good heading design</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=22:27">22:27</a> Tooling</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href= "https://www.accessibility-developer-guide.com/examples/headings/">Heading outlines - ADG</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href= "https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements"> HTML Standard</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://polypane.app/">Polypane, The browser for ambitious web developers</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href= "https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi"> HeadingsMap - Chrome Web Store</a></li> <li class="has-line-data" data-line-start="19" data-line-end="21"> <a href= "https://addons.mozilla.org/en-US/firefox/addon/headingsmap/">HeadingsMap – Get this Extension for 🦊 Firefox (en-US)</a></li> </ul> <h2 class="code-line" data-line-start="21" data-line-end="22"> <a id="Tweet_us_your_tasty_treats_21"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://bsky.app/profile/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

In this Hasty Treat, Scott and Wes talk about headings on your website, why you should care, how to structure your headings, and what tooling is there for testing your website?
 Show Notes  00:26 Welcome
 01:21 Syntax Brought to you by Sentry
 01:41 Why do we care about Headings?
  How-to: Accessible heading structure - The A11Y Project

 03:12 Heading design provides an outline for your website
 08:45 Using H1 classes?
 10:28 Is the logo an H1?
 13:03 Giving an ARIA level
 17:14 Can headings be visually hidden?
 21:00 Benefits of good heading design
 22:27 Tooling
 Heading outlines - ADG

  HTML Standard

 Polypane, The browser for ambitious web developers

  HeadingsMap - Chrome Web Store

 HeadingsMap – Get this Extension for 🦊 Firefox (en-US)

  Tweet us your tasty treats  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets
 Wes Bos on Bluesky

 Scott on Bluesky

 Syntax on Bluesky

Aplikace Youradio Talk

674: A11y Treats - Heading Design

Poslechněte si podcast