Common Accessibility Mistakes and How to Avoid Them

For some, accessibility conjures nightmares of garish focus rings and high-contrast fonts. For others, it’s snooze-inducing checklists ad nauseam.

With the onerous checklists and guidelines and complicated wording, accessibility can seem like a chore that takes a beautiful design and makes it…less beautiful. But accessible web design really boils down to a few basic principles and when you have these as your first principles when starting a project, you can save yourself, your team, and your clients hours of headaches around accessibility testing.

This presentation will propose four engaging starting principles to keep in mind when building accessible web experiences:

1. Web design is more than graphic design
2. Be as semantic as possible
3. Web sites should look good naked
4. Talk to your computer (use ARIA)

I will provide practical explanations and examples of these principles in code.

Then I will describe some common accessibility pitfalls and explain how to identify, fix, and avoid these pitfalls using example patterns and providing resources for further research for attendees. The pitfalls include (but will not be limited to):

• CSS Grid / Flexbox
• Handling images
• Proper use of ARIA attributes including aria-expanded, aria-hidden, aria-live
• Hiding and showing content accessibly
• Using JavaScript to add keyboard functionality to components.

Level of Knowledge:

• Attendees should be experienced building websites with HTML, CSS, and JavaScript

Topics to be covered:

• Simple JavaScript techniques for ensuring accessible components
• CSS properties that affect accessibility
• How to use modern CSS (flexbox, grid) without compromising accessibility

Attendees will leave with:

• A mental framework for building accessible web experiences.
• The ability to identify, avoid, and fix common accessibility pitfalls.
• HTML, CSS, JS code samples to use in future projects.