EPISODE · Sep 5, 2018 · 1H 14M
Accessibility
from Syntax - Tasty Web Development Treats · host Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers
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
What this episode covers
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
NOW PLAYING
Accessibility
No transcript for this episode yet
Similar Episodes
No similar episodes found.