Correction des problèmes d'accessibilité WCAG 2.2 des sites Web

1.1.1 Contenu non textuel

Chaque image, icône ou autre élément non textuel doit comporter une description textuelle qui transmet la même information ou remplit la même fonction.

Correction des rôles de présentation et des états masqués sur le contenu décoratif

Les éléments graphiques décoratifs et le contenu non textuel qui ne transmettent aucune information significative devraient être masqués aux technologies d'assistance, comme les lecteurs d'écran. Les utilisateurs de technologies d'assistance peuvent ainsi se concentrer sur le contenu significatif.

Dans le code HTML, repérez le contenu décoratif qui ne fournit aucune information ni fonctionnalité significative.

1. Pour les éléments <svg> décoratifs, ajoutez l'attribut aria-hidden="true" à l'élément <svg>.

2. Pour les autres contenus non textuels décoratifs, comme un élément <img> utilisé uniquement comme bordure, un élément <object> utilisé uniquement pour la mise en forme ou un élément <area> utilisé pour des effets visuels, ajoutez l'attribut role="presentation".

3. Si l'élément non textuel décoratif possède déjà un attribut role, remplacez-le par role="presentation".

Exemple

!-- Incorrect -->
<svg width="100" height="100">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="3"
    fill="red"
  />
</svg>
<!-- Correct -->
<svg width="100" height="100" aria-hidden="true">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="3"
    fill="red"
  />
</svg>

1.2.1 Contenu audio seul et vidéo seule (préenregistrés)

Tout contenu audio ou vidéo préenregistré sans image ou sans son doit comporter une transcription textuelle qui fournit la même information.

Correction des transcriptions audio manquantes

Fournir une transcription textuelle du contenu audio permet à tous les utilisateurs, y compris ceux qui sont sourds ou malentendants, d'accéder à la même information.

1. Dans le code HTML, repérez l'élément <audio>.

2. Après l'élément <audio>, ajoutez un élément <p>.

3. Dans l'élément <p>, saisissez la transcription complète du contenu audio sous forme de texte.

Exemple

<!-- Incorrect -->
<video src="training-overview.mp4" controls>
</video> 

<!-- Correct -->
<video src="training-overview.mp4" controls>
<track src="training-overview-en.vtt" kind="captions" srclang="en" label="English">
</video> 

Correction des sous-titres manquants dans les vidéos Vimeo intégrées

Les vidéos Vimeo doivent comporter des sous-titres afin d'être accessibles aux utilisateurs sourds ou malentendants. Vimeo permet d'ajouter des sous-titres dans les paramètres de la vidéo.

1. Ouvrez la vidéo sur vimeo.com.

2. Connectez-vous avec le compte propriétaire de la vidéo.

3. Accédez à Paramètres.

4. Sélectionnez l'onglet Distribution, puis ouvrez Sous-titres (ou Avancé > Sous-titres dans les anciennes dispositions).

5. Repérez la section Sous-titres/CC.

6. Téléversez un fichier de sous-titres .vtt ou .srt.

7. Enregistrez vos modifications, puis vérifiez que les sous-titres sont activés en prévisualisant la vidéo.

Remarque : Les sous-titres s'afficheront automatiquement dans l'élément <iframe> intégré s'ils sont activés sur Vimeo.

Correction des sous-titres manquants dans les vidéos YouTube intégrées

Les vidéos YouTube doivent comporter des sous-titres afin que les utilisateurs sourds ou malentendants puissent accéder au contenu parlé. YouTube offre des options de téléversement manuel de sous-titres ou de sous-titrage automatique.

1. Ouvrez la vidéo sur youtube.com avec le compte propriétaire de la vidéo.

2. Accédez à YouTube Studio et sélectionnez la vidéo que vous souhaitez modifier.

3. Cliquez sur Sous-titres dans le menu de gauche.

4. Choisissez la langue de vos sous-titres.

5. Cliquez sur Ajouter et sélectionnez l'une des options suivantes :

   • Importer un fichier (pour les fichiers .vtt ou .srt)

   • Synchronisation automatique (collez la transcription complète et laissez YouTube la synchroniser)

   • Saisir manuellement

