Accessibility by Design: accessibility in design decisions

I support your team as it defines journeys, screens and components. We review accessibility decisions before development and translate them into Figma annotations, specifications and acceptance criteria.

Clarify accessibility decisions before development

I support product leads, designers and developers in decisions that determine accessibility. The work makes explicit how journeys should behave and what the team needs to build and test.

When you need it
Before developing a new feature or while reviewing a product, when journeys and components can still be changed.
What I do
I review design decisions, document barriers and agree behaviours, priorities and acceptance criteria with the team.
What you receive
A shared reference for design, development and QA: Figma annotations, behaviour specifications and testable acceptance criteria.
What we need from you
Share the materials you have: a journey, a prototype or a Figma file. Together with design and development contacts, we define priority tasks and constraints.
Scope
We work on the agreed journeys and components. A prototype review does not establish the accessibility of the final code. Usability sessions with users are not included.
How we continue
We start from your current project stage. I propose priorities, deliverables and ways of working together; any implementation verification is agreed as part of the engagement.

What we review in your design

I examine decisions that affect how the product is used and connect them to practical guidance. For each area, I clarify what to change in the design and what to check in the implementation.

  • Journeys and content

    Find your way and complete tasks

    I review the sequence of steps, information hierarchy, labels and instructions. I assess how people recognise the result of an action and recover from errors.

    • Guidance on structure, wording and steps to clarify in priority journeys.
  • Visual design

    Read and use the interface

    I examine contrast, use of colour, readability, control sizes and content adaptation. I distinguish issues visible in a prototype from behaviours to test in a browser, such as magnification and reflow.

    • Guidance for layouts, visual states and relevant alternatives to images and media.
  • Components and interactions

    Define what the screen does not show

    I describe keyboard interaction, focus order and management, accessible names and state changes. I also examine loading, errors and confirmations to make expected behaviour explicit.

    • Annotations for components and variants that development and QA can use.
  • Requirements and constraints

    Connect the design to applicable requirements

    We define accessibility references starting with WCAG and the product context. We consider markets, existing components and technical constraints; open decisions remain documented and assigned to project leads.

    • Traceable requirements, acceptance criteria and decisions to resolve.

How we work with design and development

I collaborate with project leads when decisions are made. Each stage produces shared materials and explicit responsibilities, through to discussions with the people implementing the design.

  1. Scoping

    Agree scope and priorities

    We gather goals, user tasks, materials and constraints. We identify journeys to review, contacts and decisions that need discussion.

    • Agreed scope, initial requirements, deliverables and ways of working.
  2. Team review

    Discuss and document decisions

    I review journeys and components with design and development. We prepare Figma annotations, assess alternatives and resolve ambiguities before implementation.

    • Updated annotations, specifications and criteria; open decisions made explicit.
  3. Development handoff

    Share criteria with development and QA

    I clarify expected behaviours with developers and testers. The team builds the product; any implementation verification and retesting of fixes are defined in the engagement.

    • Implementation guidance and tests to run on developed components.

What your team takes away

Guidance needs to be usable in everyday work. For the agreed journeys and components, I prepare deliverables that connect design to development and QA tasks.

  • Requirements

    Requirements and acceptance criteria

    I document requirements and testable acceptance criteria: what the person must be able to do, how the interface should respond and which tests are needed. Your team can include them in development tasks and its definition of done.

  • Figma

    Support with accessibility annotations in Figma

    I work with designers on Figma files to prepare and review accessibility annotations. Alongside screens, components and variants, I document what the visual design alone cannot convey, so developers know which behaviour to implement and QA knows what to check.

  • Design system

    Reusable component guidance

    If your team uses a design system, I connect guidance to the reviewed components. We document states, usage rules and behaviours to retain in new features, checking them in context each time.

Visual examples of annotations for Figma

Two illustrative boards show how to connect a design element to guidance for development and QA. These are fictional examples, not screenshots of Figma files or client work. The numbered notes are also available as text on the page.

  • Dialog: opening, keyboard interaction and focus return

    Confirmation dialog on a design board, with three numbered callouts for the title, the Cancel button and the control that opens it.
    1. Dialog name

      The visible title “Send the request?” provides the dialog’s accessible name. On opening, the screen reader must identify the dialog and its title.

    2. Focus and keyboard

      In this example, initial focus is on “Cancel”. Tab and Shift+Tab stay within the dialog; Escape closes it without submitting. Background content is not interactive.

    3. Focus return

      On closing without submitting, focus returns to the “Review and send” button that opened the dialog. Behaviour is checked on the implemented component.

  • Form: labels, instructions and errors

    Email field in an error state, with three numbered callouts for the visible label, the instruction and the error message.
    1. Persistent label

      “Email (required)” stays visible after the field is filled in and is associated with it in code. The placeholder does not replace the label.

    2. Associated instruction

      The instruction explains which address to enter. It must be connected to the field so it is available to assistive technologies when the person fills it in.

    3. Understandable error

      The message describes the problem and how to fix it. In code, the error and invalid state are associated with the field; colour is accompanied by text and a symbol. The entered value is preserved.

Frequently asked questions

When to start, how to share materials and what can be checked during design.

When should you get involved in the project?

When journeys, content and components can still be changed, even before a complete prototype exists. We can start with a new feature or a review of an existing product. We agree the work based on the decisions still open.

How does support with Figma annotations work?

You share the files and we agree which journeys to review. I work with designers on annotations and we discuss them with developers to clarify behaviours, constraints and acceptance criteria. If you cannot share Figma, we can use screens or a specification document.

Does an accessible prototype guarantee an accessible product?

A prototype allows some decisions to be assessed and expected behaviour to be described. Code semantics, actual focus management and compatibility with assistive technologies must be checked in the implementation. Annotations guide this work; they do not prove its outcome on their own.

Can you work on an existing design system?

Yes. We start with the available components and rules, identify missing accessibility information and agree what to add. Each piece of guidance stays connected to the component and its states so it can be maintained as the system evolves.

Which regulatory references do you consider?

Those relevant to the project, including EN 301 549, Legge 4/2004, AgID Guidelines and the European Accessibility Act. The framework also depends on target markets and client requirements; the service is available for US and international projects. Language and documentation are agreed as part of the engagement.

Let’s talk about your project

Tell me what you are designing, your current stage and which decisions are still open. We can start with a journey, a component or a Figma file: you do not need to have written every requirement already.