Accessibility in the design phase

Accessibility must be integrated from the design phase to ensure an inclusive experience for all users, including those with disabilities. A preventive approach reduces correction costs and improves the quality of the final product. 

 

In the design phase, we work on designing the technical architecture and the user experience. 

• • • Creation of mock-ups and wireframes (UI/UX).
    • Definition of the software architecture (back-end, front-end, database).
    • Choice of technologies (frameworks, languages, databases).

4 ways to integrate accessibility into the design of the project:  

1. Use accessibility-enabled tools 
   1. Figma, Axure RP, Sketch: Add accessibility annotations to designs.
   2. Stark, Axis for Figma → Check contrasts and test colors.
2. Create personas that include users with disabilities
   1. Example: "Sophie, 35 years old, visually impaired, uses a screen reader and navigates mainly on the keyboard."
   2. Test user journeys to see if they are accessible to different profiles.
3. Document best practices
   1. Add descriptions for images (alt text in mock-ups).
   2. Define a clear hierarchy of titles and content (H1, H2, H3, etc.).
   3. Include focus state on interactive components
   4. Think about error handling (error states, messages, interactivity)
4. Working collaboratively with developers
   1. 1. Clearly communicate accessibility requirements (e.g., provide a style guide with validated contrasts).
      2. Validate prototypes together with accessibility testing from the beginning.
      3. Test with assistive technologies prior to implementation to be able to recommend the right integration techniques (e.g., keyboard navigation, Wave, VoiceOver, NVDA). 

To go further

You can read a bit more about assistive technologies by checking out our recent blog post here!

Do you have a project that requires a good digital partner like Ciao?  Tell us about it!