Dirk Ginader

Preventing Accessibility Issues Instead Of Fixing Them

What if one hour of design could save four hours of development? Learn how to shift accessibility left and prevent costly fixes from the start.

Preventing Accessibility Issues Instead Of Fixing Them
#1about 3 minutes

The business case for shifting accessibility left

Investing one hour in UX for accessibility pre-launch can save four hours of engineering time post-launch.

#2about 3 minutes

Understanding the social model and spectrum of disability

Disability is a mismatch between an individual's needs and a product's design, which can be permanent, temporary, or situational.

#3about 7 minutes

Defining page structure with landmarks and headings

Use landmarks for broad page sections and a logical heading hierarchy to create a navigable content structure for all users.

#4about 5 minutes

Defining interaction flow and keyboard navigation patterns

Document exceptions to the natural reading order and use a combination of tab and arrow keys for navigating complex component groups.

#5about 3 minutes

Creating clear labels and roles for interactive elements

Write concise, action-oriented labels that describe function without repeating the element's role, and use the correct element for the job.

#6about 8 minutes

Using Figma plugins to automate accessibility checks

Leverage Figma plugins like eBay's "Include" to annotate landmarks, check color contrast, and simulate various forms of color blindness.

#7about 3 minutes

Ensuring proper touch target sizes and text scaling

Design interactive elements with a minimum touch target of 48x48 pixels and ensure the UI remains functional when text is scaled to 200%.

#8about 3 minutes

Collaborating on accessibility and finding resources

Effective accessibility requires close collaboration between designers, engineers, and writers, supported by external resources and user testing programs.

#9about 19 minutes

Q&A on practical accessibility challenges

The discussion covers topics like accessible floating action buttons, disabled button states, and debugging inconsistencies across different browsers and screen readers.

Related jobs
Jobs that call for the skills explored in this talk.

Matching moments

Making accessibility tooling actionable and encouraging
03:58 MIN

Making accessibility tooling actionable and encouraging

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Dealing with browser regressions and compatibility issues
12:00 MIN

Dealing with browser regressions and compatibility issues

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Building an accessible accordion with details and summary
05:59 MIN

Building an accessible accordion with details and summary

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Creating a modal with the native HTML dialog element
06:09 MIN

Creating a modal with the native HTML dialog element

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Featured Partners

Related Videos

See all videos
Data Mining Accessibility56:00

Data Mining Accessibility

Karl Groves

Shift Left On Accessibility - Geri Reid37:41

Shift Left On Accessibility - Geri Reid

Geri Reid

Going on a CODE100 Accessibility Scavenger Hunt35:39

Going on a CODE100 Accessibility Scavenger Hunt

Chris Heilmann & Daniel Cranney

Accessibility in React Application30:07

Accessibility in React Application

Julia Undeutsch

The What, Why, Who and How of accessibility on the web29:59

The What, Why, Who and How of accessibility on the web

Konstantin Tieber

WeAreDevelopers LIVE – Inclusion, Accessibility & Automation1:09:45

WeAreDevelopers LIVE – Inclusion, Accessibility & Automation

Chris Heilmann, Daniel Cranney & Daniela Kubesch

Accessibility powered by AI31:30

Accessibility powered by AI

Ramona Domen

Oh S***! There's a New Accessibility Law and I'm Not Ready!24:30

Oh S***! There's a New Accessibility Law and I'm Not Ready!

Emma Dawson

Related Articles

View all articles
DC
Daniel Cranney
Web Developer Portfolio Inspiration and Examples - March 2025
Every developer needs a portfolio… of some sort. Whether it’s an all-singing all-dancing portfolio page, a blog, or a simple links page, it’s important to let others know what you have done, what you can do, and how they can contact you. A portfolio ...
Web Developer Portfolio Inspiration and Examples - March 2025

From learning to earning

Jobs that call for the skills explored in this talk.