Accessibility in the development phase

It is in the development phase that turn our accessibility decisions into accessible features! 

In the development phase, the application is built by developing the source code. 

• • • • Back-end development (server, database, API).
      • Development of the front-end (user interface, interactions).
      • Integration of third-party services (payment, authentication, analytics).
      • Implementation of unit and integration tests.

3 ways to develop code that is accessible from the start 

1. 1. 1. Use semantic HTML

• • • • • Favor <button> instead of <div> clickable.
        • Use <label> to correctly associate an <input> field.
        • Prioritize titles with <h1> → <h2> → <h3> for logical navigation. 

• • • • • All interactive elements must be accessible with the Tab key.
        • Always display a visible focus (custom outline if necessary).
        • Do not break keyboard navigation with tabindex="-1" or positive tabindexes on interactive elements.

Example of focus management: 

<a href="#contenu" id="skip">Skip to main content</a> 

<main id="content" tabindex="-1">... </main> 

The "Skip to content" link allows keyboard users to avoid repetitive navigation. 

• • • • • Check colors with tools like Contrast Checker (minimum 4.5:1 for normal text).
        • Do not use only color to convey information (e.g. error indicated by an icon and text).

3 ways to make interactive elements accessible 

1. 1. 1. 1. Screen reader compatibility

• • • • • Add ARIA attributes as needed (aria-label, aria-live, role, and so on).
        • Verify that error messages on forms are properly announced.

Example: 

<input type="text" id="email" aria-describedby="error-email"> 

<span id="error-email" role="alert">The email address must be in the format name@domain.com</span> 

The screen reader will automatically read the error when the user interacts with the field. 

• • • • • Add visual and audio feedback for actions (e.g. confirmation message).
        • Ensure a visible change of state on hover and focus.
        • Check that animations do not disturb sensitive users (prefers-reduced-motion).

CSS example: 

@media (prefers-reduced-motion: reduce) { 

  * { 

    animation: none; 

    transition: none; 

  } 

} 

• • • • • Using Semantic HTML
        • Smooth keyboard navigation
        • Focus and interaction management
        • Sufficient contrast and legible text
        • Screen reader compatibility
        • Automated and manual tests performed

What’s the next step?

In our next post, we’ll talk about accessibility during the testing phase!

In the meantime, if you have a project in mind, we love help making ideas more inclusive.
Tell us about your project!