Comparaison de révisions

Utilisation du rôle dialog

Changer de révision

Révision 611587 :

Révision 611587 par Fredchat le

Révision 628337 :

Révision 628337 par BenoitL le

Titre :
Utiliser le rôle dialog
Utilisation du rôle dialog
Identifiant d'URL :
Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog
Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog
Étiquettes :
"ARIA", "Accessibilité", "Rôle", "Développement Web"
"ARIA", "Accessibilité", "Développement Web", "Rôle"
Contenu :

Révision 611587
Révision 628337
n16      Le rôle <code>dialog</code> est utilisé pour marquer une fen16      Le rôle <code>dialog</code> est utilisé pour marquer une fe
>nêtre ou une boîte de dialogue d’application DHTML qui sépare le >nêtre ou une boîte de dialogue d’application DHTML qui sépare le 
>contenu ou l’UI du reste de l’application web ou de la page. <!-->contenu ou l’UI du reste de l’application web ou de la page. Visu
>Peu clair : <code>dialog</code>role is used to mark up a DHTML ba>ellement, les boîtes de dialogues sont généralement placées par d
>sed application dialog or window that separates content or UI fro>essus le contenu de la page, à l’aide d’un calque (ou « Overlay »
>m the rest of the web application or page-->. Visuellement, les b>). Les boîtes de dialogue peuvent être non-modales (ce qui signif
>oîtes de dialogues sont généralement placées par dessus le conten>ie qu’il est toujours possible d’interagir avec le contenu situé 
>u de la page, à l’aide d’un calque (ou « Overlay »). Les boîtes d>hors de la boîte de dialogue) ou modales (ce qui signifie qu’on n
>e dialogue pour être non-modale (ce qui signifie qu’il est toujou>e peut interagir qu’avec le contenu de la boîte de dialogue).
>rs possible d’interagir avec le contenu situé hors de la boîte de 
> dialogue) ou modale (ce qui signifie qu’on ne peut interagir qu’ 
>avec le contenu de la boîte de dialogue). 
n24      <li>Le focus clavier doit être géré correctementn24      <li>Le focus clavier doit être géré correctement.
n30    <h4 id="Labélisation">n30    <h4 id="Lab.C3.A9lisation">
n34      Bien qu’il ne soit pas obligatoire que la boîte de dialoguen34      Bien qu’il ne soit pas obligatoire que la boîte de dialogue
> elle-même reçoive le focus, elle doit quand même besoin d’être l> elle-même reçoive le focus, elle doit quand même besoin d’être l
>abélisée. Le label donné à la boîte de dialogue fournira des info>abélisée. Le label donné à la boîte de dialogue fournira des info
>rmations contextuelles pour les contrôles interactifs qu’elle con>rmations contextuelles pour les contrôles interactifs qu’elle con
>tient. En d’autres termes, le label de la boîte de dialogue agit >tient. En d’autres termes, le label de la boîte de dialogue agit 
>comme label de regroupement qu’elle contient. Cela est similaire >comme label de regroupement pour les contrôles qu’elle contient. 
>à la façon dont un un élément <code>&lt;legend&gt;</code> fournit>On peut comparer cela à la façon dont un un élément <code>&lt;leg
> un label de regroupement pour les contrôles contenus dans un élé>end&gt;</code> fournit un label de regroupement pour les contrôle
>ment <code>&lt;fieldset&gt;</code>).>s contenus dans un élément <code>&lt;fieldset&gt;</code>.
n37      Si une boîte de dialogue a une barre de titre visible, le tn37      Si une boîte de dialogue a une barre de titre visible, le t
>exte de cette barre peut être utiliser comme label pour la boîte >exte de cette barre peut être utilisé comme label pour la boîte e
>elle-même. La meilleure façon de faire cela est d’utiliser l’attr>lle-même. La meilleure façon de le faire est d’utiliser l’attribu
>ibut <code>aria-labelledby</code> pour l’élément <code>role="dial>t <code>aria-labelledby</code> pour l’élément <code>role="dialog"
>og"</code>. De plus, si la boîte de dialogue contient une descrip></code>. De plus, si la boîte de dialogue contient une descriptio
>tion supplémentaire, en plus du titre de la boîte, le texte de la>n supplémentaire, en plus du titre de la boîte, le texte de la de
> description peut être associé avec la boîte de dialogue à l’aide>scription peut être associé avec la boîte de dialogue à l’aide de
> de l’attribut <code>aria-describedby</code>. Cette approche est > l’attribut <code>aria-describedby</code>. Cette approche est ill
>illustrée dans l’extrait de code ci-dessous&nbsp;:>ustrée dans l’extrait de code ci-dessous&nbsp;:
n49      Gardez en tête que le titre d’une boîte de dialogue et sa dn49      Gardez en tête que le titre d’une boîte de dialogue et sa d
>escription ne doivent pas être focalisables afin de toujours être>escription ne doivent pas être focalisables afin de toujours être
> perçus par les lecteurs d’écran opérant en mode non-virtuel. La > perçus par les lecteurs d’écran opérant en mode non-virtuel. La 
>combinaison du rôle ARIA <code>dialog</code> et des techniques de>combinaison du rôle ARIA <code>dialog</code> et des techniques de
> labélisation devrait permettre aux lecteurs d’écran d’annonce le> labélisation devrait permettre aux lecteurs d’écran d’annoncer l
>s informations de la boîte de dialogue lorsque le focus arrive su>es informations de la boîte de dialogue lorsque le focus arrive s
>r cette dernière.>ur cette dernière.
n55      Une boîte de dialogue a des exigences particulières concernn55      Une boîte de dialogue a des exigences particulières concern
>ant la façon dont le focus clavier doit être gérer&nbsp;:>ant la façon dont le focus clavier doit être géré :
n58      <li>Les boîtes de dialogue doivent avoir au moins un contrôn58      <li>Les boîtes de dialogue doivent avoir au moins un contrô
>le focalisable. Pour de nombreuses boîtes de dialogues, ce contrô>le focalisable. Pour de nombreuses boîtes de dialogues, ce contrô
>le sera un bouton «&nbsp;Fermer&nbsp;», «&nbsp;OK&nbsp;» ou «&nbs>le sera un bouton «&nbsp;Fermer&nbsp;», «&nbsp;OK&nbsp;» ou «&nbs
>p;Annuler.&nbsp;» En plus de cela, les boîtes de dialogues peuven>p;Annuler.&nbsp;» En plus de cela, les boîtes de dialogue peuvent
>t contenir n’importe quelle quantité d’éléments focalisables, com> contenir n’importe quelle quantité d’éléments focalisables, même
>me des formulaires, ou encore des composants conteneurs comme des> des formulaires ou d'autres composants conteneurs comme des ongl
> onglets.>ets.
n62      <li>Pour la plupart des boîte de dialogue, le comportement n62      <li>Pour la plupart des boîtes de dialogue, le comportement
>attendu est que l’ordre de tabulation de la boîte <em>tourne</em>> attendu est que l’ordre de tabulation de la boîte <em>tourne</em
>, c’est-à-dire que le premier élément focalisable sera focalisé a>>, c’est-à-dire que le premier élément focalisable sera focalisé 
>près que le dernier élément focalisable de la boîte de dialogue a>après que le dernier élément focalisable de la boîte de dialogue 
>ura été atteint lorsque l’utilisateur tabule. En d’autres termes,>aura été atteint lorsque l’utilisateur tabule. En d’autres termes
> l’ordre de tabulation doit être contenu par la boîte de dialogue>, l’ordre de tabulation doit être contenu par la boîte de dialogu
>.>e.
n66      <li>Les boîtes de dialogue peuvent être modales ou non modan66      <li>Les boîtes de dialogue peuvent être modales ou non moda
>les. Lorsqu’une boîte de dialogue <em>modale</em> s’affiche à l’é>les. Lorsqu’une boîte de dialogue <em>modale</em> s’affiche à l’é
>cran, il n’est pas possible d’interagir avec le contenu des autre>cran, il n’est pas possible d’interagir avec le reste du contenu 
>s fenêtres. En d’autres termes, l’UI principale de l’application >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ésac>ou le contenu de la page est considéré comme temporairement désac
>tivé tant que la boîte de dialogue modale est affichée. Pour les >tivé tant que la boîte de dialogue modale est affichée. Pour les 
>boîtes de dialogue <em>non modales</em> il est toujours possible >boîtes de dialogue <em>non modales</em> il est toujours possible 
>d’interagir avec du contenu extérieur à la boîte lorsqu’elle est >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 tou>affichée. Pour les boîtes de dialogue non modales, il y devra tou
>jours y avoir un raccourci clavier global permettant de déplacer >jours y avoir un raccourci clavier global permettant de déplacer 
>le focus entre les boîtes de dialogue ouvertes et la page princip>le focus entre les boîtes de dialogue ouvertes et la page princip
>ale. Pour plus d’informations, lisez le guide <a href="/fr/docs/A>ale. Pour plus d’informations, lisez le guide <a href="/fr/docs/A
>RIA/Guides_ARIA/G%C3%A9rer_les_dialogues_modaux_et_non_modaux" ti>RIA/Guides_ARIA/G%C3%A9rer_les_dialogues_modaux_et_non_modaux" ti
>tle="/en-US/docs/ARIA/Guides_ARIA/Managing_Modal_and_Non_Modal_Di>tle="/en-US/docs/ARIA/Guides_ARIA/Managing_Modal_and_Non_Modal_Di
>alogs">Gérer les dialogues modaux et non modaux</a>.>alogs">Gérer les dialogues modaux et non modaux</a>.
n69    <h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_tn69    <h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_t
>echnologies_d_assistance">>echnologies_d.E2.80.99assistance">
n73      Lorsque le rôle <code>dialog</code>est utilisé, l’agent utin73      Lorsque le rôle <code>dialog</code> est utilisé, l’agent ut
>lisateur doit faire la chose suivante&nbsp;:>ilisateur doit faire la chose suivante&nbsp;:
n83      <strong>Note&nbsp;:</strong> ils existent plusieurs points n83      <strong>Note&nbsp;:</strong> plusieurs points de vue existe
>de vue sur la façon dont les technologies d’assistance devraient >nt sur la façon dont les technologies d’assistance devraient trai
>traiter cette technique. L’information fourni ci-dessus est l’une>ter cette technique. L’information fournie ci-dessus est l’une de
> de ces opinions et n’est pas normative.> ces opinions et n’est pas normative.
n88    <h4 id="Exemple_1.3A_A_dialog_containing_a_form">n88    <h4 id="Exemple_1.C2.A0.3A_une_bo.C3.AEte_de_dialogue_contena
 >nt_un_formulaire">
