Simplifying Web Development with Accessibility Best Practices

Introduction

• Simplifying web development with accessibility

1. Back to Basics

• Overcomplicating things that already work
• The purpose of the web
• Why accessibility breaks

2. Accessible Design

• Designing an accessible color palette
• Designing accessible typography
• Designing accessible content hierarchies and flows

3. Hiding and Showing

• Is hiding or showing content a good idea?
• How to hide visual content
• How to hide content from screen readers

4. Semantics and Interactivity

• The role of semantic elements
• Elements with purpose
• Link and button basics
• Links
• Buttons
• Screen reader–friendly links and buttons
• Icon links and buttons with SVG

5. Images, Graphics, and Media

• Images, graphics, and media basics
• The img element
• The figure and figcaption elements
• Accessible SVG
• Making embedded videos more accessible
• Adding transcripts

6. Practical Examples

• Mobile-friendly navigation menu
• Multilevel navigation menu
• Basic card
• Card with internal links
• Date picker

7. Proof and Pudding

• Simplifying web development with accessibility best practices
• Where to find more information
• Tools for manually testing sites
• Lighthouse score and similar

Conclusion

• Accessibility mindset