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