Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Accessibility

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.

<p>In this episode Wes and Scott dive into the very big topic of accessibility, from the basics and easy wins to best practices, tools, resources and more!</p> <h2><a id="Cloudinary__Sponsor_9" name= "Cloudinary__Sponsor_9"></a>Cloudinary - Sponsor</h2> <p><a href= "https://cloudinary.com/?utm_source=Syntax.fm&utm_medium=Podcast&utm_content=Accessibility_Syntax_podcast"> Cloudinary</a> is a heavy duty media hosting stack for your websites and applications.</p> <p>Also, check out <a href= "https://cloudinary.com/blog/making_media_accessible_how_to_automatically_generate_alt_text_for_images?utm_source=Syntax.fm&utm_medium=Podcast&utm_content=Accessibility_Syntax_podcast">Making Media Accessible: How to Automatically Generate alt Text for Images</a>. In the first part of the series, Cloudinary will demonstrate how you can integrate machine learning tools into your image management pipeline to automatically generate alt text for your assets.</p> <h2><a id="Deque__Sponsor_15" name="Deque__Sponsor_15"></a>Deque - Sponsor</h2> <p><a href="https://www.deque.com/">Deque</a> is the amazing company behind the <a href= "https://www.deque.com/axe/">aXe</a> accessibility testing tool that over 200,000 people use to ensure their websites are accessible.</p> <p>For users looking to scale accessibility, export issues and collaborate with colleagues, Deque offers an enterprise toolset called <a href= "https://www.deque.com/tools/worldspace-attest/">Attest</a>. Attest also allows you to select accessibility custom rules, offers a more robust API and more integrations AND can test the accessibility of your iOS and Android applications.</p> <h2><a id="Show_Notes_21" name="Show_Notes_21"></a>Show Notes</h2> <p>6:00 - Basics</p> <ul> <li>What is accessibility?</li> <li><a href= "https://twitter.com/click2carney/status/1027601637156610048">Amy Carney Tweet</a></li> <li><a href= "https://www.w3.org/standards/webdesign/accessibility">Tim Berners Lee Quote</a></li> <li>a11y</li> <li>What types of disabilities are there? <ul> <li><a href= "https://medium.com/valtech-design/inclusive-design-dd4e03f82094">Temporary, situational, and permanent</a></li> </ul> </li> <li><a href= "https://twitter.com/wesbos/status/1027187967243309057">Tweet thread with lots of info</a></li> </ul> <p>15:03 - How do you write accessible code (easy wins)?</p> <ul> <li>Clean HTML</li> <li>Semantic elements</li> <li>Use the alt attribute on images</li> <li>HTML5 (article, section, header, footer, aside)</li> <li>Proper inputs types - number, text,</li> <li>CSS order property on Flexbox and Grid</li> <li>Colors and proper contrast</li> <li>Use links and buttons properly</li> <li>Use ARIA roles to define elements when semantic HTML falls flat (popups, non-standard controls, etc.) <ul> <li><a href= "https://developers.google.com/web/fundamentals/accessibility/semantics-aria/"> Introduction to ARIA</a></li> <li><a href= "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques"> Using ARIA: Roles, States, and Properties</a></li> </ul> </li> <li>Keyboard only navigation</li> <li><a href= "https://webaim.org/techniques/keyboard/tabindex">Tabindex</a></li> <li>Skip to content</li> <li><a href="https://webaim.org/techniques/skipnav/">“Skip Navigation” Links</a></li> <li>a11y ESLint rules</li> <li>Video captions for ESL</li> <li>Transcripts for Podcasts</li> </ul> <p>44:48 - Tools</p> <ul> <li><a href="https://www.deque.com/axe/">aXe</a></li> <li>Lighthouse - Audits tab in Chrome dev tools</li> <li><a href= "https://github.com/UKHomeOffice/posters/blob/master/accessibility/design-accessible-services/FINAL-Designing-accessible-services-posters-set.pdf"> Inclusive Design Posters</a></li> <li><a href="https://squizlabs.github.io/HTML_CodeSniffer/">HTML Code Sniffer</a></li> <li><a href="https://github.com/pa11y/pa11y">Pa11y runs code sniffer from the CLI</a></li> <li>Accessibility features in OS</li> <li>Screen Readers <ul> <li>MacOS VoiceOver</li> <li><a href="https://twitter.com/NVAccess">NVAccess</a></li> <li><a href= "https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en"> Chrome Vox</a></li> </ul> </li> </ul> <p>54:35 - Resources</p> <ul> <li><a href="https://a11yproject.com/">The A11Y Project</a></li> <li><a href="https://bulbenergy.github.io/bulb-audit/">Bulb Accessibility Audit from Heydon</a></li> <li><a href= "https://www.youtube.com/channel/UCvNQ5aJllZ5Oi49jtMKeb0Q">Deque Youtube Channel</a></li> </ul> <p>62:22 - Important Ideas</p> <ul> <li>Use your website with accessibility tools turned on</li> <li>Sit with someone using a screen reader</li> <li><a href= "https://twitter.com/click2carney/status/1027604230759051265">Amy Carney’s Tweet</a></li> <li><a href= "https://twitter.com/localpcguy/status/1027215599817158656">Mike Behnke Tweet</a></li> <li><a href= "https://twitter.com/_reverett/status/1027189007799791618">moose of letters’ Tweet</a></li> </ul> <h2><a id="Links_81" name="Links_81"></a>Links</h2> <ul> <li><a href= "https://syntax.fm/show/033/large-files-cdns-image-compression-video-hosting-and-big-zips"> Syntax033: Large Files - CDNs, Image Compression, Video Hosting, and Big Zips</a></li> </ul> <h2><a id="_SIIIIICK__PIIIICKS__85" name= "_SIIIIICK__PIIIICKS__85"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li>Scott: <a href= "https://speedcurve.com/">SpeedCurve</a></li> <li>Wes: <a href= "https://www.netflix.com/title/80190510">Netflix - Magic for Humans</a></li> </ul> <h2><a id="Shameless_Plugs_90" name= "Shameless_Plugs_90"></a>Shameless Plugs</h2> <ul> <li><a href="https://leveluptutorials.com/pro">Scott’s React Testing Course</a></li> <li><a href="https://wesbos.com/courses">Wes’ Courses</a></li> </ul> <h2><a id="Tweet_us_your_tasty_treats_95" name= "Tweet_us_your_tasty_treats_95"></a>Tweet us your tasty treats!</h2> <ul> <li><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li>Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode Wes and Scott dive into the very big topic of accessibility, from the basics and easy wins to best practices, tools, resources and more!
 Cloudinary - Sponsor Cloudinary is a heavy duty media hosting stack for your websites and applications.
 Also, check out Making Media Accessible: How to Automatically Generate alt Text for Images. In the first part of the series, Cloudinary will demonstrate how you can integrate machine learning tools into your image management pipeline to automatically generate alt text for your assets.
 Deque - Sponsor Deque is the amazing company behind the aXe accessibility testing tool that over 200,000 people use to ensure their websites are accessible.
 For users looking to scale accessibility, export issues and collaborate with colleagues, Deque offers an enterprise toolset called Attest. Attest also allows you to select accessibility custom rules, offers a more robust API and more integrations AND can test the accessibility of your iOS and Android applications.
 Show Notes 6:00 - Basics
 What is accessibility?
 Amy Carney Tweet
 Tim Berners Lee Quote
 a11y
 What types of disabilities are there? Temporary, situational, and permanent

 Tweet thread with lots of info
 15:03 - How do you write accessible code (easy wins)?
 Clean HTML
 Semantic elements
 Use the alt attribute on images
 HTML5 (article, section, header, footer, aside)
 Proper inputs types - number, text,
 CSS order property on Flexbox and Grid
 Colors and proper contrast
 Use links and buttons properly
 Use ARIA roles to define elements when semantic HTML falls flat (popups, non-standard controls, etc.)  Introduction to ARIA
 Using ARIA: Roles, States, and Properties

 Keyboard only navigation
 Tabindex
 Skip to content
 “Skip Navigation” Links
 a11y ESLint rules
 Video captions for ESL
 Transcripts for Podcasts
 44:48 - Tools
 aXe
 Lighthouse - Audits tab in Chrome dev tools
 Inclusive Design Posters
 HTML Code Sniffer
 Pa11y runs code sniffer from the CLI
 Accessibility features in OS
 Screen Readers MacOS VoiceOver
 NVAccess
 Chrome Vox

 54:35 - Resources
 The A11Y Project
 Bulb Accessibility Audit from Heydon
 Deque Youtube Channel
 62:22 - Important Ideas
 Use your website with accessibility tools turned on
 Sit with someone using a screen reader
 Amy Carney’s Tweet
 Mike Behnke Tweet
 moose of letters’ Tweet
 Links  Syntax033: Large Files - CDNs, Image Compression, Video Hosting, and Big Zips
 ××× SIIIIICK ××× PIIIICKS ××× Scott: SpeedCurve

 Wes: Netflix - Magic for Humans

 Shameless Plugs Scott’s React Testing Course
 Wes’ Courses
 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

Aplikace Youradio Talk

Accessibility

Poslechněte si podcast