diff options
Diffstat (limited to 'files/fr/web/accessibility/aria/aria_live_regions/index.html')
| -rw-r--r-- | files/fr/web/accessibility/aria/aria_live_regions/index.html | 20 |
1 files changed, 12 insertions, 8 deletions
diff --git a/files/fr/web/accessibility/aria/aria_live_regions/index.html b/files/fr/web/accessibility/aria/aria_live_regions/index.html index f6a3f6027f..9c921bac5e 100644 --- a/files/fr/web/accessibility/aria/aria_live_regions/index.html +++ b/files/fr/web/accessibility/aria/aria_live_regions/index.html @@ -8,11 +8,11 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions original_slug: Accessibilité/ARIA/Zones_live_ARIA --- -<h2 id="Introduction_2"><span class="mw-headline" id="Introduction">Introduction </span></h2> +<h2 id="Introduction_2">Introduction </h2> <p>Dans le passé, un changement dans une page web débouchait souvent sur une relecture intégrale, ce qui agaçait souvent l’utilisateur, ou au contraire très peu ou pas de lecture du tout, rendant inaccessible une partie, voire l’ensemble des informations. Jusqu’à récemment, les lecteurs d’écran n’étaient en mesure d’améliorer cela du fait de l’absence d’éléments standardisés pour prévenir le lecteur d’écran d’un changement. Les zones « live » ARIA comblent cette lacune et fournissent des solutions aux lecteurs d’écran afin de savoir si et comment interrompre l'utilisateur lors d’un changement.</p> -<h2 id="Zones_«_live_»_basiques"><span class="mw-headline" id="Live_Region_State">Zones « live » basiques</span></h2> +<h2 id="Zones_«_live_»_basiques">Zones « live » basiques</h2> <p>Le contenu dynamique qui s’actualise sans rechargement de la page est généralement une zone ou un composant d’interface. Les changements de contenu simples, sans interaction possible, devraient être marqués comme des zones « live ». Ci-dessous, voici une liste de chaque propriété relative à une zone « live » ARIA et sa description.</p> @@ -20,8 +20,12 @@ original_slug: Accessibilité/ARIA/Zones_live_ARIA <dt>aria-live :</dt> <dd>L’attribut <code>aria-live=VALEUR_POLITESSE</code> est utilisé pour définir la priorité avec laquelle le lecteur d’écran devrait traiter une mise à jour dans une zone « live » – les valeurs possibles sont : <code>off</code>/<code>polite</code>/<code>assertive</code>. La valeur par défaut est <code>off</code>. Cet attribut est de loin le plus important.</dd> <dt>aria-controls :</dt> - <dd>L’attribut <code>aria-controls=[LISTE_IDs]</code> est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un <code>ID</code> dans un élément {{ HTMLElement("div") }}, et plusieurs zones peuvent être associées à un unique contrôle, en séparant les identifiants des zones par un espace, par exemple : <code>aria-controls="maZoneID1 maZoneID2"</code>.</dd> - <dd class="warning">Nous ne savons pas si <code>aria-controls</code> pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires.</dd> + <dd><p>L’attribut <code>aria-controls=[LISTE_IDs]</code> est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un <code>ID</code> dans un élément {{ HTMLElement("div") }}, et plusieurs zones peuvent être associées à un unique contrôle, en séparant les identifiants des zones par un espace, par exemple : <code>aria-controls="maZoneID1 maZoneID2"</code>.</p> + <div class="warning"> + <p><strong>Attention :</strong>Nous ne savons pas si <code>aria-controls</code> pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires. + </p> + </div> + </dd> </dl> <p>Normalement, seul <code>aria-live="polite"</code> est utilisé. Toute zone recevant une mise à jour qu’il est important de faire suivre à l’utilisateur, mais pas au point de le déranger dans sa navigation, devrait recevoir cet attribut. Le lecteur d’écran lira les changements dès que l’utilisateur sera inoccupé.</p> @@ -34,7 +38,7 @@ original_slug: Accessibilité/ARIA/Zones_live_ARIA <p><code><select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select></code></p> -<pre class="brush: html" id="bird-selector"><div role="region" id="bird-info" aria-live="polite"></pre> +<pre class="brush: html"><div role="region" id="bird-info" aria-live="polite"></pre> <p>Lorsque l’utilisateur sélectionne un nouvel oiseau, l’information est lue. Du fait de la valeur <code>polite</code>, le lecteur d’écran attendra une pause de la part de l’utilisateur. Ainsi, descendre dans la liste ne déclenchera pas la lecture pour chaque oiseau visité par l’utilisateur, mais uniquement pour celui qui sera finalement choisi.</p> @@ -42,7 +46,7 @@ original_slug: Accessibilité/ARIA/Zones_live_ARIA <p>Dans les cas prédéfinis répandus ci-dessous, il est préférable d’utiliser un des rôles de zone « live » spécifique fourni :</p> -<table style="width: 100%;"> +<table> <thead> <tr> <th scope="col">Rôle</th> @@ -103,11 +107,11 @@ original_slug: Accessibilité/ARIA/Zones_live_ARIA <dd>L’attribut <code>aria-describedby=[LISTE_ID]</code> est utilisé pour associer une ou des descriptions à une zone. Le fonctionnement est similaire à celui d'<code>aria-controls </code>mais les références d'id pointent vers les textes descriptifs associés aux blocs identifiés, et les références multiples sont également séparées par un espace.</dd> </dl> -<h3 id="Cas_d’étude_avancé_liste_de_contacts"><span class="mw-headline" id="Use_Case:_Roster">Cas d’étude avancé : liste</span> de contacts</h3> +<h3 id="Cas_d’étude_avancé_liste_de_contacts">Cas d’étude avancé : liste de contacts</h3> <p>Un site de chat voudrait afficher la liste des utilisateurs actuellement connectés. L'affichage de la liste des utilisateurs doit alors refléter l’état de connexion ou de déconnexion des utilisateurs de manière dynamique (sans actualisation de la page).</p> -<pre class="language-html"><ul id="roster" aria-live="polite" aria-relevant="additions removals"> +<pre class="brush: html"><ul id="roster" aria-live="polite" aria-relevant="additions removals"> <!-- utilisez JavaScript ici pour ajouter/supprimer des utilisateurs--> </ul> </pre> |