6. Vérifiez et publiez vos sous-titres.

1.3.1 Information et relations

Toute information présentée au moyen de la mise en page, de la mise en forme ou de la structure visuelle doit aussi être disponible sous forme de texte ou être codée afin que les technologies d'assistance puissent la comprendre.

Correction des rôles de repère ARIA manquants dans la structure de la page

Les rôles de repère aident les utilisateurs de lecteurs d'écran à comprendre la mise en page et à accéder rapidement aux sections principales.

1. Dans votre code HTML, repérez les éléments de structure (p. ex. <div>, <section>, <form>).

2. Ajoutez le rôle de repère ARIA approprié à l'aide de l'attribut role (p. ex. role="main", role="navigation", role="form"). En savoir plus sur le rôle de repère approprié.
   Remarque : N'ajoutez des rôles ARIA que si l'élément n'a pas déjà de rôle de repère intégré (p. ex. l'élément <nav> joue déjà le rôle navigation).

Exemple

<!-- Incorrect -->
<div id="main-content">
<p>Welcome to our website.</p>
</div>

<!-- Correct -->
<div id="main-content" role="main">
<p>Welcome to our website.</p>
</div>

Correction de l'absence de fieldset ou de groupe pour les champs de saisie portant le même nom

Les boutons radio ou les cases à cocher qui portent le même nom doivent être regroupés afin que leur relation soit claire. Les utilisateurs de lecteurs d'écran comprennent ainsi que ces champs de saisie vont ensemble.

1. Dans le code HTML, repérez les boutons radio ou les cases à cocher qui partagent le même attribut name.

2. Placez les champs de saisie associés dans un élément <fieldset>.

3. Ajoutez un élément <legend> comme premier élément dans l'élément <fieldset> pour décrire le groupe.

Vous pouvez aussi placer les champs de saisie dans un conteneur doté de role="group" ou de role="radiogroup" et fournir une étiquette à l'aide de aria-labelledby ou de aria-label.

Exemple

<!-- Incorrect -->
<label>
  <input type="checkbox" name="city"> Toronto
</label>
<label>
  <input type="checkbox" name="city"> London
</label>
<!-- Correct -->
<fieldset>
  <legend>Select your location</legend>
  <label>
    <input type="checkbox" name="city"> Toronto
  </label>
  <label>
    <input type="checkbox" name="city"> London
  </label>
</fieldset>
<!-- Correct -->
<div role="group" aria-label="Select your location">
  <label>
    <input type="checkbox" name="city"> Toronto
  </label>
  <label>
    <input type="checkbox" name="city"> London
  </label>
</div>

Correction des éléments <li> sans élément parent

Veiller à ce que les éléments de liste soient placés dans un élément de liste aide les lecteurs d'écran à identifier correctement le contenu regroupé.

1. Dans le code HTML, repérez les éléments <li> qui ne sont pas contenus dans un élément <ul> ou <ol>.

2. Placez les éléments <li> dans un élément <ul> (pour une liste à puces) ou <ol> (pour une liste numérotée).

Exemple

<!-- Incorrect -->
<li>First item</li>
<li>Second item</li>
<!-- Correct -->
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

Correction des problèmes de structure des listes de description (DL)

Les listes de description servent à présenter des paires d'informations liées, comme un terme et son explication. Lorsque la liste n'est pas structurée correctement, les lecteurs d'écran peuvent lire le contenu dans le désordre ou dérouter les utilisateurs.

1. Dans votre code HTML, repérez les éléments <dl> signalés.

2. Dans l'élément <dl>, placez le terme dans un élément <dt>.

3. Dans un élément <dt>, placez la description à l'intérieur d'un élément <dd>.

4. Supprimez tout autre élément placé directement dans l'élément <dl>, sauf s'il se trouve dans un élément <dt> ou <dd>.

Exemple

<!-- Incorrect -->
<dl>
  <p>HTML</p>
  <p>A markup language for web pages.</p>
</dl>
<!-- Correct -->
<dl>
  <dt>HTML</dt>
  <dd>A markup language for web pages.</dd>
</dl>

