Skip to content
All posts

Accessibility in the development phase

Picture of Karine Simard By  Karine Simard  ·  1 minute read

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. 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. 
          2. Properly manage focus and keyboard 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. 

           3. Validate the use of colors 
          • 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. 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. 

                2. Properly manage interactive states
          • 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; 

  } 

} 

 

               3. Create an accessibility checklist
          • 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!