!!! Work in Progress !!! This page is work in progress...

Introduction

To define requirements for Development, QA and functional testing

For testing feasibility of designs, implementation clarity and functional usability testing tasks when build, Design Annotations are a basic condition. They will help you understand where the gaps to be filled are and create a document with which you can enter the conversation. Without them is like a license to end up with an incomplete, less quality and possibly even wrong product.

By ensuring structure, consistency, navigation, behaviour, labels, components etc. we can lay down the blue print for inclusive products usable by all. Developers know exactly what to build en where to find the necessary information. When the product is build the functional test results are exactly what has been specified.

When done the designs must be secured by having it signed off by a Accessibility Champion.

Definition of Ready Vs. Definition of Done

UX Responsibilities

Developer Responsibilities

1 Inspect which options apply for your design

Understand what is needed to perfect your annotations

The most common options to be annotated can be choosen from the following lists. Only select those who apply to what you're working on at the moment and make sure they're fully worked out in details to be sure the functional requirements for the User Experience is present and can be tested accordingly.

Structure and Viewports

Structure

  • Containers, Landmarks: Containers should be used to describe page/screen structure, as supported by the platform.
  • Headings: Content must provide a logical and hierarchical heading structure, as supported by the platform.
  • Links vs Buttons: Links and other actionable elements must be clearly distinguishable.
  • Data tables: ...

Device sizing

  • Desktop: ...
  • Tablet: ...
  • Mobile: ...
  • Watch: ...

Style, Elements and Widgets

Style and colour contrast

UIC and Widgets

Focus, Order and Interaction

Focus and content order

  • Content order: The order of the content must be logical.
  • Focus order: Actionable content must be navigable in a meaningful sequence.
  • Keyboard Interaction: ...
  • Focus management: All interactive elements must be focusable and non-interactive elements must not be focusable.

Alternatives

  • Text alternatives: Alternatives must briefly describe the editorial intent or purpose of the image, object, or element.
  • Alternate Content: Alternative delivery, such as subtitles, sign language, audio description and transcripts, must be provided with embedded media when available.
  • Visible / Hidden states: ...

2 Research the Standards and Examples

Use standards over custom design patterns.

When your selection from step 1 is made you'll need to research what the AUX / Inclusive Design Principles are based on Industry Standards. This research consists of all information related to the working of the page / view and its structure, the design choices, the best UIC for the task to be completed and the specific working of widgets and their relation with other parts.

  • Accessibility logo

    Structure and Viewports

    • Containers, Landmarks: Containers should be used to describe page/screen structure, as supported by the platform.
    • Structure, Reading / focus Order
    • Alternatives and Variations
  • Accessibility logo

    Style, Elements and Widgets

    • Containers, Landmarks: Containers should be used to describe page/screen structure, as supported by the platform.
    • Structure, Reading / focus Order
    • Alternatives and Variations
  • Accessibility logo

    Focus, Order and Interaction

    • For Roles
    • For entire Component
    • State Types
    • State Colors

3 Choose the correct pattern and design

Great design starts by thinking about how to make products work for everyone.

While innovation is embedded in the way of technical exploration it should improve the User Experience, not make it more difficult. Using global conventions, native elements / widgets and interaction patterns should be the primary choice at all times as they are of high quality and accessible by default.

  • Woman with glasses and a cane

    Maria Beuving (72)

    In order to read her emails she uses Zoom text.

    • Developer
    • UX
    • CJE

Text

  • Text

4 Annotate all not clear from the design alone

An accurate selection of quality tools can help you find a wide range of accessibility issues.

What I need to annotate and when

  • aXe logo

    aXe

    A browser extension and JS library for automated testing.

    • Developer

Text

  • Text

5 Have it signed by a A11Y Champ

Four quality trainings to get you started with accessibility.

Text

  • Text