Correction des termes de définition (DT) et des descriptions de définition (DD) non contenus dans une liste de description (DL)

Les termes de définition (<dt>) et les descriptions de définition (<dd>) doivent toujours être contenus dans une liste de description (<dl>). Lorsque des éléments <dt> ou <dd> sont utilisés en dehors d'un élément <dl>, les lecteurs d'écran peuvent lire le contenu dans le désordre ou dérouter les utilisateurs.

1. Dans votre code HTML, repérez les éléments <dt> ou <dd> signalés.

2. Assurez-vous que chaque élément <dt> et <dd> est placé dans un élément <dl>. Si le contenu ne fait pas partie d'une liste de description, remplacez <dt> et <dd> par un élément approprié (p. ex. <h2>, <h3>, <p>).

Exemple

<!-- Incorrect -->
<dt>CSS</dt>
<dd>A language used to style web pages.</dd>
<!-- Correct -->
<dl>
  <dt>CSS</dt>
  <dd>A language used to style web pages.</dd>
</dl>

Correction de l'utilisation incorrecte de l'attribut scope dans les tableaux

Lorsqu'un tableau utilise l'attribut scope, celui-ci doit être appliqué uniquement aux cellules d'en-tête (<th>) afin de définir clairement à quelles cellules de données elles se rapportent. Des valeurs scope incorrectes ou manquantes peuvent empêcher les technologies d'assistance d'associer correctement les en-têtes aux données du tableau. 

1. Dans votre code HTML, repérez l'attribut scope signalé ou les éléments de tableau concernés.
2. Modifiez l'attribut scope de manière à garantir que :
   1. L'attribut scope est appliqué uniquement aux éléments <th>.
   2. Chaque élément <th> possède une valeur scope appropriée, comme col, row, colgroup ou rowgroup.
   3. La valeur de votre attribut scope reflète fidèlement la structure et les relations du tableau.

Exemple

<!-- Incorrect -->
<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <th>Alice</th>
    <td>95</td>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>95</td>
  </tr>
</table>

<!-- Incorrect -->
<table>
  <tr>
    <th scope="column1">Name</th>
    <th scope="column2">Score</th>
  </tr>
  <tr>
    <th scope="row1">Alice</th>
    <td>95</td>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Score</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>95</td>
  </tr>
</table>

Correction de l'utilisation incorrecte de l'attribut headers au lieu de scope dans les tableaux

Les tableaux doivent contenir des cellules de données (<td>) décrites par des en-têtes de tableau (<th>). Les tableaux qui comportent des en-têtes mais aucune cellule de données ne fournissent pas de relations significatives pour les technologies d'assistance et peuvent semer la confusion chez les utilisateurs de lecteurs d'écran.

Dans votre code HTML, repérez les éléments de tableau signalés qui contiennent des éléments <th> mais aucun élément <td> correspondant.

Modifiez la structure du tableau de manière à garantir que :

1. Chaque tableau comprend un ou plusieurs éléments <td> contenant des données.

2. Les éléments <th> sont utilisés uniquement lorsqu'ils décrivent de véritables données de tableau.

3. Les tableaux utilisés uniquement pour la mise en page ou la présentation ne comprennent pas d'éléments <th>.

4. Si le tableau ne contient pas de données, supprimez-le ou remplacez-le par un balisage autre qu'un tableau.

Exemple

<!-- Incorrect -->
<table>
  <tr>
    <th scope="col">Name</th>
  </tr>
</table>
<!-- Correct -->
<table>
  <tr>
    <th scope="col">Name</th>
  </tr>
  <tr>
    <td>John</td>
  </tr>
</table>

Correction du regroupement ARIA incorrect pour le rôle « group »

Une utilisation appropriée des rôles ARIA aide les lecteurs d'écran à comprendre la structure de la page, ce qui permet aux personnes en situation de handicap de naviguer plus facilement dans le contenu et d'interagir avec celui-ci.

1. Dans le code HTML, repérez l'élément doté de role="group".

