Playing: 072: Accessibility
Potluck - Gatsby vs Next × Is Google Home spying on you? × Flat File CMS × CSS Frameworks × Hosting Client Sites × More!
Potluck - Terminal Configs × CSS Reset × Flexbox × Freelancing × NPM Dependencies × Project Hand-off × More!
Potluck - Why Webpack? × Serverless × Agencies × Recruiters × CSS Grid × MQ in Styled Components
Potluck - Deploying Applications × Typescript × Live Coding with Twitch × Fullstack Architecture × More!
Potluck - What is "State"? × Web Sockets × Remote Working × Firefox × Machines Taking Our Jobs × More!
Potluck - CSS × Angular × Dev job preparation × Svelte × File organization × Gear × More!
Potluck - Media Queries × NPM Vulnerabilities × Fullstack JS vs JAMstack × Web VR/AR × Switching Jobs × More!
Potluck - Interview Qs × Headless CMS × React Hooks × Resume Design × Redux vs Context × More!
How We Manage Our Lives — Notion, Todos, Notes, Focusing, Calendars, Goal tracking, and more!
Potluck - Changing careers × Repo organization × CSS Grid × Certifications × Freelancing × Spammers × More
Potluck - Where to start with JS × Freelancing × Cron jobs × Split testing × Frameworks in 2019 × More
Potluck - $100/hr × Redux Replacements × Full Stack Designers × JWT × VS Code Tips × More
Potluck - Editor Fonts × Portfolios × Meetup Tips × Switching to Windows × Freelancing Sources
Potluck EP × Remote Work × Headless WordPress × Good Client Questions × Alternate Careers × React API Credentials
Potluck EP × Is Redux Dead × Learning Quickly × Developing Solo × Specialist vs Generalist × Funnest Projects × Wes’ BBQ Course
Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman
Wes and Scott's Lives - Breakdancing, BBQ, Wives, Work/Life Balance, Problem Solving, YouTube Subscriptions
Snack Pack — CSS Frameworks, React HOC, Render Props, Coding Designers, Early Career Advice and a sound board!
Hosting & Servers — Heroku, Now, Galaxy, Digital Ocean, Linode, Docker, Netlify and more!
Sep 5th, 2018
Accessibility👇 Download Show✏️ Edit Show Notes
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
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.
6:00 - Basics
- What is accessibility?
- Amy Carney Tweet
- Tim Berners Lee Quote
- What types of disabilities are there?
- 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.)
- Keyboard only navigation
- Skip to content
- "Skip Navigation" Links
- a11y ESLint rules
- Video captions for ESL
- Transcripts for Podcasts
44:48 - Tools
- 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
54:35 - Resources
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