> Markdown version of [/videos/804-preventing-accessibility-issues-instead-of-fixing-them?t=922](https://www.wearedevelopers.com/videos/804-preventing-accessibility-issues-instead-of-fixing-them?t=922). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Preventing Accessibility Issues Instead Of Fixing Them

By moving accessibility to the UX phase, teams eliminate costly post-launch fixes. Discover how one hour of proactive design investment saves four hours of engineering.

- **Speakers:** Dirk Ginader
- **Event:** WeAreDevelopers LIVE
- **Published:** November 3, 2023
- **Duration:** 56:01
- **URL:** https://www.wearedevelopers.com/videos/804-preventing-accessibility-issues-instead-of-fixing-them

## Summary

Moving accessibility considerations to the UX and design phases—a practice known as "shifting left"—prevents costly engineering fixes post-launch. Rather than treating accessibility as an afterthought or mere compliance checklist, proactive organizations embrace the social model of disability. This approach treats user difficulty as a mismatch between individual needs and a product's design, actively considering permanent, temporary, and situational constraints. By embedding this awareness early, teams build fundamentally more robust digital environments tailored for real-world unpredictability.

Implementing this strategy requires equipping designers to integrate structural logic directly into their mockups. Using Figma annotation tools, such as eBay's Include plugin, allows teams to define precise structural landmarks (like main, banner, and abstract regions) and maintain strict, CSS-independent heading hierarchies. For interactive elements, it is crucial to clearly distinguish roles so that assistive technologies announce intents correctly. Good label annotations use concise action verbs without redundantly hardcoding the element's role into the text itself (e.g., avoiding "create album button button").

Instead of exhaustively mapping every step of a page's tab sequence, teams work much more efficiently when they selectively document only reading and focus order exceptions, such as initial component focus overrides or transitions from tab to arrow keys for complex card groups. Designers must enforce practical usability baselines by validating touch targets of at least 48x48 pixels and confirming the UI remains intact under a 200% text magnification. Ultimately, fostering this shared structural language among designers, UX writers, and developers delivers a massive return on investment, proving that "for every hour that a UX designer invests... we can save around four hours in engineering."

**Keywords:** shift left accessibility, figma accessibility annotations, social model of disability, screen reader compatibility, ui landmark roles, keyboard navigation patterns, aria label best practices, focus order exceptions, touch target sizing, wcag compliance strategies, color contrast checking, component focus states, accessibility personas, text scaling simulation, design system handoff

## Chapters

1. **Business case for shifting accessibility to the left** (00:00) — Moving accessibility requirements to the user experience design phase prevents defects and reduces engineering remediation time.
1. **Understanding accessibility personas and disability models** (03:46) — The social model of disability reframes usability problems as structural design failures across permanent, temporary, and situational contexts.
1. **Validating accessible designs through real user testing** (06:56) — Engaging individuals with disabilities during early prototype testing provides nuanced interaction feedback impossible to get from static personas.
1. **Defining page structure with landmark roles and labels** (08:07) — Semantic landmark regions ensure non-visual interface users can quickly scan and navigate core page content areas without visual cues.
1. **Organizing content logically using semantic heading structures** (12:55) — A strictly descending heading hierarchy provides an immediate structural overview without relying on visual type scaling.
1. **Designing linear reading order and keyboard focus indicators** (15:22) — Documenting tab exception flows and customized cursor interactions ensures seamless keyboard navigation for complex widget groupings.
1. **Crafting concise labels and defining interactive element roles** (20:35) — Action-oriented textual labels paired with correct semantic roles prevent redundancy and ambiguity during screen reader interactions.
1. **Automating accessibility checks using digital design tool plugins** (23:44) — Incorporating accessibility plugins directly into design editors allows proactive validation of contrast, target sizing, and alternative text requirements.
1. **Documenting custom widget interactions for engineering handoff** (33:06) — Explicitly noting aria patterns and control flows avoids misinterpretations between interface designers and frontend product developers.
1. **Utilizing external guidelines and trusted tester resources** (35:21) — Leveraging dedicated accessibility communities and beta testing programs helps feature teams refine their inclusive digital strategies.
1. **Managing complex components like floating and disabled buttons** (37:29) — Supplying explicit context for hidden label behaviors and deciding whether disabled inputs retain keyboard focus impacts overall interface discoverability.
1. **Preserving accessibility metadata during automated code generation** (41:48) — While artificial intelligence accelerates design-to-code pipelines, manual structural validation remains essential to prevent critical semantic information loss.
1. **Adhering to accessibility standards within agile product iterations** (43:56) — Integrating structural design checks early in minimal viable products offsets the architectural debt generated by fast-paced startup development cycles.
1. **Addressing inconsistent screen reader and browser environments** (46:33) — Strictly following documented web standards minimizes rendering failures across highly subjective operating system and accessibility tool setups.
1. **Building a business case to secure stakeholder investment** (54:09) — Calculating the compounding cost of retroactive interface bug fixes provides a compelling financial argument for proactive inclusive design strategies.

## Related Moments

- [Addressing web accessibility challenges in development teams](https://www.wearedevelopers.com/videos/649-making-interactions-accessible-to-all-users) (from "Making Interactions Accessible to All Users")
- [Annotating design inputs to capture frontend developer accessibility requirements](https://www.wearedevelopers.com/videos/1712-shift-left-on-accessibility-geri-reid) (from "Shift Left On Accessibility - Geri Reid")
- [Introduction to building accessible web frontends](https://www.wearedevelopers.com/videos/403-the-what-why-who-and-how-of-accessibility-on-the-web) (from "The What, Why, Who and How of accessibility on the web")
- [Integrating accessibility early in the software development lifecycle](https://www.wearedevelopers.com/videos/1361-wearedevelopers-live-is-software-ever-truly-accessible) (from "WeAreDevelopers LIVE - Is Software Ever Truly Accessible?")
- [Treating accessibility as a collaborative product team effort](https://www.wearedevelopers.com/videos/1671-oh-s-there-s-a-new-accessibility-law-and-i-m-not-ready) (from "Oh S***! There's a New Accessibility Law and I'm Not Ready!")
- [Overcoming challenges in building accessible interfaces](https://www.wearedevelopers.com/videos/1589-building-interactive-async-ui-with-react-19-and-ariakit) (from "Building Interactive Async UI with React 19 and Ariakit")

## Related Articles

- [How Developers Can Focus on Maintaining Satisfaction With Accessibility](https://www.wearedevelopers.com/magazine/109-how-developers-can-focus-on-maintaining-satisfaction-with-accessibility)
- [Diversity Equity And Inclusion in Programming For Persons With Disability](https://www.wearedevelopers.com/magazine/80-diversity-equity-and-inclusion-in-programming-for-persons-with-disability)
- [The State of Accessibility on the Web in 2025: WebAIM Million Report Findings](https://www.wearedevelopers.com/magazine/570-the-state-of-accessibility-on-the-web-in-2025-webaim-million-report-findings)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)

## Related Jobs

- [Senior Product UI Designer](https://www.wearedevelopers.com/jobs/ext/1998621-senior-product-ui-designer) at **Almedia**
- [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**
- [Working Student Frontend Development](https://www.wearedevelopers.com/jobs/ext/1185791-working-student-frontend-development) at **ZEISS Group**
- [Software Engineer Frontend (all genders welcome) in the field of Water Line Integrity Solutions](https://www.wearedevelopers.com/jobs/ext/127888-software-engineer-frontend-all-genders-welcome-in-the-field-of-water-line-integrity-solutions) at **Rosenxt Group**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**