2. Dans l'élément, incluez au moins un élément de contrôle interactif (p. ex. <input>, <textarea> ou <select>).
   Remarque : En savoir plus sur les contrôles interactifs à inclure. S'il n'y a aucun contrôle interactif approprié, envisagez de remplacer role="group" par un rôle ou une structure ARIA plus appropriés.

Exemple

<!-- Incorrect -->
<div role="group">
<p>This is a group with no interactive elements.</p>
</div>   

<!-- Correct -->
<div role="group">
<label for="username">Username:</label>
<input id="username" type="text">
</div>

Correction du regroupement ARIA incorrect pour le rôle « radiogroup »

Une utilisation appropriée des rôles ARIA aide les lecteurs d'écran à comprendre la structure de la page, ce qui permet aux personnes en situation de handicap de naviguer plus facilement dans le contenu et d'interagir avec celui-ci.

1. Dans le code HTML, repérez l'élément doté de role="radiogroup".

2. Dans l'élément, incluez au moins un élément bouton radio (p. ex. <input type="radio"> ou role="radio").

Exemple

<!-- Incorrect -->
<div role="radiogroup">
<p>Select a delivery method:</p>
</div>   

<!-- Correct -->
<div role="radiogroup" aria-label="Select a delivery method">
<label><input type="radio" name="delivery" value="standard"> Standard </label><br>
<label><input type="radio" name="delivery" value="express"> Express </label><br>
<label><input type="radio" name="delivery" value="overnight"> Overnight</label>
</div>

Correction du regroupement ARIA incorrect pour le rôle « checkbox »

Une utilisation appropriée des rôles ARIA aide les lecteurs d'écran à comprendre la structure de la page, ce qui permet aux personnes en situation de handicap de naviguer plus facilement dans le contenu et d'interagir avec celui-ci.

1. Dans le code HTML, repérez <input type="checkbox"> ou un élément doté de role="checkbox".

2. Placez les cases à cocher dans un conteneur et attribuez-lui role="group".

3. Ajoutez un attribut aria-labelledby ou aria-label à l'élément doté de role="checkbox" pour décrire l'objectif du groupe de cases à cocher.

Exemple

<!-- Incorrect -->
<div><label><input type="checkbox" id="news"> Newsletter</label><br>
<label><input type="checkbox" id="updates"> Product Updates</label><br>
<label><input type="checkbox" id="offers"> Special Offers</label>
</div> 

<!-- Correct -->
<div role="group" aria-labelledby="emailPref">
<p id="emailPrefsLabel">Which types of emails would you like to receive?</p>
<label><input type="checkbox" id="news"> Newsletter</label><br>
<label><input type="checkbox" id="updates"> Product Updates</label><br>
<label><input type="checkbox" id="offers"> Special Offers</label>
</div>

Correction du regroupement ARIA incorrect pour le rôle « radio »

Une utilisation appropriée des rôles ARIA aide les lecteurs d'écran à comprendre la structure de la page, ce qui permet aux personnes en situation de handicap de naviguer plus facilement dans le contenu et d'interagir avec celui-ci.

1. Dans le code HTML, repérez <input type="radio"> ou un élément doté de role="radio".

2. Regroupez les boutons radio dans l'élément doté de role="radiogroup".

3. Ajoutez un attribut aria-labelledby ou aria-label à l'élément pour décrire l'objectif du groupe de boutons radio.

Exemple

<!-- Incorrect -->
<label><input type="radio" name="contact"> Email</label><br>
<label><input type="radio" name="contact"> Phone</label><br>
<label><input type="radio" name="contact"> Text Message</label>
</div>   

<!-- Correct -->
<div role="radiogroup" aria-labelledby="contactMethod">
<p id="contactMethodLabel">How would you like us to contact you?</p>
<label><input type="radio" name="contact"> Email</label><br>
<label><input type="radio" name="contact"> Phone</label><br>
<label><input type="radio" name="contact"> Text Message</label>
</div>  

Correction de l'attribut aria-level manquant sur les rôles de titre

Les rôles de titre ARIA doivent comporter un niveau de titre défini pour plus de clarté.

1. Dans le code HTML, repérez l'élément doté de l'attribut role="heading".

