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.

#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.