diff options
49 files changed, 480 insertions, 751 deletions
diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index 912e785d97..8cf2403990 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -22,8 +22,6 @@ /fr/docs/Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA /fr/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ /fr/docs/Accessibilité/ARIA/Guides_ARIA /fr/docs/Web/Accessibility/ARIA/ARIA_Guides /fr/docs/Accessibilité/ARIA/Techniques_ARIA /fr/docs/Web/Accessibility/ARIA/ARIA_Techniques -/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Modele_Technique_ARIA /fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/ARIA_Technique_Template -/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utilisation_du_groupe_rôle /fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role /fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utilisation_du_groupe_switch /fr/docs/Web/Accessibility/ARIA/Roles/Switch_role /fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby /fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute /fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid /fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute @@ -48,7 +46,6 @@ /fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider /fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role /fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status /fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role /fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox /fr/docs/Web/Accessibility/ARIA/Roles/textbox_role -/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_toolbar /fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role /fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert /fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role /fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_article /fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role /fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_button /fr/docs/Web/Accessibility/ARIA/Roles/button_role diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index e80b0abae4..55ab4a59da 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -22171,13 +22171,6 @@ "Fredchat" ] }, - "Web/Accessibility/ARIA/ARIA_Techniques/ARIA_Technique_Template": { - "modified": "2019-03-23T23:17:02.348Z", - "contributors": [ - "BenoitL", - "Fredchat" - ] - }, "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role": { "modified": "2019-03-23T23:16:30.067Z", "contributors": [ @@ -22330,12 +22323,6 @@ "Goofy" ] }, - "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role": { - "modified": "2019-03-18T21:16:59.818Z", - "contributors": [ - "paul.bignier" - ] - }, "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role": { "modified": "2019-03-23T23:14:53.364Z", "contributors": [ @@ -22352,12 +22339,6 @@ "Fredchat" ] }, - "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role": { - "modified": "2019-03-23T23:15:02.491Z", - "contributors": [ - "Fredchat" - ] - }, "Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs": { "modified": "2019-03-23T22:43:55.753Z", "contributors": [ diff --git a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html index 6e0e55a51d..5c3e8b8a90 100644 --- a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html +++ b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -14,7 +14,7 @@ original_slug: >- <h2 id="Problématique">Problématique</h2> -<p>La plupart des librairies JavaScript proposent des composants côté client qui miment le comportement familier des interfaces de bureaux classiques. Carrousels, barres de menu et d’autres composants peuvent être créés avec JavaScript, CSS et HTML. Mais du moment que les spécifications HTML 4 ne proposaient pas de tags pour décrire sémantiquement ce type de composants, les développeurs se contentaient d'éléments génériques tel que le tag <code><div></code> ou le tag <code><span></code>. Or, si d’apparence ces composants ressemblaient parfaitement à ceux spécifiques aux applications de bureau, on ne disposait pas d'informations sémantiques suffisantes pour les rendres accessibles aux technologies d’assistance. L’accès au contenu dynamique d’une page Web peut devenir problématique plus particulièrement pour les utilisateurs qui, pour une raison ou pour une autre ne peuvent pas voir l’écran. Les niveaux de stock, les indicateurs de progression... modifient le DOM de telle sorte que les technologies d'assistance n’y ont pas accès. C'est dans ce contexte que <a href="/fr/ARIA" title="ARIA">ARIA</a> entre en jeu.</p> +<p>La plupart des librairies JavaScript proposent des composants côté client qui miment le comportement familier des interfaces de bureaux classiques. Carrousels, barres de menu et d’autres composants peuvent être créés avec JavaScript, CSS et HTML. Mais du moment que les spécifications HTML 4 ne proposaient pas de tags pour décrire sémantiquement ce type de composants, les développeurs se contentaient d'éléments génériques tel que le tag <code><div></code> ou le tag <code><span></code>. Or, si d’apparence ces composants ressemblaient parfaitement à ceux spécifiques aux applications de bureau, on ne disposait pas d'informations sémantiques suffisantes pour les rendres accessibles aux technologies d’assistance. L’accès au contenu dynamique d’une page Web peut devenir problématique plus particulièrement pour les utilisateurs qui, pour une raison ou pour une autre ne peuvent pas voir l’écran. Les niveaux de stock, les indicateurs de progression... modifient le DOM de telle sorte que les technologies d'assistance n’y ont pas accès. C'est dans ce contexte que <a href="/fr/ARIA">ARIA</a> entre en jeu.</p> <p><em>Exemple 1: Code d</em>’<em>une tabulation sans informations ARIA. Il n'y a aucune information permettant de décrire la forme du widget et ses fonctions.</em></p> @@ -38,14 +38,14 @@ original_slug: >- </div></pre> <p><em>Example 2: Telles qu'elles sont représentées ci-dessous, les tabulations peuvent être reconnues en tant que tel par les utilisateurs. Or aucune information sémantique exploitable par une technologie d</em>’<em>assistance n</em>’<em>est présente.</em><br> - <img alt="Screenshot of the tabs widget" class="default internal" src="/@api/deki/files/4926/=Tabs_Widget.png"></p> + <img alt="Screenshot of the tabs widget" src="tabs_widget.png"></p> <h2 id="ARIA">ARIA</h2> <p><a href="https://www.w3.org/WAI/standards-guidelines/aria/">WAI-ARIAI</a>, les spécifications concernant les applications <strong>internet "riches" et accessibles</strong> sont publiées par l’iniative du <a href="https://www.w3.org/WAI/">W3C sur l’accessibilité</a>, et fournissent la sémantique essentielle au bon fonctionnement des lecteurs d'écran. ARIA permet aux développeurs de décrire en quelque sorte leurs widgets plus finement en ajoutant des attributs spéciaux à leurs balises. Ces spécifications comblent le vide qui existait entre les spécifications du standard HTML et des widgets. ARIA spécifie des rôles et des états permettant de décrire en quelque sorte le fonctionnement des widgets d’interfaces utilisateurs les plus connus.</p> <div class="warning"> -<p>Beaucoup d’entre eux ont été ajouté plus tard dans HTML5, et <strong>les développeurs devraient toujours préférer utiliser la balise HTML correspondante plutôt qu’utiliser ARIA</strong>.</p> +<p><strong>Attention :</strong> Beaucoup d’entre eux ont été ajouté plus tard dans HTML5, et <strong>les développeurs devraient toujours préférer utiliser la balise HTML correspondante plutôt qu’utiliser ARIA</strong>.</p> </div> <p>Les spécifications ARIA distinguent 3 types d’attributs : rôles, états et propriétés. Les rôles sont utilisés pour les widgets ne faisant pas partie des spécifications HTML 4 comme des sliders, menus, barres, boites de dialogue... Les propriétés sont utilisées pour représenter les caractéristiques de ces widgets, elles décrivent les caractéristiques de ces widgets comme s'il sont déplaçables avec la souris, requièrent un élément ou ont un popup associés à eux. Les états, comme leur nom l'indique, servent à representer l'état actuel de ces éléments en informant les technologies d'assistance s'il est occupé, désactivé, sélectionné ou masqué.</p> @@ -126,7 +126,7 @@ original_slug: >- <p><em>Exemple 2c. JavaScript pour mettre à jour l'attribut aria-checked.</em></p> -<pre class="brush: javascript">var showTip = function(el) { +<pre class="brush: js">var showTip = function(el) { el.setAttribute('aria-hidden', 'false'); }</pre> @@ -138,10 +138,6 @@ original_slug: >- <p>Ne faites pas ça. À la place, il vaut mieux implémenter le mode "vue" avec un autre élément, comme {{ HTMLElement("div") }} ou {{ HTMLElement("span") }} avec un <strong><code>role</code></strong> de <code>button</code>, et le mode "édition" avec un élément texte {{ HTMLElement("input") }}.</p> -<h3 id="Mise_à_jour_asynchrone_de_contenu">Mise à jour asynchrone de contenu</h3> - -<div class="note">En construction. Voir aussi <a href="https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/Zones_live_ARIA" title="Live Regions">Live Regions</a></div> - <h2 id="La_navigation_au_clavier">La navigation au clavier</h2> <p>Souvent, les développeurs négligent la prise en charge du clavier lorsqu’ils créent des widgets personnalisés. Pour être accessible à une large gamme d’utilisateurs, toutes les fonctionnalités d’une application Web ou d’un widget doivent également pouvoir être contrôlées avec le clavier, sans nécessiter de souris. En pratique, cela implique généralement de suivre les conventions prises en charge par des widgets similaires sur le bureau, en tirant pleinement partie des touches <kbd>Tab</kbd>, <kbd>Entrée</kbd>, <kbd>Espace</kbd> et des flèches.</p> @@ -158,16 +154,16 @@ original_slug: >- <li>En cas de doute, imitez le comportement standard du bureau du contrôle que vous créez.</li> </ul> -<p>Ainsi, pour l’exemple de widget Tabs ci-dessus, l’utilisateur devrait être capable de naviguer dans le conteneur du widget (le <ol> dans notre balisage) en utilisant les touches <kbd>Tab</kbd> et <kbd><kbd>Maj</kbd>+<kbd>Tab</kbd></kbd>. Une fois que le focus du clavier est à l’intérieur du conteneur, les touches fléchées devraient permettre à l’utilisateur de naviguer entre chaque onglet (les éléments <li>). De là, les conventions varient d’une plateforme à l’autre. Sous Windows, l’onglet suivant doit être automatiquement activé lorsque l’utilisateur appuie sur les touches fléchées. Sous Mac OS X, l’utilisateur peut appuyer sur <kbd>Entrée</kbd> ou sur <kbd>Espace</kbd> pour activer l’onglet suivant. Un tutoriel en profondeur pour créer <a href="https://developer.mozilla.org/fr/docs/Contr%C3%B4les_DHTML_personnalis%C3%A9s_navigables_au_clavier" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Widget navigables grâce à des contrôles Javascript </a>comme décrit ici afin de montrer comment avoir ce comportement en JS.</p> +<p>Ainsi, pour l’exemple de widget Tabs ci-dessus, l’utilisateur devrait être capable de naviguer dans le conteneur du widget (le <ol> dans notre balisage) en utilisant les touches <kbd>Tab</kbd> et <kbd><kbd>Maj</kbd>+<kbd>Tab</kbd></kbd>. Une fois que le focus du clavier est à l’intérieur du conteneur, les touches fléchées devraient permettre à l’utilisateur de naviguer entre chaque onglet (les éléments <li>). De là, les conventions varient d’une plateforme à l’autre. Sous Windows, l’onglet suivant doit être automatiquement activé lorsque l’utilisateur appuie sur les touches fléchées. Sous Mac OS X, l’utilisateur peut appuyer sur <kbd>Entrée</kbd> ou sur <kbd>Espace</kbd> pour activer l’onglet suivant. Un tutoriel en profondeur pour créer <a href="/fr/docs/Contr%C3%B4les_DHTML_personnalis%C3%A9s_navigables_au_clavier">Widget navigables grâce à des contrôles Javascript </a>comme décrit ici afin de montrer comment avoir ce comportement en JS.</p> -<p>Pour plus de détails à propos de ces conventions de navigation au clavier, un aperçu ici <a class="external" href="http://dev.aol.com/dhtml_style_guide" title="http://dev.aol.com/dhtml_style_guide">DHTML style guide</a> est disponible. Il délivre un aperçu de la façon dont la navigation au clavier devrait fonctionner pour chaque type de widget pris en charge par ARIA. Le W3C offre également un document utile <a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">ARIA Best Practices</a> qui inclut la navigation au clavier et les raccourcis pour une variété de widgets.</p> +<p>Pour plus de détails à propos de ces conventions de navigation au clavier, un aperçu ici <a href="http://dev.aol.com/dhtml_style_guide">DHTML style guide</a> est disponible. Il délivre un aperçu de la façon dont la navigation au clavier devrait fonctionner pour chaque type de widget pris en charge par ARIA. Le W3C offre également un document utile <a href="http://www.w3.org/WAI/PF/aria-practices/Overview.html">ARIA Best Practices</a> qui inclut la navigation au clavier et les raccourcis pour une variété de widgets.</p> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA" title="ARIA">ARIA</a></li> - <li><a href="https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/FAQ_Applications_Web_et_ARIA" title="Web applications and ARIA FAQ">Des applications WEB et la FAQ ARIA</a></li> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Spécification</a></li> - <li><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">WAI-ARIA Best Practices</a></li> - <li><a class="external" href="http://dev.aol.com/dhtml_style_guide" title="http://dev.aol.com/dhtml_style_guide">DHTML Style Guide</a></li> + <li><a href="/fr/docs/Accessibilit%C3%A9/ARIA">ARIA</a></li> + <li><a href="/fr/docs/Accessibilit%C3%A9/ARIA/FAQ_Applications_Web_et_ARIA">Des applications WEB et la FAQ ARIA</a></li> + <li><a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Spécification</a></li> + <li><a href="http://www.w3.org/WAI/PF/aria-practices/Overview.html">WAI-ARIA Best Practices</a></li> + <li><a href="http://dev.aol.com/dhtml_style_guide">DHTML Style Guide</a></li> </ul> 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> diff --git a/files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html b/files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html deleted file mode 100644 index 6c12a65e37..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Modèle Technique ARIA -slug: Web/Accessibility/ARIA/ARIA_Techniques/ARIA_Technique_Template -tags: - - ARIA - - Accessibilité -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/ARIA_Technique_Template -original_slug: Accessibilité/ARIA/Techniques_ARIA/Modele_Technique_ARIA ---- -<div> - <div> - <h3 id="Description">Description</h3> - <p> </p> - <h3 id="Effets_possibles_sur_les_agents_utilisateur_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateur et les technologies d’assistance </h3> - <p> </p> - <div class="note"> - <strong>Note :</strong> les opinions diffèrent sur la façon dont les technologies d’assistance devraient traiter ces techniques. Les informations fournies ci-dessus sont une de ces opinions et ne sont en aucune manière normatives.</div> - <h3 id="Exemples">Exemples</h3> - <h4 id="Exemple_1">Exemple 1 : </h4> - <p> </p> - <pre class="brush: html">Code </pre> - <h4 id="Exemples_fonctionnels">Exemples fonctionnels :</h4> - <h3 id="Notes">Notes </h3> - <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> - <h3 id="Techniques_ARIA_associées">Techniques ARIA associées </h3> - <h3 id="Compatibilité">Compatibilité</h3> - <p class="commentaire">TBD : Ajouter les informations de prise en charge des combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance</p> - <h3 id="Autres_ressources">Autres ressources</h3> - </div> -</div> -<p> </p> diff --git a/files/fr/web/accessibility/aria/aria_techniques/index.html b/files/fr/web/accessibility/aria/aria_techniques/index.html index 8672e2db8c..58c2d37553 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/index.html @@ -12,21 +12,21 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA <h3 id="Rôles">Rôles</h3> <h4 id="Rôles_de_composant_d’interface">Rôles de composant d’interface</h4> <ul> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alert" title="Utiliser le rôle alert">Alert</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog" title="Utiliser le rôle alertdialog">Alertdialog</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_button" title="Utiliser le rôle button">Button</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox" title="Utiliser le rôle checkbox">Checkbox</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_dialog" title="Utiliser le rôle dialog">Dialog</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link" title="Utiliser le rôle link">Link</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log" title="Utiliser le rôle log">Log</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alert">Alert</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog">Alertdialog</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_button">Button</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox">Checkbox</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_dialog">Dialog</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link">Link</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log">Log</a></li> <li>Marquee</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar" title="Utiliser le rôle progressbar">Progressbar</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_radio" title="Utiliser le rôle radio">Radio</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar">Progressbar</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_radio">Radio</a></li> <li>Scrollbar</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider" title="Utiliser le rôle slider">Slider</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider">Slider</a></li> <li>Spinbutton</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status" title="Utiliser le rôle link">status</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox" title="Utiliser le rôle textbox">textbox</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status">status</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox">textbox</a></li> <li>Timer</li> <li>Tooltip</li> </ul> @@ -35,33 +35,33 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA <ul> <li>Grid (tableau, contenant les rôles <code>row</code> (ligne), <code>gridcell</code> (cellule), <code>rowheader</code> (en-tête de ligne) et <code>columnheader</code> (en-tête de colonne))</li> <li>Menubar / Menu (contenant les rôles <code>menuitem</code>, <code>menuitemcheckbox</code> et <code>menuitemradio</code>)</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox" title="Utiliser le rôle listbox">Listbox</a> (boîte de liste, contenant le rôle <code>option</code>)</li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox">Listbox</a> (boîte de liste, contenant le rôle <code>option</code>)</li> <li>Tablist (boîte à onglets, contenant les rôles <code>tab</code> et <code>tabpanel</code>)</li> <li>Tree (arbre, contenant les rôles <code>group</code> et <code>treeitem</code>)</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_radio" title="Utiliser le rôle radio">Radiogroup (voir le rôle <code>Radio</code>)</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_radio">Radiogroup (voir le rôle <code>Radio</code>)</a></li> <li>Treegrid</li> </ul> <h4 id="Rôles_de_structure_de_document">Rôles de structure de document</h4> <ul> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_article" title="Utiliser le rôle article">Article</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_article">Article</a></li> <li>Definition</li> <li>Directory</li> <li>Document</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group" title="Utiliser le rôle group">Group</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group">Group</a></li> <li>Heading</li> <li>Img</li> <li>List, listitem</li> <li>Math</li> <li>Note</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation" title="Utiliser le rôle presentation">Presentation</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation">Presentation</a></li> <li>Region</li> <li>Separator</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_toolbar" title="Utiliser le rôle toolbar">Toolbar</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_toolbar">Toolbar</a></li> </ul> <h4 id="Rôles_de_points_de_repère">Rôles de points de repère</h4> <ul> <li>Application</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner" title="Utiliser le rôle banner">Banner</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner">Banner</a></li> <li>Complementary</li> <li>Contentinfo</li> <li>Form</li> @@ -78,21 +78,21 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA <li>aria-expanded</li> <li>aria-haspopup</li> <li>aria-hidden</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid" title="Utiliser l’attribut aria-invalid">aria-invalid</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label" title="Utiliser l’attribut aria-labelledby">aria-label</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid">aria-invalid</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label">aria-label</a></li> <li>aria-level</li> <li>aria-multiline</li> <li>aria-multiselectable</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation" title="Utiliser l’attribut aria-orientation">aria-orientation</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation">aria-orientation</a></li> <li>aria-pressed</li> <li>aria-readonly</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required" title="Utiliser l’attribut aria-required">aria-required</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required">aria-required</a></li> <li>aria-selected</li> <li>aria-sort</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Utiliser l’attribut aria-required">aria-valuemax</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Utiliser l’attribut aria-valuemin">aria-valuemin</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Utiliser l’attribut aria-valuenow">aria-valuenow</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l’attribut aria-valuetext">aria-valuetext</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax">aria-valuemax</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin">aria-valuemin</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow">aria-valuenow</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext">aria-valuetext</a></li> </ul> <h4 id="Attributs_de_zones_«_live_»">Attributs de zones « live »</h4> <ul> @@ -108,11 +108,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA </ul> <h4 id="Attributs_de_relation">Attributs de relation</h4> <ul> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-activedescendant" title="Utiliser l’attribut aria-activedescendant">aria-activedescendant</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-activedescendant">aria-activedescendant</a></li> <li>aria-controls</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby" title="Utiliser l’attribut aria-labelledby">aria-describedby</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">aria-describedby</a></li> <li>aria-flowto</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="Utiliser l’attribut aria-labelledby">aria-labelledby</a></li> + <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby">aria-labelledby</a></li> <li>aria-owns</li> <li>aria-posinset</li> <li>aria-setsize</li> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html index 54ee617393..075b85ac58 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html @@ -11,9 +11,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert --- <h3 id="Description">Description</h3> -<div class="summary"> -<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#alert" hreflang="en" title="http://www.w3.org/TR/wai-aria/roles#alert"><code>alert</code> (en)</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> -</div> +<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#alert"><code>alert</code> (en)</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> <p>Le rôle <code>alert</code> est utilisé pour communiquer un message important et généralement avec une notion d'urgence à l’utilisateur. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement d'alerte accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. Le rôle <code>alert</code> est le plus utile lorsqu’il s’agit d’attirer l’attention de l’utilisateur, par exemple si :</p> @@ -41,7 +39,9 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert <li>Les loupes ou agrandisseurs d’écran peuvent indiquer qu’une alerte est survenue et quel en est le texte.</li> </ul> -<div class="note"><strong>Note :</strong> plusieurs points de vue existent sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"> + <p><strong>Note :</strong> plusieurs points de vue existent sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p> +</div> <h3 id="Exemples">Exemples</h3> @@ -101,28 +101,24 @@ document.getElementById("expirationWarning").className = ""; </pre> <ul> <li>L’utilisation du rôle <code>alert</code> sur un élément implique que cet élément a l’attribut <code>aria-live="assertive"</code> ;</li> <li>Le rôle <code>alert</code> ne devrait être utilisé que pour du contenu texte statique. L’élément sur lequel on utilise le rôle <code>alert</code> ne devrait pas pouvoir recevoir le focus, car les lecteurs d’écran annonceront automatiquement l’alerte où que se trouve le focus clavier ;</li> - <li>Si une alerte fournit également des contrôles interactifs – tels que des contrôles de formulaire qui permettraient à l’utilisateur de rectifier une erreur, ou un bouton <code>OK</code> pour annuler l’alerte – le rôle <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog" title="Utiliser le rôle alertdialog"><code>alertdialog</code></a> est préférable.</li> + <li>Si une alerte fournit également des contrôles interactifs – tels que des contrôles de formulaire qui permettraient à l’utilisateur de rectifier une erreur, ou un bouton <code>OK</code> pour annuler l’alerte – le rôle <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog"><code>alertdialog</code></a> est préférable.</li> </ul> <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#alert" hreflang="en" title="http://www.w3.org/TR/wai-aria/roles#alert">alert (en)</a></li> + <li><a href="http://www.w3.org/TR/wai-aria/roles#alert">alert (en)</a></li> </ul> <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> <ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog" title="Utiliser le rôle alertdialog">Utiliser le rôle <code>alertdialog</code></a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_la_propriété_aria-invalid" title="Utiliser la propriété aria-invalid">Utiliser la propriété <code>aria-invalid</code></a>.</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog">Utiliser le rôle <code>alertdialog</code></a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_la_propriété_aria-invalid">Utiliser la propriété <code>aria-invalid</code></a>.</li> </ul> -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h3 id="Autres_ressources">Autres ressources</h3> <ul> - <li>Guide des bonnes pratiques ARIA - Rôle <code>Alert</code> : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#alert" hreflang="en" title="http://www.w3.org/TR/wai-aria-practices/#alert">http://www.w3.org/TR/wai-aria-practices/#alert (en)</a></li> + <li>Guide des bonnes pratiques ARIA - Rôle <code>Alert</code> : <a href="http://www.w3.org/TR/wai-aria-practices/#alert">http://www.w3.org/TR/wai-aria-practices/#alert (en)</a></li> </ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html index ee5e2c62f4..70f746dff9 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html @@ -11,11 +11,9 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog --- <h3 id="Description">Description</h3> -<div class="summary"> -<p>Cette technique présente l’utilisation du rôle <code><a class="external" href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog" title="WAI-ARIA Roles #alertdialog">alertdialog</a></code> role.</p> -</div> +<p>Cette technique présente l’utilisation du rôle <code><a href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog">alertdialog</a></code> role.</p> -<p>Le rôle <code>alertdialog</code> est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, <code>alertdialog</code> est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’<a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role" title="Utiliser le rôle dialog">utilisation du rôle <code>dialog</code></a> s’appliquent également au rôle <code>alertdialog</code> :</p> +<p>Le rôle <code>alertdialog</code> est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, <code>alertdialog</code> est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’<a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role">utilisation du rôle <code>dialog</code></a> s’appliquent également au rôle <code>alertdialog</code> :</p> <ul> <li>La boîte de dialogue d’alerte doit toujours avoir un nom accessible (attribué à l’aide de <code>aria-labelledby</code> ou de <code>aria-label</code>) et, dans la plupart des cas, le texte d’alerte sera marqué comme étant la description accessible de la boîte de dialogue d’alerte (définie avec de l’attribut <code>aria-describedby</code>).</li> @@ -27,7 +25,9 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog <p>Du fait de sa nature urgente, les boîtes de dialogues d’alertes doivent toujours être modales.</p> -<div class="note"><strong>Note :</strong> ce rôle ne devrait être utilisé que pour des messages d’alertes associés à des contrôles interactifs. Si une boîte de dialogue d’alerte ne comporte que du contenu statique et qu’elle ne possède absolument aucun contrôle interactif, <code>alertdialog</code> n’est probablement pas le rôle le plus judicieux à utiliser. Le rôle <code>alert</code> est plus adapté pour ce cas (comme décrit dans l’article sur la technique d’<a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alert" title="Utiliser le rôle alert">utilisation du rôle <code>alert</code></a>).</div> +<div class="note"> + <p><strong>Note :</strong> ce rôle ne devrait être utilisé que pour des messages d’alertes associés à des contrôles interactifs. Si une boîte de dialogue d’alerte ne comporte que du contenu statique et qu’elle ne possède absolument aucun contrôle interactif, <code>alertdialog</code> n’est probablement pas le rôle le plus judicieux à utiliser. Le rôle <code>alert</code> est plus adapté pour ce cas (comme décrit dans l’article sur la technique d’<a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alert">utilisation du rôle <code>alert</code></a>).</p> +</div> <h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> @@ -42,7 +42,9 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog <p>Lorsque la boîte de dialogue est correctement labélisée et que le focus se place sur un contrôle qu’elle contient, les lecteurs d’écran devraient annoncer le rôle accessible de la boîte de dialogue, son nom et éventuellement sa description, avant d’annoncer l’élément qui a reçu le focus.</p> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"> + <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p> +</div> <h3 id="Exemples">Exemples</h3> @@ -67,20 +69,14 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#dialog" title="http://www.w3.org/TR/wai-aria/roles#dialog">alertdialog</a> ;</li> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" title="States and Properties #aria-labelledby">aria-labelledby</a> ;</li> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby" title="States and Properties #aria-describedby">aria-describedby</a>.</li> + <li><a href="http://www.w3.org/TR/wai-aria/roles#dialog">alertdialog</a> ;</li> + <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">aria-labelledby</a> ;</li> + <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a>.</li> </ul> <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> <ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog" title="Utiliser le rôle dialog">Utiliser le rôle <code>dialog</code></a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert" title="Utiliser le rôle alert">Utiliser le rôle <code>alert</code></a>.</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog">Utiliser le rôle <code>dialog</code></a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert">Utiliser le rôle <code>alert</code></a>.</li> </ul> - -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - -<h3 id="Autres_ressources">Autres ressources</h3> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html index 8921f74a84..5a2a646678 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html @@ -20,7 +20,9 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-desc <h2 id="possible_effects_on_user_agents_and_assistive_technology">Effets possibles sur les agents utilisateurs et les technologies d'assistance</h2> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d'assistance devraient traiter cette technique. L'information fournie ci-dessus est l'une de ces opinions et n'est pas normative.</div> +<div class="note"> + <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d'assistance devraient traiter cette technique. L'information fournie ci-dessus est l'une de ces opinions et n'est pas normative.</p> +</div> <h2 id="examples">Exemples</h2> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html index 66429091ce..c75af66bb9 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html @@ -10,9 +10,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-inva --- <h3 id="Description">Description</h3> -<div class="summary"> -<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid" title="States and Properties #aria-invalid"><code>aria-invalid</code></a>.</p> -</div> +<p>Cette technique présente l’utilisation de l’attribut <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid"><code>aria-invalid</code></a>.</p> <p>L’attribut <code>aria-invalid</code> est utilisé pour indiquer que la valeur saisie dans un champ de saisie n’est pas conforme au format attendu par l’application. Cela comprend les formats tels que les adresses électroniques ou les numéros de téléphone. <code>aria-invalid</code> peut également être utilisé pour indiquer qu’un champ obligatoire n’a pas été rempli. L’attribut devrait être programmatiquement défini comme étant le résultat du processus de validation.</p> @@ -39,7 +37,9 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-inva <p>Les agents utilisateurs devraient informer l’utilisateur lorsqu’un champ n’est pas valide. Les développeurs d’applications devraient fournir des suggestions pour la correction du problème, lorsque c’est possible. Les auteurs devraient empêcher la soumission de formulaires contenant des erreurs.</p> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournit ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"> + <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournit ci-dessus est l’une de ces opinions et n’est pas normative.</p> +</div> <h3 id="Exemples">Exemples</h3> @@ -90,7 +90,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-inva } </pre> -<p>Remarquez que le <code>rôle</code> ARIA de l’alerte est définit comme étant <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert" title="Using the alert role"><code>"alert"</code></a>.</p> +<p>Remarquez que le <code>rôle</code> ARIA de l’alerte est définit comme étant <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert"><code>"alert"</code></a>.</p> <h3 id="Notes">Notes</h3> @@ -106,17 +106,13 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-inva <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> <ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required" title="Using the aria-required property">Utiliser l’attribut <code>aria-required</code></a></li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert" title="Utiliser le rôle alert">Utiliser le rôle <code>alert</code></a></li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required">Utiliser l’attribut <code>aria-required</code></a></li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert">Utiliser le rôle <code>alert</code></a></li> </ul> -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h3 id="Autres_ressources">Autres ressources</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid" title="States and Properties #aria-invalid">Spécification WAI-ARIA de la propriété <code>aria-invalid</code></a></li> - <li><a class="external" href="http://www.w3.org/TR/wai-aria-practices/#ariaform" title="http://www.w3.org/TR/wai-aria-practices/#ariaform">WAI Authoring Practices for forms</a> (Règles WAI de création de formulaires)</li> + <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid">Spécification WAI-ARIA de la propriété <code>aria-invalid</code></a></li> + <li><a href="http://www.w3.org/TR/wai-aria-practices/#ariaform">WAI Authoring Practices for forms</a> (Règles WAI de création de formulaires)</li> </ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html index 499d15aa29..54c971151f 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html @@ -19,21 +19,21 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labe <h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"> + <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p> +</div> <p>Les lecteurs d'écran lisent le contenu textuel de cet attribut.</p> <h2 id="Usage">Usage</h2> -<p>L’attribut <code>aria-label</code> ne doit être utilisé que lorsque le texte d’un label <em>n’est pas</em> visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="Utiliser l’attribut aria-labelledby">aria-labelledby</a>.</p> +<p>L’attribut <code>aria-label</code> ne doit être utilisé que lorsque le texte d’un label <em>n’est pas</em> visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby">aria-labelledby</a>.</p> <p>Cet attribut peut être utilisé avec n’importe quel élément HTML. Néanmoins, il n'est pas nécessaire de l'utiliser si l'élément possède déjà un mécanisme pour légender son contenu. Par exemple l'élément <code><label></code> pour les éléments de formulaire, ou l'attribut <code>alt</code> pour les images.</p> <h3 id="Valeur">Valeur</h3> -<div class="textbody"> <p>Une légende sous forme de chaîne de caractère.</p> -</div> <h2 id="Exemples">Exemples</h2> @@ -61,15 +61,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labe <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> <ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby" title="Utiliser l’attribut aria-labelledby">Utiliser l’attribut <code>aria-labelledby</code></a>.</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby">Utiliser l’attribut <code>aria-labelledby</code></a>.</li> </ul> -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h3 id="Autres_ressources">Autres ressources</h3> <ul> - <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-label" title="States and Properties #aria-label">Spécification WAI-ARIA pour aria-label</a>.</li> + <li><a href="https://www.w3.org/TR/wai-aria/#aria-label">Spécification WAI-ARIA pour aria-label</a>.</li> </ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html index 8138705e0a..2602081deb 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -10,13 +10,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labe --- <h3 id="Description">Description</h3> -<div class="summary"> -<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a>.</p> -</div> +<p>Cette technique présente l’utilisation de l’attribut <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a>.</p> <p>L’attribut <code>aria-labelledby</code> est utilisé pour indiquer les ID des éléments qui labellisent l’objet. Il est utilisé pour établir une relation entre les composants, ou les groupes, et leurs labels. Les utilisateurs de technologies d’assistance telles que les lecteurs d’écran, naviguent généralement dans un document en tabulant entre les zones de l’écran. Si un label n’est pas associé à un élément de saisie, un composant ou un groupe, il ne sera pas lu par le lecteur d’écran.</p> -<p><code>aria-labelledby</code> est très similaire à l’attribut <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby" title="Using_the_aria-describedby_attribute">aria-describedby</a> : un label décrit la nature d’un objet, alors qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur.</p> +<p><code>aria-labelledby</code> est très similaire à l’attribut <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">aria-describedby</a> : un label décrit la nature d’un objet, alors qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur.</p> <p>L’attribut <code>aria-labelledby</code> n’est pas uniquement utilisé avec les éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis.</p> @@ -30,7 +28,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labe <h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> -<p>Lorsque les deux attributs <code>aria-labelledby</code> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_aria-label_attribute" title="Using the aria-labelledby attribute"><code>aria-label</code></a> sont utilisés, les agents utilisateurs donnent la priorité à <code>aria-labelledby</code> lors du calcul de la propriété de nom accessible.</p> +<p>Lorsque les deux attributs <code>aria-labelledby</code> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_aria-label_attribute"><code>aria-label</code></a> sont utilisés, les agents utilisateurs donnent la priorité à <code>aria-labelledby</code> lors du calcul de la propriété de nom accessible.</p> <h3 id="Exemples">Exemples</h3> @@ -38,7 +36,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labe <p>Dans l’exemple ci-dessous, chaque champ de saisie est labellisé à la fois avec son propre label individuel et avec le label pour le groupe :</p> -<pre class="brush: html notranslate"><div id="facturation">Facturation</div> +<pre class="brush: html"><div id="facturation">Facturation</div> <div> <div id="nom">Nom</div> @@ -57,7 +55,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labe <p>Dans l’exemple ci-dessous, les éléments d’en-têtes sont associés avec les contenus dont ils sont les intitulés. Notez que la zone référencée est celle qui <em>contient</em> l’en-tête.</p> -<pre class="brush: html notranslate"><div role="main" aria-labelledby="foo"> +<pre class="brush: html"><div role="main" aria-labelledby="foo"> <h1 id="foo">Le feu devenu incontrôlable gagne les abords d’Aubagne</h1> Un fort mistral a propagé le feu de forêt qui s’est déclaré ce lundi soir suite aux fortes températures de ces derniers jours… </div> @@ -65,9 +63,9 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labe <h4 id="Exemple_3_Groupes_de_boutons_radio">Exemple 3 : Groupes de boutons radio</h4> -<p>Dans l’exemple ci-dessous, le conteneur d’un <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_radiogroup" title="Utiliser le rôle radiogroup">radiogroup</a> est associé avec son label à l’aide de l’attribut <code>aria-labelledby</code> :</p> +<p>Dans l’exemple ci-dessous, le conteneur d’un <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_radiogroup">radiogroup</a> est associé avec son label à l’aide de l’attribut <code>aria-labelledby</code> :</p> -<pre class="brush: html notranslate"><div id="radio_label">My radio label</div> +<pre class="brush: html"><div id="radio_label">My radio label</div> <ul role="radiogroup" aria-labelledby="radio_label"> <li role="radio">Élément №1</li> @@ -80,7 +78,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labe <p>Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite de dialogue y est relié par l’attribut <code>aria-labelledby</code> :</p> -<pre class="brush: html notranslate"><div role="dialog" aria-labelledby="titreDialogue"> +<pre class="brush: html"><div role="dialog" aria-labelledby="titreDialogue"> <h2 id="titreDialogue">Choisir un fichier</h2> … Contenus de la boîte de dialogue </div> @@ -90,7 +88,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labe <p>Dans l’exemple ci-dessous, la définition d’un terme qui est décrit dans le flux naturel de la narration, est associée au terme lui-même à l’aide de l’attribut <strong>aria-labelledby</strong>:</p> -<pre class="brush: html notranslate"><p>Le docteur expliqua que c’était un <dfn id="placebo">placebo</dfn>, <span role="definition" aria-labelledby="placebo"> ou +<pre class="brush: html"><p>Le docteur expliqua que c’était un <dfn id="placebo">placebo</dfn>, <span role="definition" aria-labelledby="placebo"> ou une préparation inerte prescrite plus pour le soulagement mental du patient que ses effets possible sur une pathologie.</span> </p> </pre> @@ -99,7 +97,7 @@ une préparation inerte prescrite plus pour le soulagement mental du patient que <p>Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu’elles définissent à l’aide de l’attribut <code>aria-labelledby</code> :</p> -<pre class="brush: html notranslate"><dl> +<pre class="brush: html"><dl> <dt id="anatheme">anathème</dt> <dd role="definition" aria-labelledby="anatheme">une interdiction ou une condamnation prononcée par une autorité ecclésiastique et accompagnée de l’excommunication</dd> @@ -114,9 +112,9 @@ une préparation inerte prescrite plus pour le soulagement mental du patient que <h4 id="Exemple_7_Menus">Exemple 7 : Menus</h4> -<p>Dans l’exemple ci-dessous, un <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup" title="Utiliser l’attribut aria-haspopup">menu contextuel</a> est associé avec son label à l’aide de l’attribut <code>aria-labelledby</code> :</p> +<p>Dans l’exemple ci-dessous, un <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup">menu contextuel</a> est associé avec son label à l’aide de l’attribut <code>aria-labelledby</code> :</p> -<pre class="brush: html notranslate"><div role="menubar"> +<pre class="brush: html"><div role="menubar"> <div role="menuitem" aria-haspopup="true" id="fichierMenu">Fichier</div> <div role="menu" aria-labelledby="fichierMenu"> <div role="menuitem">Ouvrir</div> @@ -139,16 +137,12 @@ une préparation inerte prescrite plus pour le soulagement mental du patient que <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> <ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label" title="Utiliser l’attribut aria-label">Utiliser l’attribut <code>aria-label</code></a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby" title="Utiliser l’attribut aria-describedby">Utiliser l’attribut <code>aria-describedby</code></a>.</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label">Utiliser l’attribut <code>aria-label</code></a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">Utiliser l’attribut <code>aria-describedby</code></a>.</li> </ul> -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h3 id="Autres_ressources">Autres ressources</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">Spécification WAI-ARIA pour aria-labelledby</a>.</li> + <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">Spécification WAI-ARIA pour aria-labelledby</a>.</li> </ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html index 994ea05cd5..e5ef3e789c 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html @@ -10,9 +10,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orie --- <h3 id="Description">Description</h3> -<div class="summary"> -<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-orientation" title="States and Properties #aria-orientation">aria-orientation</a>.</p> -</div> +<p>Cette technique présente l’utilisation de l’attribut <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-orientation">aria-orientation</a>.</p> <p>L’attribut <code>aria-orientation</code> est utilisé pour indiquer si un élément est orienté verticalement ou horizontalement.</p> @@ -29,7 +27,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orie <h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> <h3 id="Exemples">Exemples</h3> @@ -53,18 +51,12 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orie <ul> <li>scrollbar ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role" title="Utiliser le rôle slider">slider</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role">slider</a> ;</li> <li>separator.</li> </ul> -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> - -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h3 id="Autres_ressources">Autres ressources</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-orientation" title="States and Properties #aria-orientation">Spécification WAI-ARIA pour l’attribut <code>aria-orientation</code></a>.</li> + <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-orientation">Spécification WAI-ARIA pour l’attribut <code>aria-orientation</code></a>.</li> </ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html index 26489ef676..8cc57e6365 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html @@ -7,7 +7,7 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-relevant --- -<p><span class="seoSummary">L’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant">aria-relevant</a> est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" title="/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a>, ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut <code>aria-live</code> n’était pas activé.</span></p> +<p>L’attribut <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant">aria-relevant</a> est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a>, ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut <code>aria-live</code> n’était pas activé.</p> <p>L’attribut aria-relevant est habituellement utilisé lorsque le contenu d’une page web peut être mis à jour alors que la page est affichée.</p> @@ -27,5 +27,5 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-rele <h3 id="Autres_ressources">Autres ressources</h3> <ul> - <li><a class="external" href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant" title="https://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant">Spécification WAI-ARIA pour aria-relevant</a></li> + <li><a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant">Spécification WAI-ARIA pour aria-relevant</a></li> </ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html index a86e8db23f..b1e4385b1b 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html @@ -10,13 +10,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-requ --- <h3 id="Description">Description</h3> -<div class="summary"> -<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required" title="States and Properties #aria-required"><code>aria-required</code></a>.</p> -</div> +<p>Cette technique présente l’utilisation de l’attribut <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required"><code>aria-required</code></a>.</p> <p>L’attribut <code>aria-required</code> est utilisé pour indiquer que l’utilisateur doit obligatoirement remplir un champ de formulaire avant de le soumettre. Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML ; il n’est pas limité aux éléments auxquels a été assigné un <code>rôle</code> ARIA.</p> -<p>{{ HTMLVersionInline("5") }} a introduit l’attribut <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributes" title="Liste des attributs HTML"><code>required</code></a>, mais <code>aria-required</code> est toujours utile pour les agents utilisateurs qui ne prennent pas encore en charge HTML5.</p> +<p>{{ HTMLVersionInline("5") }} a introduit l’attribut <a href="/fr/docs/Web/HTML/Attributes"><code>required</code></a>, mais <code>aria-required</code> est toujours utile pour les agents utilisateurs qui ne prennent pas encore en charge HTML5.</p> <h3 id="Valeurs">Valeurs</h3> @@ -28,7 +26,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-requ <p>Remarquez que cet attribut ne changera pas automatiquement la présentation du champ.</p> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> <h3 id="Exemples">Exemples</h3> @@ -56,24 +54,20 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-requ <li>Listbox ;</li> <li>Radiogroup ;</li> <li>Spinbutton ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_textbox" title="Utiliser le rôle textbox">Textbox</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_textbox">Textbox</a> ;</li> <li>Tree.</li> </ul> <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> <ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid" title="Utiliser l’attribut aria-invalid">Utiliser l’attribut <code>aria-invalid</code></a></li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid">Utiliser l’attribut <code>aria-invalid</code></a></li> </ul> -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h3 id="Autres_ressources">Autres ressources</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required" title="States and Properties #aria-required">Spécification WAI-ARIA pour <code>aria-required</code></a> ;</li> - <li><a class="external" href="http://www.w3.org/TR/wai-aria-practices/#ariaform" title="Pratiques WAI-ARIA #ariaform">WAI-ARIA Authoring Practices for forms</a> (Règles WAI-ARIA de création de formulaires) ;</li> - <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation" title="Validation de condition">Validation de condition</a> en {{ HTMLVersionInline("5") }}.</li> + <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required">Spécification WAI-ARIA pour <code>aria-required</code></a> ;</li> + <li><a href="http://www.w3.org/TR/wai-aria-practices/#ariaform">WAI-ARIA Authoring Practices for forms</a> (Règles WAI-ARIA de création de formulaires) ;</li> + <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation de condition</a> en {{ HTMLVersionInline("5") }}.</li> </ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html index df425ca798..5c9c26b05f 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html @@ -10,13 +10,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu --- <h3 id="Description">Description</h3> -<div class="summary"> -<p>Cette technique présente l’utilisation de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax" rel="external" title="States and Properties #aria-valuemax">aria-valuemax</a>.</p> -</div> +<p>Cette technique présente l’utilisation de l’attribut <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax">aria-valuemax</a>.</p> -<p>L’attribut <code>aria-valuemax</code> est utilisé pour définir la valeur maximale autorisée pour un composant à intervalle tels qu’une barre de progression <code>progressbar</code>, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>. Si <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using the aria-valuemin attribute"><code>aria-valuenow</code></a> a des valeurs minimale et maximale connues, le développeur devrait fournir les propriétés de <code>aria-valuemax</code> et <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Using_the_aria-valuemin_attribute"><code>aria-valuemin</code></a>. La valeur de <code>aria-valuemax</code> <strong class="rfc2119">DOIT</strong> être supérieure ou égale à celle de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Using_the_aria-valuemin_attribute"><code>aria-valuemin</code></a>.</p> +<p>L’attribut <code>aria-valuemax</code> est utilisé pour définir la valeur maximale autorisée pour un composant à intervalle tels qu’une barre de progression <code>progressbar</code>, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>. Si <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow"><code>aria-valuenow</code></a> a des valeurs minimale et maximale connues, le développeur devrait fournir les propriétés de <code>aria-valuemax</code> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin"><code>aria-valuemin</code></a>. La valeur de <code>aria-valuemax</code> <strong>DOIT</strong> être supérieure ou égale à celle de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin"><code>aria-valuemin</code></a>.</p> -<p><code>aria-valuemax</code> est un attribut <strong>obligatoire</strong> des rôles <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a>, <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</p> +<p><code>aria-valuemax</code> est un attribut <strong>obligatoire</strong> des rôles <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider">slider</a>, <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar">scrollbar</a> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton">spinbutton</a>.</p> <h3 id="Valeurs">Valeurs</h3> @@ -26,7 +24,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu <p>Si la valeur <code>aria-valuemax</code> n’est pas déterminée, ou si <code>aria-valuemin</code> n’est pas inférieure ou égale à la valeur de <code>aria-valuemax</code>, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.</p> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> <h3 id="Exemples">Exemples</h3> @@ -42,26 +40,22 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu <h3 id="Utilisés_avec_les_rôles_ARIA">Utilisés avec les rôles ARIA</h3> <ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Utiliser le rôle progressbar">progressbar</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar">progressbar</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar">scrollbar</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider">slider</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton">spinbutton</a>.</li> </ul> <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> <ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="Utiliser l’attribut aria-valuemin">aria-valuemin</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Utiliser l’attribut aria-label">aria-valuenow</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l’attribut aria-required">aria-valuetext</a>.</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin">aria-valuemin</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow">aria-valuenow</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext">aria-valuetext</a>.</li> </ul> -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h3 id="Autres_ressources">Autres ressources</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax" title="States and Properties #aria-valuemax">Spécification WAI-ARIA pour l’attribut <code>aria-valuemax</code></a>.</li> + <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax">Spécification WAI-ARIA pour l’attribut <code>aria-valuemax</code></a>.</li> </ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html index 19249b6361..5443a16c0e 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html @@ -10,9 +10,9 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu --- <h3 id="Description">Description</h3> -<p>L’attribut <code>aria-valuemin</code> est utilisé pour définir la valeur minimale autorisée pour un composant à intervalle tel qu’une barre de progression <code>progressbar</code>, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>. Si <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using_the_aria-valuenow_attribute"><code>aria-valuenow</code></a> a des valeurs limites connues (minimum et maximum), le développeur devrait spécifier les propriétés de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Using_the_aria-valuemax_attribute"><code>aria-valuemax</code></a> et <code>aria-valuemin</code>. La valeur de <code>aria-valuemin</code> <strong class="rfc2119">DOIT</strong> être inférieure ou égale à celle de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Using_the_aria-valuemax_attribute"><code>aria-valuemax</code></a>.</p> +<p>L’attribut <code>aria-valuemin</code> est utilisé pour définir la valeur minimale autorisée pour un composant à intervalle tel qu’une barre de progression <code>progressbar</code>, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>. Si <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow"><code>aria-valuenow</code></a> a des valeurs limites connues (minimum et maximum), le développeur devrait spécifier les propriétés de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax"><code>aria-valuemax</code></a> et <code>aria-valuemin</code>. La valeur de <code>aria-valuemin</code> <strong>DOIT</strong> être inférieure ou égale à celle de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax"><code>aria-valuemax</code></a>.</p> -<p><code>aria-valuemin</code> est un attribut <strong>obligatoire</strong> des rôles <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a>, <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</p> +<p><code>aria-valuemin</code> est un attribut <strong>obligatoire</strong> des rôles <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider">slider</a>, <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar">scrollbar</a> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton">spinbutton</a>.</p> <h3 id="Valeurs">Valeurs</h3> @@ -22,7 +22,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu <p>Si <code>aria-valuemin</code> n’est pas inférieure ou égale à la valeur de <code>aria-valuemax</code>, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.</p> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> <h3 id="Exemples">Exemples</h3> @@ -38,26 +38,22 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu <h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3> <ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Utiliser le rôle progressbar">progressbar</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar" title="Utiliser le rôle scrollbar">scrollbar</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Utiliser le rôle slider">slider</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton" title="Utiliser le rôle spinbutton">spinbutton</a>.</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar">progressbar</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar">scrollbar</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider">slider</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton">spinbutton</a>.</li> </ul> <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> <ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="Utiliser l’attribut aria-valuemax">aria-valuemax</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Utiliser l’attribut aria-label">aria-valuenow</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Utiliser l’attribut aria-required">aria-valuetext</a>.</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax">aria-valuemax</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow">aria-valuenow</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext">aria-valuetext</a>.</li> </ul> -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h3 id="Autres_ressources">Autres ressources</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemin" title="States and Properties #aria-valuemin">Spécification WAI-ARIA pour l’attribut <code>aria-valuemin</code></a>.</li> + <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemin">Spécification WAI-ARIA pour l’attribut <code>aria-valuemin</code></a>.</li> </ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html index 7ef937e083..6d13e9a360 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html @@ -24,7 +24,9 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu <p>Pour les éléments possédant les rôles <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role"><code>slider</code></a> et <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role"><code>spinbutton</code></a>, les technologies d'assistance <strong>DEVRAIENT</strong> retourner la valeur courante à l'utilisateur.</p> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d'assistance devraient traiter cette technique. L'information fournie ci-dessus est l'une de ces opinions et n'est pas normative.</div> +<div class="note"> + <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d'assistance devraient traiter cette technique. L'information fournie ci-dessus est l'une de ces opinions et n'est pas normative.</p> +</div> <h2 id="examples">Exemples</h2> @@ -37,29 +39,27 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu <h3 id="working_examples">Exemples concrets</h3> -<dl> - <dt><code>progressbar</code><dt> - <dd> - <ul> - <li><a href="https://dequeuniversity.com/library/aria/progress-bar-bounded">Deque Code Library of Accessibility Examples: Progress Bar (Bounded)</a></li> - <li><a href="https://dequeuniversity.com/library/aria/progress-bar-unbounded">Deque Code Library of Accessibility Examples: Progress Bar (Unbounded)</a></li> - </ul> - <dt><code>slider</code></dt> - <dd> - <ul> - <li><a href="https://w3c.github.io/aria-practices/examples/slider/multithumb-slider.html">WAI-ARIA Authoring Practices: Horizontal Multi-Thumb Slider Example</a></li> - <li><a href="https://dequeuniversity.com/library/aria/slider">Deque Code Library of Accessibility Examples: Slider</a></li> - <li><a href="https://dequeuniversity.com/library/aria/slider-multirange">Deque Code Library of Accessibility Examples: Slider (Multirange)</a></li> - </ul> - </dd> - <dt><code>spinbutton</code></dt> - <dd> - <ul> - <li><a href="https://w3c.github.io/aria-practices/examples/spinbutton/datepicker-spinbuttons.html">WAI-ARIA Authoring Practices: Date Picker Spin Button Example</a></li> - <li><a href="https://w3c.github.io/aria-practices/examples/toolbar/toolbar.html">WAI-ARIA Authoring Practices: Toolbar Example</a></li> - </ul> - </dd> - </dl> +<ul> + <li><code>progressbar</code> + <ul> + <li><a href="https://dequeuniversity.com/library/aria/progress-bar-bounded">Deque Code Library of Accessibility Examples: Progress Bar (Bounded)</a></li> + <li><a href="https://dequeuniversity.com/library/aria/progress-bar-unbounded">Deque Code Library of Accessibility Examples: Progress Bar (Unbounded)</a></li> + </ul> + </li> + <li><code>slider</code> + <ul> + <li><a href="https://w3c.github.io/aria-practices/examples/slider/multithumb-slider.html">WAI-ARIA Authoring Practices: Horizontal Multi-Thumb Slider Example</a></li> + <li><a href="https://dequeuniversity.com/library/aria/slider">Deque Code Library of Accessibility Examples: Slider</a></li> + <li><a href="https://dequeuniversity.com/library/aria/slider-multirange">Deque Code Library of Accessibility Examples: Slider (Multirange)</a></li> + </ul> + </li> + <li><code>spinbutton</code> + <ul> + <li><a href="https://w3c.github.io/aria-practices/examples/spinbutton/datepicker-spinbuttons.html">WAI-ARIA Authoring Practices: Date Picker Spin Button Example</a></li> + <li><a href="https://w3c.github.io/aria-practices/examples/toolbar/toolbar.html">WAI-ARIA Authoring Practices: Toolbar Example</a></li> + </ul> + </li> +</ul> <h2 id="used_with_aria_roles">Rôles ARIA concernés</h2> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html index 3e4951f03d..f875cce058 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html @@ -10,11 +10,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu --- <h3 id="Description">Description</h3> -<p>L’attribut <code>aria-valuetext</code> est utilisé pour définir un texte alternatif, lisible par l'homme, de la valeur <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Utiliser l’attribut aria-valuenow"><code>aria-valuenow</code></a> d’un composant à intervalle tel qu’une barre de progression, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>.</p> +<p>L’attribut <code>aria-valuetext</code> est utilisé pour définir un texte alternatif, lisible par l'homme, de la valeur <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow"><code>aria-valuenow</code></a> d’un composant à intervalle tel qu’une barre de progression, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>.</p> -<p>Les développeurs <strong class="rfc2119">DEVRAIENT</strong> uniquement définir l’attribut <code>aria-valuetext</code> lorsque la valeur retournée ne peut pas être précisément représentée sous forme de nombre.</p> +<p>Les développeurs <strong>DEVRAIENT</strong> uniquement définir l’attribut <code>aria-valuetext</code> lorsque la valeur retournée ne peut pas être précisément représentée sous forme de nombre.</p> -<p>Par exemple, dans le cas d'un curseur qui peut retourner les valeurs <code>petite</code>, <code>moyenne</code>et <code>grand</code>, les valeurs de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using_the_aria-valuenow_attribute"><code>aria-valuenow</code></a> pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de <code>aria-valuetext</code> sera l'une des chaînes suivantes : <code>petite</code>, <code>moyenne</code> ou <code>grande</code>.</p> +<p>Par exemple, dans le cas d'un curseur qui peut retourner les valeurs <code>petite</code>, <code>moyenne</code>et <code>grand</code>, les valeurs de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow"><code>aria-valuenow</code></a> pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de <code>aria-valuetext</code> sera l'une des chaînes suivantes : <code>petite</code>, <code>moyenne</code> ou <code>grande</code>.</p> <h3 id="Valeurs">Valeurs</h3> @@ -22,9 +22,9 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu <h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> -<p>Si l’attribut <code>aria-valuetext</code> est absent, les technologies d’assistance compteront uniquement sur l’attribut <a class="property-reference" href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using_the_aria-valuenow_attribute"><code>aria-valuenow</code></a> pour la valeur courante. Si <code>aria-valuetext</code> est spécifié, les technologies d’assistance <strong class="rfc2119">DEVRAIENT</strong> retourner cette valeur plutôt que celle de <code>aria-valuenow</code>.</p> +<p>Si l’attribut <code>aria-valuetext</code> est absent, les technologies d’assistance compteront uniquement sur l’attribut <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow"><code>aria-valuenow</code></a> pour la valeur courante. Si <code>aria-valuetext</code> est spécifié, les technologies d’assistance <strong>DEVRAIENT</strong> retourner cette valeur plutôt que celle de <code>aria-valuenow</code>.</p> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> <h3 id="Exemples">Exemples</h3> @@ -44,24 +44,20 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu <h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3> <ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar" title="Using_the_progressbar_role">progressbar</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar">progressbar</a> ;</li> <li>scrollbar ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider" title="Using the slider role">slider</a></li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider">slider</a></li> <li>spinbutton.</li> </ul> <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> <ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using_the_aria-valuenow_attribute">aria-valuenow</a>.</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow">aria-valuenow</a>.</li> </ul> -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h3 id="Autres_ressources">Autres ressources</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuetext" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuetext">Spécification WAI-ARIA pour l’attribut <code>aria-valuetext</code></a>.</li> + <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuetext">Spécification WAI-ARIA pour l’attribut <code>aria-valuetext</code></a>.</li> </ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html index eb779a8a8e..8a9a076f49 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html @@ -11,9 +11,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_article --- <h3 id="Description">Description</h3> -<div class="summary"> -<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#article" rel="external" title="Roles article"><code>article</code> (en)</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> -</div> +<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#article"><code>article</code> (en)</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> <p>Le rôle <code>article</code> est utilisé pour identifier une section de page qui forme une partie indépendante d'un document, d'une page ou d'un site. Les exemples d'article peuvent être des billets de blogs ou des articles d'un magazine ou d'un journal ou encore les commentaires soumis par les utilisateurs. Ils sont <em>indépendants</em> dans le sens où leur contenu pourrait être autonome, par exemple pour un flux de syndication.</p> @@ -23,11 +21,13 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_article <h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> -<p>Lorsque l'utilisateur navigue dans un élément ayant le rôle <code>article</code>, les technologies d'assistance qui interceptent généralement les événements clavier standards <strong class="rfc2119">doivent</strong> basculer en mode de navigation du document, plutôt que de passer les événements clavier à l'application web.</p> +<p>Lorsque l'utilisateur navigue dans un élément ayant le rôle <code>article</code>, les technologies d'assistance qui interceptent généralement les événements clavier standards <strong>doivent</strong> basculer en mode de navigation du document, plutôt que de passer les événements clavier à l'application web.</p> -<p>Les technologies d'assistance <strong class="rfc2119">doivent</strong> fournit une fonctionnalité permettant à l'utilisateur de naviguer dans la hiérarchie de chacun des éléments <code>article</code> imbriqués.</p> +<p>Les technologies d'assistance <strong>doivent</strong> fournit une fonctionnalité permettant à l'utilisateur de naviguer dans la hiérarchie de chacun des éléments <code>article</code> imbriqués.</p> -<div class="note"><strong>Note:</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"> + <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p> +</div> <h3 id="Exemples">Exemples</h3> @@ -50,18 +50,6 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_article </div> </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<h3 id="Notes">Notes </h3> - -<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> - -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> - -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h3 id="Autres_ressources">Autres ressources</h3> -<p><a class="external" href="http://www.w3.org/TR/wai-aria/roles#article" title="http://www.w3.org/TR/wai-aria/roles#article">Spécification WAI-ARIA du rôle <code>article</code> (en)</a></p> +<p><a href="http://www.w3.org/TR/wai-aria/roles#article">Spécification WAI-ARIA du rôle <code>article</code> (en)</a></p> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html index 11ac1ed58e..a69035dfb1 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html @@ -10,17 +10,15 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group --- <h3 id="Description">Description</h3> -<div class="summary"> -<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#group">group</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> -</div> +<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#group">group</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> -<p>Le rôle <code>group</code> est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une <a class="external" href="http://www.w3.org/TR/wai-aria/roles#region"><code>region</code></a>, ne sont pas destinés à être intégrés dans une table de contenus ou une page récapitulative (telles que des structures dynamiquement créées par des scripts ou par les technologies d’assistance) ; un groupe ne devrait pas être considéré comme une partie perceptible majeure d’une page. Lorsque le rôle <code>group</code> est ajouté à un élément, , le navigateur émettra un événement <code>group</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p> +<p>Le rôle <code>group</code> est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une <a href="http://www.w3.org/TR/wai-aria/roles#region"><code>region</code></a>, ne sont pas destinés à être intégrés dans une table de contenus ou une page récapitulative (telles que des structures dynamiquement créées par des scripts ou par les technologies d’assistance) ; un groupe ne devrait pas être considéré comme une partie perceptible majeure d’une page. Lorsque le rôle <code>group</code> est ajouté à un élément, , le navigateur émettra un événement <code>group</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p> -<p>Un groupe devrait utilisé pour former un ensemble logique d’éléments avec des fonctions connexes, tels que les enfants dans un composant d’arborescence formant un ensemble apparenté dans une hiérarchie, ou une collection d’éléments ayant le même conteneur dans un répertoire. Cependant, lorsqu’on utilise un groupe pour former une liste, les développeurs doivent limiter ses enfants aux éléments <a class="external" href="http://www.w3.org/TR/wai-aria/roles#listitem">listitem</a>. Les éléments de groupe devraient être imbriqués.</p> +<p>Un groupe devrait utilisé pour former un ensemble logique d’éléments avec des fonctions connexes, tels que les enfants dans un composant d’arborescence formant un ensemble apparenté dans une hiérarchie, ou une collection d’éléments ayant le même conteneur dans un répertoire. Cependant, lorsqu’on utilise un groupe pour former une liste, les développeurs doivent limiter ses enfants aux éléments <a href="http://www.w3.org/TR/wai-aria/roles#listitem">listitem</a>. Les éléments de groupe devraient être imbriqués.</p> <p>La gestion correcte d’un groupe par les technologies d’assistance est déterminée par le contexte dans lequel il est fourni.</p> -<p>Si un auteur pense qu’une section est suffisamment importante pour faire partie de la table des matières d’une page, il devrait assigner un rôle de <a class="external" href="http://www.w3.org/TR/wai-aria/roles#region"><code>region</code></a> ou un rôle standard de <a class="external" href="http://www.w3.org/TR/wai-aria/roles#landmark_roles">point de repère</a> à cette section.</p> +<p>Si un auteur pense qu’une section est suffisamment importante pour faire partie de la table des matières d’une page, il devrait assigner un rôle de <a href="http://www.w3.org/TR/wai-aria/roles#region"><code>region</code></a> ou un rôle standard de <a href="http://www.w3.org/TR/wai-aria/roles#landmark_roles">point de repère</a> à cette section.</p> <h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> @@ -34,11 +32,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group <p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> <ul> - <li>Les lecteurs d’écran devraient annoncer le groupe lorsque le focus atteint l’un des contrôles appartenant au groupe, et si <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby"><span class="s1">aria-describedby</span></a> a été défini, la description peut être lue. Après cela seulement le contrôle focalisé devrait être annoncé.</li> + <li>Les lecteurs d’écran devraient annoncer le groupe lorsque le focus atteint l’un des contrôles appartenant au groupe, et si <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a> a été défini, la description peut être lue. Après cela seulement le contrôle focalisé devrait être annoncé.</li> <li>Les loupes d’écran devraient agrandir le groupe.</li> </ul> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> <h3 id="Exemples">Exemples</h3> @@ -97,7 +95,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group <h4 id="Exemples_concrets">Exemples concrets :</h4> <ul> - <li><a class="external" href="http://test.cita.illinois.edu/aria/tree/tree2.php">http://test.cita.illinois.edu/aria/tree/tree2.php</a></li> + <li><a href="http://test.cita.illinois.edu/aria/tree/tree2.php">http://test.cita.illinois.edu/aria/tree/tree2.php</a></li> </ul> <h3 id="Notes">Notes</h3> @@ -109,21 +107,17 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#group">group (en)</a></li> + <li><a href="http://www.w3.org/TR/wai-aria/roles#group">group (en)</a></li> </ul> <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> <ul> - <li>Rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#region">region (en)</a></li> + <li>Rôle <a href="http://www.w3.org/TR/wai-aria/roles#region">region (en)</a></li> </ul> -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h3 id="Autres_ressources">Autres ressources</h3> <ul> - <li>Bonnes pratiques ARIA – Répertoires, groupes et zones : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading">Directories, Groups, and Regions (en)</a></li> + <li>Bonnes pratiques ARIA – Répertoires, groupes et zones : <a href="http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading">Directories, Groups, and Regions (en)</a></li> </ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html index 7fdcc550c6..6decbf1edb 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html @@ -9,11 +9,11 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link --- <h3 id="Description">Description</h3> -<div class="summary"> - <p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#link">link</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> -</div> + +<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#link">link</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> + <p>Le rôle <code>link</code> est utilisé pour identifier un élément qui crée un hyperlien vers une ressource qui peut être dans l’application ou à l’extérieur. Lorsque ce rôle est ajouté à un élément, la tabulation peut être utilisée pour donner le focus au lien et la barre d’espace ou la touche Entrée peuvent exécuter le lien.</p> -<p>L’attribut <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#focus_tabindex">tabindex</a> peut éventuellement être utilisé avec ce rôle pour spécifier directement la position de l’élément dans l’ordre de tabulation.</p> +<p>L’attribut <a href="http://www.w3.org/TR/wai-aria-practices/#focus_tabindex">tabindex</a> peut éventuellement être utilisé avec ce rôle pour spécifier directement la position de l’élément dans l’ordre de tabulation.</p> <h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> <p>Lorsque le rôle <code>link</code> est ajouté à un élément, ou qu’un élément possédant ce rôle devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> <ul> @@ -26,7 +26,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link <li>Les loupes d’écran devraient agrandir le lien.</li> </ul> <div class="note"> - <strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> <h3 id="Exemples">Exemples</h3> <h4 id="Exemple_1_Ajoute_le_rôle_dans_le_code_HTML">Exemple 1 : <strong>Ajoute le rôle dans le code HTML</strong></h4> <p>L’extrait de code ci-dessous montre comment le rôle <code>link</code> est ajouté dans le code source HTML. </p> @@ -55,22 +55,21 @@ function navigateLink(evt) { </body></pre> <h4 id="Exemples_concrets">Exemples concrets :</h4> <ul> - <li><a class="external" href="http://codetalks.org/source/widgets/link/link.html">http://codetalks.org/source/widgets/link/link.html</a></li> - <li><a class="external" href="http://codetalks.org/source/widgets/link/link.sample.html">http://codetalks.org/source/widgets/link/link.sample.html</a></li> + <li><a href="http://codetalks.org/source/widgets/link/link.html">http://codetalks.org/source/widgets/link/link.html</a></li> + <li><a href="http://codetalks.org/source/widgets/link/link.sample.html">http://codetalks.org/source/widgets/link/link.sample.html</a></li> </ul> <h3 id="Notes">Notes</h3> -<p>Si l'activation du lien déclenche une action mais ne déplace pas le focus du navigateur ou que cela ouvre une nouvelle page, vous devriez considérer l'utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#button">button</a> au lieu du rôle <code>link</code>.</p> +<p>Si l'activation du lien déclenche une action mais ne déplace pas le focus du navigateur ou que cela ouvre une nouvelle page, vous devriez considérer l'utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#button">button</a> au lieu du rôle <code>link</code>.</p> <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#link"><code>link</code></a></li> + <li><a href="http://www.w3.org/TR/wai-aria/roles#link"><code>link</code></a></li> </ul> <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> <ul> - <li>Rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#button">button</a>.</li> + <li>Rôle <a href="http://www.w3.org/TR/wai-aria/roles#button">button</a>.</li> </ul> -<h3 id="Compatibilité">Compatibilité</h3> -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> + <h3 id="Autres_ressources">Autres ressources</h3> <ul> - <li>Bonnes pratiques ARIA - Rôle <code>Link</code> : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#link">#link</a></li> + <li>Bonnes pratiques ARIA - Rôle <code>Link</code> : <a href="http://www.w3.org/TR/wai-aria-practices/#link">#link</a></li> </ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html index b67be4e169..34d8e47e12 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html @@ -10,11 +10,9 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log --- <h3 id="Description">Description</h3> -<div class="summary"> -<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#log"><code>log</code></a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> -</div> +<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#log"><code>log</code></a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> -<p>Le rôle <code>log</code> est utilisé pour identifier un élément qui crée <a class="external" href="http://www.w3.org/WAI/PF/aria/terms#def_liveregion">une zone live</a> où de nouvelles informations sont ajoutées dans un ordre significatif et où les anciennes informations peuvent être supprimées. Par exemple, un journal de salon de discussion, l’historique d’une messagerie ou un fichier d’erreurs. Contrairement aux autres types de zones live, ce rôle est ordonné de façon séquentielle et les nouvelles informations sont uniquement ajoutées à la fin de l’enregistrement. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement <code>log</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p> +<p>Le rôle <code>log</code> est utilisé pour identifier un élément qui crée <a href="http://www.w3.org/WAI/PF/aria/terms#def_liveregion">une zone live</a> où de nouvelles informations sont ajoutées dans un ordre significatif et où les anciennes informations peuvent être supprimées. Par exemple, un journal de salon de discussion, l’historique d’une messagerie ou un fichier d’erreurs. Contrairement aux autres types de zones live, ce rôle est ordonné de façon séquentielle et les nouvelles informations sont uniquement ajoutées à la fin de l’enregistrement. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement <code>log</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p> <p>Par défaut, les mises à jour ne contiennent que les changements apportés à la zone live et elles sont annoncées à l'utilisateur lorsqu'il est inactif. Si l'utilisateur a besoin d'entendre l'ensemble de la zone live lorsqu'un changement se produit, il faut utiliser <code>aria-atomic="true"</code>. Pour faire les annonces le plus tôt possible et lorsque l'utilisateur peut être interrompu, <code>aria-live="assertive"</code> peut être défini pour lancer des mises à jour plus agressives.</p> @@ -34,7 +32,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log <li>Les loupes d'écran devraient indiquer visuellement la disponibilité d'une mise à jour du fichier de journalisation.</li> </ul> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> <h3 id="Exemples">Exemples</h3> @@ -58,14 +56,14 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log </ul> </div></pre> -<p>Voir l’<a class="external" href="http://codetalks.org/source/live/chat.html">exemple</a> sur CodeTalks pour plus d’informations.</p> +<p>Voir l’<a href="http://codetalks.org/source/live/chat.html">exemple</a> sur CodeTalks pour plus d’informations.</p> <h4 id="Exemples_concrets">Exemples concrets :</h4> <ul> - <li><a class="external" href="http://test.cita.illinois.edu/aria/live/live1.php">http://test.cita.illinois.edu/aria/live/live1.php</a> ;</li> - <li><a class="external" href="http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/">http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/</a> ;</li> - <li><a class="external" href="http://codetalks.org/source/live/chat.html">http://codetalks.org/source/live/chat.html</a> [<a class="external" href="http://codetalks.org/source/live/chat_notes.html">notes</a>].</li> + <li><a href="http://test.cita.illinois.edu/aria/live/live1.php">http://test.cita.illinois.edu/aria/live/live1.php</a> ;</li> + <li><a href="http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/">http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/</a> ;</li> + <li><a href="http://codetalks.org/source/live/chat.html">http://codetalks.org/source/live/chat.html</a> [<a href="http://codetalks.org/source/live/chat_notes.html">notes</a>].</li> </ul> <h3 id="Notes">Notes</h3> @@ -78,21 +76,17 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#log">log</a>.</li> + <li><a href="http://www.w3.org/TR/wai-aria/roles#log">log</a>.</li> </ul> <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> <ul> - <li>Rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#marquee" title="WAI-ARIA Role marquee">marquee</a>.</li> + <li>Rôle <a href="http://www.w3.org/TR/wai-aria/roles#marquee">marquee</a>.</li> </ul> -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h3 id="Autres_ressources">Autres ressources</h3> <ul> - <li>Bonnes pratiques ARIA – Implémentation des zones live : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#LiveRegions">#LiveRegions</a>.</li> + <li>Bonnes pratiques ARIA – Implémentation des zones live : <a href="http://www.w3.org/TR/wai-aria-practices/#LiveRegions">#LiveRegions</a>.</li> </ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html index 238baf91cc..25bf9addfd 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html @@ -8,19 +8,17 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation --- -<p><span class="seoSummary">Cette page présente l'usage du rôle <code><a href="https://www.w3.org/TR/wai-aria-practices-1.1/#presentation_role">presentation</a></code> et décrit l'effet qu'il a sur les navigateurs et les technologies d'assistance.</span></p> +<p>Cette page présente l'usage du rôle <code><a href="https://www.w3.org/TR/wai-aria-practices-1.1/#presentation_role">presentation</a></code> et décrit l'effet qu'il a sur les navigateurs et les technologies d'assistance.</p> <h2 id="Description">Description</h2> -<div class="summary"> <p>Le rôle <code>presentation</code> est utilisé pour retirer toute représentation sémantique pour un élément donné ainsi que pour ses descendants. Par exemple, un tableau utilisé pour la mise en page pourrait avoir un rôle <code>presentation</code> appliqué sur l'élément <code>table</code> pour retirer la sémantique de l'élément en lui-même ainsi que tout ses sous-éléments, comme l'en-tête de tableau ou même les données de tableau elles-mêmes.</p> -</div> <h2 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h2> <p>Les agents utilisateurs ou les technologies d'assistance ne devrait normalement pas lire les éléments marqués comme étant de rôle <code>presentation</code>.</p> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> <h2 id="Exemples">Exemples</h2> @@ -49,19 +47,6 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation … </svg></pre> -<ul> -</ul> - -<h2 id="Notes">Notes</h2> - -<h2 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h2> - -<h2 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h2> - -<h2 id="Compatibilité">Compatibilité</h2> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h2 id="Autres_ressources">Autres ressources</h2> <p>Using Aria - 2.9 Use of Role=presentation or Role=none: <a href="https://www.w3.org/TR/using-aria/#presentation">https://www.w3.org/TR/using-aria/#presentation</a></p> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html index 11b55d02dc..6a12160b24 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html @@ -10,27 +10,28 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar --- <h3 id="Description">Description</h3> -<div class="summary"> -<p>Cette technique présente l’utilisation du rôle <a class="external" href="https://www.w3.org/TR/wai-aria/#progressbar" title="ARIA Roles #progressbar"><code>progressbar</code></a>.</p> -</div> +<p>Cette technique présente l’utilisation du rôle <a href="https://www.w3.org/TR/wai-aria/#progressbar"><code>progressbar</code></a>.</p> <p>Le rôle <code>progressbar</code> devrait être utilisé pour un élément qui affiche la progression d’un tâche prenant un certain temps ou s’effectuant en plusieurs étapes.</p> -<p>Une barre de progression indique que la requête de l’utilisateur a été prise en compte et que l’application progresse vers la finalisation de l’action demandée. Si la valeur courante de la barre de progression peut être connue, le développeur pourra indiquer la progression à l’aide des attributs <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a>, <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin"><code>aria-valuemin</code></a> et <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax"><code>aria-valuemax</code></a>. Si la valeur de progression est indéterminée, le développeur peut omettre l’attribut <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a>.</p> +<p>Une barre de progression indique que la requête de l’utilisateur a été prise en compte et que l’application progresse vers la finalisation de l’action demandée. Si la valeur courante de la barre de progression peut être connue, le développeur pourra indiquer la progression à l’aide des attributs <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a>, <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin"><code>aria-valuemin</code></a> et <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax"><code>aria-valuemax</code></a>. Si la valeur de progression est indéterminée, le développeur peut omettre l’attribut <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a>.</p> <p>Lorsqu’une tâche progresse, la valeur <code>aria-valuenow</code> doit être dynamiquement actualisée pour indiquer la progression aux produits de technologies d’assistance.</p> -<p>Si le rôle <code>progressbar</code> décrit la progression du chargement d’une zone particulière d’une page, l’auteur <strong class="rfc2119">DOIT</strong> utiliser l’attribut <a class="property-reference external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby"><code>aria-describedby</code></a> pour pointer vers l’état courant, et définir l’attribut <a class="state-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-busy"><code>aria-busy</code></a> à <code>true</code> pour la zone jusqu’à la fin du chargement. Il n’est pas possible à l’utilisateur de modifier la valeur de <code>progressbar</code> car elle est toujours en lecture seule.</p> +<p>Si le rôle <code>progressbar</code> décrit la progression du chargement d’une zone particulière d’une page, l’auteur <strong>DOIT</strong> utiliser l’attribut <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby"><code>aria-describedby</code></a> pour pointer vers l’état courant, et définir l’attribut <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-busy"><code>aria-busy</code></a> à <code>true</code> pour la zone jusqu’à la fin du chargement. Il n’est pas possible à l’utilisateur de modifier la valeur de <code>progressbar</code> car elle est toujours en lecture seule.</p> -<div class="note"><strong>Note :</strong> généralement les technologies d’assistance retourneront la valeur de l’attribut <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a> sous la forme d’un pourcentage d’une plage de valeurs comprise entre <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin"><code>aria-valuemin</code></a> et <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax"><code>aria-valuemax</code></a>, sauf si <a class="property-reference external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext"><code>aria-valuetext</code></a> est spécifié. Il est préférable de définir les valeurs pour les attributs <code>aria-valuemin</code>, <code>aria-valuemax</code> et <code>aria-valuenow</code> de façon appropriée pour ce calcul.</div> +<div class="note"> + <p><strong>Note :</strong> généralement les technologies d’assistance retourneront la valeur de l’attribut <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a> sous la forme d’un pourcentage d’une plage de valeurs comprise entre <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin"><code>aria-valuemin</code></a> et <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax"><code>aria-valuemax</code></a>, sauf si <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext"><code>aria-valuetext</code></a> est spécifié. Il est préférable de définir les valeurs pour les attributs <code>aria-valuemin</code>, <code>aria-valuemax</code> et <code>aria-valuenow</code> de façon appropriée pour ce calcul.</p></div> -<div class="note"><strong>Note :</strong> les éléments possédant le rôle <code>progressbar</code> ont une valeur <code>aria-readonly</code> implicite définie à <code>true</code>.</div> +<div class="note"> + <p><strong>Note :</strong> les éléments possédant le rôle <code>progressbar</code> ont une valeur <code>aria-readonly</code> implicite définie à <code>true</code>.</p> +</div> <h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> <p>Les lecteurs devraient annoncer les mises à jour de la progression dès qu’elles se produisent. Si la barre de progression a un label, il devrait également être mentionné.</p> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> <h3 id="Exemples">Exemples</h3> @@ -54,17 +55,9 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> <ul> - <li><a class="external" href="https://www.w3.org/TR/wai-aria/#progressbar" title="ARIA Roles #progressbar">progressbar</a></li> - <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow" title="States and Properties #aria-valuenow">aria-valuenow</a></li> - <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin" title="ARIA States and Properties #aria-valuemin">aria-valuemin</a></li> - <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax" title="ARIA States and Properties #aria-valuemax">aria-valuemax</a></li> - <li><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext" title="ARIA States and Properties #aria-valuetext">aria-valuetext</a></li> -</ul> - -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> - -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - -<h3 id="Autres_ressources">Autres ressources</h3> + <li><a href="https://www.w3.org/TR/wai-aria/#progressbar">progressbar</a></li> + <li><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow">aria-valuenow</a></li> + <li><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin">aria-valuemin</a></li> + <li><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax">aria-valuemax</a></li> + <li><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext">aria-valuetext</a></li> +</ul>
\ No newline at end of file diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html deleted file mode 100644 index cf566aa1e2..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Utilisation du groupe rôle -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role -tags: - - NeedsContent -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utilisation_du_groupe_rôle ---- -<p> </p> - -<h3 id="Description">Description</h3> - -<p> </p> - -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d'assistance">Effets possibles sur les agents utilisateurs et les technologies d'assistance</h3> - -<div class="note"><strong>Note:</strong>il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ici est l’une de ces opinions et n’est pas normative.</div> - -<h3 id="Exemples">Exemples</h3> - -<h4 id="Exemple_1">Exemple 1 : </h4> - -<p> </p> - -<pre class="brush: html">Code </pre> - -<h4 id="Exemples_concrets">Exemples concrets :</h4> - -<ul> -</ul> - -<h3 id="Notes">Notes </h3> - -<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> - -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> - -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - -<h3 id="Autres_ressources">Autres ressources</h3> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html index 114e5e4a31..16da9c8804 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html @@ -10,9 +10,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider --- <h3 id="Description">Description</h3> -<div class="summary"> -<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#slider" rel="external" title="http://www.w3.org/TR/wai-aria/roles#slider">slider</a>.</p> -</div> +<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#slider">slider</a>.</p> <p>Le rôle <code>slider</code> est utilisé pour des balises qui permettent à l'utilisateur de sélectionner une valeur dans un intervalle donné. Le rôle <code>slider</code> est assigné à la « <em>molette</em> », le contrôle qui est ajusté pour modifier la valeur. Typiquement, un autre élément est stylé pour représenter visuellement l'intervalle de valeurs possibles, et le curseur est positionné visuellement pour représenter la valeur dans cet intervalle. Lorsque l'utilisateur interagit avec la molette, l'application doit programmatiquement ajuster l'attribut <code>aria-valuenow</code> du curseur de défilement (et si possible <code>aria-valuetext</code>) pour refléter la valeur courante. Voir la section {{ anch("Exemples") }} ci-dessous pour plus d'informations.</p> @@ -20,7 +18,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider <p>Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsque l'utilisateur tabule pour amener le focus sur le curseur, il doit arriver sur la molette : le contrôle qu'un utilisateur de souris fera glisser. Les touches flèches doivent agir de la façon suivante (attention toutefois, dans les applications, aux directions de flèches pour les langues s'écrivant de droite à gauche) :</p> -<table style="width: 70%;"> +<table> <thead> <tr> <th scope="col">Touche(s)</th> @@ -45,7 +43,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider <h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> <h3 id="Exemples">Exemples</h3> @@ -85,7 +83,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider <pre class="brush: js">var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"]; var updateSlider = function (newValue) { var handle = document.getElementById("day-handle"); - handle<span>.setAttribute(<span class="string">"aria-valuenow"</span><span>, </span><span class="string">newValue.toString()</span><span>);</span></span> + handle.setAttribute("aria-valuenow", newValue.toString()); handle.setAttribute("aria-valuetext", dayNames[newValue]); }; </pre> @@ -95,21 +93,15 @@ var updateSlider = function (newValue) { <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> <ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute">aria-valuemax</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow" title="Using the aria-label attribute">aria-valuenow</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext" title="Using the aria-required attribute">aria-valuetext</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a>.</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin">aria-valuemin</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax">aria-valuemax</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow">aria-valuenow</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext">aria-valuetext</a> ;</li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation">aria-orientation</a>.</li> </ul> -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> - -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h3 id="Autres_ressources">Autres ressources</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#slider" title="http://www.w3.org/TR/wai-aria/roles#slider">Spécifications WAI-ARIA pour le rôle <code>slider</code></a></li> + <li><a href="http://www.w3.org/TR/wai-aria/roles#slider">Spécifications WAI-ARIA pour le rôle <code>slider</code></a></li> </ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html index 3bc6446116..38827d4db1 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html @@ -9,11 +9,11 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status --- <h3 id="Description">Description</h3> -<div class="summary"> - <p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#status">status</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> -</div> -<p>Le rôle <code>status</code> est un type de <a class="external" href="http://www.w3.org/WAI/PF/aria/terms#def_liveregion">zone live</a> et un conteneur dont le contenu est un message d’informations destiné à l’utilisateur. Ce message n’est pas assez important pour justifier une <a class="external" href="http://www.w3.org/TR/wai-aria/roles#alert">alerte</a>. Il est souvent présenté comme une barre d’état. Lorsque le rôle est ajouté à un élément, le navigateur émettra un événement <code>status</code> accessible aux produits de technologies d’assistance qui pourront alors le notifier à l’utilisateur.</p> -<p>Le contenu des informations d’état doit être fourni dans un objet d’état et il faut s’assurer que cet objet ne reçoive pas le focus. Si une autre partie de la page contrôle ce qui s’affiche dans l’objet d’état, la relation doit être explicitement définie à l’aide de l’attribut <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls" title="States and Properties #aria-controls">aria-controls</a>.</p> + +<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#status">status</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> + +<p>Le rôle <code>status</code> est un type de <a href="http://www.w3.org/WAI/PF/aria/terms#def_liveregion">zone live</a> et un conteneur dont le contenu est un message d’informations destiné à l’utilisateur. Ce message n’est pas assez important pour justifier une <a href="http://www.w3.org/TR/wai-aria/roles#alert">alerte</a>. Il est souvent présenté comme une barre d’état. Lorsque le rôle est ajouté à un élément, le navigateur émettra un événement <code>status</code> accessible aux produits de technologies d’assistance qui pourront alors le notifier à l’utilisateur.</p> +<p>Le contenu des informations d’état doit être fourni dans un objet d’état et il faut s’assurer que cet objet ne reçoive pas le focus. Si une autre partie de la page contrôle ce qui s’affiche dans l’objet d’état, la relation doit être explicitement définie à l’aide de l’attribut <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls">aria-controls</a>.</p> <p>Les technologies d’assistance devraient réserver des cellules dans la grille Braille pour rendre l’état.</p> <h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> <p>Lorsque le rôle <code>status</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> @@ -27,7 +27,8 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status <li>Les loupes d’écran devraient agrandir l’objet d’état.</li> </ul> <div class="note"> - <strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p> +</div> <h3 id="Exemples">Exemples</h3> <h4 id="Exemple_1_ajout_du_rôle_status_dans_le_code_HTML">Exemple 1 : ajout du rôle <code>status</code> dans le code HTML</h4> <p>L’extrait de code ci-dessous montre comment le rôle <code>status</code> est ajouté directement dans le code source HTML.</p> @@ -37,15 +38,13 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status <h3 id="Notes">Notes</h3> <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#status">status</a>.</li> + <li><a href="http://www.w3.org/TR/wai-aria/roles#status">status</a>.</li> </ul> <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> <ul> - <li>Rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#alert">alert</a>.</li> + <li>Rôle <a href="http://www.w3.org/TR/wai-aria/roles#alert">alert</a>.</li> </ul> -<h3 id="Compatibilité">Compatibilité</h3> -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> <h3 id="Autres_ressources">Autres ressources</h3> <ul> - <li>Bonnes pratiques ARIA – Implémentation des zones live : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#LiveRegions">#LiveRegions</a>.</li> + <li>Bonnes pratiques ARIA – Implémentation des zones live : <a href="http://www.w3.org/TR/wai-aria-practices/#LiveRegions">#LiveRegions</a>.</li> </ul> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html deleted file mode 100644 index 648c2a3b4f..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Utiliser le rôle toolbar -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role -tags: - - ARIA - - Accessibilité - - NeedsContent - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_toolbar ---- -<h3 id="Description">Description</h3> -<div class="summary"> - </div> -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> -<p> </p> -<div class="note"> - <strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> -<h3 id="Exemples">Exemples</h3> -<h4 id="Exemple_1">Exemple 1 :</h4> -<p> </p> -<pre class="brush: html">Code </pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> -<ul> -</ul> -<h3 id="Notes">Notes</h3> -<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> -<h3 id="Compatibilité">Compatibilité</h3> -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> -<h3 id="Autres_ressources">Autres ressources</h3> diff --git a/files/fr/web/accessibility/aria/forms/alerts/index.html b/files/fr/web/accessibility/aria/forms/alerts/index.html index daaa21dce6..588633fad9 100644 --- a/files/fr/web/accessibility/aria/forms/alerts/index.html +++ b/files/fr/web/accessibility/aria/forms/alerts/index.html @@ -15,7 +15,7 @@ original_slug: Accessibilité/ARIA/formulaires/Alertes <h2 id="Le_formulaire">Le formulaire</h2> -<p>Tout d’abord, veuillez lire la <a href="/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires" rel="nofollow" title="Indications élémentaires pour les formulaires">technique <code>aria-required</code></a> pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement.</p> +<p>Tout d’abord, veuillez lire la <a href="/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires" rel="nofollow">technique <code>aria-required</code></a> pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement.</p> <p>Voici un formulaire simple :</p> @@ -43,7 +43,7 @@ original_slug: Accessibilité/ARIA/formulaires/Alertes <p>Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-)</p> -<h2 id="Vérification_de_la_validité_et_avertissement_de_l’utilisateur"><span class="mw-headline" id="Checking_for_validity_and_notifying_the_user">Vérification de la validité et avertissement de l’utilisateur</span></h2> +<h2 id="Vérification_de_la_validité_et_avertissement_de_l’utilisateur">Vérification de la validité et avertissement de l’utilisateur</h2> <p>Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes :</p> @@ -57,7 +57,7 @@ original_slug: Accessibilité/ARIA/formulaires/Alertes <p>La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} :</p> -<pre class="brush: javascript"><script type="application/javascript"> +<pre class="brush: js"><script type="application/javascript"> function removeOldAlert() { var oldAlert = document.getElementById("alert"); @@ -91,7 +91,7 @@ function checkValidity(aID, aSearchTerm, aMsg) </script> </pre> -<h2 id="La_fonction_checkValidity_2"><span class="mw-headline" id="La_fonction_checkValidity">La fonction <code>checkValidity</code></span></h2> +<h2 id="La_fonction_checkValidity_2">La fonction <code>checkValidity</code></h2> <p>Le cœur est la fonction <code>checkValidity</code>. Elle accepte trois paramètres : l’ID du champ de saisi qui doit être validé, le terme à recherche pour assurer la validité, et le message d’erreur à insérer dans l’alerte.</p> @@ -106,17 +106,17 @@ function checkValidity(aID, aSearchTerm, aMsg) <p>Si le terme recherché est trouvé, l’attribut <code>aria-invalid</code> est réinitialisé à <code>true</code>. De plus, toute alerte qui subsisterait serait supprimée.</p> -<h2 id="La_fonction_addAlert_2"><span class="mw-headline" id="La_fonction_addAlert">La fonction <code>addAlert</code></span></h2> +<h2 id="La_fonction_addAlert_2">La fonction <code>addAlert</code></h2> <p>Cette fonction commence par enlever toutes les alertes restantes. Son fonctionnement est simple : elle cherche un élément avec un identifiant <code>alert</code>, et si elle en trouve un, l’enlève du modèle objet de document (DOM).</p> -<p>Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID <code>alert</code>. Et son rôle est défini comme celui d’une « alert ». C’est inspiré par ARIA, même si le nom de l’attribut ne comporte par « aria ». Cela découle du fait que ce rôle est basé sur le module <a class="external text" href="http://www.w3.org/TR/xhtml-role/" title="XHTML Role Attribut Module">XHTML Role Attribut</a> qui a été tout simplement porté sur HTML pour plus de simplicité.</p> +<p>Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID <code>alert</code>. Et son rôle est défini comme celui d’une « alert ». C’est inspiré par ARIA, même si le nom de l’attribut ne comporte par « aria ». Cela découle du fait que ce rôle est basé sur le module <a href="http://www.w3.org/TR/xhtml-role/">XHTML Role Attribut</a> qui a été tout simplement porté sur HTML pour plus de simplicité.</p> <p>Le texte est ajouté à l’élément {{ HTMLElement("div") }}, qui est lui-même ajouté au document.</p> <p>Au moment où cela se produira, Firefox déclenchera un événement « alert » pour la technologie d’assistance lorsque la {{ HTMLElement("div") }} apparaîtra. La plupart des lecteurs d’écran prendront celui-ci automatiquement et le liront. C’est similaire à la barre de notification de Firefox qui apparaît lorsque vous désirez mémoriser un mot de passe. Cette alerte que nous venons de créer n’a pas de bouton sur lequel cliquer, elle se contente de nous dire ce qui est erroné.</p> -<h2 id="Ajouter_de_la_magie_à_l’événement_onblur"><span class="mw-headline" id="Ajouter_de_la_magie_a_l_evenement_onblur">Ajouter de la magie à l’événement <code>onblur</code></span></h2> +<h2 id="Ajouter_de_la_magie_à_l’événement_onblur">Ajouter de la magie à l’événement <code>onblur</code></h2> <p>Tout ce qu’il reste à faire, c’est ajouter un gestionnaire d’événement. Nous avons besoin de modifier les deux {{ HTMLElement("input") }} de l’adresse électronique et du nom par ce qui suit :</p> @@ -138,7 +138,7 @@ function checkValidity(aID, aSearchTerm, aMsg) <p>Dans les deux cas, lorsque le focus revient sur le champ concerné, votre lecteur d’écran devrait vous dire que le champ est invalide. JAWS 9 prend en charge cette fonction, mais pas JAWS 8, aussi il se peut que ça ne fonctionne pas pour toutes les versions des lecteurs d’écran pris en charge.</p> -<h2 id="Quelques_questions_qu’on_peut_se_poser"><span class="mw-headline" id="Quelques_questions_qu_on_peut_se_poser">Quelques questions qu’on peut se poser</span></h2> +<h2 id="Quelques_questions_qu’on_peut_se_poser">Quelques questions qu’on peut se poser</h2> <dl> <dt>Q. Pourquoi mettre à la fois un <code>(required)</code> dans le texte du label et l’attribut <code>aria-required</code> sur certains éléments {{ HTMLElement("input") }} ?</dt> @@ -147,12 +147,6 @@ function checkValidity(aID, aSearchTerm, aMsg) <dd>R. Cela n’est pas autorisé par, au moins, la spécification de l’API Windows, et probablement par d’autres. De plus, laisser le focus se déplacer sans réelle intervention de l’utilisateur n’est généralement pas considéré comme une chose à faire.</dd> </dl> -<div class="warning"> -<p>TBD : let's rethink this – personally, I think setting focus might be good if done without causing a keyboard trap.</p> - -<p>()Il faudrait y réfléchir – personnellement, je pense que définir le focus peut être une bonne chose si c’est fait sans causer de perturbation à la navigation au clavier).</p> -</div> - -<h2 id="Conclusion"><span class="mw-headline" id="In_conclusion">Conclusion</span></h2> +<h2 id="Conclusion">Conclusion</h2> <p>L’accessibilité des sites web est grandement améliorée lorsqu’on fournit des alertes accessibles pour la validation côté client. Il n’y a rien de plus frustrant pour un utilisateur que de remplir un formulaire d’une vingtaine de champs, voire plus, de le soumettre, de constater que seuls quelques champs ne sont pas correctement renseignés et de devoir tout recommencer depuis le début pour s’assurer que les valeurs sont correctement mémorisées, ou de fournir des informations redondantes.</p> diff --git a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html index 89eb5e579b..bee7b3fe5e 100644 --- a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html +++ b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html @@ -8,7 +8,7 @@ tags: translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les_formulaires --- -<h2 id="Labels_de_formulaire" name="Labels_de_formulaire">Labels de formulaire</h2> +<h2 id="Labels_de_formulaire">Labels de formulaire</h2> <p>Lors de l’implémentation de formulaires à l’aide d’éléments de formulaire HTML classiques, il est important de fournir des labels pour les contrôles et d’associer explicitement un label avec son contrôle. Lorsqu’un utilisateur de lecteur d’écran navigue sur une page, le lecteur d’écran décrit les contrôles de formulaire ; mais sans association directe entre un contrôle et son label, le lecteur d’écran n’a aucun moyen de savoir quel est le label correspondant.</p> @@ -38,9 +38,9 @@ original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les </form> </pre> -<h2 id="Labelliser_avec_ARIA" name="Labelliser_avec_ARIA">Labelliser avec ARIA</h2> +<h2 id="Labelliser_avec_ARIA">Labelliser avec ARIA</h2> -<p>L’élément HTML {{ HTMLElement("label") }} est approprié pour les éléments liés aux formulaires, mais de nombreux contrôles de formulaires sont implémentés sous forme de composants JavaScript dynamiques et utilisent les éléments {{ HTMLElement("div") }} ou {{ HTMLElement("span") }}. <a href="http://www.w3.org/WAI/intro/aria.php" hreflang="en" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, la spécification <strong>Accessible Rich Internet Applications</strong> (Applications Internet Riches Accessibles) de la <a href="http://www.w3.org/WAI/" hreflang="en" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a> (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby" hreflang="en" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a> dans ces cas de figure.</p> +<p>L’élément HTML {{ HTMLElement("label") }} est approprié pour les éléments liés aux formulaires, mais de nombreux contrôles de formulaires sont implémentés sous forme de composants JavaScript dynamiques et utilisent les éléments {{ HTMLElement("div") }} ou {{ HTMLElement("span") }}. <a href="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, la spécification <strong>Accessible Rich Internet Applications</strong> (Applications Internet Riches Accessibles) de la <a href="http://www.w3.org/WAI/">Web Accessibility Initiative</a> (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a> dans ces cas de figure.</p> <p>L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut <code>aria-labelledby</code> de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’<code>id</code> de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio.</p> @@ -61,9 +61,9 @@ original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les </ul> </pre> -<h2 id="Decrire_avec_ARIA" name="Decrire_avec_ARIA">Décrire avec ARIA</h2> +<h2 id="Decrire_avec_ARIA">Décrire avec ARIA</h2> -<p>Les contrôles de formulaire peuvent parfois avoir une description qui leur est associée, en plus du label. ARIA fournit l’attribut <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby"><code>aria-describedby</code></a> pour associer directement une description à un contrôle donné.</p> +<p>Les contrôles de formulaire peuvent parfois avoir une description qui leur est associée, en plus du label. ARIA fournit l’attribut <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby"><code>aria-describedby</code></a> pour associer directement une description à un contrôle donné.</p> <p>L’exemple ci-dessous montre un élément {{ HTMLElement("button") }} décrit par une phrase contenue dans un élément {{ HTMLElement("div") }} séparé. L’attribut <code>aria-describedby</code> du {{ HTMLElement("button") }} fait référence à l’<code>id</code> de l’élément {{ HTMLElement("div") }}.</p> @@ -75,13 +75,13 @@ original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les <p>(Notez que l’attribut <code>aria-describedby</code> est utilisé de différentes façons, en plus des contrôles de formulaires.)</p> -<h2 id="Champs_obligatoires_et_invalides" name="Champs_obligatoires_et_invalides">Champs obligatoires et invalides</h2> +<h2 id="Champs_obligatoires_et_invalides">Champs obligatoires et invalides</h2> <p>Les développeur Web utilisent souvant des éléments de présentation visuels pour indiquer les champs obligatoires ou invalides, mais les technologies d’assistance ne peuvent pas toujours déduire ces informations à partir de la présentation. ARIA fournit des attributs pour indiquer l’obligation de renseigner un contrôle de formulaire ou la validité de son contenu :</p> <ul> - <li>La propriété <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required"><code>aria-required</code></a> peut être appliquée à un élément de formulaire pour indiquer à une technologie d’assistance qu’il est obligatoire pour compléter le formulaire.</li> - <li>L’état <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid"><code>aria-invalid</code></a> peut être programmatiquement appliquée pour indiquer à une technologie d’assistance quel champ contient des données incorrectes, afin que l’utilisateur sache qu’il a saisi des données invalides.</li> + <li>La propriété <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required"><code>aria-required</code></a> peut être appliquée à un élément de formulaire pour indiquer à une technologie d’assistance qu’il est obligatoire pour compléter le formulaire.</li> + <li>L’état <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid"><code>aria-invalid</code></a> peut être programmatiquement appliquée pour indiquer à une technologie d’assistance quel champ contient des données incorrectes, afin que l’utilisateur sache qu’il a saisi des données invalides.</li> </ul> <p>L’exemple ci-dessous montre un formulaire simple avec 3 champs. Aux lignes 4 et 12, les attributs <code>aria-required</code> sont définis à <code>true</code> (en plus de l’astérisque en début de champ) indiquant que le nom et l’adresse électronique sont obligatoires. La seconde partie de l’exemple est un snippet JavaScript qui valide le format de l’adresse électronique et qui définit l’attribut <code>aria-invalid</code> du champ « Courriel » (ligne 12 du code HTML) selon le résultat (en plus de la modification de la présentation de l’élément).</p> @@ -113,8 +113,8 @@ original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les setElementBorderColour(emailElement, valid); // colore la bordure en rouge sur le second argument est false };</pre> -<h2 id="Fournir_des_messages_d_erreur_utiles" name="Fournir_des_messages_d_erreur_utiles">Fournir des messages d’erreur utiles</h2> +<h2 id="Fournir_des_messages_d_erreur_utiles">Fournir des messages d’erreur utiles</h2> -<p>Découvrez comment utiliser <a href="/fr/docs/Accessibilité/ARIA/formulaires/Alertes" title="Accessibilité/ARIA/formulaires/Alertes">les alertes ARIA pour améliorer les formulaires</a>.</p> +<p>Découvrez comment utiliser <a href="/fr/docs/Accessibilité/ARIA/formulaires/Alertes">les alertes ARIA pour améliorer les formulaires</a>.</p> -<p>Pour plus de conseils sur l’utilisation d’ARIA et l’accessibilité des formulaires, consultez le document <a href="http://www.w3.org/TR/wai-aria-practices/" hreflang="en" title="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a>.</p> +<p>Pour plus de conseils sur l’utilisation d’ARIA et l’accessibilité des formulaires, consultez le document <a href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a>.</p> diff --git a/files/fr/web/accessibility/aria/forms/index.html b/files/fr/web/accessibility/aria/forms/index.html index 826b1c2df4..8759c01cbe 100644 --- a/files/fr/web/accessibility/aria/forms/index.html +++ b/files/fr/web/accessibility/aria/forms/index.html @@ -12,9 +12,9 @@ original_slug: Accessibilité/ARIA/formulaires <p>Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web :</p> <ul> - <li><a href="/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires" title="Indications élémentaires pour les formulaires">Indications élémentaires pour les formulaires</a> : ajouter des suggestions et des descriptions pour les champs invalides ou obligatoires</li> - <li><a href="/fr/Accessibilité/ARIA/formulaires/Alertes" title="alertes">Alertes</a> : Utiliser les alertes pour fournir des messages d'erreur de validation côté client</li> - <li><a href="/fr/Accessibilité/ARIA/formulaires/Labels_multi-options" title="https://developer.mozilla.org/fr/aria/formulaires/multi-options">Labels multi-options</a>: fournir des labels de formulaire complexes avec un contrôle pour chaque label</li> + <li><a href="/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires">Indications élémentaires pour les formulaires</a> : ajouter des suggestions et des descriptions pour les champs invalides ou obligatoires</li> + <li><a href="/fr/Accessibilité/ARIA/formulaires/Alertes">Alertes</a> : Utiliser les alertes pour fournir des messages d'erreur de validation côté client</li> + <li><a href="/fr/Accessibilité/ARIA/formulaires/Labels_multi-options">Labels multi-options</a>: fournir des labels de formulaire complexes avec un contrôle pour chaque label</li> </ul> -<p>Voir également l’<a class="external" href="https://web.archive.org/web/20120801225355/http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html" hreflang="en" title="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html">article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais)</a> (version archivée par archive.org), couvrant pour une bonne part le même sujet.</p> +<p>Voir également l’<a href="https://web.archive.org/web/20120801225355/http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html">article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais)</a> (version archivée par archive.org), couvrant pour une bonne part le même sujet.</p> diff --git a/files/fr/web/accessibility/aria/forms/multipart_labels/index.html b/files/fr/web/accessibility/aria/forms/multipart_labels/index.html index 1ed8eb367d..5cb8dfa611 100644 --- a/files/fr/web/accessibility/aria/forms/multipart_labels/index.html +++ b/files/fr/web/accessibility/aria/forms/multipart_labels/index.html @@ -11,7 +11,7 @@ original_slug: Accessibilité/ARIA/formulaires/Labels_multi-options --- <h2 id="Utiliser_ARIA_avec_des_labels_comportant_des_champs">Utiliser ARIA avec des labels comportant des champs</h2> -<h3 id="Problem_2" name="Problem_2">Problème</h3> +<h3 id="Problem_2">Problème</h3> <p>Un formulaire pose une question à un utilisateur, mais la zone de réponse est une partie de la phrase qui constitue la question. Un exemple classique que nous connaissons tous dans notre navigateur, c’est la paramètre des préférences « <code>Effacer l’historique après [x] jours</code>. » « <code>Effacer l’historique après</code> » est à la gauche de la boîte texte, « <code>x</code> » est le nombre, par exemple 21, et le mot « <code>jours</code> » suit la boîte texte, formant ainsi un phrase qu'il est facile de comprendre.</p> @@ -23,20 +23,16 @@ original_slug: Accessibilité/ARIA/formulaires/Labels_multi-options <p>Exemple :</p> -<p><input><span id="labelShutdown">Éteindre l’ordinateur après</span> <input> <span id="shutdownUnit"> minutes</span></p> - <pre class="brush: html"> <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" /> <span id="labelShutdown">Éteindre l’ordinateur après</span> <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" id="shutdownTime" type="text" value="10" /> <span id="shutdownUnit"> minutes</span> </pre> -<h3 id="A_Note_for_JAWS_8_users_2" name="A_Note_for_JAWS_8_users_2">Pour les utilisateurs de JAWS 8</h3> +<h3 id="A_Note_for_JAWS_8_users_2">Pour les utilisateurs de JAWS 8</h3> <p>JAWS 8.0 possède sa propre logique pour trouver les labels, ce qui lui fait systématiquement supplanter le <code>nomAccessible</code> que peut avoir une boîte texte dans un document HTML. Avec JAWS 8, je n’ai trouvé aucun moyen de lui faire accepter le label de l’exemple ci-dessus. Mais NVDA et Window-Eyes le font très bien, et Orca sur Linux n’a aucun problème non plus.</p> -<h3 id="Can_this_be_done_without_ARIA.3F_2" name="Can_this_be_done_without_ARIA.3F_2">Peut-on faire la même chose sans ARIA ?</h3> - -<p>Ben Millard fait remarquer dans un billet que <a class="external text" href="http://projectcerbera.com/blog/2008/03#day24" rel="nofollow">les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4</a>, simplement en imbriquant l'élément <code>input</code> dans le <code>label</code>. Merci pour cette info, Ben ! Elle est vraiment utile et montre que certaines techniques existantes depuis des années nous échappe, même aux gourous que nous sommes. Cette technique fonctionne dans Firefox ; cependant, elle ne fonctionne actuellement pas dans de nombreux autres navigateurs, y compris IE. Donc, pour les labels comprenant des contrôles de formulaires, l'utilisation de <code>aria-labelledby</code> est encore la meilleure approche.</p> +<h3 id="Can_this_be_done_without_ARIA.3F_2">Peut-on faire la même chose sans ARIA ?</h3> -<div class="note">TBD: Ajouter plus d’infos sur la compatibilité</div> +<p>Ben Millard fait remarquer dans un billet que <a href="http://projectcerbera.com/blog/2008/03#day24" rel="nofollow">les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4</a>, simplement en imbriquant l'élément <code>input</code> dans le <code>label</code>. Merci pour cette info, Ben ! Elle est vraiment utile et montre que certaines techniques existantes depuis des années nous échappe, même aux gourous que nous sommes. Cette technique fonctionne dans Firefox ; cependant, elle ne fonctionne actuellement pas dans de nombreux autres navigateurs, y compris IE. Donc, pour les labels comprenant des contrôles de formulaires, l'utilisation de <code>aria-labelledby</code> est encore la meilleure approche.</p> diff --git a/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html index 7c09b335fe..e06f116df6 100644 --- a/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html +++ b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html @@ -9,11 +9,13 @@ original_slug: Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA --- <p>L'état de la technologie ARIA a toujours dépendu de la communauté. Si vous remarquez un problème d'implémentation, veuillez prendre un instant pour en informer les développeurs. Voici comment déposer les bugs :</p> -<div class="note">Quand vous trouvez un bug, veuillez en aviser les tables de compatibilité liées dans la <a href="/en/ARIA/examples" title="https://developer.mozilla.org/en/ARIA/examples">page des exemples.</a></div> +<div class="note"> + <p><strong>Note :</strong> Quand vous trouvez un bug, veuillez en aviser les tables de compatibilité liées dans la <a href="/fr/ARIA/examples">page des exemples.</a></p> +</div> <p>A faire : ajouter la bon lien d'accessibilité à la table</p> -<table style="width: 100%;"> +<table> <thead> <tr> <th>Genre</th> @@ -26,47 +28,47 @@ original_slug: Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA <tr> <td colspan="1" rowspan="4">Lecteurs d'écran</td> <td> - <p><a class="external" href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Freedom Scientific JAWS</a></p> + <p><a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Freedom Scientific JAWS</a></p> </td> - <td><a class="external" href="http://www.freedomscientific.com/Support" title="http://www.freedomscientific.com/forms/Contact_Us.asp?ID=TECHNICAL-SUPPORT">formulaire de support technique JAWS</a></td> + <td><a href="http://www.freedomscientific.com/Support">formulaire de support technique JAWS</a></td> </tr> <tr> - <td><a href="/en/Inner_and_outer_windows" title="Inner and outer windows">GW Micro Window Eyes</a></td> - <td><a class="link-mailto" href="mailto:support@gwmicro.com" title="mailto:support@gwmicro.com">commentaires, questions et retours Window-Eyes </a>(email)</td> + <td><a href="/fr/Inner_and_outer_windows">GW Micro Window Eyes</a></td> + <td><a href="mailto:support@gwmicro.com">commentaires, questions et retours Window-Eyes </a>(email)</td> <td> </td> </tr> <tr> - <td><a class="external" href="http://www.nvda-project.org/" title="http://www.nvda-project.org/">Non Visual Desktop Access (NVDA)</a></td> - <td><a class="external" href="http://www.nvda-project.org/wiki/ReportingIssues" title="http://www.nvda-project.org/wiki/ReportingIssues">Déposer un bug NVDA</a> (github)</td> - <td><a href="/en/Accessibility/JAWS_Issues_with_Firefox" title="JAWS Issues with Firefox">Discuter des problèmes NVDA</a></td> + <td><a href="http://www.nvda-project.org/">Non Visual Desktop Access (NVDA)</a></td> + <td><a href="http://www.nvda-project.org/wiki/ReportingIssues">Déposer un bug NVDA</a> (github)</td> + <td><a href="/fr/Accessibility/JAWS_Issues_with_Firefox">Discuter des problèmes NVDA</a></td> </tr> <tr> - <td><a href="/User:orca.clock" title="User:orca.clock">Orca</a></td> - <td><a href="/fr/DOM/File" title="File">Déposer un bug Orca</a></td> + <td><a href="/User:orca.clock">Orca</a></td> + <td><a href="/fr/DOM/File">Déposer un bug Orca</a></td> <td> </td> </tr> <tr> <td colspan="1" rowspan="5">Navigateurs</td> <td>Apple Safari</td> - <td><a class="external" href="http://www.webkit.org/quality/reporting.html" title="http://www.webkit.org/quality/reporting.html">Déposer un bug WebKit.org</a></td> + <td><a href="http://www.webkit.org/quality/reporting.html">Déposer un bug WebKit.org</a></td> <td> </td> </tr> <tr> <td>Google Chrome</td> - <td><a class="external" href="http://code.google.com/p/chromium/issues/list" title="http://code.google.com/p/chromium/issues/list">Déposer un bug Chromium</a></td> + <td><a href="http://code.google.com/p/chromium/issues/list">Déposer un bug Chromium</a></td> <td> </td> </tr> <tr> <td> <p>Microsoft Internet Explorer</p> </td> - <td><a class="link-https" href="https://connect.microsoft.com/IE/Feedback" title="https://connect.microsoft.com/IE/Feedback">Déposer un bug IE</a></td> - <td><a class="external text" href="https://bugzilla.mozilla.org/showdependencytree.cgi?id=343213&hide_resolved=1" rel="nofollow">Voir les bugs ARIA Firefox existants</a></td> + <td><a class="link-https" href="https://connect.microsoft.com/IE/Feedback">Déposer un bug IE</a></td> + <td><a href="https://bugzilla.mozilla.org/showdependencytree.cgi?id=343213&hide_resolved=1" rel="nofollow">Voir les bugs ARIA Firefox existants</a></td> </tr> <tr> <td>Mozilla Firefox</td> <td> - <p><a class="external" href="http://bugzilla.mozilla.org/" title="http://bugzilla.mozilla.org/">Déposer un bug Firefox</a></p> + <p><a href="http://bugzilla.mozilla.org/">Déposer un bug Firefox</a></p> </td> <td> <p>Utiliser le composant : Disability Access APIs</p> @@ -74,24 +76,24 @@ original_slug: Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA </tr> <tr> <td>Opera</td> - <td><a class="link-https" href="https://bugs.opera.com/wizard/" title="https://bugs.opera.com/wizard/">Déposer un bug Opera</a></td> - <td><span class="external">Marquer [ARIA] dans le sommaire</span></td> + <td><a class="link-https" href="https://bugs.opera.com/wizard/">Déposer un bug Opera</a></td> + <td>Marquer [ARIA] dans le sommaire</td> </tr> <tr> <td colspan="1" rowspan="3">Librairies JS</td> <td>Dojo Toolkit</td> - <td><a class="external" href="http://dojotoolkit.org/blog/how-file-dojo-bug-report" title="http://dojotoolkit.org/blog/how-file-dojo-bug-report">Déposer un bug Dojo</a></td> - <td><span class="external">Marquer [Accessibilité] dans le champ composant</span></td> + <td><a href="http://dojotoolkit.org/blog/how-file-dojo-bug-report">Déposer un bug Dojo</a></td> + <td>Marquer [Accessibilité] dans le champ composant</td> </tr> <tr> <td>Google Web Toolkit (GWT)</td> - <td><a href="/fr/DOM/File" title="File">Déposer un bug GWT</a></td> + <td><a href="/fr/DOM/File">Déposer un bug GWT</a></td> <td> </td> </tr> <tr> <td>Yahoo User Interface</td> - <td><a class="external" href="http://sourceforge.net/tracker/?func=add&group_id=165715&atid=836476" rel="external" title="http://sourceforge.net/tracker/?func=add&group_id=165715&atid=836476">Déposer un bug YUI</a></td> - <td><span class="external">Déposer contre le composant associé dans la combobox catégorie et inclure [ARIA] dans le sommaire</span></td> + <td><a href="http://sourceforge.net/tracker/?func=add&group_id=165715&atid=836476">Déposer un bug YUI</a></td> + <td>Déposer contre le composant associé dans la combobox catégorie et inclure [ARIA] dans le sommaire</td> </tr> </tbody> </table> diff --git a/files/fr/web/accessibility/aria/index.html b/files/fr/web/accessibility/aria/index.html index d664de8de5..c54e182fce 100644 --- a/files/fr/web/accessibility/aria/index.html +++ b/files/fr/web/accessibility/aria/index.html @@ -9,12 +9,12 @@ tags: translation_of: Web/Accessibility/ARIA original_slug: Accessibilité/ARIA --- -<p class="summary"><span class="seoSummary"><em>Accessible Rich Internet Applications</em> <strong>(ARIA) </strong>(qu'on pourrait traduire par « applications internet riches et accessibles ») sont un ensemble un attribut qui définit comment rendre le contenu et les applications web accessibles. </span></p> +<p><em>Accessible Rich Internet Applications</em> <strong>(ARIA) </strong>(qu'on pourrait traduire par « applications internet riches et accessibles ») sont un ensemble un attribut qui définit comment rendre le contenu et les applications web accessibles.</p> -<p><span class="seoSummary">ARIA complète HTML afin que les éléments interactifs et les widgets puissent être utilisés par les outils d'assistance quand les fonctionnalités standard ne le permettent pas.</span> Ainsi, ARIA permet de rendre accessible les <em>widgets</em> JavaScript, les indications dans les formulaires, les messages d'erreur et les mises à jour dynamiques du contenu, etc.</p> +<p>ARIA complète HTML afin que les éléments interactifs et les widgets puissent être utilisés par les outils d'assistance quand les fonctionnalités standard ne le permettent pas. Ainsi, ARIA permet de rendre accessible les <em>widgets</em> JavaScript, les indications dans les formulaires, les messages d'erreur et les mises à jour dynamiques du contenu, etc.</p> <div class="warning"> -<p><strong>Attention !</strong> La plupart de ces <em>widgets</em> ont été intégrés au sein d'HTML5 et mieux vaudra donc utiliser les éléments « sémantiques » HTML lorsqu'ils sont disponibles. Ainsi, les éléments natifs disposent de fonctionnalités <a href="/fr/docs/Contrôles_DHTML_personnalisés_navigables_au_clavier">de navigation au clavier</a>, de rôles et d'états définis en standard. Toutefois, lorsque vous choisissez d'utiliser ARIA, il vous revient de recoder les fonctionnalités équivalentes dans vos scripts.</p> +<p><strong>Attention :</strong> La plupart de ces <em>widgets</em> ont été intégrés au sein d'HTML5 et mieux vaudra donc utiliser les éléments « sémantiques » HTML lorsqu'ils sont disponibles. Ainsi, les éléments natifs disposent de fonctionnalités <a href="/fr/docs/Contrôles_DHTML_personnalisés_navigables_au_clavier">de navigation au clavier</a>, de rôles et d'états définis en standard. Toutefois, lorsque vous choisissez d'utiliser ARIA, il vous revient de recoder les fonctionnalités équivalentes dans vos scripts.</p> </div> <p>Voici un <em>widget</em> utilisé pour une barre de progression :</p> @@ -56,25 +56,22 @@ original_slug: Accessibilité/ARIA <p>Il est aussi important de tester l'ARIA écrit avec des technologies d'assistance réelles. Bien qu'il existe certains émulateurs et simulateurs, rien ne vaut un test réel afin d'obtenir suffisamment de garanties.</p> -<section id="sect1"> -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Tutoriels">Tutoriels</h2> +<h2 id="Tutoriels">Tutoriels</h2> <dl> <dt><a href="/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles">Introduction à ARIA</a></dt> - <dd>Une rapide introduction à ARIA pour rendre accessible le contenu dynamique. Voir aussi <a class="external" href="https://dev.opera.com/articles/introduction-to-wai-aria/">l'introduction à ARIA de Gez Lemon</a> en 2008</dd> - <dt><a class="external" href="https://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Vidéos de lecteurs d'écran utilisant ARIA</a></dt> + <dd>Une rapide introduction à ARIA pour rendre accessible le contenu dynamique. Voir aussi <a href="https://dev.opera.com/articles/introduction-to-wai-aria/">l'introduction à ARIA de Gez Lemon</a> en 2008</dd> + <dt><a href="https://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Vidéos de lecteurs d'écran utilisant ARIA</a></dt> <dd>Des exemples concrets et d'autres simplifiés avec des vidéos comparatives entre l'état « avant ARIA » et « après ARIA ».</dd> - <dt><a class="external" href="https://w3c.github.io/using-aria/">Utiliser ARIA</a></dt> + <dt><a href="https://w3c.github.io/using-aria/">Utiliser ARIA</a></dt> <dd>Un guide pratique pour les développeurs qui fournit également des suggestions quant aux attributs ARIA à utiliser sur les éléments HTML sur la base d'implémentations concrètes.</dd> </dl> <h2 id="Améliorations_légères_avec_ARIA">Améliorations légères avec ARIA</h2> <dl> - <dt><a class="external" href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Améliorer la navigation avec les balises (<em>landmarks</em>) ARIA</a></dt> - <dd>Une introduction à l'utilisation des balises ARIA afin d'améliorer la navigation au sein d'une page web pour les utilisateurs de lecteur d'écran. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">Voir aussi les notes d'implémentation pour les balises ARIA</a> (mis à jour en juillet 2011).</dd> + <dt><a href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Améliorer la navigation avec les balises (<em>landmarks</em>) ARIA</a></dt> + <dd>Une introduction à l'utilisation des balises ARIA afin d'améliorer la navigation au sein d'une page web pour les utilisateurs de lecteur d'écran. <a href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">Voir aussi les notes d'implémentation pour les balises ARIA</a> (mis à jour en juillet 2011).</dd> <dt><a href="/fr/docs/Accessibilité/ARIA/formulaires">Améliorer l'accessibilité des formulaires</a></dt> <dd>ARIA ne se limite pas au contenu dynamique ! Apprenez comment améliorer l'accessibilité des formulaires HTML grâce aux attributs ARIA.</dd> </dl> @@ -86,18 +83,16 @@ original_slug: Accessibilité/ARIA <dd>Les éléments tels que <code><input></code>, <code><button></code> disposent de fonctionnalités natives pour l'utilisation au clavier. Si on triche en utilisant des <code> <div></code> et ARIA, on doit s'assurer que l'accessibilité au clavier soit préservée.</dd> <dt><a href="/fr/docs/Accessibilité/ARIA/Zones_live_ARIA">Régions dynamiques</a> (<em>live regions</em>)</dt> <dd>Les régions dynamiques fournissent des suggestion aux lecteurs d'écran sur la façon dont gérer la modification du contenu d'une page.</dd> - <dt><a class="external" href="https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm">Utiliser les régions dynamiques ARIA afin d'indiquer une modification de contenu</a></dt> + <dt><a href="https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm">Utiliser les régions dynamiques ARIA afin d'indiquer une modification de contenu</a></dt> <dd>Un rapide résumé des régions interactives par les concepteurs du lecteur d'écran JAWS. Les régions dynamiques sont également prises en charge par NVDA pour Firefox et par VoiceOver avec Safari.</dd> </dl> -</div> -<div class="section"> -<h2 class="Tools" id="Processus_de_standardisation">Processus de standardisation</h2> +<h2 id="Processus_de_standardisation">Processus de standardisation</h2> <dl> - <dt><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/">La spécification WAI-ARIA</a></dt> + <dt><a href="https://www.w3.org/TR/wai-aria-1.1/">La spécification WAI-ARIA</a></dt> <dd>La spécification rédigée par le W3C.</dd> - <dt><a class="external" href="https://www.w3.org/TR/wai-aria-practices-1.1/">Bonnes pratiques afin d'écrire avec WAI-ARIA</a></dt> + <dt><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">Bonnes pratiques afin d'écrire avec WAI-ARIA</a></dt> <dd> <p>Les documents officiels décrivant les meilleurs pratiques pour appliquer ARIA aux <em>widgets</em> et aux mécanismes interactifs.</p> </dd> @@ -110,9 +105,6 @@ original_slug: Accessibilité/ARIA <h2 id="Rapporter_des_bogues">Rapporter des bogues</h2> <p><a href="/fr/docs/Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA">Rapporter des bogues d'accessibilté/ARIA sur les navigateurs, les lecteurs d'écran et les bibliothèques JavaScript.</a></p> -</div> -</div> -</section> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/accessibility/aria/roles/banner_role/index.html b/files/fr/web/accessibility/aria/roles/banner_role/index.html index d668162b66..8c3d63a9d1 100644 --- a/files/fr/web/accessibility/aria/roles/banner_role/index.html +++ b/files/fr/web/accessibility/aria/roles/banner_role/index.html @@ -11,7 +11,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner --- <h3 id="Description">Description</h3> -<div class="summary">Cette technique présente l’utilisation du rôle <a class="external external-icon" href="https://www.w3.org/TR/wai-aria/roles#banner" hreflang="en" title="http://www.w3.org/TR/wai-aria/roles#alert"><code>banner</code> (en)</a>.</div> +<p>Cette technique présente l’utilisation du rôle <a href="https://www.w3.org/TR/wai-aria/roles#banner"><code>banner</code> (en)</a>.</p> <p>La zone d’entête principale d'un site devrait être structurée avec <code><header role="banner"></code>. Cette zone peut contenir le logo du site, sa description, le moteur de recherche.</p> @@ -21,7 +21,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner <p> </p> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> <h3 id="Exemples">Exemples</h3> diff --git a/files/fr/web/accessibility/aria/roles/button_role/index.html b/files/fr/web/accessibility/aria/roles/button_role/index.html index 23a3e0bc2e..1ededd8194 100644 --- a/files/fr/web/accessibility/aria/roles/button_role/index.html +++ b/files/fr/web/accessibility/aria/roles/button_role/index.html @@ -11,7 +11,7 @@ tags: translation_of: Web/Accessibility/ARIA/Roles/button_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_button --- -<p class="summary">Le rôle <strong><a href="https://www.w3.org/WAI/PF/aria/roles#button">button</a></strong> devrait être utilisé pour les éléments cliquables qui déclenchent une réponse lorsqu'activés par l'utilisateur. Ajouter <code>role="button"</code> permettra à un élément d'apparaître comme un bouton de contrôle pour un lecteur d'écran. Ce rôle peut être utilisé avec l'attribut <code>aria-pressed</code> afin de créer des boutons interrupteurs.</p> +<p>Le rôle <strong><a href="https://www.w3.org/WAI/PF/aria/roles#button">button</a></strong> devrait être utilisé pour les éléments cliquables qui déclenchent une réponse lorsqu'activés par l'utilisateur. Ajouter <code>role="button"</code> permettra à un élément d'apparaître comme un bouton de contrôle pour un lecteur d'écran. Ce rôle peut être utilisé avec l'attribut <code>aria-pressed</code> afin de créer des boutons interrupteurs.</p> <pre class="brush: html"><div id="saveChanges" tabindex="0" role="button" aria-pressed="false">Enregistrer</div></pre> @@ -20,7 +20,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_button <pre class="brush: html"><button id="saveChanges">Enregistrer</button></pre> <div class="note"> -<p><strong>Note</strong> : Si on utilise <code>role="button"</code> plutôt que les éléments sémantiques <code><button></code> ou <code><input type="button"></code>, il faudra : permettre à l'élément de recevoir le focus, définir des gestionnaires d'évènements pour <a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a> et <a href="/fr/docs/Web/API/Document/keydown_event"><code>keydown</code></a>, y compris la gestion des touches <kbd>Entrée</kbd> et <kbd>Espace</kbd>, afin de traiter la saisie de l'utilisateur. Voir <a href="https://www.w3.org/TR/wai-aria-practices/examples/button/button.html">l'exemple de code officiel de WAI-ARIA</a>.</p> +<p><strong>Note :</strong> Si on utilise <code>role="button"</code> plutôt que les éléments sémantiques <code><button></code> ou <code><input type="button"></code>, il faudra : permettre à l'élément de recevoir le focus, définir des gestionnaires d'évènements pour <a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a> et <a href="/fr/docs/Web/API/Document/keydown_event"><code>keydown</code></a>, y compris la gestion des touches <kbd>Entrée</kbd> et <kbd>Espace</kbd>, afin de traiter la saisie de l'utilisateur. Voir <a href="https://www.w3.org/TR/wai-aria-practices/examples/button/button.html">l'exemple de code officiel de WAI-ARIA</a>.</p> </div> <h2 id="description">Description</h2> @@ -248,8 +248,8 @@ function toggleButton(element) { <p>Les boutons sont des contrôles interactifs et, à ce titre, peuvent recevoir le focus. Si le rôle <code>button</code> est ajouté à un élément qui ne peut recevoir le focus nativement (comme <code><span></code>, <code><div></code> ou <code><p></code>), l'attribut <code>tabindex</code> devra être utilisé afin de permettre le focus sur le bouton.</p> -<div class="note"> -<strong>Attention !</strong> Lorsqu'on utilise des liens avec le rôle <code>button</code>, il faut rajouter un gestionnaire d'évènement pour la touche <kbd>Espace</kbd>. En effet, les boutons s'activent avec <kbd>Espace</kbd> ou <kbd>Entrée</kbd> tandis que, nativement, les liens ne se déclenchent qu'avec <kbd>Entrée</kbd>.</p> +<div class="warning"> +<p><strong>Attention :</strong> Lorsqu'on utilise des liens avec le rôle <code>button</code>, il faut rajouter un gestionnaire d'évènement pour la touche <kbd>Espace</kbd>. En effet, les boutons s'activent avec <kbd>Espace</kbd> ou <kbd>Entrée</kbd> tandis que, nativement, les liens ne se déclenchent qu'avec <kbd>Entrée</kbd>.</p> </div> <p>Lorsqu'on utilise le rôle <code>button</code>, les lecteurs d'écran annonce l'élément comme un bouton, généralement en énonçant « clic » suivi du nom accessible du bouton. Le nom accessible correspond au contenu de l'élément ou à la valeur de <code>aria-label</code> ou à l'élément référencé avec l'attribut <code>aria-labelledby</code>, ou à une description si elle existe.</p> @@ -297,10 +297,5 @@ function toggleButton(element) { <li><a href="https://www.w3.org/TR/aria-in-html/">Notes sur l'utilisation d'ARIA en HTML</a></li> <li><a href="https://www.w3.org/TR/wai-aria-practices/examples/button/button.html">Exemple de code officiel WAI-ARIA</a></li> <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/menubutton_role">Rôle ARIA <code>menubutton</code></a></li> -</ul> - -<section id="Quick_links"> - <ol> - <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles"><strong>Rôles WAI-ARIA</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li> - </ol> -</section> + <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles"><strong>Rôles WAI-ARIA</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li> +</ul>
\ No newline at end of file diff --git a/files/fr/web/accessibility/aria/roles/checkbox_role/index.html b/files/fr/web/accessibility/aria/roles/checkbox_role/index.html index 04926e9349..7b6168e783 100644 --- a/files/fr/web/accessibility/aria/roles/checkbox_role/index.html +++ b/files/fr/web/accessibility/aria/roles/checkbox_role/index.html @@ -9,9 +9,9 @@ translation_of: Web/Accessibility/ARIA/Roles/checkbox_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox --- <h3 id="Description">Description</h3> -<div class="summary"> - <p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#checkbox" title="http://www.w3.org/TR/wai-aria/roles#checkbox">checkbox</a>.</p> -</div> + +<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#checkbox">checkbox</a>.</p> + <p>Le rôle <code>checkbox</code> est utilisé pour des contrôles interactifs à cocher. Si un élément utilise <code>role="checkbox",</code> il est obligatoire pour cet élément d’avoir également un attribut <code>aria-checked</code> qui présente l’état de la case à cocher aux technologies d’assistance. Alors que le contrôle de formulaire HTML natif <code>checkbox</code> ne peut avoir que deux états (« coché » ou « décoché »), un élément avec le rôle <code>role=checkbox</code> peut présenter trois états pour l'attribut <code>aria-checked</code> :</p> <ul> <li><code>aria-checked="true"</code> : la case est cochée ;</li> @@ -31,7 +31,8 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox <li>Les lecteurs d’écran devraient annoncer l’élément comme une case à cocher, et, éventuellement, fournir des instructions sur les façons de l’activer.</li> </ul> <div class="note"> - <strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> + <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p> +</div> <h3 id="Exemples">Exemples</h3> <h4 id="Exemple_1_Ajout_du_rôle_ARIA_checkbox">Exemple 1 : Ajout du rôle ARIA <code>checkbox</code></h4> <pre class="brush: html"><span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span> @@ -39,15 +40,13 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox </pre> <h4 id="Exemples_concrets">Exemples concrets :</h4> <ul> - <li><a class="external" href="http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php" title="http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php">http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php</a></li> + <li><a href="http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php">http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php</a></li> </ul> <h3 id="Notes">Notes</h3> <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#checkbox" title="ARIA Roles #checkbox">checkbox</a></li> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-checked" title="ARIA States and Properties #aria-checked">aria-checked</a></li> + <li><a href="http://www.w3.org/TR/wai-aria/roles#checkbox">checkbox</a></li> + <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-checked">aria-checked</a></li> </ul> <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> -<h3 id="Compatibilité">Compatibilité</h3> -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> <h3 id="Autres_ressources">Autres ressources</h3> diff --git a/files/fr/web/accessibility/aria/roles/dialog_role/index.html b/files/fr/web/accessibility/aria/roles/dialog_role/index.html index 74d2859656..57386e4f2a 100644 --- a/files/fr/web/accessibility/aria/roles/dialog_role/index.html +++ b/files/fr/web/accessibility/aria/roles/dialog_role/index.html @@ -11,9 +11,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog --- <h3 id="Description">Description</h3> -<div class="summary"> -<p>Cette technique présente l’utilisation du rôle <code><a class="external" href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#dialog" title="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog">dialog (en)</a></code>.</p> -</div> +<p>Cette technique présente l’utilisation du rôle <code><a href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#dialog">dialog (en)</a></code>.</p> <p>Le rôle <code>dialog</code> est utilisé pour marquer une fenêtre ou une boîte de dialogue d’application web qui sépare le contenu ou l’UI du reste de l’application web ou de la page. Visuellement, les boîtes de dialogues sont généralement placées par dessus le contenu de la page, à l’aide d’un calque (ou « Overlay »). Les boîtes de dialogue peuvent être non-modales (ce qui signifie qu’il est toujours possible d’interagir avec le contenu situé hors de la boîte de dialogue) ou modales (ce qui signifie qu’on ne peut interagir qu’avec le contenu de la boîte de dialogue).</p> @@ -32,7 +30,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog <p>Si une boîte de dialogue a une barre de titre visible, le texte de cette barre peut être utilisé comme label pour la boîte elle-même. La meilleure façon de le faire est d’utiliser l’attribut <code>aria-labelledby</code> pour l’élément <code>role="dialog"</code>. De plus, si la boîte de dialogue contient une description supplémentaire, en plus du titre de la boîte, le texte de la description peut être associé avec la boîte de dialogue à l’aide de l’attribut <code>aria-describedby</code>. Cette approche est illustrée dans l’extrait de code ci-dessous :</p> -<pre class="brush: html notranslate"><div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>> +<pre class="brush: html"><div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>> <h2 <strong>id="dialog1Title"</strong>>Vos informations personnelles ont correctement été actualisées.</h2> <p <strong>id="dialog1Desc"</strong>>Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur. »</p> @@ -41,7 +39,9 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog </div> </pre> -<div class="note">Gardez en tête que le titre d’une boîte de dialogue et sa description ne doivent pas être focalisables afin de toujours être perçus par les lecteurs d’écran opérant en mode non-virtuel. La combinaison du rôle ARIA <code>dialog</code> et des techniques de labélisation devrait permettre aux lecteurs d’écran d’annoncer les informations de la boîte de dialogue lorsque le focus arrive sur cette dernière.</div> +<div class="note"> + <p><strong>Note :</strong> Gardez en tête que le titre d’une boîte de dialogue et sa description ne doivent pas être focalisables afin de toujours être perçus par les lecteurs d’écran opérant en mode non-virtuel. La combinaison du rôle ARIA <code>dialog</code> et des techniques de labélisation devrait permettre aux lecteurs d’écran d’annoncer les informations de la boîte de dialogue lorsque le focus arrive sur cette dernière.</p> +</div> <h4 id="Gestion_du_focus">Gestion du focus</h4> @@ -52,7 +52,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog <li>Quand la boîte de dialogue s’affiche à l’écran, le focus clavier devrait être placé sur le contrôle focalisable par défaut de la boîte de dialogue. Ce contrôle dépend de la fonction des boîtes de dialogue. Pour les boîtes de dialogue ne fournissant qu’un texte simple, ce pourra être un bouton « OK ». Pour les boîtes de dialogue contenant un formulaire, ce pourra être le premier champ à renseigner du formulaire.</li> <li>Pour la plupart des boîtes de dialogue, le comportement attendu est que l’ordre de tabulation de la boîte <em>tourne</em>, c’est-à-dire que le premier élément focalisable sera focalisé après que le dernier élément focalisable de la boîte de dialogue aura été atteint lorsque l’utilisateur tabule. En d’autres termes, l’ordre de tabulation doit être contenu par la boîte de dialogue.</li> <li>Si la boîte de dialogue peut être déplacée ou redimensionnée, assurez-vous que ces actions peuvent être exécutées par les utilisateurs de clavier tout comme les utilisateurs de souris. De la même façon, si une boîte de dialogue fournit certaines fonctionnalités, comme des barres d’outils ou des menus contextuels, celles-ci doivent également être accessibles et pouvoir être actionnées par les utilisateurs de clavier.</li> - <li>Les boîtes de dialogue peuvent être modales ou non modales. Lorsqu’une boîte de dialogue <em>modale</em> s’affiche à l’écran, il n’est pas possible d’interagir avec le reste du contenu de la page. En d’autres termes, l’UI principale de l’application ou le contenu de la page est considéré comme temporairement désactivé tant que la boîte de dialogue modale est affichée. Pour les boîtes de dialogue <em>non modales</em> il est toujours possible d’interagir avec du contenu extérieur à la boîte lorsqu’elle est affichée. Pour les boîtes de dialogue non modales, il y devra toujours y avoir un raccourci clavier global permettant de déplacer le focus entre les boîtes de dialogue ouvertes et la page principale. Pour plus d’informations, lisez le guide <a href="/fr/docs/ARIA/Guides_ARIA/Gérer_les_dialogues_modaux_et_non_modaux" title="/en-US/docs/ARIA/Guides_ARIA/Managing_Modal_and_Non_Modal_Dialogs">Gérer les dialogues modaux et non modaux</a>.</li> + <li>Les boîtes de dialogue peuvent être modales ou non modales. Lorsqu’une boîte de dialogue <em>modale</em> s’affiche à l’écran, il n’est pas possible d’interagir avec le reste du contenu de la page. En d’autres termes, l’UI principale de l’application ou le contenu de la page est considéré comme temporairement désactivé tant que la boîte de dialogue modale est affichée. Pour les boîtes de dialogue <em>non modales</em> il est toujours possible d’interagir avec du contenu extérieur à la boîte lorsqu’elle est affichée. Pour les boîtes de dialogue non modales, il y devra toujours y avoir un raccourci clavier global permettant de déplacer le focus entre les boîtes de dialogue ouvertes et la page principale. Pour plus d’informations, lisez le guide <a href="/fr/docs/ARIA/Guides_ARIA/Gérer_les_dialogues_modaux_et_non_modaux">Gérer les dialogues modaux et non modaux</a>.</li> </ul> <h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> @@ -65,13 +65,15 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog <p>Lorsque la boîte de dialogue est correctement labélisée et que le focus est déplacé vers un contrôle à l’intérieur de la boîte, les lecteurs d’écran devraient annoncer le rôle accessible du dialogue, son nom et éventuellement sa description avant d’annoncer l’élément qui a reçu le focus.</p> -<div class="note"><strong>Note :</strong> plusieurs points de vue existent sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"> + <p><strong>Note :</strong> plusieurs points de vue existent sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p> +</div> <h3 id="Exemples">Exemples</h3> <h4 id="Exemple_1_une_boîte_de_dialogue_contenant_un_formulaire">Exemple 1 : une boîte de dialogue contenant un formulaire</h4> -<pre class="brush: html notranslate"><div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> +<pre class="brush: html"><div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> <h2 id="dialog1Title">Formulaire de souscription</h2> <p id="dialog1Desc">Nous ne partageons pas ces informations avec des tierces parties.</p> @@ -108,7 +110,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog <p>Pour prendre en charge les navigateurs ou les produits de technologies d’assistance qui ne prennent pas ARIA en charge, il est également possible d’appliquer le balisage <code>dialog</code> à un élément <code>fieldset</code> comme contenu alternatif. Ainsi le titre de la boîte de dialogue sera toujours annoncé correctement :</p> -<pre class="brush: html notranslate"><strong><fieldset role="dialog"</strong> aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> +<pre class="brush: html"><strong><fieldset role="dialog"</strong> aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> <strong><legend></strong> <span id="dialog1Title">Vos informations personnelles ont correctement été actualisées.</span> <span id="dialog1Desc">Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur ».</span> @@ -121,29 +123,27 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog <h4 id="Exemples_concrets">Exemples concrets :</h4> <ul> - <li><a class="external" href="http://jqueryui.com/demos/dialog/" title="http://jqueryui.com/demos/dialog/">jQuery-UI Dialog</a></li> + <li><a href="http://jqueryui.com/demos/dialog/">jQuery-UI Dialog</a></li> </ul> <h3 id="Notes">Notes</h3> -<div class="note"><strong>Note :</strong> bien qu'il soit possible d’empêcher les utilisateurs de clavier de bouger le focus vers des éléments en dehors des boîtes de dialogues, les utilisateurs de lecteurs d’écran ont toujours la possibilité de parcourir ce contenu pratiquement en utilisant le curseur virtuel du lecteur d’écran. À cause de cela, les boîtes de dialogue sont considérées comme des cas spéciaux du rôle <code>application</code> : on s’attend à ce qu’elles soient parcourues avec le mode de navigation non-virtuel par les utilisateurs de lecteur d’écran.</div> +<div class="note"> + <p><strong>Note :</strong> bien qu'il soit possible d’empêcher les utilisateurs de clavier de bouger le focus vers des éléments en dehors des boîtes de dialogues, les utilisateurs de lecteurs d’écran ont toujours la possibilité de parcourir ce contenu pratiquement en utilisant le curseur virtuel du lecteur d’écran. À cause de cela, les boîtes de dialogue sont considérées comme des cas spéciaux du rôle <code>application</code> : on s’attend à ce qu’elles soient parcourues avec le mode de navigation non-virtuel par les utilisateurs de lecteur d’écran.</p> +</div> <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#dialog" title="http://www.w3.org/TR/wai-aria/roles#dialog">dialog (en)</a></li> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">aria-labelledby (en)</a></li> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby (en)</a></li> + <li><a href="http://www.w3.org/TR/wai-aria/roles#dialog">dialog (en)</a></li> + <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">aria-labelledby (en)</a></li> + <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby (en)</a></li> </ul> <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> <ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog" title="Utiliser le rôle alertdialog">Utiliser le rôle <code>alertdialog</code></a></li> + <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog">Utiliser le rôle <code>alertdialog</code></a></li> </ul> -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h3 id="Autres_ressources">Autres ressources</h3> diff --git a/files/fr/web/accessibility/aria/roles/listbox_role/index.html b/files/fr/web/accessibility/aria/roles/listbox_role/index.html index 742c9ed7b0..a3abd6cb40 100644 --- a/files/fr/web/accessibility/aria/roles/listbox_role/index.html +++ b/files/fr/web/accessibility/aria/roles/listbox_role/index.html @@ -10,22 +10,20 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox --- <h3 id="Description">Description</h3> -<div class="summary"> -<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#listbox">listbox</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> -</div> +<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#listbox">listbox</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> <p>Le rôle <code>listbox</code> est utilisé pour identifier un élément qui crée une liste à partir de laquelle un utilisateur peut sélectionner un ou plusieurs éléments statiques et peut contenir des images, contrairement à l’élément HTML {{ HTMLElement("select") }}. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement accessible <code>listbox</code> aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p> -<p>Chaque entrée de la boîte liste devrait avoir un rôle d’<a class="external" href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#option">option</a> et devrait être une descendante de la boîte liste dans l’arbre DOM. Si une ou plusieurs entrées ne sont pas des descendantes de la boîte liste dans le DOM, référez-vous aux <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">Bonnes pratiques ARIA</a> pour obtenir plus de détails sur les propriétés additionnelles qui doivent être définies.</p> +<p>Chaque entrée de la boîte liste devrait avoir un rôle d’<a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#option">option</a> et devrait être une descendante de la boîte liste dans l’arbre DOM. Si une ou plusieurs entrées ne sont pas des descendantes de la boîte liste dans le DOM, référez-vous aux <a href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">Bonnes pratiques ARIA</a> pour obtenir plus de détails sur les propriétés additionnelles qui doivent être définies.</p> -<p>Lorsqu’on navigue entre les différents éléments d’une liste, le premier élément de la liste sera sélectionné par défaut en l’absence de sélection existante. Les flèches haut et bas permettent de naviguer dans la liste, et appuyer sur <kbd>Maj+Flèche haut/bas</kbd> déplacera et développera la sélection. Saisir un ou plusieurs lettres permet de naviguer dans la liste des éléments (une seule et même lettre positionnera la sélection sur chacun des éléments qui commence par elle, plusieurs lettres placeront la sélection sur le premier élément commençant par la chaîne). Si l’élément courant est associé à un menu contextuel, <kbd>Maj+F10</kbd> affichera ce menu. Si les éléments de la liste peuvent être cochés, <kbd>Espace</kbd> peut être utilisée pour basculer l’état de la <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#checkbox">checkboxes</a>. Pour les éléments de liste sélectionnables, <kbd>Espace</kbd> bascule l’état de sélection, <kbd>Maj+Espace</kbd> peut être utilisé pour sélection des éléments contigus, <kbd>Ctrl+Flèche</kbd> déplace le curseur sans sélectionner d’élément, et <kbd>Ctrl+Espace</kbd> peut être utilisé pour sélectionner des éléments non-contigus. Il est recommandé d’utiliser une case à cocher, un lien ou tout autre méthode pour permettre la sélection de tous les éléments, et <kbd>Ctrl+A</kbd> peut être utilisé comme raccourci pour cela.</p> +<p>Lorsqu’on navigue entre les différents éléments d’une liste, le premier élément de la liste sera sélectionné par défaut en l’absence de sélection existante. Les flèches haut et bas permettent de naviguer dans la liste, et appuyer sur <kbd>Maj+Flèche haut/bas</kbd> déplacera et développera la sélection. Saisir un ou plusieurs lettres permet de naviguer dans la liste des éléments (une seule et même lettre positionnera la sélection sur chacun des éléments qui commence par elle, plusieurs lettres placeront la sélection sur le premier élément commençant par la chaîne). Si l’élément courant est associé à un menu contextuel, <kbd>Maj+F10</kbd> affichera ce menu. Si les éléments de la liste peuvent être cochés, <kbd>Espace</kbd> peut être utilisée pour basculer l’état de la <a href="http://www.w3.org/TR/wai-aria-practices/#checkbox">checkboxes</a>. Pour les éléments de liste sélectionnables, <kbd>Espace</kbd> bascule l’état de sélection, <kbd>Maj+Espace</kbd> peut être utilisé pour sélection des éléments contigus, <kbd>Ctrl+Flèche</kbd> déplace le curseur sans sélectionner d’élément, et <kbd>Ctrl+Espace</kbd> peut être utilisé pour sélectionner des éléments non-contigus. Il est recommandé d’utiliser une case à cocher, un lien ou tout autre méthode pour permettre la sélection de tous les éléments, et <kbd>Ctrl+A</kbd> peut être utilisé comme raccourci pour cela.</p> <h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> <p>Lorsque le rôle <code>listbox</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> <ul> - <li>Présenter l’élément comme ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation. Alternativement, s’il est un enfant de ou s’il appartient à une boîte combinée <a class="external" href="http://www.w3.org/TR/wai-aria/roles#combobox">combobox</a>, présenter l’élément comme un <a class="external" href="http://www.w3.org/TR/wai-aria/roles#menu">menu</a> ;</li> + <li>Présenter l’élément comme ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation. Alternativement, s’il est un enfant de ou s’il appartient à une boîte combinée <a href="http://www.w3.org/TR/wai-aria/roles#combobox">combobox</a>, présenter l’élément comme un <a href="http://www.w3.org/TR/wai-aria/roles#menu">menu</a> ;</li> <li>Déclencher un événement liste (ou dans les cas spéciaux, un événement menu) accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> </ul> @@ -36,7 +34,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox <li>Les loupes d’écran devraient agrandir la boîte liste.</li> </ul> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> <h3 id="Exemples">Exemples</h3> @@ -56,7 +54,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox </div> </pre> -<p>Voir l’<a class="external" href="http://codetalks.org/source/widgets/listbox/listbox.html">exemple</a> CodeTalks pour plus de détails.</p> +<p>Voir l’<a href="http://codetalks.org/source/widgets/listbox/listbox.html">exemple</a> CodeTalks pour plus de détails.</p> <h4 id="Exemples_concrets">Exemples concrets :</h4> @@ -67,32 +65,28 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox <h3 id="Notes">Notes</h3> <ul> - <li>Pour être accessible au clavier, les développeurs doivent <a class="external" href="http://www.w3.org/TR/wai-aria/roles#option">gérer le focus</a> de chaque descendant de ce rôle.</li> + <li>Pour être accessible au clavier, les développeurs doivent <a href="http://www.w3.org/TR/wai-aria/roles#option">gérer le focus</a> de chaque descendant de ce rôle.</li> <li>Il est recommandé aux développeurs d’utiliser différents styles pour la sélection lorsque la liste n’a pas le focus, par exemple, une sélection inactive est parfois affichée avec une couleur d’arrière-plan plus claire.</li> - <li>Si la boîte liste ne fait pas partie d’un autre composant, il faut définir sa propriété <a class="external" href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a>.</li> - <li>Si une ou plusieurs entrées ne sont pas des descendants DOM de la boîte liste, il faudra définir des propriétés <code>aria-*</code> supplémentaires (voir <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">Bonnes pratiques ARIA</a>).</li> - <li>S’il existe une bonne raison pour <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded">étendre</a> la boîte liste, le rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#combobox">combobox</a> peut être plus approprié.</li> + <li>Si la boîte liste ne fait pas partie d’un autre composant, il faut définir sa propriété <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a>.</li> + <li>Si une ou plusieurs entrées ne sont pas des descendants DOM de la boîte liste, il faudra définir des propriétés <code>aria-*</code> supplémentaires (voir <a href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">Bonnes pratiques ARIA</a>).</li> + <li>S’il existe une bonne raison pour <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded">étendre</a> la boîte liste, le rôle <a href="http://www.w3.org/TR/wai-aria/roles#combobox">combobox</a> peut être plus approprié.</li> </ul> <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#listbox">listbox</a></li> + <li><a href="http://www.w3.org/TR/wai-aria/roles#listbox">listbox</a></li> </ul> <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> <ul> - <li>Rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#combobox">combobox</a>.</li> + <li>Rôle <a href="http://www.w3.org/TR/wai-aria/roles#combobox">combobox</a>.</li> </ul> -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h3 id="Autres_ressources">Autres ressources</h3> <ul> - <li>Bonnes pratiques ARIA – Listbox : <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">#listbox_div</a></li> + <li>Bonnes pratiques ARIA – Listbox : <a href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">#listbox_div</a></li> <li>Le modèle de rôles ARIA – Listbox : <a href="http://www.w3.org/TR/wai-aria/roles#listbox">#listbox</a></li> </ul> diff --git a/files/fr/web/accessibility/aria/roles/switch_role/index.html b/files/fr/web/accessibility/aria/roles/switch_role/index.html index f1d90e2e60..ec25d40d10 100644 --- a/files/fr/web/accessibility/aria/roles/switch_role/index.html +++ b/files/fr/web/accessibility/aria/roles/switch_role/index.html @@ -9,6 +9,6 @@ tags: translation_of: Web/Accessibility/ARIA/Roles/Switch_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utilisation_du_groupe_switch --- -<p>Le rôle ARIA switch est très similaire au <a href="https://developer.mozilla.org/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox">role checkbox</a>, à la sémantique près — il a deux états représentant on/off, au lieu de checked/unchecked.</p> +<p>Le rôle ARIA switch est très similaire au <a href="/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox">role checkbox</a>, à la sémantique près — il a deux états représentant on/off, au lieu de checked/unchecked.</p> <p>Extrait des <a href="http://rawgit.com/w3c/aria/master/aria/aria.html#switch">spec ARIA 1.1 </a>: l'attribut <code>aria-checked</code> d'un <code>switch</code> indique si l'entrée est on (<code>true</code>) ou off (<code>false</code>). La valeur <code>mixed</code> n'est pas supportée, et les agents utilisateurs <em>DOIVENT</em> la traiter comme équivalente à <code>false</code> pour ce rôle.</p> diff --git a/files/fr/web/accessibility/aria/roles/textbox_role/index.html b/files/fr/web/accessibility/aria/roles/textbox_role/index.html index a7b91ac503..f0c6824c54 100644 --- a/files/fr/web/accessibility/aria/roles/textbox_role/index.html +++ b/files/fr/web/accessibility/aria/roles/textbox_role/index.html @@ -10,9 +10,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox --- <h3 id="Description">Description</h3> -<div class="summary"> -<p>Cette technique présente l’utilisation du rôle <a class="external" href="http://www.w3.org/TR/wai-aria/roles#textbox"><code>textbox</code></a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> -</div> +<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#textbox"><code>textbox</code></a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> <p>Le rôle <code>textbox</code> est utilisé pour identifier un élément permettant la saisie d’un texte librement formaté. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement <code>textbox</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p> @@ -36,7 +34,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox <li>Les loupes d’écran devraient agrandir la boite de texte.</li> </ul> -<div class="note"><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</div> +<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> <h3 id="Exemples">Exemples</h3> @@ -69,15 +67,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox <h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> <ul> - <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#textbox">textbox</a>.</li> + <li><a href="http://www.w3.org/TR/wai-aria/roles#textbox">textbox</a>.</li> </ul> <h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> <p>N/A</p> -<h3 id="Compatibilité">Compatibilité</h3> - -<p class="comment">À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance.</p> - <h3 id="Autres_ressources">Autres ressources</h3> diff --git a/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html index a107e52c3b..4c4f1a433a 100644 --- a/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html +++ b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html @@ -11,11 +11,11 @@ original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA --- <h2 id="Qu’est-ce_qu’ARIA">Qu’est-ce qu’ARIA ?</h2> -<p>WAI-ARIA est la spécification <a class="external" href="http://www.w3.org/WAI/intro/aria.php" hreflang="en" title="http://www.w3.org/WAI/intro/aria.php">Applications Internet Riches Accessibles</a> de la <a class="external" href="http://www.w3.org/WAI/" hreflang="en" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a> (Initiative pour l’accessibilité du Web) du <a class="external" href="http://www.w3.org/" hreflang="en" title="http://www.w3.org/">W3C</a>. ARIA fournit des moyens de rendre plus accessible les applications Web et les composants dynamiques à une plus grande part des utilisateurs, y compris ceux utilisant des technologies d’assistance telles que les lecteurs d’écrans ou les agrandisseurs.</p> +<p>WAI-ARIA est la spécification <a href="http://www.w3.org/WAI/intro/aria.php">Applications Internet Riches Accessibles</a> de la <a href="http://www.w3.org/WAI/">Web Accessibility Initiative</a> (Initiative pour l’accessibilité du Web) du <a href="http://www.w3.org/">W3C</a>. ARIA fournit des moyens de rendre plus accessible les applications Web et les composants dynamiques à une plus grande part des utilisateurs, y compris ceux utilisant des technologies d’assistance telles que les lecteurs d’écrans ou les agrandisseurs.</p> <p>ARIA fournit des éléments sémantiques additionnels afin de décrire les rôles, les états et la fonction de nombreux contrôles d’interfaces utilisateurs répandus, tels que les menus, les curseurs, les arbres et les dialogues. Il fournit également des informations structurelles supplémentaires, permettant aux auteurs d’identifier des points de repère, des zones et des grilles dans leurs pages Web. ARIA permet aux applications et aux composants JavaScript dynamiques d’interagir avec une grande variété de technologies d’assistance de bureau.</p> -<p>Pour plus d’informations sur la création de composants dynamiques accessibles avec ARIA, lire l’article <a href="/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles" title="Aperçu d’applications Web et de composants dynamiques accessibles">Aperçu d’applications Web et de composants dynamiques accessibles</a>.</p> +<p>Pour plus d’informations sur la création de composants dynamiques accessibles avec ARIA, lire l’article <a href="/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles">Aperçu d’applications Web et de composants dynamiques accessibles</a>.</p> <h2 id="Où_ARIA_est-il_pris_en_charge">Où ARIA est-il pris en charge ?</h2> @@ -38,7 +38,7 @@ original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA <td>Fonctionne avec NVDA, JAWS 10+ et Orca</td> </tr> <tr> - <td><a class="external" href="http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support" hreflang="en" title="http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support">Chrome</a></td> + <td><a href="http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support">Chrome</a></td> <td>Dernière</td> <td>Prise en charge encore expérimentale des lecteurs d’écran jusqu’à Chrome 15</td> </tr> @@ -49,12 +49,12 @@ original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA La prise en charge des zones live requiert Safari 5 avec VoiceOver sur iOS5 ou OS X Lion</td> </tr> <tr> - <td><a class="external" href="http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/" hreflang="en" title="http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/">Opera</a></td> + <td><a href="http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/">Opera</a></td> <td>9.5+</td> <td>Requiert VoiceOver sous OS X. À définir : comment cela fonctionne-t-il actuellement ?</td> </tr> <tr> - <td><a class="external" href="http://msdn.microsoft.com/en-us/library/cc891505%28v=vs.85%29.aspx" hreflang="en" title="http://msdn.microsoft.com/en-us/library/cc891505(v=vs.85).aspx">Internet Explorer</a></td> + <td><a href="http://msdn.microsoft.com/en-us/library/cc891505%28v=vs.85%29.aspx">Internet Explorer</a></td> <td>8+</td> <td>Fonctionne avec JAWS 10+ et NVDA. Pas de prise en charge des zones live dans NVDA.<br> La prise en charge dans IE9 est grandement améliorée.</td> @@ -65,8 +65,8 @@ original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA <p>Dans certains cas, les versions les plus jeunes peuvent prendre en charge certaines fonctionnalités d’ARIA. Des tableaux de compatibilité des navigateurs peuvent être consultés depuis différentes sources :</p> <ul> - <li><a class="external" href="http://caniuse.com/wai-aria" hreflang="en" title="http://caniuse.com/wai-aria">caniuse.com</a></li> - <li><a class="external" href="http://www.paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF-update2.html" hreflang="en" title="http://www.paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF-update2.html">Le groupe Paciello</a></li> + <li><a href="http://caniuse.com/wai-aria">caniuse.com</a></li> + <li><a href="http://www.paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF-update2.html">Le groupe Paciello</a></li> </ul> <h3 id="Technologies_d’assistance">Technologies d’assistance</h3> @@ -118,7 +118,7 @@ original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA <p>Note : Les versions antérieures de ces outils ont souvent des implémentation d’ARIA partielles et défaillantes.</p> -<p>For notes on JAWS support for ARIA as of JAWS 10, lire cet article du <em>groupe Paciello</em> : <a class="external" href="http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/" hreflang="en" title="http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/">JAWS Support for ARIA</a>.</p> +<p>For notes on JAWS support for ARIA as of JAWS 10, lire cet article du <em>groupe Paciello</em> : <a href="http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/">JAWS Support for ARIA</a>.</p> <h3 id="Kits_de_développement_JavaScript">Kits de développement JavaScript</h3> @@ -137,12 +137,12 @@ original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA <p>Pour plus d’informations sur l’accessibilité des kits de développement JavaScript :</p> <ul> - <li><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" hreflang="en" title="WAI-ARIA Implementation in JavaScript UI Libraries">WAI-ARIA Implementation in JavaScript UI Libraries</a> (Implémentation de WAI-ARIA dans les bibliothèques JavaScript d’UI) de Steve Faulkner</li> + <li><a href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">WAI-ARIA Implementation in JavaScript UI Libraries</a> (Implémentation de WAI-ARIA dans les bibliothèques JavaScript d’UI) de Steve Faulkner</li> </ul> <h2 id="Pouvez-vous_me_montrez_un_exemple_d’ARIA_en_action">Pouvez-vous me montrez un exemple d’ARIA en action ?</h2> -<p><a name="aria-in-action">Voici le code HTML pour une barre de progression :</a></p> +<p>Voici le code HTML pour une barre de progression :</p> <pre class="brush:html;"><div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /> </pre> @@ -151,7 +151,7 @@ original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA <p>Plutôt que de les intégrer directement dans le balisage, les attributs ARIA sont généralement ajoutés à l’élément et dynamiquement actualisés à l’aide de code JavaScript tel que celui-ci :</p> -<pre class="brush: javascript" id="line96">// Trouver le <div> de la barre de progression dans le DOM. +<pre class="brush: js">// Trouver le <div> de la barre de progression dans le DOM. var progressBar = document.getElementById("percent-loaded"); // Définition de ses rôles et états ARIA , @@ -181,15 +181,15 @@ function updateProgress(percentComplete) { <h2 id="Qu'en_est-il_de_la_validation">Qu'en est-il de la validation ?</h2> -<p>Les nouveaux attributs introduits dans ARIA, tels que les <strong><code>role</code></strong> et ceux préfixés avec <strong><code>aria-</code></strong>, ne font pas officiellement partie des spécification HTML 4 ou XHTML 4. À ce titre, les pages comportant des éléments ARIA peuvent ne pas être valides lorsqu’on les soumet au <a class="external" href="http://validator.w3.org/" hreflang="en" title="http://validator.w3.org/">validateur du W3C</a>.</p> +<p>Les nouveaux attributs introduits dans ARIA, tels que les <strong><code>role</code></strong> et ceux préfixés avec <strong><code>aria-</code></strong>, ne font pas officiellement partie des spécification HTML 4 ou XHTML 4. À ce titre, les pages comportant des éléments ARIA peuvent ne pas être valides lorsqu’on les soumet au <a href="http://validator.w3.org/">validateur du W3C</a>.</p> -<p>La première solution possible à ce problème est d’éviter de placer les rôles et les états ARIA directement dans le code HTML. À la place, il faut utiliser JavaScript pour ajouter dynamiquement ARIA à votre page, tel que montré dans la réponse à la question <a href="#aria-in-action" title="#aria-in-action">Pouvez-vous me montrez un exemple d’ARIA en action ?</a> ci-dessus. Votre page sera toujours théoriquement invalide, mais elle passera correctement toutes les contrôles de validation statiques.</p> +<p>La première solution possible à ce problème est d’éviter de placer les rôles et les états ARIA directement dans le code HTML. À la place, il faut utiliser JavaScript pour ajouter dynamiquement ARIA à votre page, tel que montré dans la réponse à la question Pouvez-vous me montrez un exemple d’ARIA en action ? ci-dessus. Votre page sera toujours théoriquement invalide, mais elle passera correctement toutes les contrôles de validation statiques.</p> <p>Une autre alternative est l’utilisation d’un <em>doctype</em> HTML5, qui prend nativement en charge . Le validateur HTML5 du W3C trouvera même pour vous les utilisations non valides d’ARIA dans les pages HTML5.</p> <h2 id="Comment_HTML5_s’associe-t-il_avec_ARIA">Comment HTML5 s’associe-t-il avec ARIA ?</h2> -<p>HTML5 introduit de nombreuses nouvelles balises sémantiques. Certaines d’entre elles recoupent les rôles ARIA, tel que le nouvelle élément <code><progress></code>. Dans le cas où le navigateur prend en charge une balise HTML5 qui existe également dans ARIA, il n’est généralement pas nécessaire d’ajouter les rôles et les états ARIA à l’élément. ARIA comprend de nombreux rôles, états et propriétés qui ne sont pas disponibles en HTML5, aussi continueront-ils d’être utiles aux développeurs HTML5. Pour plus d’informations, Steve Faulkner a écrit un très bon <a class="external" href="http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/" hreflang="en" title="HTML5 and the Myth of WAI-ARIA Redundance">aperçu des relations entre HTML5 et ARIA</a>.</p> +<p>HTML5 introduit de nombreuses nouvelles balises sémantiques. Certaines d’entre elles recoupent les rôles ARIA, tel que le nouvelle élément <code><progress></code>. Dans le cas où le navigateur prend en charge une balise HTML5 qui existe également dans ARIA, il n’est généralement pas nécessaire d’ajouter les rôles et les états ARIA à l’élément. ARIA comprend de nombreux rôles, états et propriétés qui ne sont pas disponibles en HTML5, aussi continueront-ils d’être utiles aux développeurs HTML5. Pour plus d’informations, Steve Faulkner a écrit un très bon <a href="http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/">aperçu des relations entre HTML5 et ARIA</a>.</p> <h4 id="Dégradation_élégante_de_HTML5_vers_ARIA">Dégradation élégante de HTML5 vers ARIA</h4> @@ -197,7 +197,7 @@ function updateProgress(percentComplete) { <p>Voici un exemple de code utilisé pour une barre de progression en HTML5 :</p> -<pre class="brush: html" id="line96"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head><title>Dégrader élégamment la barre de progression</title></head> <body> @@ -209,7 +209,7 @@ function updateProgress(percentComplete) { <p>… et voici le code JavaScript qui assurera le fonctionnement de la barre de progression même dans les navigateurs les plus anciens :</p> -<pre class="brush: javascript" id="line97">var progressBar = document.getElementById("progress-bar"); +<pre class="brush: js">var progressBar = document.getElementById("progress-bar"); // Vérifions que le navigateur implémente la balise HTML5 <progress>. var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined"); @@ -264,15 +264,15 @@ initDemo(); <li><em>Accessibility Inspector</em> sur Mac OS X</li> <li><em>AccProbe</em> sur Linux</li> <li><em>Inspecteur DOM</em> de Firebug</li> - <li>L’<a class="external" href="http://code.google.com/p/ainspector/" hreflang="en" title="http://code.google.com/p/ainspector/"><em>Inspecteur d’accessibilité</em> de Firebug</a></li> + <li>L’<a href="http://code.google.com/p/ainspector/"><em>Inspecteur d’accessibilité</em> de Firebug</a></li> </ul> <p>Il existe plusieurs lecteurs d’écran gratuits voire libre qui peuvent être utilisés pour mener des tests sur ARIA. On trouve :</p> <ul> - <li><a class="external" href="http://live.gnome.org/Orca" hreflang="en" title="http://live.gnome.org/Orca">Orca</a> pour Linux</li> - <li><a class="external" href="http://www.nvda-project.org/" hreflang="en" title="http://www.nvda-project.org/">NVDA</a> pour Windows</li> - <li><a class="external" href="http://www.apple.com/accessibility/voiceover/" hreflang="en" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a> est intégré à Mac OS X</li> + <li><a href="http://live.gnome.org/Orca">Orca</a> pour Linux</li> + <li><a href="http://www.nvda-project.org/">NVDA</a> pour Windows</li> + <li><a href="http://www.apple.com/accessibility/voiceover/">VoiceOver</a> est intégré à Mac OS X</li> </ul> <p>Lorsque vous effectuez des tests avec un lecteur d’écran, gardez deux points importants en tête :</p> @@ -285,22 +285,22 @@ initDemo(); <p>Autres techniques et outils de tests pratiques pour les applications et les composants intégrant ARIA :</p> <ul> - <li><a class="external" href="http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html" hreflang="en" title="Test ARIA Focus Bookmarklets">Yahoo!'s ARIA bookmarklets</a></li> - <li><a class="external" href="http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol" hreflang="en" title="Simple Accessibility Review Protocol">simple accessibility evaluation techniques</a> du <em>Fluid Project</em> (techniques simples d’évaluation de l’accessibilité)</li> + <li><a href="http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html">Yahoo!'s ARIA bookmarklets</a></li> + <li><a href="http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol">simple accessibility evaluation techniques</a> du <em>Fluid Project</em> (techniques simples d’évaluation de l’accessibilité)</li> </ul> <h2 id="Où_se_tiennent_les_discussion_concernant_ARIA">Où se tiennent les discussion concernant ARIA ?</h2> <ul> - <li><a class="external" href="http://lists.w3.org/Archives/Public/wai-xtech/" hreflang="en" title="WAI XTech Public List">Liste de diffusion Wai-xtech</a> – Discussions sur les spécification d’ARIA.</li> - <li><a class="external" href="http://groups.google.com/group/free-aria" hreflang="en" title="http://groups.google.com/group/free-aria">groupe Google Free-ARIA</a> – pour les développeurs et les utilisateurs d’outils et de ressources libres.</li> + <li><a href="http://lists.w3.org/Archives/Public/wai-xtech/">Liste de diffusion Wai-xtech</a> – Discussions sur les spécification d’ARIA.</li> + <li><a href="http://groups.google.com/group/free-aria">groupe Google Free-ARIA</a> – pour les développeurs et les utilisateurs d’outils et de ressources libres.</li> </ul> <h2 id="Où_peut-on_en_apprendre_davantage_à_propos_d’ARIA">Où peut-on en apprendre davantage à propos d’ARIA ?</h2> <ul> - <li><a href="/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles" title="Aperçu d’applications Web et de composants dynamiques accessibles">Aperçu d’applications Web et de composants dynamiques accessibles</a></li> - <li><a href="/fr/docs/Accessibilité/Formulaires_accessibles" title="Formulaires_accessibles">Formulaires accessibles</a></li> - <li>La <a class="external" href="http://www.w3.org/WAI/aria/faq" hreflang="en" title="http://www.w3.org/WAI/aria/faq">FAQ WAI-ARIA</a> du W3C.</li> - <li><a class="external" href="http://webaim.org/techniques/aria/" hreflang="en" title="http://webaim.org/techniques/aria/">Accessibility of Rich Internet Applications</a> (Accessibilité des applications Internet riches) de WebAIM.</li> + <li><a href="/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles">Aperçu d’applications Web et de composants dynamiques accessibles</a></li> + <li><a href="/fr/docs/Accessibilité/Formulaires_accessibles">Formulaires accessibles</a></li> + <li>La <a href="http://www.w3.org/WAI/aria/faq">FAQ WAI-ARIA</a> du W3C.</li> + <li><a href="http://webaim.org/techniques/aria/">Accessibility of Rich Internet Applications</a> (Accessibilité des applications Internet riches) de WebAIM.</li> </ul> diff --git a/files/fr/web/accessibility/community/index.html b/files/fr/web/accessibility/community/index.html index 7ddc088112..bf05404332 100644 --- a/files/fr/web/accessibility/community/index.html +++ b/files/fr/web/accessibility/community/index.html @@ -6,13 +6,13 @@ tags: translation_of: Web/Accessibility/Community original_slug: Accessibilité/Communauté --- -<p class="summary"><span class="seoSummary">Ce document fournit des liens vers des listes de diffusions, des forums, et d'autres communautés portées sur l'accessibilité.</span></p> +<p>Ce document fournit des liens vers des listes de diffusions, des forums, et d'autres communautés portées sur l'accessibilité.</p> <p>Si vous connaissez d'autres, ressources utiles n'hésitez pas à ajouter un lien ci-dessous.</p> <ul> - <li><a class="link-news" href="news://news.mozilla.org/netscape.public.mozilla.accessibility">Newsgroup Mozilla Accessibility</a></li> - <li><a class="external" href="http://www.w3.org/WAI/IG/">Liste de discussion du groupe WAI</a></li> - <li><a class="external" href="http://www.mozilla.org/projects/ui/accessibility/unix">Projet d'accessibilité d'Unix</a> (référence en anglais)</li> - <li><a class="external" href="http://www.mozilla.org/access/resources">SUN Mozilla Accessibility Task Force</a></li> + <li><a href="news://news.mozilla.org/netscape.public.mozilla.accessibility">Newsgroup Mozilla Accessibility</a></li> + <li><a href="http://www.w3.org/WAI/IG/">Liste de discussion du groupe WAI</a></li> + <li><a href="http://www.mozilla.org/projects/ui/accessibility/unix">Projet d'accessibilité d'Unix</a> (référence en anglais)</li> + <li><a href="http://www.mozilla.org/access/resources">SUN Mozilla Accessibility Task Force</a></li> </ul> diff --git a/files/fr/web/accessibility/index.html b/files/fr/web/accessibility/index.html index 4453a97d4e..0ce3096545 100644 --- a/files/fr/web/accessibility/index.html +++ b/files/fr/web/accessibility/index.html @@ -9,13 +9,13 @@ tags: translation_of: Web/Accessibility original_slug: Accessibilité --- -<p><span class="seoSummary">L’accessibilité dans le développement web signifie permettre l'utilisation des sites web par le plus grand nombre de personnes, même lorsque les capacités de ces personnes sont limitées d’une manière ou d'une autre. Voici quelques informations qui vous permettront de développer du contenu accessible.</span></p> +<p>L’accessibilité dans le développement web signifie permettre l'utilisation des sites web par le plus grand nombre de personnes, même lorsque les capacités de ces personnes sont limitées d’une manière ou d'une autre. Voici quelques informations qui vous permettront de développer du contenu accessible.</p> <p>« <strong>L'accessibilité du web</strong> signifie que les personnes handicapées peuvent l'utiliser. Plus spécifiquement, elle signifie que ces gens peuvent percevoir, comprendre, naviguer, interagir avec le web, et y contribuer. L'accessibilité du web bénéficie également à d'autres, notamment les personnes âgées ayant des capacités diminuées dues au vieillissement. » ( <a href="http://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_web">L'accessibilité du Web définie dans Wikipédia</a>)</p> -<p>« <strong>L'accessibilité numérique est la mise à la disposition de tous les individus</strong> – quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales – des ressources numériques. » <a href="http://www.w3.org/standards/webdesign/accessibility" hreflang="en" title="http://www.w3.org/standards/webdesign/accessibility">W3C Accessibility</a></p> +<p>« <strong>L'accessibilité numérique est la mise à la disposition de tous les individus</strong> – quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales – des ressources numériques. » <a href="http://www.w3.org/standards/webdesign/accessibility">W3C Accessibility</a></p> -<h2 class="Key_accessibility_tutorials" id="Key_accessibility_tutorials" name="Key_accessibility_tutorials">Tutoriels clefs</h2> +<h2>Tutoriels clefs</h2> <p>La documentation MDN <a href="/fr/docs/Accessibilit%C3%A9">Accessibilité</a> contient des tutoriaux modernes et à jour en ce qui concerne les points essentiels de l'accessibilité:</p> @@ -25,41 +25,41 @@ original_slug: Accessibilité <dt><a href="/fr/docs/Apprendre/a11y/HTML">HTML: Une bonne base pour l'accessibilité</a></dt> <dd>Un nombre important de ressources du web peuvent être accessibles juste en utilisant correctement les éléments HTML dans leur usage approprié. Cet article résume en détail comment le HTML peut être utilisé afin de garantir une accessibilité maximum.</dd> <dt><a href="/fr/docs/Apprendre/a11y/CSS_and_JavaScript">Meilleure pratiques d'accessibilité CSS et JavaScript </a></dt> - <dd>CSS et JavaScript, quand ils sont utilisés convenablement, ont le potentiel de permettre des expériences Web accessibles… ou bien ils peuvent significativement nuire à celle-ci si mal utilisés. <span lang="fr">Cet article décrit certaines pratiques exemplaires en langages CSS et JavaScript qui devraient être prises en compte pour garantir que le contenu, même complexe, soit aussi accessible que possible.</span></dd> + <dd>CSS et JavaScript, quand ils sont utilisés convenablement, ont le potentiel de permettre des expériences Web accessibles… ou bien ils peuvent significativement nuire à celle-ci si mal utilisés. Cet article décrit certaines pratiques exemplaires en langages CSS et JavaScript qui devraient être prises en compte pour garantir que le contenu, même complexe, soit aussi accessible que possible.</dd> <dt><a href="/fr/docs/Apprendre/a11y/WAI-ARIA_basics">Les bases de WAI-ARIA</a></dt> - <dd><span lang="fr">Dans la continuité de l'article précédent, créer des interactions d'interface utilisateur (UX) complexes impliquant un HTML non sémantique et un contenu dynamique mis à jour par JavaScript peut être parfois compliqué. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant d'autres sémantiques que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs d’être informés correctement. Ici, nous allons montrer comment l'utiliser à un niveau de base pour améliorer l'accessibilité.</span></dd> + <dd>Dans la continuité de l'article précédent, créer des interactions d'interface utilisateur (UX) complexes impliquant un HTML non sémantique et un contenu dynamique mis à jour par JavaScript peut être parfois compliqué. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant d'autres sémantiques que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs d’être informés correctement. Ici, nous allons montrer comment l'utiliser à un niveau de base pour améliorer l'accessibilité.</dd> <dt><a href="/fr/docs/Apprendre/a11y/Multimedia">Multimédia accessible </a></dt> - <dd><span lang="fr">Une autre catégorie de contenu pouvant créer des problèmes d'accessibilité est le multimédia : le contenu vidéo, audio et les images auxquels on doit fournir des textes équivalents pertinents afin qu'ils soient exploitables par les technologies d'assistance et compris par leurs utilisateurs. Cet article explique comment faire.</span></dd> + <dd>Une autre catégorie de contenu pouvant créer des problèmes d'accessibilité est le multimédia : le contenu vidéo, audio et les images auxquels on doit fournir des textes équivalents pertinents afin qu'ils soient exploitables par les technologies d'assistance et compris par leurs utilisateurs. Cet article explique comment faire.</dd> <dt><a href="/fr/docs/Apprendre/a11y/Mobile">Accessibilité sur mobile</a></dt> - <dd><span lang="fr">Étant donné que l'accès au Web sur les appareils mobiles est très populaire, et que les plate</span>s‑<span lang="fr">formes populaires telles que iOS et Android disposent d'outils d'accessibilité à part entière, il est important de considérer l'accessibilité de votre contenu Web sur ces plate</span>s‑<span lang="fr">formes. Cet article examine les considérations d'accessibilité spécifiques aux mobiles.</span></dd> + <dd>Étant donné que l'accès au Web sur les appareils mobiles est très populaire, et que les plates‑formes populaires telles que iOS et Android disposent d'outils d'accessibilité à part entière, il est important de considérer l'accessibilité de votre contenu Web sur ces plates‑formes. Cet article examine les considérations d'accessibilité spécifiques aux mobiles.</dd> </dl> -<h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> +<h2>Documentation</h2> <dl> - <dt><a href="/fr/docs/Accessibilité/Développement_Web" title="Développement Web">Développement web</a></dt> + <dt><a href="/fr/docs/Accessibilité/Développement_Web">Développement web</a></dt> <dd>Un ensemble d'articles soulignant les problèmes d'accessibilité dans le développement web.</dd> - <dt><a href="/fr/docs/Accessibilité/ARIA" title="/fr/docs/Accessibilité/ARIA">ARIA</a></dt> + <dt><a href="/fr/docs/Accessibilité/ARIA">ARIA</a></dt> <dd>Un ensemble d'articles pour apprendre à utiliser ARIA pour améliorer l'accessibilité de vos documents HTML.</dd> - <dt><a href="/fr/docs/Accessibilité/Développement_TA" title="Développement AT">Développement de Technologie d'assistance (TA)</a></dt> + <dt><a href="/fr/docs/Accessibilité/Développement_TA">Développement de Technologie d'assistance (TA)</a></dt> <dd>Un ensemble d'articles destiné aux développeurs de technologies d'assistance.</dd> <dt><a href="/fr/docs/Accessibilité/Checklist_accessibilite_mobile">Check-list pour l'accessibilité mobile</a></dt> <dd>Ce document fournit une liste concise des requis accessibilité pour les développeurs d’applications mobiles.</dd> </dl> -<h2 class="Tools" id="Tools" name="Tools">Outils pour les développeurs web</h2> +<h2>Outils pour les développeurs web</h2> <ul> - <li><a class="external" href="http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html" title="http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html">Tests d'accessibilité automatisés</a></li> - <li><a class="external" href="http://www.standards-schmandards.com/index.php?show/fangs">Fangs, un émulateur de lecteur d'écran</a></li> + <li><a href="http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html">Tests d'accessibilité automatisés</a></li> + <li><a href="http://www.standards-schmandards.com/index.php?show/fangs">Fangs, un émulateur de lecteur d'écran</a></li> </ul> -<h2 class="Tools" id="Tools" name="Tools">Autres ressources</h2> +<h2>Autres ressources</h2> <ul> - <li><a class="external" href="https://support.mozilla.org/kb/accessibility-features-firefox-make-firefox-and-we">Liste des lecteurs d'écran</a></li> - <li><a class="external" href="http://openweb.eu.org/">OpenWeb</a> — Très bon site offrant à la fois un regard expert sur le web et des exemples concrets d'utilisation des normes du W3C.</li> - <li><a class="external" href="http://opquast.com/">Opquast.com</a> — Bonnes pratiques qualité pour les services en ligne.</li> - <li><a class="external" href="http://www.accessiweb.org/index.php/accessiweb_2.2_liste_generale.html">AccessiWeb</a> — Référentiel AccessiWeb pour l'accessibilité.</li> - <li><a href="http://accede-web.com/fr/projet-accede-web/" title="http://accede-web.com/fr/projet-accede-web/">AcceDe Web</a> — Documents adaptés aux principaux intervenants d’un projet web.</li> + <li><a href="https://support.mozilla.org/kb/accessibility-features-firefox-make-firefox-and-we">Liste des lecteurs d'écran</a></li> + <li><a href="http://openweb.eu.org/">OpenWeb</a> — Très bon site offrant à la fois un regard expert sur le web et des exemples concrets d'utilisation des normes du W3C.</li> + <li><a href="http://opquast.com/">Opquast.com</a> — Bonnes pratiques qualité pour les services en ligne.</li> + <li><a href="http://www.accessiweb.org/index.php/accessiweb_2.2_liste_generale.html">AccessiWeb</a> — Référentiel AccessiWeb pour l'accessibilité.</li> + <li><a href="http://accede-web.com/fr/projet-accede-web/">AcceDe Web</a> — Documents adaptés aux principaux intervenants d’un projet web.</li> </ul> diff --git a/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html index 529ab35743..967ed7852c 100644 --- a/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html +++ b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html @@ -9,17 +9,17 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets original_slug: Contrôles_DHTML_personnalisés_navigables_au_clavier --- <p> </p> -<h3 id="Le_probl.C3.A8me_:_les_pages_DHTML_actuelles_ne_sont_pas_accessibles_au_clavier" name="Le_probl.C3.A8me_:_les_pages_DHTML_actuelles_ne_sont_pas_accessibles_au_clavier">Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier</h3> +<h3 id="Le_probl.C3.A8me_:_les_pages_DHTML_actuelles_ne_sont_pas_accessibles_au_clavier">Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier</h3> <p>Un nombre croissant d'applications Web utilise <a href="fr/JavaScript">JavaScript</a> pour imiter des contrôles ( <i> widgets</i> ) applicatifs comme des menus, des vues arborescentes, des champs de texte enrichis et des panneaux à onglets. Les développeurs Web innovent constamment et les applications futures contiendront des éléments complexes et interactifs comme des feuilles de calcul, des calendriers, des graphes organisationnels et plus encore. Jusqu'à présent, les développeurs désirant rendre leurs contrôles basés sur des <code><div></code> et autres <code><span></code> stylés ne disposaient pas des techniques nécessaires. Pourtant, l'accessibilité au clavier fait partie des nécessités dont tout développeur Web devrait tenir compte.</p> <p>Prenons un exemple concret : la plupart des menus <a href="fr/DHTML">DHTML</a> ne se comportent pas comme des menus normaux en ce qui concerne l'accès au clavier. Même s'il y a moyen d'accéder au menu avec le clavier, une erreur courante est de placer chaque élément du menu dans l'ordre de tabulation (souvent réalisé implicitement en faisant de chaque choix du menu un élément <code><a></code>). En réalité, le comportement correct d'un menu est que le menu entier doit figurer une seule fois dans l'ordre de tabulation, et les flèches doivent être utilisées pour se déplacer de choix en choix au sein du menu. Ceci vaut également pour les autres contrôles de « navigation groupée » comme les vues arborescentes, tableaux et panneaux à onglets.</p> <p>Il est à présent possible pour les auteurs HTML de faire les choses correctement. La manière de rendre ces contrôles compatibles avec les technologies d'assistance est détaillée dans : <a href="fr/ARIA/Applications_riches_Internet_accessibles">ARIA : Applications riches Internet accessibles</a>.</p> -<h3 id="La_solution_:_modifier_le_comportement_standard_de_tabindex" name="La_solution_:_modifier_le_comportement_standard_de_tabindex">La solution : modifier le comportement standard de <code>tabindex</code></h3> -<p>Firefox 1.5 suit l'exemple de Microsoft Internet Explorer en étendant l'attribut <code>tabindex</code> pour permettre à n'importe quel élément d'obtenir ou non le focus. En suivant le <a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/tabindex.asp">système d'IE pour <code>tabindex</code></a>, il devient possible de permettre aux contrôles <a href="fr/DHTML">DHTML</a>, déjà accessibles au clavier dans IE, de l'être également dans Firefox 1.5. Les règles doivent subir quelques petites entorses afin de permettre aux auteurs de rendre leurs contrôles personnalisés accessibles.</p> +<h3 id="La_solution_:_modifier_le_comportement_standard_de_tabindex">La solution : modifier le comportement standard de <code>tabindex</code></h3> +<p>Firefox 1.5 suit l'exemple de Microsoft Internet Explorer en étendant l'attribut <code>tabindex</code> pour permettre à n'importe quel élément d'obtenir ou non le focus. En suivant le <a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/tabindex.asp">système d'IE pour <code>tabindex</code></a>, il devient possible de permettre aux contrôles <a href="fr/DHTML">DHTML</a>, déjà accessibles au clavier dans IE, de l'être également dans Firefox 1.5. Les règles doivent subir quelques petites entorses afin de permettre aux auteurs de rendre leurs contrôles personnalisés accessibles.</p> <p>Le tableau qui suit décrit le nouveau comportement de <code>tabindex</code> :</p> -<table class="fullwidth-table"> +<table> <tbody> <tr> <th>Attribut <code>tabindex</code></th> @@ -54,38 +54,38 @@ original_slug: Contrôles_DHTML_personnalisés_navigables_au_clavier </tr> </tbody> </table> -<h3 id="Utilisation_du_nouveau_syst.C3.A8me" name="Utilisation_du_nouveau_syst.C3.A8me">Utilisation du nouveau système</h3> -<p>Pour rendre un contrôle simple navigable avec tabulation, la solution est d'utiliser <code>tabindex="0"</code> sur l'élément <code><div>></code> ou <code><span></code> le représentant. Vous pouvez consulter un exemple d'une <a class="external" href="http://www.mozilla.org/access/dhtml/class/checkbox">case à cocher basée sur un <code><span></code></a> accessible au clavier tant dans Firefox 1.5 que dans IE (bien que la règle <code>:before</code> pour l'image de la case à cocher ne fonctionne pas dans IE).</p> -<p>Pour les contrôles de groupe (comme les menus, les panneaux à onglets, grilles ou vues arborescentes) l'élément parent doit avoir <code>tabindex="0"</code>, et chaque choix descendant (onglet/cellule/ligne) doit avoir <code>tabindex="-1"</code>. Un évènement <code>keydown</code> surveillant les flèches directionnelles peut ensuite utiliser <code>element.focus()</code> pour donner le focus au contrôle descendant approprié et lui donner un style lui donnant un aspect particulier montrant qu'il a le focus. Vous pouvez consulter un exemple d'une <a class="external" href="http://www.mozilla.org/access/dhtml/class/tree">vue arborescente DHTML</a> accessible au clavier et aux lecteurs d'écran dans Firefox ( +<h3 id="Utilisation_du_nouveau_syst.C3.A8me">Utilisation du nouveau système</h3> +<p>Pour rendre un contrôle simple navigable avec tabulation, la solution est d'utiliser <code>tabindex="0"</code> sur l'élément <code><div>></code> ou <code><span></code> le représentant. Vous pouvez consulter un exemple d'une <a href="http://www.mozilla.org/access/dhtml/class/checkbox">case à cocher basée sur un <code><span></code></a> accessible au clavier tant dans Firefox 1.5 que dans IE (bien que la règle <code>:before</code> pour l'image de la case à cocher ne fonctionne pas dans IE).</p> +<p>Pour les contrôles de groupe (comme les menus, les panneaux à onglets, grilles ou vues arborescentes) l'élément parent doit avoir <code>tabindex="0"</code>, et chaque choix descendant (onglet/cellule/ligne) doit avoir <code>tabindex="-1"</code>. Un évènement <code>keydown</code> surveillant les flèches directionnelles peut ensuite utiliser <code>element.focus()</code> pour donner le focus au contrôle descendant approprié et lui donner un style lui donnant un aspect particulier montrant qu'il a le focus. Vous pouvez consulter un exemple d'une <a href="http://www.mozilla.org/access/dhtml/class/tree">vue arborescente DHTML</a> accessible au clavier et aux lecteurs d'écran dans Firefox ( <i> nightlies</i> ). Le travail pour le faire fonctionner dans IE est encore en cours.</p> <p>N'oubliez pas que ceci ne fait pas encore partie d'un standard W3C ou autre organisme officiel. Pour l'instant, il est nécessaire de faire quelques entorses aux règles afin d'obtenir une pleine accessibilité au clavier.</p> -<h3 id="Astuces_d.27.C3.A9criture" name="Astuces_d.27.C3.A9criture">Astuces d'écriture</h3> -<h4 id="Utilisation_d.27onfocus_pour_suivre_le_focus" name="Utilisation_d.27onfocus_pour_suivre_le_focus">Utilisation d'<code>onfocus</code> pour suivre le focus</h4> +<h3 id="Astuces_d.27.C3.A9criture">Astuces d'écriture</h3> +<h4 id="Utilisation_d.27onfocus_pour_suivre_le_focus">Utilisation d'<code>onfocus</code> pour suivre le focus</h4> <p>Les attributs de gestion d'évènements <code>onfocus</code> et <code>onblur</code> peuvent à présent être utilisés sur tous les éléments. Il n'y a pas d'interface <a href="fr/DOM">DOM</a> standard pour obtenir l'élément ayant actuellement le focus dans le document, par conséquent il est nécessaire d'utiliser une variable <a href="fr/JavaScript">JavaScript</a> pour le suivre.</p> <p>Ne supposez pas que tous les changements de focus viendront des évènements clavier ou souris, car les technologies d'assistance, comme les lecteurs d'écran, peuvent donner le focus à n'importe quel élément pouvant en disposer et cela doit être traité élégamment par le contrôle JavaScript.</p> -<h4 id="Changement_dynamique_de_la_possibilit.C3.A9_d.27obtenir_le_focus_.C3.A0_l.27aide_de_la_propri.C3.A9t.C3.A9_tabIndex" name="Changement_dynamique_de_la_possibilit.C3.A9_d.27obtenir_le_focus_.C3.A0_l.27aide_de_la_propri.C3.A9t.C3.A9_tabIndex">Changement dynamique de la possibilité d'obtenir le focus à l'aide de la propriété <code>tabIndex</code></h4> +<h4 id="Changement_dynamique_de_la_possibilit.C3.A9_d.27obtenir_le_focus_.C3.A0_l.27aide_de_la_propri.C3.A9t.C3.A9_tabIndex">Changement dynamique de la possibilité d'obtenir le focus à l'aide de la propriété <code>tabIndex</code></h4> <p>Ceci peut être utile à réaliser si un contrôle personnalisé devient actif ou inactif. Les contrôles inactifs ne doivent pas être dans l'ordre de tabulation. Cependant, il est typiquement possible de les atteindre avec les flèches s'ils font partie d'un contrôle de navigation groupé.</p> -<h4 id="Utilisation_de_setTimeout_avec_element.focus.28.29_pour_donner_le_focus" name="Utilisation_de_setTimeout_avec_element.focus.28.29_pour_donner_le_focus">Utilisation de <code>setTimeout</code> avec <code>element.focus()</code> pour donner le focus</h4> +<h4 id="Utilisation_de_setTimeout_avec_element.focus.28.29_pour_donner_le_focus">Utilisation de <code>setTimeout</code> avec <code>element.focus()</code> pour donner le focus</h4> <p>N'utilisez pas <code>createEvent()</code>, <code>initEvent()</code> et <code>dispatchEvent()</code> pour donner le focus à un élément, parce que les évènements DOM <code>focus</code> sont seulement considérés comme informels — générés par le système après que quelque chose ait reçu le focus, mais pas réellement pour donner le focus. Le retardateur est nécessaire, tant dans IE que dans Firefox 1.5, pour empêcher les scripts de faire des choses étranges et inattendues si l'utilisateur clique sur des boutons ou d'autres contrôles. Concrètement, le code pour donner le focus à un élément ressemblera à quelque chose comme ceci :</p> <pre class="eval">setTimeout("gFocusItem.focus();",0); // gFocusItem doit être une variable globale </pre> -<h4 id="Ne_pas_utiliser_:focus_ou_des_s.C3.A9lecteurs_d.27attribut_pour_styler_le_focus" name="Ne_pas_utiliser_:focus_ou_des_s.C3.A9lecteurs_d.27attribut_pour_styler_le_focus">Ne pas utiliser <code>:focus</code> ou des sélecteurs d'attribut pour styler le focus</h4> +<h4 id="Ne_pas_utiliser_:focus_ou_des_s.C3.A9lecteurs_d.27attribut_pour_styler_le_focus">Ne pas utiliser <code>:focus</code> ou des sélecteurs d'attribut pour styler le focus</h4> <p>Il ne sera pas possible d'utiliser <code>:focus</code> ou des sélecteurs d'attribut pour styler l'élément ayant le focus, si vous voulez que cela apparaisse également dans IE. Changez plutôt le style dans un gestionnaire d'évènement <code>onfocus</code>. Par exemple, pour le traitement du focus d'un élément de menu, ajoutez <code>this.style.backgroundColor = "gray";</code>.</p> -<h4 id="Toujours_dessiner_le_focus_pour_les_.C3.A9l.C3.A9ments_avec_tabindex.3D.22-1.22_et_qui_re.C3.A7oivent_le_focus_par_programmation" name="Toujours_dessiner_le_focus_pour_les_.C3.A9l.C3.A9ments_avec_tabindex.3D.22-1.22_et_qui_re.C3.A7oivent_le_focus_par_programmation">Toujours dessiner le focus pour les éléments avec <code>tabindex="-1"</code> et qui reçoivent le focus par programmation</h4> +<h4 id="Toujours_dessiner_le_focus_pour_les_.C3.A9l.C3.A9ments_avec_tabindex.3D.22-1.22_et_qui_re.C3.A7oivent_le_focus_par_programmation">Toujours dessiner le focus pour les éléments avec <code>tabindex="-1"</code> et qui reçoivent le focus par programmation</h4> <p>IE ne dessinera pas automatiquement l'encadrement du focus pour les éléments qui reçoivent le focus de manière programmée. Choisissez entre changer la couleur de fond via quelque chose comme <code>this.style.backgroundColor = "gray";</code> ou ajoutez une bordure pointillée via <code>this.style.border = "1px dotted invert"</code>. Dans le cas d'une bordure pointillée, il sera nécessaire de s'assurer que ces éléments aient une bordure invisible de <tt>1px</tt> au départ, afin que l'élément ne change pas de taille lorsque le style de bordure est appliqué (les bordures prennent de la place et IE n'implémente pas les encadrements CSS).</p> -<h4 id="Utilisation_de_onkeydown_pour_les_.C3.A9v.C3.A8nements_clavier.2C_plut.C3.B4t_que_onkeypress" name="Utilisation_de_onkeydown_pour_les_.C3.A9v.C3.A8nements_clavier.2C_plut.C3.B4t_que_onkeypress">Utilisation de <code>onkeydown</code> pour les évènements clavier, plutôt que <code>onkeypress</code></h4> +<h4 id="Utilisation_de_onkeydown_pour_les_.C3.A9v.C3.A8nements_clavier.2C_plut.C3.B4t_que_onkeypress">Utilisation de <code>onkeydown</code> pour les évènements clavier, plutôt que <code>onkeypress</code></h4> <p>IE ne déclenchera pas les évènements <code>keypress</code> pour les touches non alphanumériques.</p> -<h4 id="Emp.C3.AAcher_les_.C3.A9v.C3.A8nements_clavier_d.27effectuer_des_fonctions_du_navigateur" name="Emp.C3.AAcher_les_.C3.A9v.C3.A8nements_clavier_d.27effectuer_des_fonctions_du_navigateur">Empêcher les évènements clavier d'effectuer des fonctions du navigateur</h4> +<h4 id="Emp.C3.AAcher_les_.C3.A9v.C3.A8nements_clavier_d.27effectuer_des_fonctions_du_navigateur">Empêcher les évènements clavier d'effectuer des fonctions du navigateur</h4> <p>Si une touche comme une flèche directionnelle est utilisée, empêchez le navigateur d'utiliser cette touche pour faire quelque chose d'autre (comme faire défiler la page) en utilisant un code similaire à ce qui suit :</p> <pre class="eval"><span tabindex="-1" onkeydown="return handleKeyDown();"> </pre> <p>Si <code>handleKeyDown()</code> renvoie <code>false</code>, l'évènement sera consommé, empêchant le navigateur d'effectuer quelque action que ce soit, basée sur la touche pressée.</p> -<h4 id="Utilisation_d.27.C3.A9v.C3.A8nements_clavier_pour_permettre_l.27activation_de_l.27.C3.A9l.C3.A9ment" name="Utilisation_d.27.C3.A9v.C3.A8nements_clavier_pour_permettre_l.27activation_de_l.27.C3.A9l.C3.A9ment">Utilisation d'évènements clavier pour permettre l'activation de l'élément</h4> +<h4 id="Utilisation_d.27.C3.A9v.C3.A8nements_clavier_pour_permettre_l.27activation_de_l.27.C3.A9l.C3.A9ment">Utilisation d'évènements clavier pour permettre l'activation de l'élément</h4> <p>Pour chaque gestionnaire d'évènement lié à la souris, un évènement clavier correspondant est nécessaire. Par exemple, si vous avez <code>onclick="faireQuelqueChose()"</code> vous aurez aussi besoin de <code>onkeydown="return event.keyCode != 13 || faireQuelqueChose();"</code> afin de permettre à la touche Entrée d'activer cet élément.</p> -<h4 id="Utilisation_de_try.2Fcatch_pour_.C3.A9viter_les_erreurs_JavaScript" name="Utilisation_de_try.2Fcatch_pour_.C3.A9viter_les_erreurs_JavaScript">Utilisation de try/catch pour éviter les erreurs JavaScript</h4> -<p>Ce système n'est actuellement pas supporté par Opera, Safari et les versions anciennes de Mozilla (1.7 et précédentes). Comme certains navigateurs ne supportent pas les nouvelles possibilités comme la propriété <code>tabIndex</code> sur tous les éléments, utilisez try/catch aux endroits appropriés. Les contrôles doivent rester utilisables avec la souris sur les navigateurs ne supportant pas le système DHTML de navigation au clavier. Son support est déjà planifié pour Opera et Safari (via les spécifications du <a class="external" href="http://whatwg.org/">WHATWG</a>).</p> -<h4 id="Ne_pas_se_baser_sur_un_comportement_coh.C3.A9rent_de_la_r.C3.A9p.C3.A9tition_d.27une_touche.2C_pour_l.27instant" name="Ne_pas_se_baser_sur_un_comportement_coh.C3.A9rent_de_la_r.C3.A9p.C3.A9tition_d.27une_touche.2C_pour_l.27instant">Ne pas se baser sur un comportement cohérent de la répétition d'une touche, pour l'instant</h4> +<h4 id="Utilisation_de_try.2Fcatch_pour_.C3.A9viter_les_erreurs_JavaScript">Utilisation de try/catch pour éviter les erreurs JavaScript</h4> +<p>Ce système n'est actuellement pas supporté par Opera, Safari et les versions anciennes de Mozilla (1.7 et précédentes). Comme certains navigateurs ne supportent pas les nouvelles possibilités comme la propriété <code>tabIndex</code> sur tous les éléments, utilisez try/catch aux endroits appropriés. Les contrôles doivent rester utilisables avec la souris sur les navigateurs ne supportant pas le système DHTML de navigation au clavier. Son support est déjà planifié pour Opera et Safari (via les spécifications du <a href="http://whatwg.org/">WHATWG</a>).</p> +<h4 id="Ne_pas_se_baser_sur_un_comportement_coh.C3.A9rent_de_la_r.C3.A9p.C3.A9tition_d.27une_touche.2C_pour_l.27instant">Ne pas se baser sur un comportement cohérent de la répétition d'une touche, pour l'instant</h4> <p>Malheureusement, <code>onkeydown</code> peut ou non être répété suivant le système d'exploitation utilisé. Consultez le {{ Bug(91592) }} dans la base de données Bugzilla.</p> <p>{{ languages( { "en": "en/Key-navigable_custom_DHTML_widgets", "ja": "ja/Key-navigable_custom_DHTML_widgets" } ) }}</p> diff --git a/files/fr/web/accessibility/understanding_wcag/index.html b/files/fr/web/accessibility/understanding_wcag/index.html index 5e99ef795d..23805dc3ca 100644 --- a/files/fr/web/accessibility/understanding_wcag/index.html +++ b/files/fr/web/accessibility/understanding_wcag/index.html @@ -7,7 +7,7 @@ tags: - Web Content Accessibility Guidelines translation_of: Web/Accessibility/Understanding_WCAG --- -<p class="summary">Cet ensemble d'articles fournit des explications rapides pour vous aider à comprendre les étapes à suivre pour vous conformer aux recommandations décrites dans les Directives d'accessibilité du contenu Web 2.0 ou 2.1 du W3C (ou simplement WCAG, aux fins de cet article).</p> +<p>Cet ensemble d'articles fournit des explications rapides pour vous aider à comprendre les étapes à suivre pour vous conformer aux recommandations décrites dans les Directives d'accessibilité du contenu Web 2.0 ou 2.1 du W3C (ou simplement WCAG, aux fins de cet article).</p> <p>Les WCAG 2.0 et 2.1 fournissent un ensemble détaillé de lignes directrices pour rendre le contenu Web plus accessible aux personnes ayant une grande variété de handicaps. Il est complet mais incroyablement détaillé et assez difficile à comprendre rapidement. Pour cette raison, nous avons résumé les étapes pratiques que vous devez suivre pour satisfaire les différentes recommandations, avec d'autres liens vers plus de détails si nécessaire.</p> @@ -18,10 +18,10 @@ translation_of: Web/Accessibility/Understanding_WCAG <p>Chacun des liens ci-dessous vous mènera à des pages qui développent davantage ces domaines, vous donnant des conseils pratiques sur la façon de rédiger votre contenu Web afin qu'il soit conforme aux critères de succès décrits dans chacune des directives WCAG 2.0 et 2.1 qui se subdivisent davantage en chaque principe.</p> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceptile:</a> Les utilisateurs doivent pouvoir le percevoir d'une manière ou d'une autre, en utilisant un ou plusieurs de leurs sens.</li> - <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Opérable</a>: Les utilisateurs doivent pouvoir contrôler les éléments de l'interface utilisateur (par exemple, les boutons doivent être cliquables d'une manière ou d'une autre - souris, clavier, commande vocale, etc.).</li> - <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Compréhensible</a>: Le contenu doit être compréhensible pour ses utilisateurs.</li> - <li><a href="/en-US/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robuste</a>: Le contenu doit être développé à l'aide de normes Web bien adoptées qui fonctionneront sur différents navigateurs, maintenant et à l'avenir.</li> + <li><a href="/fr/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceptile:</a> Les utilisateurs doivent pouvoir le percevoir d'une manière ou d'une autre, en utilisant un ou plusieurs de leurs sens.</li> + <li><a href="/fr/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Opérable</a>: Les utilisateurs doivent pouvoir contrôler les éléments de l'interface utilisateur (par exemple, les boutons doivent être cliquables d'une manière ou d'une autre - souris, clavier, commande vocale, etc.).</li> + <li><a href="/fr/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Compréhensible</a>: Le contenu doit être compréhensible pour ses utilisateurs.</li> + <li><a href="/fr/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robuste</a>: Le contenu doit être développé à l'aide de normes Web bien adoptées qui fonctionneront sur différents navigateurs, maintenant et à l'avenir.</li> </ul> <h2 id="Dois-je_utiliser_WCAG_2.0_ou_2.1">Dois-je utiliser WCAG 2.0 ou 2.1?</h2> @@ -55,4 +55,4 @@ translation_of: Web/Accessibility/Understanding_WCAG <p>Ce guide est destiné à fournir des informations pratiques pour vous aider à créer de meilleurs sites Web plus accessibles. Cependant, nous ne sommes pas des avocats et rien de tout cela ne constitue un avis juridique. Si vous êtes préoccupé par les implications juridiques de l'accessibilité du Web, nous vous recommandons de vérifier la législation spécifique régissant l'accessibilité du Web / des ressources publiques dans votre pays ou région, et de demander l'avis d'un avocat qualifié.</p> -<p><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">Qu'est ce que l'accessibilité?</a> et particularité, <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">les directives d'Accessibility et la section sur la loi</a> fournissent des informations complémentaires.</p> +<p><a href="/fr/docs/Learn/Accessibility/What_is_accessibility">Qu'est ce que l'accessibilité?</a> et particularité, <a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">les directives d'Accessibility et la section sur la loi</a> fournissent des informations complémentaires.</p> diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html index 32d2c8465d..98d4766bd9 100644 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html @@ -68,8 +68,7 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_ <p>Les deux textes ont leur couleur noire par défaut. La "bonne" <code><div></code> a un fond violet clair, ce qui rend le texte facile à lire:</p> -<div class="hidden"> -<h4 id="exemple1">exemple1</h4> +<h3 id="Bon_exemple">Bon exemple</h3> <pre class="brush: html"> <div class="bon"> Bon contraste @@ -89,15 +88,12 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_ .bon { background-color: #fae6fa; }</pre> -</div> -<p>{{EmbedLiveSample('exemple1', '100%', '100')}}</p> +<p>{{EmbedLiveSample('Bon_exemple', '100%', '100')}}</p> +<h3 id="Mauvais_exemple">Mauvais exemple</h3> <p>La "mauvaise" <code><div></code>, en revanche, a un fond violet très foncé, ce qui rend le texte beaucoup plus difficile à lire:</p> -<div class="hidden"> -<h4 id="exemple2">exemple2</h4> - <pre class="brush: html"> <div class="mauvais"> Mauvais contraste </div></pre> @@ -116,12 +112,9 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_ .mauvais { background-color: #400064; }</pre> -</div> -<p>{{EmbedLiveSample('exemple2', '100%', '100')}}</p> +<p>{{EmbedLiveSample('Mauvais_exemple', '100%', '100')}}</p> -<dl> -</dl> <h2 id="Solution">Solution</h2> diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/index.html index e8059d8fca..9ed3ff530a 100644 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/index.html +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/index.html @@ -14,10 +14,10 @@ tags: - time-based media translation_of: Web/Accessibility/Understanding_WCAG/Perceivable --- -<p class="summary">This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the <strong>Perceivable</strong> principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses.</p> +<p>This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the <strong>Perceivable</strong> principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses.</p> <div class="note"> -<p><strong>Note</strong>: To read the W3C definitions for Perceivable and its guidelines and success criteria, see <a href="https://www.w3.org/TR/WCAG21/#perceivable">Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.</a></p> +<p><strong>Note :</strong> To read the W3C definitions for Perceivable and its guidelines and success criteria, see <a href="https://www.w3.org/TR/WCAG21/#perceivable">Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.</a></p> </div> <h2 id="Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">Guideline 1.1 — Providing text alternatives for non-text content</h2> @@ -36,28 +36,28 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable <tr> <td colspan="1" rowspan="5">1.1.1 Provide text equivalents (A)</td> <td>All images that convey meaningful content should be given suitable alternative text.</td> - <td><a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives.</a></td> + <td><a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives.</a></td> </tr> <tr> <td>Complex images or charts should have an accessible alternative provided, either on the same page or linked to. Use a regular link rather than the <code>longdesc</code> attribute.</td> <td> - <p>A text description may work, or an accessible data table (see <a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a>). Also see <a href="/en-US/docs/Learn/Accessibility/HTML#Other_text_alternative_mechanisms">Other text alternative mechanisms</a> for the argument against <code>longdesc</code>.</p> + <p>A text description may work, or an accessible data table (see <a href="/fr/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a>). Also see <a href="/fr/docs/Learn/Accessibility/HTML#Other_text_alternative_mechanisms">Other text alternative mechanisms</a> for the argument against <code>longdesc</code>.</p> </td> </tr> <tr> <td>Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar).</td> <td> - <p>See <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a> for static caption options, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a>, <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a>, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other alternatives.</p> + <p>See <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a> for static caption options, and <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a>, <a href="/fr/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a>, and <a href="/fr/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other alternatives.</p> </td> </tr> <tr> <td>UI Controls such as form elements and buttons should have text labels that describe their purpose.</td> - <td>Buttons are simple — you should make sure the button text describes the function of the button (e.g. <code><button>Upload image</button></code>). For further information on other UI controls, see <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>.</td> + <td>Buttons are simple — you should make sure the button text describes the function of the button (e.g. <code><button>Upload image</button></code>). For further information on other UI controls, see <a href="/fr/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>.</td> </tr> <tr> <td>Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users.</td> <td> - <p>Decorative images should be implemented using CSS background images (see <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a>). If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (<code>alt=""</code>), otherwise screenreaders may try to read out the filepath, etc.</p> + <p>Decorative images should be implemented using CSS background images (see <a href="/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a>). If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (<code>alt=""</code>), otherwise screenreaders may try to read out the filepath, etc.</p> <p>If you are including background video or audio that autoplays, make it as unobtrusive as possible. Don't make it look/sound like content, and provide a control to turn it off. Ideally, don't include it at all.</p> </td> @@ -66,7 +66,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable </table> <div class="note"> -<p><strong>Note</strong>: Also see the <a href="https://www.w3.org/TR/WCAG21/#text-alternatives">WCAG description for Guideline 1.1: Text alternatives</a>.</p> +<p><strong>Note :</strong> Also see the <a href="https://www.w3.org/TR/WCAG21/#text-alternatives">WCAG description for Guideline 1.1: Text alternatives</a>.</p> </div> <h2 id="Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Guideline 1.2 — Providing text alternatives for time-based media</h2> @@ -83,17 +83,17 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable <tr> <td colspan="1" rowspan="1">1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A)</td> <td>A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video).</td> - <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td> + <td>See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td> </tr> <tr> <td colspan="1">1.2.2 Provide captions for web-based video (A)</td> <td>You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video.</td> - <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a> for HTML5 video captions, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other technologies. See also <a href="https://support.google.com/youtube/answer/2734796?hl=en">Add your own subtitles & closed captions</a> (YouTube).</td> + <td>See <a href="/fr/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a> for HTML5 video captions, and <a href="/fr/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other technologies. See also <a href="https://support.google.com/youtube/answer/2734796?hl=en">Add your own subtitles & closed captions</a> (YouTube).</td> </tr> <tr> <td colspan="1">1.2.3 Provide text transcript or audio description for web-based video (A)</td> <td>You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone.</td> - <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td> + <td>See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td> </tr> <tr> <td colspan="1">1.2.4 Provide captions for live audio (AA)</td> @@ -118,18 +118,18 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable <tr> <td colspan="1">1.2.8 Provide an alternative for prerecorded media (AAA)</td> <td>For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.</td> - <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td> + <td>See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td> </tr> <tr> <td colspan="1">1.2.9 Provide a transcript for live audio (AAA)</td> <td>For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.</td> - <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td> + <td>See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td> </tr> </thead> </table> <div class="note"> -<p><strong>Note</strong>: Also see the <a href="https://www.w3.org/TR/WCAG21/#time-based-media">WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media</a>.</p> +<p><strong>Note :</strong> Also see the <a href="https://www.w3.org/TR/WCAG21/#time-based-media">WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media</a>.</p> </div> <h2 id="Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">Guideline 1.3 — Create content that can be presented in different ways</h2> @@ -155,13 +155,13 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable </ul> </td> <td>The whole of - <p><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a> is packed with information about this, but you should particularly refer to <a href="/en-US/docs/Learn/Accessibility/HTML#Good_semantics">Good semantics</a>, <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>, and <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a>.</p> + <p><a href="/fr/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a> is packed with information about this, but you should particularly refer to <a href="/fr/docs/Learn/Accessibility/HTML#Good_semantics">Good semantics</a>, <a href="/fr/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>, and <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a>.</p> </td> </tr> <tr> <td colspan="1">1.3.2 Meaningful content sequence (A)</td> <td>A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup.</td> - <td>Again, refer to <a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a>.</td> + <td>Again, refer to <a href="/fr/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a>.</td> </tr> <tr> <td colspan="1">1.3.3 Sensory characteristics (A)</td> @@ -175,7 +175,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable </ul> <div class="note"> - <p><strong>Note</strong>: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.</p> + <p><strong>Note :</strong> Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.</p> </div> </td> <td> </td> @@ -205,7 +205,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable </table> <div class="note"> -<p><strong>Note</strong>: Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#adaptable">Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.</a></p> +<p><strong>Note :</strong> Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#adaptable">Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.</a></p> </div> <h2 id="Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background</h2> @@ -224,12 +224,12 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable <td> <p>Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of "required" would be more appropriate.</p> </td> - <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a> and <a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#Multiple_labels">Multiple labels</a>.</td> + <td>See <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a> and <a href="/fr/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#Multiple_labels">Multiple labels</a>.</td> </tr> <tr> <td colspan="1">1.4.2 Audio controls (A)</td> <td>For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume.</td> - <td>Use native <code><button></code>s to provide accessible keyboard controls, as shown in <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player syling basics</a>.</td> + <td>Use native <code><button></code>s to provide accessible keyboard controls, as shown in <a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player syling basics</a>.</td> </tr> <tr> <td colspan="1">1.4.3 Minimum contrast (AA)</td> @@ -241,7 +241,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable <li>Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.</li> </ul> </td> - <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td> + <td>See <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td> </tr> <tr> <td colspan="1">1.4.4 Resize text (AA)</td> @@ -263,7 +263,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable <li>Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.</li> </ul> </td> - <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td> + <td>See <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td> </tr> <tr> <td colspan="1">1.4.7 Low or no background audio (AAA)</td> @@ -337,7 +337,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable </table> <div class="note"> -<p><strong>Note</strong>: Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#distinguishable">Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background.</a><a href="https://www.w3.org/TR/WCAG21/#distinguishable">.</a></p> +<p><strong>Note :</strong> Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#distinguishable">Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background.</a><a href="https://www.w3.org/TR/WCAG21/#distinguishable">.</a></p> </div> <p> </p> @@ -349,9 +349,9 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable <ol> <li>Perceivable</li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable">Operable</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable">Understandable</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust">Robust</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable">Operable</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Understandable">Understandable</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Robust">Robust</a></li> </ol> </li> </ul> |