2. Après l'attribut role, ajoutez l'attribut aria-level avec une valeur comprise entre 1 et 6 (p. ex. aria-level="2").

Exemple

<!-- Incorrect -->
<div role="heading">Subsection Title</div> 

<!-- Correct -->
<div role="heading" aria-level="2">Subsection Title</div>

Correction des en-têtes de tableau manquants

Les en-têtes de tableau aident les lecteurs d'écran à comprendre la signification de chaque colonne ou ligne. Si un tableau n'a pas d'en-têtes, les technologies d'assistance ne peuvent pas fournir le bon contexte aux utilisateurs.

1. Dans votre code HTML, repérez l'élément <table> et identifiez la première ligne. Cette ligne doit définir les en-têtes du tableau (p. ex. « Nom », « Âge », etc.).

2. Si la première ligne utilise des éléments <td> (données de tableau), remplacez chaque <td> par un <th> (en-tête de tableau) pour indiquer que ces cellules sont des en-têtes.

3. Ajoutez scope="col" à chaque élément <th> s'il s'agit d'un en-tête de colonne, ou scope="row" s'il s'agit d'un en-tête de ligne.

Exemple

<!-- Incorrect -->
<table>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table>

<!-- Correct -->
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>  
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table>

<!-- Incorrect -->
<ul>
<li><strong>Name:</strong> Ava</li>
<li><strong>Age:</strong> 25</li>
</ul>  

<!-- Correct -->
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
<tr>
<td>Ava</td>
<td>25</td>
</tr>
</table> 

Correction de la structure de liste incorrecte

<!-- Incorrect -->
<li>First item</li>
<li>Second item</li>  

<!-- Correct -->
<ul>
<li>First item</li>
<li>Second item</li>
</ul>

<!-- Incorrect -->
<dt>HTML</dt>
<dd>A markup language</dd>

<!-- Correct -->
<dl>
<dt>HTML</dt>
<dd>A markup language</dd>
</dl>

<!-- Incorrect --> <fieldset><label for="name">Name:</label><input id="name" type="text"></fieldset>

<!-- Correct --> <fieldset><legend>Personal Information</legend><label for="name">Name:</label><input id="name" type="text"></fieldset>
 

<meta name="apple-mobile-web-app-orientation" content="any">

Correction des problèmes d'orientation liés à la balise meta viewport

Les paramètres de la fenêtre d'affichage (viewport) qui verrouillent l'orientation de l'écran ou désactivent le zoom peuvent rendre la lecture et l'interaction avec le contenu plus difficiles. Autoriser les orientations portrait et paysage, ainsi que le zoom, offre aux utilisateurs la souplesse dont ils ont besoin selon leur appareil et leurs besoins personnels.

1. Dans votre code HTML, repérez la balise meta name="viewport".
2. Supprimez tous les attributs liés aux restrictions d'orientation, comme orientation=portrait ou orientation=landscape.
3. Supprimez tous les attributs qui empêchent le zoom, comme maximum-scale=1 ou user-scalable=no.
4. Enregistrez vos modifications et rechargez la page.

Exemple

<!-- Incorrect --> 
<meta name="viewport" content="width=device-width, maximum-scale=1, orientation=portrait"> 

<!-- Correct--> 
<meta name="viewport" content="width=device-width">

Correction des problèmes d'orientation CSS

Les requêtes média CSS qui verrouillent le contenu en mode portrait ou paysage peuvent limiter la façon dont les utilisateurs interagissent avec une page. La suppression de ces restrictions permet au contenu de s'adapter aux deux orientations.

1. Dans votre code CSS, repérez les requêtes média qui limitent l'orientation, comme :
   • @media screen and (orientation: portrait){ … }
   • @media screen and (orientation: landscape) { … }
2. Supprimez ces requêtes média propres à l'orientation afin que le contenu puisse s'adapter librement aux deux orientations.
3. Enregistrez vos modifications et rechargez la page.

Exemple :

<!-- Incorrect --> 
@media screen and (orientation: portrait) { 
.container { 
width: 400px; 
 } 
}

<!-- Correct--> 
.container { 
width: 400px;

 

1.3.5 Identifier la finalité de la saisie