n124    <h4 id="Exemple_2.3A_A_dialog_based_on_a_Fieldset_as_fallbackn124    <h4 id="Exemple_2.C2.A0.3A_une_bo.C3.AEte_de_dialogue.2C_bas.
>_content">>C3.A9e_sur_un_Fieldset.2C_comme_contenu_alternatif">
125      Exemple 2&nbsp;: une boîte de dialogue, basée sur un <code>125      Exemple 2&nbsp;: une boîte de dialogue basée sur un <code>F
>Fieldset</code>, comme contenu alternatif>ieldset</code> comme contenu alternatif
n128      Pour prendre en charge les navigateurs ou les produits de tn128      Pour prendre en charge les navigateurs ou les produits de t
>echnologies d’assistance qui n’implémentent pas ARIA, il est égal>echnologies d’assistance qui ne prennent pas ARIA en charge, il e
>ement possible d’appliquer le balisage <code>dialog</code> à un é>st également possible d’appliquer le balisage <code>dialog</code>
>lément <code>fieldset</code> comme contenu alternatif. Ainsi le t> à un élément <code>fieldset</code> comme contenu alternatif. Ain
>itre de la boîte de dialogue sera toujours annoncé correctement&n>si le titre de la boîte de dialogue sera toujours annoncé correct
>bsp;:>ement&nbsp;:
n140    <h4 id="Exemples_concrets">n140    <h4 id="Exemples_concrets.C2.A0.3A">
n152      <strong>Note&nbsp;:</strong> alors qu’il est possible d’empn152      <strong>Note&nbsp;:</strong> bien qu'il soit possible d’emp
>êcher les utilisateurs de clavier de bouger le focus vers des élé>êcher les utilisateurs de clavier de bouger le focus vers des élé
>ments en dehors des boîtes de dialogues, les utilisateurs de lect>ments en dehors des boîtes de dialogues, les utilisateurs de lect
>eurs d’écran ont toujours la possibilité de parcourir ce contenu >eurs d’écran ont toujours la possibilité de parcourir ce contenu 
>pratiquement en utilisant le curseur virtuel du lecteur d’écran. >pratiquement en utilisant le curseur virtuel du lecteur d’écran. 
>À cause de cela, les boîtes de dialogues sont considérées comme d>À cause de cela, les boîtes de dialogue sont considérées comme de
>es cas spéciaux du rôle <code>application</code>&nbsp;: on s’atte>s cas spéciaux du rôle <code>application</code>&nbsp;: on s’atten
>nd à ce qu’elles soient parcourues avec le mode de navigation non>d à ce qu’elles soient parcourues avec le mode de navigation non-
>-virtuel par les utilisateurs de lecteur d’écran.>virtuel par les utilisateurs de lecteur d’écran.
n154    <h3 id="Attributs_ARIA_utilisés">n154    <h3 id="Attributs_ARIA_utilis.C3.A9s">
n168    <h3 id="Related_ARIA_techniques.C2.A0">n168    <h3 id="Techniques_ARIA_connexes">
t176    <h3 id="Compatibilité">t176    <h3 id="Compatibilit.C3.A9">

Retour à l'historique