Simplifying Web Development with Accessibility Best Practices
1h 48mIntermediate2021-05-28
Authors

Morten Rand-Hendriksen
Senior Staff Instructor, Speaker, Web Designer, and Software Developer
Course details
Too often in the world of web development, accessibility is given a low level of priority in the development stage of a site and is often relegated to experts for later implementation. But why spend the time and money hiring an outside consultant when you can set up a website for proper accessibility at the build stage? In this course, Morten Rand-Hendriksen shows the benefits of taking this approach, and how simple it is to do so. As Morten explains, all that’s needed is a basic understanding of why these elements are so important, how they work, and how good coding practices and modern web standards can get you there with little extra work. He tackles accessibility from all sides, starting with the origins of some of the most common accessibility issues and how to address them, then covers key topics like accessible design, hiding and showing visual content, handling graphics and media, and the semantic elements that can help make your designs more accessible.
Skills covered
HTMLAccessibilityDiversity, Equity, and Inclusion (DEI)Front-End Web DevelopmentUser ExperienceProjectWeb DevelopmentOpen Source
Concepts
0. Introduction
- 01 - Simplifying web development with accessibility
1. Back to Basics
- 02 - Overcomplicating things that already work
- 03 - The purpose of the web
- 04 - Why accessibility breaks
2. Accessible Design
- 05 - Designing an accessible color palette
- 06 - Designing accessible typography
- 07 - Designing accessible content hierarchies and flows
3. Hiding and Showing
- 08 - Is hiding or showing content a good idea
- 09 - How to hide visual content
- 10 - How to hide content from screen readers
4. Semantics and Interactivity
- 11 - The role of semantic elements
- 12 - Elements with purpose
- 13 - Link and button basics
- 14 - Links
- 15 - Buttons
- 16 - Screen reader friendly links and buttons
- 17 - Icon links and buttons with SVG
5. Images, Graphics, and Media
- 18 - Images, graphics, and media basics
- 19 - The img element
- 20 - The figure and figcaption elements
- 21 - Accessible SVG
- 22 - Making embedded videos more accessible
- 23 - Adding transcripts
6. Practical Examples
- 24 - Mobile-friendly navigation menu
- 25 - Multilevel navigation menu
- 26 - Basic card
- 27 - Card with internal links
- 28 - Date picker
7. Proof and Pudding
- 29 - Simplifying web development with accessibility best practices
- 30 - Where to find more information
- 31 - Tools for manually testing sites
- 32 - Lighthouse score and similar
Conclusion
- 33 - Accessibility mindset