Accessibility

Published: Sept. 5, 2018, 1 p.m.

b'

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\\xa0is a heavy duty media hosting stack for your websites and applications.

Also, check out\\xa0Making 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\\xa0is the amazing company behind the\\xa0aXe\\xa0accessibility 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\\xa0Attest. 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

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.)
  • Keyboard only navigation
  • Tabindex
  • Skip to content
  • \\u201cSkip Navigation\\u201d Links
  • a11y ESLint rules
  • Video captions for ESL
  • Transcripts for Podcasts

44:48 - Tools

54:35 - Resources

62:22 - Important Ideas

Links

\\xd7\\xd7\\xd7 SIIIIICK \\xd7\\xd7\\xd7 PIIIICKS \\xd7\\xd7\\xd7

Shameless Plugs

Tweet us your tasty treats!

'