From df82bcd9dcfa4cb7053950ba950ba306d60f374f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Thu, 11 Nov 2021 07:53:42 +0100 Subject: Prepare Accessibility section for Markdown conversion (#2975) * Remove summary and seoSummary * Fix hidden blocks * Remove spans * Remove notranslate * Remove extra ids * Fixing links * Fixing another link * Fixing headings with name * Fix one offs and other isolated issues * Fix warnings * Fix notes * fix absolute and english links * fix images --- files/fr/_redirects.txt | 3 -- files/fr/_wikihistory.json | 19 ------- .../index.html | 26 ++++------ .../aria/aria_live_regions/index.html | 20 +++++--- .../aria_technique_template/index.html | 31 ----------- .../accessibility/aria/aria_techniques/index.html | 60 +++++++++++----------- .../using_the_alert_role/index.html | 22 ++++---- .../using_the_alertdialog_role/index.html | 30 +++++------ .../index.html | 4 +- .../using_the_aria-invalid_attribute/index.html | 22 ++++---- .../using_the_aria-label_attribute/index.html | 16 +++--- .../using_the_aria-labelledby_attribute/index.html | 36 ++++++------- .../index.html | 16 ++---- .../using_the_aria-relevant_attribute/index.html | 4 +- .../using_the_aria-required_attribute/index.html | 22 +++----- .../using_the_aria-valuemax_attribute/index.html | 30 +++++------ .../using_the_aria-valuemin_attribute/index.html | 26 ++++------ .../using_the_aria-valuenow_attribute/index.html | 48 ++++++++--------- .../using_the_aria-valuetext_attribute/index.html | 22 ++++---- .../using_the_article_role/index.html | 26 +++------- .../using_the_group_role/index.html | 26 ++++------ .../aria_techniques/using_the_link_role/index.html | 25 +++++---- .../aria_techniques/using_the_log_role/index.html | 26 ++++------ .../using_the_presentation_role/index.html | 19 +------ .../using_the_progressbar_role/index.html | 37 ++++++------- .../using_the_radio_role/index.html | 42 --------------- .../using_the_slider_role/index.html | 28 ++++------ .../using_the_status_role/index.html | 21 ++++---- .../using_the_toolbar_role/index.html | 31 ----------- .../web/accessibility/aria/forms/alerts/index.html | 24 ++++----- .../aria/forms/basic_form_hints/index.html | 22 ++++---- files/fr/web/accessibility/aria/forms/index.html | 8 +-- .../aria/forms/multipart_labels/index.html | 12 ++--- .../aria/how_to_file_aria-related_bugs/index.html | 48 ++++++++--------- files/fr/web/accessibility/aria/index.html | 34 +++++------- .../aria/roles/banner_role/index.html | 4 +- .../aria/roles/button_role/index.html | 17 +++--- .../aria/roles/checkbox_role/index.html | 17 +++--- .../aria/roles/dialog_role/index.html | 38 +++++++------- .../aria/roles/listbox_role/index.html | 32 +++++------- .../aria/roles/switch_role/index.html | 2 +- .../aria/roles/textbox_role/index.html | 12 ++--- .../aria/web_applications_and_aria_faq/index.html | 56 ++++++++++---------- files/fr/web/accessibility/community/index.html | 10 ++-- files/fr/web/accessibility/index.html | 40 +++++++-------- .../index.html | 38 +++++++------- .../accessibility/understanding_wcag/index.html | 12 ++--- .../perceivable/color_contrast/index.html | 15 ++---- .../understanding_wcag/perceivable/index.html | 52 +++++++++---------- 49 files changed, 480 insertions(+), 751 deletions(-) delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/aria_technique_template/index.html delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_radio_role/index.html delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_toolbar_role/index.html (limited to 'files') 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: >-

Problématique

-

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 <div> ou le tag <span>. 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 ARIA entre en jeu.

+

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 <div> ou le tag <span>. 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 ARIA entre en jeu.

Exemple 1: Code dune tabulation sans informations ARIA. Il n'y a aucune information permettant de décrire la forme du widget et ses fonctions.

@@ -38,14 +38,14 @@ original_slug: >- </div>

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 dassistance nest présente.
- Screenshot of the tabs widget

+ Screenshot of the tabs widget

ARIA

WAI-ARIAI, les spécifications concernant les applications internet "riches" et accessibles sont publiées par l’iniative du W3C sur l’accessibilité, 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.

-

Beaucoup d’entre eux ont été ajouté plus tard dans HTML5, et les développeurs devraient toujours préférer utiliser la balise HTML correspondante plutôt qu’utiliser ARIA.

+

Attention : Beaucoup d’entre eux ont été ajouté plus tard dans HTML5, et les développeurs devraient toujours préférer utiliser la balise HTML correspondante plutôt qu’utiliser ARIA.

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é.

@@ -126,7 +126,7 @@ original_slug: >-

Exemple 2c. JavaScript pour mettre à jour l'attribut aria-checked.

-
var showTip = function(el) {
+
var showTip = function(el) {
   el.setAttribute('aria-hidden', 'false');
 }
@@ -138,10 +138,6 @@ original_slug: >-

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 role de button, et le mode "édition" avec un élément texte {{ HTMLElement("input") }}.

-

Mise à jour asynchrone de contenu

- -
En construction. Voir aussi Live Regions
-

La navigation au clavier

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 Tab, Entrée, Espace et des flèches.

@@ -158,16 +154,16 @@ original_slug: >-
  • En cas de doute, imitez le comportement standard du bureau du contrôle que vous créez.
  • -

    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 Tab et Maj+Tab. 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 Entrée ou sur Espace pour activer l’onglet suivant. Un tutoriel en profondeur pour créer Widget navigables grâce à des contrôles Javascript comme décrit ici afin de montrer comment avoir ce comportement en JS.

    +

    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 Tab et Maj+Tab. 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 Entrée ou sur Espace pour activer l’onglet suivant. Un tutoriel en profondeur pour créer Widget navigables grâce à des contrôles Javascript comme décrit ici afin de montrer comment avoir ce comportement en JS.

    -

    Pour plus de détails à propos de ces conventions de navigation au clavier, un aperçu ici DHTML style guide 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 ARIA Best Practices qui inclut la navigation au clavier et les raccourcis pour une variété de widgets.

    +

    Pour plus de détails à propos de ces conventions de navigation au clavier, un aperçu ici DHTML style guide 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 ARIA Best Practices qui inclut la navigation au clavier et les raccourcis pour une variété de widgets.

    Voir aussi

    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 --- -

    Introduction

    +

    Introduction

    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.

    -

    Zones « live » basiques

    +

    Zones « live » basiques

    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.

    @@ -20,8 +20,12 @@ original_slug: Accessibilité/ARIA/Zones_live_ARIA
    aria-live :
    L’attribut aria-live=VALEUR_POLITESSE 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 : off/polite/assertive. La valeur par défaut est off. Cet attribut est de loin le plus important.
    aria-controls :
    -
    L’attribut aria-controls=[LISTE_IDs] est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un ID 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 : aria-controls="maZoneID1 maZoneID2".
    -
    Nous ne savons pas si aria-controls pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires.
    +

    L’attribut aria-controls=[LISTE_IDs] est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un ID 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 : aria-controls="maZoneID1 maZoneID2".

    +
    +

    Attention :Nous ne savons pas si aria-controls pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires. +

    +
    +

    Normalement, seul aria-live="polite" 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é.

    @@ -34,7 +38,7 @@ original_slug: Accessibilité/ARIA/Zones_live_ARIA

    <select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select>

    -
    <div role="region" id="bird-info" aria-live="polite">
    +
    <div role="region" id="bird-info" aria-live="polite">

    Lorsque l’utilisateur sélectionne un nouvel oiseau, l’information est lue. Du fait de la valeur polite, 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.

    @@ -42,7 +46,7 @@ original_slug: Accessibilité/ARIA/Zones_live_ARIA

    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 :

    - +
    @@ -103,11 +107,11 @@ original_slug: Accessibilité/ARIA/Zones_live_ARIA
    L’attribut aria-describedby=[LISTE_ID] est utilisé pour associer une ou des descriptions à une zone. Le fonctionnement est similaire à celui d'aria-controls 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.
    -

    Cas d’étude avancé : liste de contacts

    +

    Cas d’étude avancé : liste de contacts

    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).

    -
    <ul id="roster" aria-live="polite" aria-relevant="additions removals">
    +
    <ul id="roster" aria-live="polite" aria-relevant="additions removals">
     	<!-- utilisez JavaScript ici pour ajouter/supprimer des utilisateurs-->
     </ul>
     
    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 ---- -
    -
    -

    Description

    -

     

    -

    Effets possibles sur les agents utilisateur et les technologies d’assistance 

    -

     

    -
    - Note : 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.
    -

    Exemples

    -

    Exemple 1 : 

    -

     

    -
    Code 
    -

    Exemples fonctionnels :

    -

    Notes 

    -

    Attributs ARIA utilisés

    -

    Techniques ARIA associées 

    -

    Compatibilité

    -

    TBD : Ajouter les informations de prise en charge des combinaisons les plus courantes d’agents utilisateurs et de produits de technologies d’assistance

    -

    Autres ressources

    -
    -
    -

     

    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

    Rôles

    Rôles de composant d’interface

    @@ -35,33 +35,33 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA
    • Grid (tableau, contenant les rôles row (ligne), gridcell (cellule), rowheader (en-tête de ligne) et columnheader (en-tête de colonne))
    • Menubar / Menu (contenant les rôles menuitem, menuitemcheckbox et menuitemradio)
    • -
    • Listbox (boîte de liste, contenant le rôle option)
    • +
    • Listbox (boîte de liste, contenant le rôle option)
    • Tablist (boîte à onglets, contenant les rôles tab et tabpanel)
    • Tree (arbre, contenant les rôles group et treeitem)
    • -
    • Radiogroup (voir le rôle Radio)
    • +
    • Radiogroup (voir le rôle Radio)
    • Treegrid

    Rôles de structure de document

    Rôles de points de repère

    Attributs de zones « live »

      @@ -108,11 +108,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA

    Attributs de relation

      -
    • aria-activedescendant
    • +
    • aria-activedescendant
    • aria-controls
    • -
    • aria-describedby
    • +
    • aria-describedby
    • aria-flowto
    • -
    • aria-labelledby
    • +
    • aria-labelledby
    • aria-owns
    • aria-posinset
    • aria-setsize
    • 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 ---

      Description

      -
      -

      Cette technique présente l’utilisation du rôle alert (en) et décrit les effets produits sur les navigateurs et les technologies d’assistance.

      -
      +

      Cette technique présente l’utilisation du rôle alert (en) et décrit les effets produits sur les navigateurs et les technologies d’assistance.

      Le rôle alert 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 alert est le plus utile lorsqu’il s’agit d’attirer l’attention de l’utilisateur, par exemple si :

      @@ -41,7 +39,9 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert
    • Les loupes ou agrandisseurs d’écran peuvent indiquer qu’une alerte est survenue et quel en est le texte.
    -
    Note : 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.
    +
    +

    Note : 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.

    +

    Exemples

    @@ -101,28 +101,24 @@ document.getElementById("expirationWarning").className = "";

    Attributs ARIA utilisés

    Techniques ARIA connexes

    -

    Compatibilité

    - -

    À 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.

    -

    Autres ressources

    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 ---

    Description

    -
    -

    Cette technique présente l’utilisation du rôle alertdialog role.

    -
    +

    Cette technique présente l’utilisation du rôle alertdialog role.

    -

    Le rôle alertdialog est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, alertdialog est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’utilisation du rôle dialog s’appliquent également au rôle alertdialog :

    +

    Le rôle alertdialog est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, alertdialog est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’utilisation du rôle dialog s’appliquent également au rôle alertdialog :

    Techniques ARIA connexes

    -

    Compatibilité

    - -

    À 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.

    -

    Autres ressources

    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 ---

    Description

    -
    -

    Cette technique présente l’utilisation de l’attribut aria-valuemax.

    -
    +

    Cette technique présente l’utilisation de l’attribut aria-valuemax.

    -

    L’attribut aria-valuemax est utilisé pour définir la valeur maximale autorisée pour un composant à intervalle tels qu’une barre de progression progressbar, un bouton rotatif spinbutton ou un curseur slider. Si aria-valuenow a des valeurs minimale et maximale connues, le développeur devrait fournir les propriétés de aria-valuemax et aria-valuemin. La valeur de aria-valuemax DOIT être supérieure ou égale à celle de aria-valuemin.

    +

    L’attribut aria-valuemax est utilisé pour définir la valeur maximale autorisée pour un composant à intervalle tels qu’une barre de progression progressbar, un bouton rotatif spinbutton ou un curseur slider. Si aria-valuenow a des valeurs minimale et maximale connues, le développeur devrait fournir les propriétés de aria-valuemax et aria-valuemin. La valeur de aria-valuemax DOIT être supérieure ou égale à celle de aria-valuemin.

    -

    aria-valuemax est un attribut obligatoire des rôles slider, scrollbar et spinbutton.

    +

    aria-valuemax est un attribut obligatoire des rôles slider, scrollbar et spinbutton.

    Valeurs

    @@ -26,7 +24,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu

    Si la valeur aria-valuemax n’est pas déterminée, ou si aria-valuemin n’est pas inférieure ou égale à la valeur de aria-valuemax, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.

    -
    Note : 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.
    +

    Note : 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.

    Exemples

    @@ -42,26 +40,22 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu

    Utilisés avec les rôles ARIA

    Techniques ARIA connexes

    -

    Compatibilité

    - -

    À 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.

    -

    Autres ressources

    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 ---

    Description

    -

    L’attribut aria-valuemin est utilisé pour définir la valeur minimale autorisée pour un composant à intervalle tel qu’une barre de progression progressbar, un bouton rotatif spinbutton ou un curseur slider. Si aria-valuenow a des valeurs limites connues (minimum et maximum), le développeur devrait spécifier les propriétés de aria-valuemax et aria-valuemin. La valeur de aria-valuemin DOIT être inférieure ou égale à celle de aria-valuemax.

    +

    L’attribut aria-valuemin est utilisé pour définir la valeur minimale autorisée pour un composant à intervalle tel qu’une barre de progression progressbar, un bouton rotatif spinbutton ou un curseur slider. Si aria-valuenow a des valeurs limites connues (minimum et maximum), le développeur devrait spécifier les propriétés de aria-valuemax et aria-valuemin. La valeur de aria-valuemin DOIT être inférieure ou égale à celle de aria-valuemax.

    -

    aria-valuemin est un attribut obligatoire des rôles slider, scrollbar et spinbutton.

    +

    aria-valuemin est un attribut obligatoire des rôles slider, scrollbar et spinbutton.

    Valeurs

    @@ -22,7 +22,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu

    Si aria-valuemin n’est pas inférieure ou égale à la valeur de aria-valuemax, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.

    -
    Note : 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.
    +

    Note : 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.

    Exemples

    @@ -38,26 +38,22 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu

    Utilisé avec les rôles ARIA

    Techniques ARIA connexes

    -

    Compatibilité

    - -

    À 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.

    -

    Autres ressources

    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

    Pour les éléments possédant les rôles slider et spinbutton, les technologies d'assistance DEVRAIENT retourner la valeur courante à l'utilisateur.

    -
    Note : 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.
    +
    +

    Note : 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.

    +

    Exemples

    @@ -37,29 +39,27 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu

    Exemples concrets

    -
    -
    progressbar
    -
    - -
    slider
    -
    - -
    -
    spinbutton
    -
    - -
    -
    +

    Rôles ARIA concernés

    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 ---

    Description

    -

    L’attribut aria-valuetext est utilisé pour définir un texte alternatif, lisible par l'homme, de la valeur aria-valuenow d’un composant à intervalle tel qu’une barre de progression, un bouton rotatif spinbutton ou un curseur slider.

    +

    L’attribut aria-valuetext est utilisé pour définir un texte alternatif, lisible par l'homme, de la valeur aria-valuenow d’un composant à intervalle tel qu’une barre de progression, un bouton rotatif spinbutton ou un curseur slider.

    -

    Les développeurs DEVRAIENT uniquement définir l’attribut aria-valuetext lorsque la valeur retournée ne peut pas être précisément représentée sous forme de nombre.

    +

    Les développeurs DEVRAIENT uniquement définir l’attribut aria-valuetext lorsque la valeur retournée ne peut pas être précisément représentée sous forme de nombre.

    -

    Par exemple, dans le cas d'un curseur qui peut retourner les valeurs petite, moyenneet grand, les valeurs de aria-valuenow pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de aria-valuetext sera l'une des chaînes suivantes : petite, moyenne ou grande.

    +

    Par exemple, dans le cas d'un curseur qui peut retourner les valeurs petite, moyenneet grand, les valeurs de aria-valuenow pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de aria-valuetext sera l'une des chaînes suivantes : petite, moyenne ou grande.

    Valeurs

    @@ -22,9 +22,9 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu

    Effets possibles sur les agents utilisateurs et les technologies d’assistance

    -

    Si l’attribut aria-valuetext est absent, les technologies d’assistance compteront uniquement sur l’attribut aria-valuenow pour la valeur courante. Si aria-valuetext est spécifié, les technologies d’assistance DEVRAIENT retourner cette valeur plutôt que celle de aria-valuenow.

    +

    Si l’attribut aria-valuetext est absent, les technologies d’assistance compteront uniquement sur l’attribut aria-valuenow pour la valeur courante. Si aria-valuetext est spécifié, les technologies d’assistance DEVRAIENT retourner cette valeur plutôt que celle de aria-valuenow.

    -
    Note : 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.
    +

    Note : 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.

    Exemples

    @@ -44,24 +44,20 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu

    Utilisé avec les rôles ARIA

    Techniques ARIA connexes

    -

    Compatibilité

    - -

    À 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.

    -

    Autres ressources

    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 ---

    Description

    -
    -

    Cette technique présente l’utilisation du rôle article (en) et décrit les effets produits sur les navigateurs et les technologies d’assistance.

    -
    +

    Cette technique présente l’utilisation du rôle article (en) et décrit les effets produits sur les navigateurs et les technologies d’assistance.

    Le rôle article 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 indépendants dans le sens où leur contenu pourrait être autonome, par exemple pour un flux de syndication.

    @@ -23,11 +21,13 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_article

    Effets possibles sur les agents utilisateurs et les technologies d’assistance

    -

    Lorsque l'utilisateur navigue dans un élément ayant le rôle article, les technologies d'assistance qui interceptent généralement les événements clavier standards doivent basculer en mode de navigation du document, plutôt que de passer les événements clavier à l'application web.

    +

    Lorsque l'utilisateur navigue dans un élément ayant le rôle article, les technologies d'assistance qui interceptent généralement les événements clavier standards doivent basculer en mode de navigation du document, plutôt que de passer les événements clavier à l'application web.

    -

    Les technologies d'assistance doivent fournit une fonctionnalité permettant à l'utilisateur de naviguer dans la hiérarchie de chacun des éléments article imbriqués.

    +

    Les technologies d'assistance doivent fournit une fonctionnalité permettant à l'utilisateur de naviguer dans la hiérarchie de chacun des éléments article imbriqués.

    -
    Note: 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.
    +
    +

    Note : 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.

    +

    Exemples

    @@ -50,18 +50,6 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_article </div> -

    Exemples concrets :

    - -

    Notes 

    - -

    Attributs ARIA utilisés

    - -

    Techniques ARIA connexes

    - -

    Compatibilité

    - -

    À 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.

    -

    Autres ressources

    -

    Spécification WAI-ARIA du rôle article (en)

    +

    Spécification WAI-ARIA du rôle article (en)

    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 ---

    Description

    -
    -

    Cette technique présente l’utilisation du rôle group et décrit les effets produits sur les navigateurs et les technologies d’assistance.

    -
    +

    Cette technique présente l’utilisation du rôle group et décrit les effets produits sur les navigateurs et les technologies d’assistance.

    -

    Le rôle group est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une region, 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 group est ajouté à un élément, , le navigateur émettra un événement group accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.

    +

    Le rôle group est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une region, 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 group est ajouté à un élément, , le navigateur émettra un événement group accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.

    -

    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 listitem. Les éléments de groupe devraient être imbriqués.

    +

    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 listitem. Les éléments de groupe devraient être imbriqués.

    La gestion correcte d’un groupe par les technologies d’assistance est déterminée par le contexte dans lequel il est fourni.

    -

    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 region ou un rôle standard de point de repère à cette section.

    +

    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 region ou un rôle standard de point de repère à cette section.

    Effets possibles sur les agents utilisateurs et les technologies d’assistance

    @@ -34,11 +32,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group

    Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

    -
    Note : 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.
    +

    Note : 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.

    Exemples

    @@ -97,7 +95,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group

    Exemples concrets :

    Notes

    @@ -109,21 +107,17 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group

    Attributs ARIA utilisés

    Techniques ARIA connexes

    -

    Compatibilité

    - -

    À 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.

    -

    Autres ressources

    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 ---

    Description

    -
    -

    Cette technique présente l’utilisation du rôle link et décrit les effets produits sur les navigateurs et les technologies d’assistance.

    -
    + +

    Cette technique présente l’utilisation du rôle link et décrit les effets produits sur les navigateurs et les technologies d’assistance.

    +

    Le rôle link 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.

    -

    L’attribut tabindex peut éventuellement être utilisé avec ce rôle pour spécifier directement la position de l’élément dans l’ordre de tabulation.

    +

    L’attribut tabindex peut éventuellement être utilisé avec ce rôle pour spécifier directement la position de l’élément dans l’ordre de tabulation.

    Effets possibles sur les agents utilisateurs et les technologies d’assistance

    Lorsque le rôle link 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 :

    - Note : 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.
    +

    Note : 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.

    Exemples

    Exemple 1 : Ajoute le rôle dans le code HTML

    L’extrait de code ci-dessous montre comment le rôle link est ajouté dans le code source HTML. 

    @@ -55,22 +55,21 @@ function navigateLink(evt) { </body>

    Exemples concrets :

    Notes

    -

    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 button au lieu du rôle link.

    +

    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 button au lieu du rôle link.

    Attributs ARIA utilisés

    Techniques ARIA connexes

    -

    Compatibilité

    -

    À 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.

    +

    Autres ressources

    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 ---

    Description

    -
    -

    Cette technique présente l’utilisation du rôle log et décrit les effets produits sur les navigateurs et les technologies d’assistance.

    -
    +

    Cette technique présente l’utilisation du rôle log et décrit les effets produits sur les navigateurs et les technologies d’assistance.

    -

    Le rôle log est utilisé pour identifier un élément qui crée une zone live 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 log accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.

    +

    Le rôle log est utilisé pour identifier un élément qui crée une zone live 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 log accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.

    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 aria-atomic="true". Pour faire les annonces le plus tôt possible et lorsque l'utilisateur peut être interrompu, aria-live="assertive" peut être défini pour lancer des mises à jour plus agressives.

    @@ -34,7 +32,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log
  • Les loupes d'écran devraient indiquer visuellement la disponibilité d'une mise à jour du fichier de journalisation.
  • -
    Note : 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.
    +

    Note : 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.

    Exemples

    @@ -58,14 +56,14 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log </ul> </div> -

    Voir l’exemple sur CodeTalks pour plus d’informations.

    +

    Voir l’exemple sur CodeTalks pour plus d’informations.

    Exemples concrets :

    Notes

    @@ -78,21 +76,17 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log

    Attributs ARIA utilisés

    Techniques ARIA connexes

    -

    Compatibilité

    - -

    À 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.

    -

    Autres ressources

    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 --- -

    Cette page présente l'usage du rôle presentation et décrit l'effet qu'il a sur les navigateurs et les technologies d'assistance.

    +

    Cette page présente l'usage du rôle presentation et décrit l'effet qu'il a sur les navigateurs et les technologies d'assistance.

    Description

    -

    Le rôle presentation 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 presentation appliqué sur l'élément table 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.

    -

    Effets possibles sur les agents utilisateurs et les technologies d’assistance

    Les agents utilisateurs ou les technologies d'assistance ne devrait normalement pas lire les éléments marqués comme étant de rôle presentation.

    -
    Note : 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.
    +

    Note : 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.

    Exemples

    @@ -49,19 +47,6 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation … </svg> - - -

    Notes

    - -

    Attributs ARIA utilisés

    - -

    Techniques ARIA connexes

    - -

    Compatibilité

    - -

    À 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.

    -

    Autres ressources

    Using Aria - 2.9 Use of Role=presentation or Role=none: https://www.w3.org/TR/using-aria/#presentation

    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 ---

    Description

    -
    -

    Cette technique présente l’utilisation du rôle progressbar.

    -
    +

    Cette technique présente l’utilisation du rôle progressbar.

    Le rôle progressbar 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.

    -

    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 aria-valuenow, aria-valuemin et aria-valuemax. Si la valeur de progression est indéterminée, le développeur peut omettre l’attribut aria-valuenow.

    +

    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 aria-valuenow, aria-valuemin et aria-valuemax. Si la valeur de progression est indéterminée, le développeur peut omettre l’attribut aria-valuenow.

    Lorsqu’une tâche progresse, la valeur aria-valuenow doit être dynamiquement actualisée pour indiquer la progression aux produits de technologies d’assistance.

    -

    Si le rôle progressbar décrit la progression du chargement d’une zone particulière d’une page, l’auteur DOIT utiliser l’attribut aria-describedby pour pointer vers l’état courant, et définir l’attribut aria-busy à true pour la zone jusqu’à la fin du chargement. Il n’est pas possible à l’utilisateur de modifier la valeur de progressbar car elle est toujours en lecture seule.

    +

    Si le rôle progressbar décrit la progression du chargement d’une zone particulière d’une page, l’auteur DOIT utiliser l’attribut aria-describedby pour pointer vers l’état courant, et définir l’attribut aria-busy à true pour la zone jusqu’à la fin du chargement. Il n’est pas possible à l’utilisateur de modifier la valeur de progressbar car elle est toujours en lecture seule.

    -
    Note : généralement les technologies d’assistance retourneront la valeur de l’attribut aria-valuenow sous la forme d’un pourcentage d’une plage de valeurs comprise entre aria-valuemin et aria-valuemax, sauf si aria-valuetext est spécifié. Il est préférable de définir les valeurs pour les attributs aria-valuemin, aria-valuemax et aria-valuenow de façon appropriée pour ce calcul.
    +
    +

    Note : généralement les technologies d’assistance retourneront la valeur de l’attribut aria-valuenow sous la forme d’un pourcentage d’une plage de valeurs comprise entre aria-valuemin et aria-valuemax, sauf si aria-valuetext est spécifié. Il est préférable de définir les valeurs pour les attributs aria-valuemin, aria-valuemax et aria-valuenow de façon appropriée pour ce calcul.

    -
    Note : les éléments possédant le rôle progressbar ont une valeur aria-readonly implicite définie à true.
    +
    +

    Note : les éléments possédant le rôle progressbar ont une valeur aria-readonly implicite définie à true.

    +

    Effets possibles sur les agents utilisateurs et les technologies d’assistance

    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é.

    -
    Note : 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.
    +

    Note : 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.

    Exemples

    @@ -54,17 +55,9 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar

    Attributs ARIA utilisés

    - -

    Techniques ARIA connexes

    - -

    Compatibilité

    - -

    À 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.

    - -

    Autres ressources

    +
  • progressbar
  • +
  • aria-valuenow
  • +
  • aria-valuemin
  • +
  • aria-valuemax
  • +
  • aria-valuetext
  • + \ 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 ---- -

     

    - -

    Description

    - -

     

    - -

    Effets possibles sur les agents utilisateurs et les technologies d'assistance

    - -
    Note: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.
    - -

    Exemples

    - -

    Exemple 1 : 

    - -

     

    - -
    Code 
    - -

    Exemples concrets :

    - - - -

    Notes 

    - -

    Attributs ARIA utilisés

    - -

    Techniques ARIA connexes

    - -

    Compatibilité

    - -

    À 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.

    - -

    Autres ressources

    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 ---

    Description

    -
    -

    Cette technique présente l’utilisation du rôle slider.

    -
    +

    Cette technique présente l’utilisation du rôle slider.

    Le rôle slider est utilisé pour des balises qui permettent à l'utilisateur de sélectionner une valeur dans un intervalle donné. Le rôle slider est assigné à la « molette », 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 aria-valuenow du curseur de défilement (et si possible aria-valuetext) pour refléter la valeur courante. Voir la section {{ anch("Exemples") }} ci-dessous pour plus d'informations.

    @@ -20,7 +18,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider

    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) :

    -
    Rôle
    +
    @@ -45,7 +43,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider

    Effets possibles sur les agents utilisateurs et les technologies d’assistance

    -
    Note : 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.
    +

    Note : 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.

    Exemples

    @@ -85,7 +83,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider
    var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
     var updateSlider = function (newValue) {
         var handle = document.getElementById("day-handle");
    -    handle.setAttribute("aria-valuenow", newValue.toString());
    +    handle.setAttribute("aria-valuenow", newValue.toString());
         handle.setAttribute("aria-valuetext", dayNames[newValue]);
     };
     
    @@ -95,21 +93,15 @@ var updateSlider = function (newValue) {

    Attributs ARIA utilisés

    -

    Techniques ARIA connexes

    - -

    Compatibilité

    - -

    À 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.

    -

    Autres ressources

    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 ---

    Description

    -
    -

    Cette technique présente l’utilisation du rôle status et décrit les effets produits sur les navigateurs et les technologies d’assistance.

    -
    -

    Le rôle status est un type de zone live et un conteneur dont le contenu est un message d’informations destiné à l’utilisateur. Ce message n’est pas assez important pour justifier une alerte. 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 status accessible aux produits de technologies d’assistance qui pourront alors le notifier à l’utilisateur.

    -

    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 aria-controls.

    + +

    Cette technique présente l’utilisation du rôle status et décrit les effets produits sur les navigateurs et les technologies d’assistance.

    + +

    Le rôle status est un type de zone live et un conteneur dont le contenu est un message d’informations destiné à l’utilisateur. Ce message n’est pas assez important pour justifier une alerte. 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 status accessible aux produits de technologies d’assistance qui pourront alors le notifier à l’utilisateur.

    +

    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 aria-controls.

    Les technologies d’assistance devraient réserver des cellules dans la grille Braille pour rendre l’état.

    Effets possibles sur les agents utilisateurs et les technologies d’assistance

    Lorsque le rôle status est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

    @@ -27,7 +27,8 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status
  • Les loupes d’écran devraient agrandir l’objet d’état.
  • - Note : 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.
    +

    Note : 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.

    +

    Exemples

    Exemple 1 : ajout du rôle status dans le code HTML

    L’extrait de code ci-dessous montre comment le rôle status est ajouté directement dans le code source HTML.

    @@ -37,15 +38,13 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status

    Notes

    Attributs ARIA utilisés

    Techniques ARIA connexes

    -

    Compatibilité

    -

    À 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.

    Autres ressources

    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 ---- -

    Description

    -
    -  
    -

    Effets possibles sur les agents utilisateurs et les technologies d’assistance

    -

     

    -
    - Note : 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.
    -

    Exemples

    -

    Exemple 1 :

    -

     

    -
    Code 
    -

    Exemples concrets :

    - -

    Notes

    -

    Attributs ARIA utilisés

    -

    Techniques ARIA connexes

    -

    Compatibilité

    -

    À 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.

    -

    Autres ressources

    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

    Le formulaire

    -

    Tout d’abord, veuillez lire la technique aria-required pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement.

    +

    Tout d’abord, veuillez lire la technique aria-required pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement.

    Voici un formulaire simple :

    @@ -43,7 +43,7 @@ original_slug: Accessibilité/ARIA/formulaires/Alertes

    Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-)

    -

    Vérification de la validité et avertissement de l’utilisateur

    +

    Vérification de la validité et avertissement de l’utilisateur

    Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes :

    @@ -57,7 +57,7 @@ original_slug: Accessibilité/ARIA/formulaires/Alertes

    La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} :

    -
    <script type="application/javascript">
    +
    <script type="application/javascript">
     function removeOldAlert()
     {
         var oldAlert = document.getElementById("alert");
    @@ -91,7 +91,7 @@ function checkValidity(aID, aSearchTerm, aMsg)
     </script>
     
    -

    La fonction checkValidity

    +

    La fonction checkValidity

    Le cœur est la fonction checkValidity. 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.

    @@ -106,17 +106,17 @@ function checkValidity(aID, aSearchTerm, aMsg)

    Si le terme recherché est trouvé, l’attribut aria-invalid est réinitialisé à true. De plus, toute alerte qui subsisterait serait supprimée.

    -

    La fonction addAlert

    +

    La fonction addAlert

    Cette fonction commence par enlever toutes les alertes restantes. Son fonctionnement est simple : elle cherche un élément avec un identifiant alert, et si elle en trouve un, l’enlève du modèle objet de document (DOM).

    -

    Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID alert. 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 XHTML Role Attribut qui a été tout simplement porté sur HTML pour plus de simplicité.

    +

    Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID alert. 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 XHTML Role Attribut qui a été tout simplement porté sur HTML pour plus de simplicité.

    Le texte est ajouté à l’élément {{ HTMLElement("div") }}, qui est lui-même ajouté au document.

    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é.

    -

    Ajouter de la magie à l’événement onblur

    +

    Ajouter de la magie à l’événement onblur

    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 :

    @@ -138,7 +138,7 @@ function checkValidity(aID, aSearchTerm, aMsg)

    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.

    -

    Quelques questions qu’on peut se poser

    +

    Quelques questions qu’on peut se poser

    Q. Pourquoi mettre à la fois un (required) dans le texte du label et l’attribut aria-required sur certains éléments {{ HTMLElement("input") }} ?
    @@ -147,12 +147,6 @@ function checkValidity(aID, aSearchTerm, aMsg)
    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.
    -
    -

    TBD : let's rethink this – personally, I think setting focus might be good if done without causing a keyboard trap.

    - -

    ()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).

    -
    - -

    Conclusion

    +

    Conclusion

    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.

    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 --- -

    Labels de formulaire

    +

    Labels de formulaire

    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.

    @@ -38,9 +38,9 @@ original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les </form>
    -

    Labelliser avec ARIA

    +

    Labelliser avec ARIA

    -

    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") }}. WAI-ARIA, la spécification Accessible Rich Internet Applications (Applications Internet Riches Accessibles) de la Web Accessibility Initiative (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut aria-labelledby dans ces cas de figure.

    +

    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") }}. WAI-ARIA, la spécification Accessible Rich Internet Applications (Applications Internet Riches Accessibles) de la Web Accessibility Initiative (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut aria-labelledby dans ces cas de figure.

    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 aria-labelledby de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’id de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio.

    @@ -61,9 +61,9 @@ original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les </ul> -

    Décrire avec ARIA

    +

    Décrire avec ARIA

    -

    Les contrôles de formulaire peuvent parfois avoir une description qui leur est associée, en plus du label. ARIA fournit l’attribut aria-describedby pour associer directement une description à un contrôle donné.

    +

    Les contrôles de formulaire peuvent parfois avoir une description qui leur est associée, en plus du label. ARIA fournit l’attribut aria-describedby pour associer directement une description à un contrôle donné.

    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 aria-describedby du {{ HTMLElement("button") }} fait référence à l’id de l’élément {{ HTMLElement("div") }}.

    @@ -75,13 +75,13 @@ original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les

    (Notez que l’attribut aria-describedby est utilisé de différentes façons, en plus des contrôles de formulaires.)

    -

    Champs obligatoires et invalides

    +

    Champs obligatoires et invalides

    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 :

    L’exemple ci-dessous montre un formulaire simple avec 3 champs. Aux lignes 4 et 12, les attributs aria-required sont définis à true (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 aria-invalid 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).

    @@ -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 }; -

    Fournir des messages d’erreur utiles

    +

    Fournir des messages d’erreur utiles

    -

    Découvrez comment utiliser les alertes ARIA pour améliorer les formulaires.

    +

    Découvrez comment utiliser les alertes ARIA pour améliorer les formulaires.

    -

    Pour plus de conseils sur l’utilisation d’ARIA et l’accessibilité des formulaires, consultez le document WAI-ARIA Authoring Practices.

    +

    Pour plus de conseils sur l’utilisation d’ARIA et l’accessibilité des formulaires, consultez le document WAI-ARIA Authoring Practices.

    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

    Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web :

    -

    Voir également l’article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais) (version archivée par archive.org), couvrant pour une bonne part le même sujet.

    +

    Voir également l’article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais) (version archivée par archive.org), couvrant pour une bonne part le même sujet.

    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 ---

    Utiliser ARIA avec des labels comportant des champs

    -

    Problème

    +

    Problème

    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 « Effacer l’historique après [x] jours. » « Effacer l’historique après » est à la gauche de la boîte texte, « x » est le nombre, par exemple 21, et le mot « jours » suit la boîte texte, formant ainsi un phrase qu'il est facile de comprendre.

    @@ -23,20 +23,16 @@ original_slug: Accessibilité/ARIA/formulaires/Labels_multi-options

    Exemple :

    -

    Éteindre l’ordinateur après minutes

    -
        <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>
     
    -

    Pour les utilisateurs de JAWS 8

    +

    Pour les utilisateurs de JAWS 8

    JAWS 8.0 possède sa propre logique pour trouver les labels, ce qui lui fait systématiquement supplanter le nomAccessible 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.

    -

    Peut-on faire la même chose sans ARIA ?

    - -

    Ben Millard fait remarquer dans un billet que  les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4, simplement en imbriquant l'élément input dans le label. 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 aria-labelledby est encore la meilleure approche.

    +

    Peut-on faire la même chose sans ARIA ?

    -
    TBD: Ajouter plus d’infos sur la compatibilité
    +

    Ben Millard fait remarquer dans un billet que  les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4, simplement en imbriquant l'élément input dans le label. 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 aria-labelledby est encore la meilleure approche.

    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 ---

    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 :

    -
    Quand vous trouvez un bug, veuillez en aviser les tables de compatibilité liées dans la page des exemples.
    +
    +

    Note : Quand vous trouvez un bug, veuillez en aviser les tables de compatibilité liées dans la page des exemples.

    +

    A faire : ajouter la bon lien d'accessibilité à la table

    -
    Touche(s)
    +
    @@ -26,47 +28,47 @@ original_slug: Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA - + - - + + - - - + + + - - + + - + - + - - + + - - + + - - + + - + - - + +
    Genre
    Lecteurs d'écran -

    Freedom Scientific JAWS

    +

    Freedom Scientific JAWS

    formulaire de support technique JAWSformulaire de support technique JAWS
    GW Micro Window Eyescommentaires, questions et retours Window-Eyes (email)GW Micro Window Eyescommentaires, questions et retours Window-Eyes (email)  
    Non Visual Desktop Access (NVDA)Déposer un bug NVDA (github)Discuter des problèmes NVDANon Visual Desktop Access (NVDA)Déposer un bug NVDA (github)Discuter des problèmes NVDA
    OrcaDéposer un bug OrcaOrcaDéposer un bug Orca  
    Navigateurs Apple SafariDéposer un bug WebKit.orgDéposer un bug WebKit.org  
    Google ChromeDéposer un bug ChromiumDéposer un bug Chromium  

    Microsoft Internet Explorer

    Déposer un bug IEVoir les bugs ARIA Firefox existantsDéposer un bug IEVoir les bugs ARIA Firefox existants
    Mozilla Firefox -

    Déposer un bug Firefox

    +

    Déposer un bug Firefox

    Utiliser le composant : Disability Access APIs

    @@ -74,24 +76,24 @@ original_slug: Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA
    OperaDéposer un bug OperaMarquer [ARIA] dans le sommaireDéposer un bug OperaMarquer [ARIA] dans le sommaire
    Librairies JS Dojo ToolkitDéposer un bug DojoMarquer [Accessibilité] dans le champ composantDéposer un bug DojoMarquer [Accessibilité] dans le champ composant
    Google Web Toolkit (GWT)Déposer un bug GWTDéposer un bug GWT  
    Yahoo User InterfaceDéposer un bug YUIDéposer contre le composant associé dans la combobox catégorie et inclure [ARIA] dans le sommaireDéposer un bug YUIDéposer contre le composant associé dans la combobox catégorie et inclure [ARIA] dans le sommaire
    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 --- -

    Accessible Rich Internet Applications (ARIA) (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.

    +

    Accessible Rich Internet Applications (ARIA) (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.

    -

    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 widgets JavaScript, les indications dans les formulaires, les messages d'erreur et les mises à jour dynamiques du contenu, etc.

    +

    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 widgets JavaScript, les indications dans les formulaires, les messages d'erreur et les mises à jour dynamiques du contenu, etc.

    -

    Attention ! La plupart de ces widgets 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 de navigation au clavier, 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.

    +

    Attention : La plupart de ces widgets 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 de navigation au clavier, 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.

    Voici un widget utilisé pour une barre de progression :

    @@ -56,25 +56,22 @@ original_slug: Accessibilité/ARIA

    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.

    -
    -
    -
    -

    Tutoriels

    +

    Tutoriels

    Introduction à ARIA
    -
    Une rapide introduction à ARIA pour rendre accessible le contenu dynamique. Voir aussi l'introduction à ARIA de Gez Lemon en 2008
    -
    Vidéos de lecteurs d'écran utilisant ARIA
    +
    Une rapide introduction à ARIA pour rendre accessible le contenu dynamique. Voir aussi l'introduction à ARIA de Gez Lemon en 2008
    +
    Vidéos de lecteurs d'écran utilisant ARIA
    Des exemples concrets et d'autres simplifiés avec des vidéos comparatives entre l'état « avant ARIA » et « après ARIA ».
    -
    Utiliser ARIA
    +
    Utiliser ARIA
    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.

    Améliorations légères avec ARIA

    -
    Améliorer la navigation avec les balises (landmarks) ARIA
    -
    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. Voir aussi les notes d'implémentation pour les balises ARIA (mis à jour en juillet 2011).
    +
    Améliorer la navigation avec les balises (landmarks) ARIA
    +
    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. Voir aussi les notes d'implémentation pour les balises ARIA (mis à jour en juillet 2011).
    Améliorer l'accessibilité des formulaires
    ARIA ne se limite pas au contenu dynamique ! Apprenez comment améliorer l'accessibilité des formulaires HTML grâce aux attributs ARIA.
    @@ -86,18 +83,16 @@ original_slug: Accessibilité/ARIA
    Les éléments tels que <input>, <button> disposent de fonctionnalités natives pour l'utilisation au clavier. Si on triche en utilisant des <div> et ARIA, on doit s'assurer que l'accessibilité au clavier soit préservée.
    Régions dynamiques (live regions)
    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.
    -
    Utiliser les régions dynamiques ARIA afin d'indiquer une modification de contenu
    +
    Utiliser les régions dynamiques ARIA afin d'indiquer une modification de contenu
    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.
    -
    -
    -

    Processus de standardisation

    +

    Processus de standardisation

    -
    La spécification WAI-ARIA
    +
    La spécification WAI-ARIA
    La spécification rédigée par le W3C.
    -
    Bonnes pratiques afin d'écrire avec WAI-ARIA
    +
    Bonnes pratiques afin d'écrire avec WAI-ARIA

    Les documents officiels décrivant les meilleurs pratiques pour appliquer ARIA aux widgets et aux mécanismes interactifs.

    @@ -110,9 +105,6 @@ original_slug: Accessibilité/ARIA

    Rapporter des bogues

    Rapporter des bogues d'accessibilté/ARIA sur les navigateurs, les lecteurs d'écran et les bibliothèques JavaScript.

    -
    -
    -

    Voir aussi

    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 ---

    Description

    -
    Cette technique présente l’utilisation du rôle banner (en).
    +

    Cette technique présente l’utilisation du rôle banner (en).

    La zone d’entête principale d'un site devrait être structurée avec  <header role="banner">. Cette zone peut contenir le logo du site, sa description, le moteur de recherche.

    @@ -21,7 +21,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner

     

    -
    Note : 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.
    +

    Note : 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.

    Exemples

    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 --- -

    Le rôle button devrait être utilisé pour les éléments cliquables qui déclenchent une réponse lorsqu'activés par l'utilisateur. Ajouter role="button" 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 aria-pressed afin de créer des boutons interrupteurs.

    +

    Le rôle button devrait être utilisé pour les éléments cliquables qui déclenchent une réponse lorsqu'activés par l'utilisateur. Ajouter role="button" 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 aria-pressed afin de créer des boutons interrupteurs.

    <div id="saveChanges" tabindex="0" role="button" aria-pressed="false">Enregistrer</div>
    @@ -20,7 +20,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_button
    <button id="saveChanges">Enregistrer</button>
    -

    Note : Si on utilise role="button" plutôt que les éléments sémantiques <button> ou <input type="button">, il faudra : permettre à l'élément de recevoir le focus, définir des gestionnaires d'évènements pour click et keydown, y compris la gestion des touches Entrée et Espace, afin de traiter la saisie de l'utilisateur. Voir l'exemple de code officiel de WAI-ARIA.

    +

    Note : Si on utilise role="button" plutôt que les éléments sémantiques <button> ou <input type="button">, il faudra : permettre à l'élément de recevoir le focus, définir des gestionnaires d'évènements pour click et keydown, y compris la gestion des touches Entrée et Espace, afin de traiter la saisie de l'utilisateur. Voir l'exemple de code officiel de WAI-ARIA.

    Description

    @@ -248,8 +248,8 @@ function toggleButton(element) {

    Les boutons sont des contrôles interactifs et, à ce titre, peuvent recevoir le focus. Si le rôle button est ajouté à un élément qui ne peut recevoir le focus nativement (comme <span>, <div> ou <p>), l'attribut tabindex devra être utilisé afin de permettre le focus sur le bouton.

    -
    -Attention ! Lorsqu'on utilise des liens avec le rôle button, il faut rajouter un gestionnaire d'évènement pour la touche Espace. En effet, les boutons s'activent avec Espace ou Entrée tandis que, nativement, les liens ne se déclenchent qu'avec Entrée.

    +
    +

    Attention : Lorsqu'on utilise des liens avec le rôle button, il faut rajouter un gestionnaire d'évènement pour la touche Espace. En effet, les boutons s'activent avec Espace ou Entrée tandis que, nativement, les liens ne se déclenchent qu'avec Entrée.

    Lorsqu'on utilise le rôle button, 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 aria-label ou à l'élément référencé avec l'attribut aria-labelledby, ou à une description si elle existe.

    @@ -297,10 +297,5 @@ function toggleButton(element) {
  • Notes sur l'utilisation d'ARIA en HTML
  • Exemple de code officiel WAI-ARIA
  • Rôle ARIA menubutton
  • - - - +
  • Rôles WAI-ARIA{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
  • + \ 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 ---

    Description

    -
    -

    Cette technique présente l’utilisation du rôle checkbox.

    -
    + +

    Cette technique présente l’utilisation du rôle checkbox.

    +

    Le rôle checkbox est utilisé pour des contrôles interactifs à cocher. Si un élément utilise role="checkbox", il est obligatoire pour cet élément d’avoir également un attribut aria-checked qui présente l’état de la case à cocher aux technologies d’assistance. Alors que le contrôle de formulaire HTML natif checkbox ne peut avoir que deux états (« coché » ou « décoché »), un élément avec le rôle role=checkbox peut présenter trois états pour l'attribut aria-checked :

    • aria-checked="true" : la case est cochée ;
    • @@ -31,7 +31,8 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox
    • 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.
    - Note : 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.
    +

    Note : 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.

    +

    Exemples

    Exemple 1 : Ajout du rôle ARIA checkbox

    <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
     

    Exemples concrets :

    Notes

    Attributs ARIA utilisés

    Techniques ARIA connexes

    -

    Compatibilité

    -

    À 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.

    Autres ressources

    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 ---

    Description

    -
    -

    Cette technique présente l’utilisation du rôle dialog (en).

    -
    +

    Cette technique présente l’utilisation du rôle dialog (en).

    Le rôle dialog 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).

    @@ -32,7 +30,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog

    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 aria-labelledby pour l’élément role="dialog". 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 aria-describedby. Cette approche est illustrée dans l’extrait de code ci-dessous :

    -
    <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
    +
    <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
         <h2 id="dialog1Title">Vos informations personnelles ont correctement été actualisées.</h2>
     
         <p id="dialog1Desc">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>
     
    -
    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 dialog 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.
    +
    +

    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 dialog 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.

    +

    Gestion du focus

    @@ -52,7 +52,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog
  • 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.
  • Pour la plupart des boîtes de dialogue, le comportement attendu est que l’ordre de tabulation de la boîte tourne, 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.
  • 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.
  • -
  • Les boîtes de dialogue peuvent être modales ou non modales. Lorsqu’une boîte de dialogue modale 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 non modales 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 Gérer les dialogues modaux et non modaux.
  • +
  • Les boîtes de dialogue peuvent être modales ou non modales. Lorsqu’une boîte de dialogue modale 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 non modales 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 Gérer les dialogues modaux et non modaux.
  • Effets possibles sur les agents utilisateurs et les technologies d’assistance

    @@ -65,13 +65,15 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog

    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.

    -
    Note : 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.
    +
    +

    Note : 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.

    +

    Exemples

    Exemple 1 : une boîte de dialogue contenant un formulaire

    -
    <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
    +
    <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
     
     

    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 dialog à un élément fieldset comme contenu alternatif. Ainsi le titre de la boîte de dialogue sera toujours annoncé correctement :

    -
    <fieldset role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
    +
    <fieldset role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
         <legend>
             <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
     

    Exemples concrets :

    Notes

    -
    Note : 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 application : on s’attend à ce qu’elles soient parcourues avec le mode de navigation non-virtuel par les utilisateurs de lecteur d’écran.
    +
    +

    Note : 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 application : on s’attend à ce qu’elles soient parcourues avec le mode de navigation non-virtuel par les utilisateurs de lecteur d’écran.

    +

    Attributs ARIA utilisés

    Techniques ARIA connexes

    -

    Compatibilité

    - -

    À 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.

    -

    Autres ressources

    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 ---

    Description

    -
    -

    Cette technique présente l’utilisation du rôle listbox et décrit les effets produits sur les navigateurs et les technologies d’assistance.

    -
    +

    Cette technique présente l’utilisation du rôle listbox et décrit les effets produits sur les navigateurs et les technologies d’assistance.

    Le rôle listbox 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 listbox aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.

    -

    Chaque entrée de la boîte liste devrait avoir un rôle d’option 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 Bonnes pratiques ARIA pour obtenir plus de détails sur les propriétés additionnelles qui doivent être définies.

    +

    Chaque entrée de la boîte liste devrait avoir un rôle d’option 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 Bonnes pratiques ARIA pour obtenir plus de détails sur les propriétés additionnelles qui doivent être définies.

    -

    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 Maj+Flèche haut/bas 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, Maj+F10 affichera ce menu. Si les éléments de la liste peuvent être cochés, Espace peut être utilisée pour basculer l’état de la checkboxes. Pour les éléments de liste sélectionnables, Espace bascule l’état de sélection, Maj+Espace peut être utilisé pour sélection des éléments contigus, Ctrl+Flèche déplace le curseur sans sélectionner d’élément, et Ctrl+Espace 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 Ctrl+A peut être utilisé comme raccourci pour cela.

    +

    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 Maj+Flèche haut/bas 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, Maj+F10 affichera ce menu. Si les éléments de la liste peuvent être cochés, Espace peut être utilisée pour basculer l’état de la checkboxes. Pour les éléments de liste sélectionnables, Espace bascule l’état de sélection, Maj+Espace peut être utilisé pour sélection des éléments contigus, Ctrl+Flèche déplace le curseur sans sélectionner d’élément, et Ctrl+Espace 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 Ctrl+A peut être utilisé comme raccourci pour cela.

    Effets possibles sur les agents utilisateurs et les technologies d’assistance

    Lorsque le rôle listbox est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :

      -
    • 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 combobox, présenter l’élément comme un menu ;
    • +
    • 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 combobox, présenter l’élément comme un menu ;
    • 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.
    @@ -36,7 +34,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox
  • Les loupes d’écran devraient agrandir la boîte liste.
  • -
    Note : 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.
    +

    Note : 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.

    Exemples

    @@ -56,7 +54,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox </div>
    -

    Voir l’exemple CodeTalks pour plus de détails.

    +

    Voir l’exemple CodeTalks pour plus de détails.

    Exemples concrets :

    @@ -67,32 +65,28 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox

    Notes

      -
    • Pour être accessible au clavier, les développeurs doivent gérer le focus de chaque descendant de ce rôle.
    • +
    • Pour être accessible au clavier, les développeurs doivent gérer le focus de chaque descendant de ce rôle.
    • 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.
    • -
    • Si la boîte liste ne fait pas partie d’un autre composant, il faut définir sa propriété aria-labelledby.
    • -
    • 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 aria-* supplémentaires (voir Bonnes pratiques ARIA).
    • -
    • S’il existe une bonne raison pour étendre la boîte liste, le rôle combobox peut être plus approprié.
    • +
    • Si la boîte liste ne fait pas partie d’un autre composant, il faut définir sa propriété aria-labelledby.
    • +
    • 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 aria-* supplémentaires (voir Bonnes pratiques ARIA).
    • +
    • S’il existe une bonne raison pour étendre la boîte liste, le rôle combobox peut être plus approprié.

    Attributs ARIA utilisés

    Techniques ARIA connexes

    -

    Compatibilité

    - -

    À 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.

    -

    Autres ressources

    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 --- -

    Le rôle ARIA switch est très similaire au role checkbox, à la sémantique près — il a deux états représentant on/off, au lieu de checked/unchecked.

    +

    Le rôle ARIA switch est très similaire au role checkbox, à la sémantique près — il a deux états représentant on/off, au lieu de checked/unchecked.

    Extrait des spec ARIA 1.1 : l'attribut aria-checked d'un switch indique si l'entrée est on (true) ou off (false). La valeur mixed n'est pas supportée, et les agents utilisateurs DOIVENT la traiter comme équivalente à false pour ce rôle.

    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 ---

    Description

    -
    -

    Cette technique présente l’utilisation du rôle textbox et décrit les effets produits sur les navigateurs et les technologies d’assistance.

    -
    +

    Cette technique présente l’utilisation du rôle textbox et décrit les effets produits sur les navigateurs et les technologies d’assistance.

    Le rôle textbox 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 textbox accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.

    @@ -36,7 +34,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox
  • Les loupes d’écran devraient agrandir la boite de texte.
  • -
    Note : 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.
    +

    Note : 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.

    Exemples

    @@ -69,15 +67,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox

    Attributs ARIA utilisés

    Techniques ARIA connexes

    N/A

    -

    Compatibilité

    - -

    À 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.

    -

    Autres ressources

    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 ---

    Qu’est-ce qu’ARIA ?

    -

    WAI-ARIA est la spécification Applications Internet Riches Accessibles de la Web Accessibility Initiative (Initiative pour l’accessibilité du Web) du W3C. 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.

    +

    WAI-ARIA est la spécification Applications Internet Riches Accessibles de la Web Accessibility Initiative (Initiative pour l’accessibilité du Web) du W3C. 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.

    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.

    -

    Pour plus d’informations sur la création de composants dynamiques accessibles avec ARIA, lire l’article Aperçu d’applications Web et de composants dynamiques accessibles.

    +

    Pour plus d’informations sur la création de composants dynamiques accessibles avec ARIA, lire l’article Aperçu d’applications Web et de composants dynamiques accessibles.

    Où ARIA est-il pris en charge ?

    @@ -38,7 +38,7 @@ original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA Fonctionne avec NVDA, JAWS 10+ et Orca - Chrome + Chrome Dernière Prise en charge encore expérimentale des lecteurs d’écran jusqu’à Chrome 15 @@ -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 - Opera + Opera 9.5+ Requiert VoiceOver sous OS X. À définir : comment cela fonctionne-t-il actuellement ? - Internet Explorer + Internet Explorer 8+ Fonctionne avec JAWS 10+ et NVDA. Pas de prise en charge des zones live dans NVDA.
    La prise en charge dans IE9 est grandement améliorée. @@ -65,8 +65,8 @@ original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA

    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 :

    Technologies d’assistance

    @@ -118,7 +118,7 @@ original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA

    Note : Les versions antérieures de ces outils ont souvent des implémentation d’ARIA partielles et défaillantes.

    -

    For notes on JAWS support for ARIA as of JAWS 10, lire cet article du groupe Paciello : JAWS Support for ARIA.

    +

    For notes on JAWS support for ARIA as of JAWS 10, lire cet article du groupe Paciello : JAWS Support for ARIA.

    Kits de développement JavaScript

    @@ -137,12 +137,12 @@ original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA

    Pour plus d’informations sur l’accessibilité des kits de développement JavaScript :

    Pouvez-vous me montrez un exemple d’ARIA en action ?

    -

    Voici le code HTML pour une barre de progression :

    +

    Voici le code HTML pour une barre de progression :

    <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" />
     
    @@ -151,7 +151,7 @@ original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA

    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 :

    -
    // Trouver le <div> de la barre de progression dans le DOM.
    +
    // 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) {
     
     

    Qu'en est-il de la validation ?

    -

    Les nouveaux attributs introduits dans ARIA, tels que les role et ceux préfixés avec aria-, 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 validateur du W3C.

    +

    Les nouveaux attributs introduits dans ARIA, tels que les role et ceux préfixés avec aria-, 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 validateur du W3C.

    -

    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.

    +

    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.

    Une autre alternative est l’utilisation d’un doctype 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.

    Comment HTML5 s’associe-t-il avec ARIA ?

    -

    HTML5 introduit de nombreuses nouvelles balises sémantiques. Certaines d’entre elles recoupent les rôles ARIA, tel que le nouvelle élément <progress>. 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 aperçu des relations entre HTML5 et ARIA.

    +

    HTML5 introduit de nombreuses nouvelles balises sémantiques. Certaines d’entre elles recoupent les rôles ARIA, tel que le nouvelle élément <progress>. 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 aperçu des relations entre HTML5 et ARIA.

    Dégradation élégante de HTML5 vers ARIA

    @@ -197,7 +197,7 @@ function updateProgress(percentComplete) {

    Voici un exemple de code utilisé pour une barre de progression en HTML5 :

    -
    <!DOCTYPE html>
    +
    <!DOCTYPE html>
     <html>
       <head><title>Dégrader élégamment la barre de progression</title></head>
       <body>
    @@ -209,7 +209,7 @@ function updateProgress(percentComplete) {
     
     

    … et voici le code JavaScript qui assurera le fonctionnement de la barre de progression même dans les navigateurs les plus anciens :

    -
    var progressBar = document.getElementById("progress-bar");
    +
    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();
      
  • Accessibility Inspector sur Mac OS X
  • AccProbe sur Linux
  • Inspecteur DOM de Firebug
  • -
  • L’Inspecteur d’accessibilité de Firebug
  • +
  • L’Inspecteur d’accessibilité de Firebug
  • Il existe plusieurs lecteurs d’écran gratuits voire libre qui peuvent être utilisés pour mener des tests sur ARIA. On trouve :

    Lorsque vous effectuez des tests avec un lecteur d’écran, gardez deux points importants en tête :

    @@ -285,22 +285,22 @@ initDemo();

    Autres techniques et outils de tests pratiques pour les applications et les composants intégrant ARIA :

    Où se tiennent les discussion concernant ARIA ?

    Où peut-on en apprendre davantage à propos d’ARIA ?

    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é --- -

    Ce document fournit des liens vers des listes de diffusions, des forums, et d'autres communautés portées sur l'accessibilité.

    +

    Ce document fournit des liens vers des listes de diffusions, des forums, et d'autres communautés portées sur l'accessibilité.

    Si vous connaissez d'autres, ressources utiles  n'hésitez pas à ajouter un lien ci-dessous.

    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é --- -

    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.

    +

    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.

    « L'accessibilité du web 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. » ( L'accessibilité du Web définie dans Wikipédia)

    -

    « L'accessibilité numérique est la mise à la disposition de tous les individus – 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. » W3C   Accessibility

    +

    « L'accessibilité numérique est la mise à la disposition de tous les individus – 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. » W3C   Accessibility

    -

    Tutoriels clefs

    +

    Tutoriels clefs

    La documentation MDN Accessibilité contient des tutoriaux modernes et à jour en ce qui concerne les points essentiels de l'accessibilité:

    @@ -25,41 +25,41 @@ original_slug: Accessibilité
    HTML: Une bonne base pour l'accessibilité
    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.
    Meilleure pratiques d'accessibilité CSS et JavaScript
    -
    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.
    +
    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.
    Les bases de WAI-ARIA
    -
    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é.
    +
    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é.
    Multimédia accessible
    -
    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.
    +
    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.
    Accessibilité sur mobile
    -
    É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.
    +
    É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.
    -

    Documentation

    +

    Documentation

    -
    Développement web
    +
    Développement web
    Un ensemble d'articles soulignant les problèmes d'accessibilité dans le développement web.
    -
    ARIA
    +
    ARIA
    Un ensemble d'articles pour apprendre à utiliser ARIA pour améliorer l'accessibilité de vos documents HTML.
    -
    Développement de Technologie d'assistance (TA)
    +
    Développement de Technologie d'assistance (TA)
    Un ensemble d'articles destiné aux développeurs de technologies d'assistance.
    Check-list pour l'accessibilité mobile
    Ce document fournit une liste concise des requis accessibilité pour les développeurs d’applications mobiles.
    -

    Outils pour les développeurs web

    +

    Outils pour les développeurs web

    -

    Autres ressources

    +

    Autres ressources

      -
    • Liste des lecteurs d'écran
    • -
    • OpenWeb — Très bon site offrant à la fois un regard expert sur le web et des exemples concrets d'utilisation des normes du W3C.
    • -
    • Opquast.com — Bonnes pratiques qualité pour les services en ligne.
    • -
    • AccessiWeb — Référentiel AccessiWeb pour l'accessibilité.
    • -
    • AcceDe Web — Documents adaptés aux principaux intervenants d’un projet web.
    • +
    • Liste des lecteurs d'écran
    • +
    • OpenWeb — Très bon site offrant à la fois un regard expert sur le web et des exemples concrets d'utilisation des normes du W3C.
    • +
    • Opquast.com — Bonnes pratiques qualité pour les services en ligne.
    • +
    • AccessiWeb — Référentiel AccessiWeb pour l'accessibilité.
    • +
    • AcceDe Web — Documents adaptés aux principaux intervenants d’un projet web.
    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 ---

     

    -

    Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier

    +

    Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier

    Un nombre croissant d'applications Web utilise JavaScript pour imiter des contrôles ( widgets ) 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 <div> et autres <span> 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.

    Prenons un exemple concret : la plupart des menus DHTML 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 <a>). 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.

    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 : ARIA : Applications riches Internet accessibles.

    -

    La solution : modifier le comportement standard de tabindex

    -

    Firefox 1.5 suit l'exemple de Microsoft Internet Explorer en étendant l'attribut tabindex pour permettre à n'importe quel élément d'obtenir ou non le focus. En suivant le système d'IE pour tabindex, il devient possible de permettre aux contrôles DHTML, 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.

    +

    La solution : modifier le comportement standard de tabindex

    +

    Firefox 1.5 suit l'exemple de Microsoft Internet Explorer en étendant l'attribut tabindex pour permettre à n'importe quel élément d'obtenir ou non le focus. En suivant le système d'IE pour tabindex, il devient possible de permettre aux contrôles DHTML, 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.

    Le tableau qui suit décrit le nouveau comportement de tabindex :

    - +
    @@ -54,38 +54,38 @@ original_slug: Contrôles_DHTML_personnalisés_navigables_au_clavier
    Attribut tabindex
    -

    Utilisation du nouveau système

    -

    Pour rendre un contrôle simple navigable avec tabulation, la solution est d'utiliser tabindex="0" sur l'élément <div>> ou <span> le représentant. Vous pouvez consulter un exemple d'une case à cocher basée sur un <span> accessible au clavier tant dans Firefox 1.5 que dans IE (bien que la règle :before pour l'image de la case à cocher ne fonctionne pas dans IE).

    -

    Pour les contrôles de groupe (comme les menus, les panneaux à onglets, grilles ou vues arborescentes) l'élément parent doit avoir tabindex="0", et chaque choix descendant (onglet/cellule/ligne) doit avoir tabindex="-1". Un évènement keydown surveillant les flèches directionnelles peut ensuite utiliser element.focus() 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 vue arborescente DHTML accessible au clavier et aux lecteurs d'écran dans Firefox ( +

    Utilisation du nouveau système

    +

    Pour rendre un contrôle simple navigable avec tabulation, la solution est d'utiliser tabindex="0" sur l'élément <div>> ou <span> le représentant. Vous pouvez consulter un exemple d'une case à cocher basée sur un <span> accessible au clavier tant dans Firefox 1.5 que dans IE (bien que la règle :before pour l'image de la case à cocher ne fonctionne pas dans IE).

    +

    Pour les contrôles de groupe (comme les menus, les panneaux à onglets, grilles ou vues arborescentes) l'élément parent doit avoir tabindex="0", et chaque choix descendant (onglet/cellule/ligne) doit avoir tabindex="-1". Un évènement keydown surveillant les flèches directionnelles peut ensuite utiliser element.focus() 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 vue arborescente DHTML accessible au clavier et aux lecteurs d'écran dans Firefox ( nightlies ). Le travail pour le faire fonctionner dans IE est encore en cours.

    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.

    -

    Astuces d'écriture

    -

    Utilisation d'onfocus pour suivre le focus

    +

    Astuces d'écriture

    +

    Utilisation d'onfocus pour suivre le focus

    Les attributs de gestion d'évènements onfocus et onblur peuvent à présent être utilisés sur tous les éléments. Il n'y a pas d'interface DOM standard pour obtenir l'élément ayant actuellement le focus dans le document, par conséquent il est nécessaire d'utiliser une variable JavaScript pour le suivre.

    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.

    -

    Changement dynamique de la possibilité d'obtenir le focus à l'aide de la propriété tabIndex

    +

    Changement dynamique de la possibilité d'obtenir le focus à l'aide de la propriété tabIndex

    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é.

    -

    Utilisation de setTimeout avec element.focus() pour donner le focus

    +

    Utilisation de setTimeout avec element.focus() pour donner le focus

    N'utilisez pas createEvent(), initEvent() et dispatchEvent() pour donner le focus à un élément, parce que les évènements DOM focus 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 :

    setTimeout("gFocusItem.focus();",0);  // gFocusItem doit être une variable globale
     
    -

    Ne pas utiliser :focus ou des sélecteurs d'attribut pour styler le focus

    +

    Ne pas utiliser :focus ou des sélecteurs d'attribut pour styler le focus

    Il ne sera pas possible d'utiliser :focus 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 onfocus. Par exemple, pour le traitement du focus d'un élément de menu, ajoutez this.style.backgroundColor = "gray";.

    -

    Toujours dessiner le focus pour les éléments avec tabindex="-1" et qui reçoivent le focus par programmation

    +

    Toujours dessiner le focus pour les éléments avec tabindex="-1" et qui reçoivent le focus par programmation

    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 this.style.backgroundColor = "gray"; ou ajoutez une bordure pointillée via this.style.border = "1px dotted invert". 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).

    -

    Utilisation de onkeydown pour les évènements clavier, plutôt que onkeypress

    +

    Utilisation de onkeydown pour les évènements clavier, plutôt que onkeypress

    IE ne déclenchera pas les évènements keypress pour les touches non alphanumériques.

    -

    Empêcher les évènements clavier d'effectuer des fonctions du navigateur

    +

    Empêcher les évènements clavier d'effectuer des fonctions du navigateur

    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 :

    <span tabindex="-1" onkeydown="return handleKeyDown();">
     

    Si handleKeyDown() renvoie false, l'évènement sera consommé, empêchant le navigateur d'effectuer quelque action que ce soit, basée sur la touche pressée.

    -

    Utilisation d'évènements clavier pour permettre l'activation de l'élément

    +

    Utilisation d'évènements clavier pour permettre l'activation de l'élément

    Pour chaque gestionnaire d'évènement lié à la souris, un évènement clavier correspondant est nécessaire. Par exemple, si vous avez onclick="faireQuelqueChose()" vous aurez aussi besoin de onkeydown="return event.keyCode != 13 || faireQuelqueChose();" afin de permettre à la touche Entrée d'activer cet élément.

    -

    Utilisation de try/catch pour éviter les erreurs JavaScript

    -

    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é tabIndex 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 WHATWG).

    -

    Ne pas se baser sur un comportement cohérent de la répétition d'une touche, pour l'instant

    +

    Utilisation de try/catch pour éviter les erreurs JavaScript

    +

    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é tabIndex 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 WHATWG).

    +

    Ne pas se baser sur un comportement cohérent de la répétition d'une touche, pour l'instant

    Malheureusement, onkeydown 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.

    {{ languages( { "en": "en/Key-navigable_custom_DHTML_widgets", "ja": "ja/Key-navigable_custom_DHTML_widgets" } ) }}

    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 --- -

    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).

    +

    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).

    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.

    @@ -18,10 +18,10 @@ translation_of: Web/Accessibility/Understanding_WCAG

    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.

      -
    • Perceptile: Les utilisateurs doivent pouvoir le percevoir d'une manière ou d'une autre, en utilisant un ou plusieurs de leurs sens.
    • -
    • Opérable: 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.).
    • -
    • Compréhensible: Le contenu doit être compréhensible pour ses utilisateurs.
    • -
    • Robuste: Le contenu doit être développé à l'aide de normes Web bien adoptées qui fonctionneront sur différents navigateurs, maintenant et à l'avenir.
    • +
    • Perceptile: Les utilisateurs doivent pouvoir le percevoir d'une manière ou d'une autre, en utilisant un ou plusieurs de leurs sens.
    • +
    • Opérable: 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.).
    • +
    • Compréhensible: Le contenu doit être compréhensible pour ses utilisateurs.
    • +
    • Robuste: Le contenu doit être développé à l'aide de normes Web bien adoptées qui fonctionneront sur différents navigateurs, maintenant et à l'avenir.

    Dois-je utiliser WCAG 2.0 ou 2.1?

    @@ -55,4 +55,4 @@ translation_of: Web/Accessibility/Understanding_WCAG

    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é.

    -

    Qu'est ce que l'accessibilité? et particularité, les directives d'Accessibility et la section sur la loi fournissent des informations complémentaires.

    +

    Qu'est ce que l'accessibilité? et particularité, les directives d'Accessibility et la section sur la loi fournissent des informations complémentaires.

    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_

    Les deux textes ont leur couleur noire par défaut. La "bonne" <div> a un fond violet clair, ce qui rend le texte facile à lire:

    - -

    {{EmbedLiveSample('exemple1', '100%', '100')}}

    +

    {{EmbedLiveSample('Bon_exemple', '100%', '100')}}

    +

    Mauvais exemple

    La "mauvaise" <div>, en revanche, a un fond violet très foncé, ce qui rend le texte beaucoup plus difficile à lire:

    -
    - -

    {{EmbedLiveSample('exemple2', '100%', '100')}}

    +

    {{EmbedLiveSample('Mauvais_exemple', '100%', '100')}}

    -
    -

    Solution

    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 --- -

    This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable 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.

    +

    This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable 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.

    -

    Note: To read the W3C definitions for Perceivable and its guidelines and success criteria, see Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

    +

    Note : To read the W3C definitions for Perceivable and its guidelines and success criteria, see Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

    Guideline 1.1 — Providing text alternatives for non-text content

    @@ -36,28 +36,28 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable 1.1.1 Provide text equivalents  (A) All images that convey meaningful content should be given suitable alternative text. - Text alternatives. + Text alternatives. 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 longdesc attribute. -

    A text description may work, or an accessible data table (see HTML table advanced features and accessibility). Also see Other text alternative mechanisms for the argument against longdesc.

    +

    A text description may work, or an accessible data table (see HTML table advanced features and accessibility). Also see Other text alternative mechanisms for the argument against longdesc.

    Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar). -

    See Text alternatives for static caption options, and Audio transcripts, Video text tracks, and Other multimedia content for other alternatives.

    +

    See Text alternatives for static caption options, and Audio transcripts, Video text tracks, and Other multimedia content for other alternatives.

    UI Controls such as form elements and buttons should have text labels that describe their purpose. - Buttons are simple — you should make sure the button text describes the function of the button (e.g. <button>Upload image</button>). For further information on other UI controls, see UI controls. + Buttons are simple — you should make sure the button text describes the function of the button (e.g. <button>Upload image</button>). For further information on other UI controls, see UI controls. Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users. -

    Decorative images should be implemented using CSS background images (see Backgrounds).  If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (alt=""), otherwise screenreaders may try to read out the filepath, etc.

    +

    Decorative images should be implemented using CSS background images (see Backgrounds).  If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (alt=""), otherwise screenreaders may try to read out the filepath, etc.

    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.

    @@ -66,7 +66,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable

    Guideline 1.2 — Providing text alternatives for time-based media

    @@ -83,17 +83,17 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable 1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A) 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). - See Audio transcripts for transcript information. No audio description tutorial available as yet. + See Audio transcripts for transcript information. No audio description tutorial available as yet. 1.2.2 Provide captions for web-based video (A) 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. - See Video text tracks for HTML5 video captions, and Other multimedia content for other technologies. See also Add your own subtitles & closed captions (YouTube). + See Video text tracks for HTML5 video captions, and Other multimedia content for other technologies. See also Add your own subtitles & closed captions (YouTube). 1.2.3 Provide text transcript or audio description for web-based video (A) 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. - See Audio transcripts for transcript information. No audio description tutorial available as yet. + See Audio transcripts for transcript information. No audio description tutorial available as yet. 1.2.4 Provide captions for live audio (AA) @@ -118,18 +118,18 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable 1.2.8 Provide an alternative for prerecorded media (AAA) 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. - See Audio transcripts for transcript information. + See Audio transcripts for transcript information. 1.2.9 Provide a transcript for live audio (AAA) 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. - See Audio transcripts for transcript information. + See Audio transcripts for transcript information.

    Guideline 1.3 — Create content that can be presented in different ways

    @@ -155,13 +155,13 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable The whole of -

    HTML: A good basis for accessibility is packed with information about this, but you should particularly refer to Good semantics, UI controls, and Text alternatives.

    +

    HTML: A good basis for accessibility is packed with information about this, but you should particularly refer to Good semantics, UI controls, and Text alternatives.

    1.3.2 Meaningful content sequence (A) 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. - Again, refer to HTML: A good basis for accessibility. + Again, refer to HTML: A good basis for accessibility. 1.3.3 Sensory characteristics (A) @@ -175,7 +175,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable
    -

    Note: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.

    +

    Note : Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.

      @@ -205,7 +205,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable

    Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background

    @@ -224,12 +224,12 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable

    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.

    - See Color and color contrast and Multiple labels. + See Color and color contrast and Multiple labels. 1.4.2 Audio controls (A) 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. - Use native <button>s to provide accessible keyboard controls, as shown in Video player syling basics. + Use native <button>s to provide accessible keyboard controls, as shown in Video player syling basics. 1.4.3 Minimum contrast (AA) @@ -241,7 +241,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable
  • 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.
  • - See Color and color contrast. + See Color and color contrast. 1.4.4 Resize text (AA) @@ -263,7 +263,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable
  • 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.
  • - See Color and color contrast. + See Color and color contrast. 1.4.7 Low or no background audio (AAA) @@ -337,7 +337,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable

     

    @@ -349,9 +349,9 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable
    1. Perceivable
    2. -
    3. Operable
    4. -
    5. Understandable
    6. -
    7. Robust
    8. +
    9. Operable
    10. +
    11. Understandable
    12. +
    13. Robust
    -- cgit v1.2.3-54-g00ecf