Skip to content
Logo mtc Berlin - Zur Startseite Logo mtc Berlin - Zur Startseite

Workflow in the Design Process

Accessibility in the Design Process

The design phase is a key point to think about accessibility from the start. Many potential barriers can be avoided already during conception and design. The following section describes the workflow for integrating accessibility into the design process – practical and role-based.

Goal of this workflow: Create a design that is visually appealing, functional and accessible for as many user groups as possible.

Why accessible design?

Accessible design not only meets ethical and legal requirements (e.g. BFSG, BITV), but also improves the general user experience for everyone. Common problems such as insufficient contrast, missing focus indicators or unclear labels can be avoided early on if accessibility is considered from the start.

Typical barriers in the design process:

  • Insufficient color contrasts

  • No visible focus indicators

  • Unclear or too small controls

  • Complex navigation structures

  • Missing or unclear labels

Workflow steps in overview:

  1. Analyze user needs

    • Inclusion of personas with disabilities

    • Comparison with typical usage scenarios of assistive technologies

  2. Design foundations for accessibility

    • Color contrasts: Selection of color combinations with sufficient contrast (min. 4.5:1 for normal text according to WCAG 2.1 / 2.2)

    • Typography: Readable fonts, minimum font size of 16 px, sufficient line spacing

  3. Define structure and interaction clearly

    • Consistent arrangement and clear visual hierarchy

    • Logical order in focus navigation

    • Clearly labeled buttons and icons – ideally with text or tooltip

  4. Standardize components

    • Building an accessible UI component library (design system)

    • Reusable patterns with documented accessibility requirements

  5. Annotate and document designs

    • Contrast information, keyboard accessibility, focus management (e.g. via Figma annotations or checklists)

    • Transfer instructions referring

  6. Team discussion

    • Regular design reviews with accessibility focus

    • Discussion with developers, UX writers and possibly test persons with disabilities

  7. Validation before transfer

    • Use tools like Stark, Contrast Ratio, Tota11y, Figma A11y Kit

Optional: Test prototypes with assistive technologies

Roles in the workflow:

  • UX Designers: User-centered design, derive requirements from user tests and WCAG

  • UI Designers: Implementation of visual clarity, interaction and focus management

  • Product management: Ensure compliance with requirements, deadlines and legal requirements

  • Development: Early integration for feasibility assessment

Results of the workflow:

  • Designs that meet accessibility criteria

  • Documented requirements for technical implementation

  • Reduced adaptation effort in later phases

Tip: A graphic overview or checklist can help establish this workflow company-wide. On request, such a presentation can be added.