From 3275519789f1cbd602dd8c128092a7a07f795691 Mon Sep 17 00:00:00 2001 From: MDN Date: Wed, 22 Dec 2021 00:54:05 +0000 Subject: [CRON] sync translated content --- files/es/_redirects.txt | 1 + files/es/_wikihistory.json | 14 +-- .../using_the_alert_role/index.html | 131 ------------------- .../accessibility/aria/roles/alert_role/index.html | 132 +++++++++++++++++++ files/fr/_redirects.txt | 3 +- files/fr/_wikihistory.json | 16 +-- .../aria_techniques/using_the_alert_role/index.md | 118 ----------------- .../accessibility/aria/roles/alert_role/index.md | 118 +++++++++++++++++ files/ja/_redirects.txt | 1 + files/ja/_wikihistory.json | 12 +- .../accessibility/aria/roles/alert_role/index.html | 139 +++++++++++++++++++++ .../using_the_alert_role/index.html | 138 -------------------- files/pt-br/_redirects.txt | 3 +- files/pt-br/_wikihistory.json | 14 +-- .../using_the_alert_role/index.html | 139 --------------------- .../accessibility/aria/roles/alert_role/index.html | 139 +++++++++++++++++++++ 16 files changed, 562 insertions(+), 556 deletions(-) delete mode 100644 files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html create mode 100644 files/es/web/accessibility/aria/roles/alert_role/index.html delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.md create mode 100644 files/fr/web/accessibility/aria/roles/alert_role/index.md create mode 100644 files/ja/conflicting/web/accessibility/aria/roles/alert_role/index.html delete mode 100644 files/ja/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html delete mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html create mode 100644 files/pt-br/web/accessibility/aria/roles/alert_role/index.html diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index d19e28e12d..2c0faa8c5e 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1612,6 +1612,7 @@ /es/docs/Web/Accesibilidad/Understanding_WCAG/Teclado /es/docs/Web/Accessibility/Understanding_WCAG/Keyboard /es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_atributo_aria-required /es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute /es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_rol_alertdialog /es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role +/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role /es/docs/Web/Accessibility/ARIA/Roles/alert_role /es/docs/Web/Accessibility/ARIA/forms/Etiquetas_complejas /es/docs/Web/Accessibility/ARIA/forms/Multipart_labels /es/docs/Web/Accessibility/ARIA/forms/alertas /es/docs/Web/Accessibility/ARIA/forms/alerts /es/docs/Web/Accessibility/ARIA/forms/consejos_basicos_para_formularios /es/docs/Web/Accessibility/ARIA/forms/Basic_form_hints diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index a7087ecadf..dc0fdd2b06 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -9358,13 +9358,6 @@ "chrisdavidmills" ] }, - "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role": { - "modified": "2019-03-18T21:31:32.978Z", - "contributors": [ - "IsraelFloresDGA", - "mayrars" - ] - }, "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role": { "modified": "2019-08-28T12:48:39.532Z", "contributors": [ @@ -9389,6 +9382,13 @@ "Karla_Glez" ] }, + "Web/Accessibility/ARIA/Roles/alert_role": { + "modified": "2019-03-18T21:31:32.978Z", + "contributors": [ + "IsraelFloresDGA", + "mayrars" + ] + }, "Web/Accessibility/ARIA/forms": { "modified": "2020-08-13T01:50:29.740Z", "contributors": [ diff --git a/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html deleted file mode 100644 index 77f3aa804a..0000000000 --- a/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Using the alert role -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role -tags: - - ARIA - - Accesibilidad - - CSS - - HTML - - alert - - alerta - - rol de alerta - - tecnología asistencial -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role ---- -

Descripción

- -
-

Esta técnica demuestra como usar el rol alert y describe el efecto que tiene en los navegadores y tecnologías de asistencia.

-
- -

El rol de alerta es utilizado para comunicar un mensaje importante y normalmente urgente para el usuario. Cuando este rol es añadido a un elemento, el navegador envía un evento de alerta accesible a los productos de tecnología asistencial que notificarán al usuario sobre ésta. El rol de alerta es más útil para información que requiere la atención inmediata del usuario, por ejemplo:

- - - -

Debido a su naturaleza intrusiva, el rol de alerta debe ser utilizada de forma limitada y sólo en situaciones donde la inmediata atención del usuario es requerida. Cambios dinámicos que son menos urgentes deberían usar un método menos agresivo, como, aria-live="polite"  u otros roles de región en vivo.

- -

Posibles efectos en agentes de usuario y tecnología asistencial

- -

Cuando el rol de alerta es añadido a un elemento, o dicho elemento se vuelve visible, el agente de usuario debe hacer lo siguiente:

- - - -

Productos de tecnología asistencial deben escuchar por dicho evento y notificar al usuario consecuentemente:

- - - -
Nota: Opiniones pueden diferir en como tecnologías de asistencia deben manejar esta técnica. La información proveida anteriormente es una de estas opiniones y por lo tanto no es normativa.
- -

Ejemplos

- -

Ejemplo 1: Agregar el role en el código HTML

- -

The snippet below shows how the alert role is added directly into the html source code. The moment the element finishes loading the screen reader should be notified of the alert. If the element was already in the original source code when the page loaded, the screen reader will announce the error immediately after announcing the page title.

- -
<h2 role="alert">Your form could not be submitted because of 3 validation errors.</h2>
- -

Ejemplo 2: Dinámicamente añadir un elemento con el rol de alerta

- -

This snippet dynamically creates an element with an alert role and adds it to the document structure.

- -
var myAlert = document.createElement("p");
-myAlert.setAttribute("role", "alert");
-var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.");
-myAlert.appendChild(myAlertText);
-document.body.appendChild(myAlert);
-
- -

Note: The same result can be achieved with less code when using a script library like jQuery:

- -
$("<p role='alert'>You must agree with our terms of service to create an account.</p>").appendTo(document.body);
-
- -

Ejemplo 3: Añadir un rol de alerta a un elemento ya existente

- -

Sometimes it's useful to add an alert role to an element that is already visible on the page rather than creating a new element. This allows the developer to reiterate information that has become more relevant or urgent to the user. For example, a form control may have instruction about the expected value. If a different value is entered, role="alert can be added to the instruction text so that the screen reader announces it as an alert. The pseudo code snippet below illustrates this approach:

- -
<p id="formInstruction">You must select at least 3 options</p>
-
- -
// When the user tries to submit the form with less than 3 checkboxes selected:
-document.getElementById("formInstruction").setAttribute("role", "alert");
- -

Ejemplo 4: Hacer un elemento con un rol de alerta visible

- -

If an element already has role="alert" and is initially hidden using CSS, making it visible will cause the alert to fire as if it was just added to the page. This means that an existing alert can be "reused" multiple times. 

- -

Note: In most cases this approach is not recommended, because it's not ideal to hide error or alert text that is currently not applicable. Users of older assistive technology may still be able to perceive the alert text even when the alert does not currently applies, causing users to incorrectly believe that there is a problem.

- -
.hidden {
-  display:none;
-}
-
- -
<p id="expirationWarning" role="alert" class="hidden">Your log in session will expire in 2 minutes</p>
-
- -
// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:
-document.getElementById("expirationWarning").className = "";
- -

Notas 

- - - -

Atributos ARIA utilizados

- - - -

Técnicas ARIA relacionadas

- - - -

Compatibilidad

- -

Pendiente. Add support information for common UA and AT product combinations

- -

Recursos adicionales

- - - -

 

diff --git a/files/es/web/accessibility/aria/roles/alert_role/index.html b/files/es/web/accessibility/aria/roles/alert_role/index.html new file mode 100644 index 0000000000..411171e4e0 --- /dev/null +++ b/files/es/web/accessibility/aria/roles/alert_role/index.html @@ -0,0 +1,132 @@ +--- +title: Using the alert role +slug: Web/Accessibility/ARIA/Roles/alert_role +tags: + - ARIA + - Accesibilidad + - CSS + - HTML + - alert + - alerta + - rol de alerta + - tecnología asistencial +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +--- +

Descripción

+ +
+

Esta técnica demuestra como usar el rol alert y describe el efecto que tiene en los navegadores y tecnologías de asistencia.

+
+ +

El rol de alerta es utilizado para comunicar un mensaje importante y normalmente urgente para el usuario. Cuando este rol es añadido a un elemento, el navegador envía un evento de alerta accesible a los productos de tecnología asistencial que notificarán al usuario sobre ésta. El rol de alerta es más útil para información que requiere la atención inmediata del usuario, por ejemplo:

+ + + +

Debido a su naturaleza intrusiva, el rol de alerta debe ser utilizada de forma limitada y sólo en situaciones donde la inmediata atención del usuario es requerida. Cambios dinámicos que son menos urgentes deberían usar un método menos agresivo, como, aria-live="polite"  u otros roles de región en vivo.

+ +

Posibles efectos en agentes de usuario y tecnología asistencial

+ +

Cuando el rol de alerta es añadido a un elemento, o dicho elemento se vuelve visible, el agente de usuario debe hacer lo siguiente:

+ + + +

Productos de tecnología asistencial deben escuchar por dicho evento y notificar al usuario consecuentemente:

+ + + +
Nota: Opiniones pueden diferir en como tecnologías de asistencia deben manejar esta técnica. La información proveida anteriormente es una de estas opiniones y por lo tanto no es normativa.
+ +

Ejemplos

+ +

Ejemplo 1: Agregar el role en el código HTML

+ +

The snippet below shows how the alert role is added directly into the html source code. The moment the element finishes loading the screen reader should be notified of the alert. If the element was already in the original source code when the page loaded, the screen reader will announce the error immediately after announcing the page title.

+ +
<h2 role="alert">Your form could not be submitted because of 3 validation errors.</h2>
+ +

Ejemplo 2: Dinámicamente añadir un elemento con el rol de alerta

+ +

This snippet dynamically creates an element with an alert role and adds it to the document structure.

+ +
var myAlert = document.createElement("p");
+myAlert.setAttribute("role", "alert");
+var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.");
+myAlert.appendChild(myAlertText);
+document.body.appendChild(myAlert);
+
+ +

Note: The same result can be achieved with less code when using a script library like jQuery:

+ +
$("<p role='alert'>You must agree with our terms of service to create an account.</p>").appendTo(document.body);
+
+ +

Ejemplo 3: Añadir un rol de alerta a un elemento ya existente

+ +

Sometimes it's useful to add an alert role to an element that is already visible on the page rather than creating a new element. This allows the developer to reiterate information that has become more relevant or urgent to the user. For example, a form control may have instruction about the expected value. If a different value is entered, role="alert can be added to the instruction text so that the screen reader announces it as an alert. The pseudo code snippet below illustrates this approach:

+ +
<p id="formInstruction">You must select at least 3 options</p>
+
+ +
// When the user tries to submit the form with less than 3 checkboxes selected:
+document.getElementById("formInstruction").setAttribute("role", "alert");
+ +

Ejemplo 4: Hacer un elemento con un rol de alerta visible

+ +

If an element already has role="alert" and is initially hidden using CSS, making it visible will cause the alert to fire as if it was just added to the page. This means that an existing alert can be "reused" multiple times. 

+ +

Note: In most cases this approach is not recommended, because it's not ideal to hide error or alert text that is currently not applicable. Users of older assistive technology may still be able to perceive the alert text even when the alert does not currently applies, causing users to incorrectly believe that there is a problem.

+ +
.hidden {
+  display:none;
+}
+
+ +
<p id="expirationWarning" role="alert" class="hidden">Your log in session will expire in 2 minutes</p>
+
+ +
// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:
+document.getElementById("expirationWarning").className = "";
+ +

Notas 

+ + + +

Atributos ARIA utilizados

+ + + +

Técnicas ARIA relacionadas

+ + + +

Compatibilidad

+ +

Pendiente. Add support information for common UA and AT product combinations

+ +

Recursos adicionales

+ + + +

 

diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index 92dcc5b46c..0cf8f71606 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -46,7 +46,7 @@ /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_rôle_alert /fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert /fr/docs/Web/Accessibility/ARIA/Roles/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 /fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog /fr/docs/Web/Accessibility/ARIA/Roles/dialog_role @@ -3841,6 +3841,7 @@ /fr/docs/Web/API/notification/Using_Web_Notifications /fr/docs/Web/API/Notifications_API/Using_the_Notifications_API /fr/docs/Web/API/window.location /fr/docs/Web/API/window/location /fr/docs/Web/API/window.requestAnimationFrame /fr/docs/Web/API/Window/requestAnimationFrame +/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role /fr/docs/Web/Accessibility/ARIA/Roles/alert_role /fr/docs/Web/Accessibility/ARIA/widgets/overview /fr/docs/conflicting/Web/Accessibility/ARIA/widgets /fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_couleur /fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast /fr/docs/Web/Apps/Build/Audio_and_video_delivery /fr/docs/Web/Guide/Audio_and_video_delivery diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index ddff6a86f4..dc827e6af3 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -22164,14 +22164,6 @@ "Fredchat" ] }, - "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role": { - "modified": "2019-03-23T23:16:30.067Z", - "contributors": [ - "hmore", - "BenoitL", - "Fredchat" - ] - }, "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role": { "modified": "2019-03-23T23:14:00.888Z", "contributors": [ @@ -22354,6 +22346,14 @@ "paul.bignier" ] }, + "Web/Accessibility/ARIA/Roles/alert_role": { + "modified": "2019-03-23T23:16:30.067Z", + "contributors": [ + "hmore", + "BenoitL", + "Fredchat" + ] + }, "Web/Accessibility/ARIA/Roles/button_role": { "modified": "2019-03-23T23:16:24.067Z", "contributors": [ diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.md deleted file mode 100644 index f1858e0e89..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Utilisation du rôle alert -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role -tags: - - ARIA - - Accessibilité - - Rôle - - À relire -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert ---- -### Description - -Cette technique présente l’utilisation du rôle [`alert` (en)](http://www.w3.org/TR/wai-aria/roles#alert) 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 : - -- Une valeur non valide a été saisie dans un champ de formulaire ; -- La session d’un utilisateur est sur le point d’expirer ; -- La connexion au serveur a été interrompue, les modifications locales ne seront pas sauvegardées. - -De fait de sa nature intrusive, le rôle `alert` doit être utilisé avec parcimonie et uniquement dans les situations où l’attention de l’utilisateur est immédiatement requise. Les changements dynamiques de moindre urgence devraient utiliser une méthode moins agressive, telle que `aria-live="polite"` ou autres rôles de zone live. - -### Effets possibles sur les agents utilisateurs et les technologies d’assistance - -Lorsque le rôle `alert` 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 ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation ; -- Déclencher un événement d'alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. - -Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence : - -- Les lecteurs d’écran peuvent interrompre la sortie en cours (qu’elle soit vocale ou en braille) et immédiatement annoncer ou afficher le message d’alerte ; -- 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. - -### Exemples - -#### Exemple 1 : Ajout du rôle dans le code HTML - -L’extrait de code ci-dessous montre comment le rôle `alert` est directement ajouté dans le code source HTML. Au moment où l’élément finit de se charger, le lecteur d’écran doit être notifié de l’alerte. Si l’élément était dans le code source original lorsque la page s’est chargée, le lecteur d’écran annonce immédiatement l’erreur après la lecture du titre de la page. - -```html -

Votre formulaire ne peut être soumis à cause de 3 erreurs de validation.

-``` - -#### Exemple 2 : Ajout dynamique d'un élément avec le rôle `alert` - -Cet extrait de code crée dynamiquement un élément avec un rôle `alert` et l’ajoute à la structure du document. - -```js -var myAlert = document.createElement("p"); -myAlert.setAttribute("role", "alert"); - -var myAlertText = document.createTextNode("Vous devez accepter nos conditions d’utilisation pour créer un compte."); -myAlert.appendChild(myAlertText); -document.body.appendChild(myAlertText); -``` - -**Note :** le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que *jQuery* : - -```js -$("

Vous devez accepter nos conditions d’utilisation pour créer un compte.

").appendTo(document.body); -``` - -#### Exemple 3 : Ajout d'un rôle `alert` à un élément existant - -Parfois, il peut être utile d’ajouter un rôle `alert` à un élément déjà visible dans la page plutôt que de créer un nouvel élément. Ceci permet au développeur de répéter une information devenue plus pertinente ou urgente pour l’utilisateur. Par exemple, un contrôle de formulaire peut avoir des instructions sur les valeurs attendues. Si une valeur différente est saisie, `role="alert"` peut être ajouté au texte de l’instruction pour que le lecteur d’écran l’annonce comme une alerte. L'extrait de pseudo-code ci-dessous illustre cette approche : - -```html -

Vous devez cocher au moins trois options

-``` - -```js -// Lorsque l’utilisateur essaye de soumettre le formulaire avec moins de 3 cases cochées : -document.getElementById("formInstruction").setAttribute("role", "alert"); -``` - -#### Exemple 4 : Rendre visible un élément avec le rôle `alert` - -Si un élément possède déjà `role="alert"` et qu’il est initialement caché par des règles CSS, le rendre visible déclenchera l’alerte comme si elle venait juste d’être ajoutée à la page. Cela signifie qu’une alerte existante peut être « réutilisée » plusieurs fois. - -**Note :** dans la plupart des cas cette approche n’est pas recommandée, parce qu'il n'est pas idéal de masquer une erreur ou un texte d’alerte qui n’est pas applicable à ce moment précis. Les utilisateurs de technologies d’assistance plus anciennes pourraient toujours percevoir le texte d’alerte même si l’alerte ne s’applique pas à ce moment, faisant croire de façon erronée aux utilisateurs à l’existence d’un problème. - -```css -.hidden { -  display:none; -  } -``` - -```html - -``` - -```js -// suppression de la classe 'hidden' rend l’élément visible, ce qui entraînera l’annonce de l’alerte par le lecteur d’écran : -document.getElementById("expirationWarning").className = ""; -``` - -### Notes  - -- L’utilisation du rôle `alert` sur un élément implique que cet élément a l’attribut `aria-live="assertive"` ; -- Le rôle `alert` ne devrait être utilisé que pour du contenu texte statique. L’élément sur lequel on utilise le rôle `alert` ne devrait pas pouvoir recevoir le focus, car les lecteurs d’écran annonceront automatiquement l’alerte où que se trouve le focus clavier ; -- Si une alerte fournit également des contrôles interactifs – tels que des contrôles de formulaire qui permettraient à l’utilisateur de rectifier une erreur, ou un bouton `OK` pour annuler l’alerte – le rôle [`alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) est préférable. - -### Attributs ARIA utilisés - -- [alert (en)](http://www.w3.org/TR/wai-aria/roles#alert) - -### Techniques ARIA connexes - -- [Utiliser le rôle `alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) ; -- [Utiliser la propriété `aria-invalid`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_la_propriété_aria-invalid). - -### Autres ressources - -- Guide des bonnes pratiques ARIA - Rôle `Alert` : [http://www.w3.org/TR/wai-aria-practices/#alert (en)](http://www.w3.org/TR/wai-aria-practices/#alert) diff --git a/files/fr/web/accessibility/aria/roles/alert_role/index.md b/files/fr/web/accessibility/aria/roles/alert_role/index.md new file mode 100644 index 0000000000..1db355caec --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/alert_role/index.md @@ -0,0 +1,118 @@ +--- +title: Utilisation du rôle alert +slug: Web/Accessibility/ARIA/Roles/alert_role +tags: + - ARIA + - Accessibilité + - Rôle + - À relire +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +--- +### Description + +Cette technique présente l’utilisation du rôle [`alert` (en)](http://www.w3.org/TR/wai-aria/roles#alert) 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 : + +- Une valeur non valide a été saisie dans un champ de formulaire ; +- La session d’un utilisateur est sur le point d’expirer ; +- La connexion au serveur a été interrompue, les modifications locales ne seront pas sauvegardées. + +De fait de sa nature intrusive, le rôle `alert` doit être utilisé avec parcimonie et uniquement dans les situations où l’attention de l’utilisateur est immédiatement requise. Les changements dynamiques de moindre urgence devraient utiliser une méthode moins agressive, telle que `aria-live="polite"` ou autres rôles de zone live. + +### Effets possibles sur les agents utilisateurs et les technologies d’assistance + +Lorsque le rôle `alert` 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 ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation ; +- Déclencher un événement d'alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. + +Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence : + +- Les lecteurs d’écran peuvent interrompre la sortie en cours (qu’elle soit vocale ou en braille) et immédiatement annoncer ou afficher le message d’alerte ; +- 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. + +### Exemples + +#### Exemple 1 : Ajout du rôle dans le code HTML + +L’extrait de code ci-dessous montre comment le rôle `alert` est directement ajouté dans le code source HTML. Au moment où l’élément finit de se charger, le lecteur d’écran doit être notifié de l’alerte. Si l’élément était dans le code source original lorsque la page s’est chargée, le lecteur d’écran annonce immédiatement l’erreur après la lecture du titre de la page. + +```html +

Votre formulaire ne peut être soumis à cause de 3 erreurs de validation.

+``` + +#### Exemple 2 : Ajout dynamique d'un élément avec le rôle `alert` + +Cet extrait de code crée dynamiquement un élément avec un rôle `alert` et l’ajoute à la structure du document. + +```js +var myAlert = document.createElement("p"); +myAlert.setAttribute("role", "alert"); + +var myAlertText = document.createTextNode("Vous devez accepter nos conditions d’utilisation pour créer un compte."); +myAlert.appendChild(myAlertText); +document.body.appendChild(myAlertText); +``` + +**Note :** le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que *jQuery* : + +```js +$("

Vous devez accepter nos conditions d’utilisation pour créer un compte.

").appendTo(document.body); +``` + +#### Exemple 3 : Ajout d'un rôle `alert` à un élément existant + +Parfois, il peut être utile d’ajouter un rôle `alert` à un élément déjà visible dans la page plutôt que de créer un nouvel élément. Ceci permet au développeur de répéter une information devenue plus pertinente ou urgente pour l’utilisateur. Par exemple, un contrôle de formulaire peut avoir des instructions sur les valeurs attendues. Si une valeur différente est saisie, `role="alert"` peut être ajouté au texte de l’instruction pour que le lecteur d’écran l’annonce comme une alerte. L'extrait de pseudo-code ci-dessous illustre cette approche : + +```html +

Vous devez cocher au moins trois options

+``` + +```js +// Lorsque l’utilisateur essaye de soumettre le formulaire avec moins de 3 cases cochées : +document.getElementById("formInstruction").setAttribute("role", "alert"); +``` + +#### Exemple 4 : Rendre visible un élément avec le rôle `alert` + +Si un élément possède déjà `role="alert"` et qu’il est initialement caché par des règles CSS, le rendre visible déclenchera l’alerte comme si elle venait juste d’être ajoutée à la page. Cela signifie qu’une alerte existante peut être « réutilisée » plusieurs fois. + +**Note :** dans la plupart des cas cette approche n’est pas recommandée, parce qu'il n'est pas idéal de masquer une erreur ou un texte d’alerte qui n’est pas applicable à ce moment précis. Les utilisateurs de technologies d’assistance plus anciennes pourraient toujours percevoir le texte d’alerte même si l’alerte ne s’applique pas à ce moment, faisant croire de façon erronée aux utilisateurs à l’existence d’un problème. + +```css +.hidden { +  display:none; +  } +``` + +```html + +``` + +```js +// suppression de la classe 'hidden' rend l’élément visible, ce qui entraînera l’annonce de l’alerte par le lecteur d’écran : +document.getElementById("expirationWarning").className = ""; +``` + +### Notes + +- L’utilisation du rôle `alert` sur un élément implique que cet élément a l’attribut `aria-live="assertive"` ; +- Le rôle `alert` ne devrait être utilisé que pour du contenu texte statique. L’élément sur lequel on utilise le rôle `alert` ne devrait pas pouvoir recevoir le focus, car les lecteurs d’écran annonceront automatiquement l’alerte où que se trouve le focus clavier ; +- Si une alerte fournit également des contrôles interactifs – tels que des contrôles de formulaire qui permettraient à l’utilisateur de rectifier une erreur, ou un bouton `OK` pour annuler l’alerte – le rôle [`alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) est préférable. + +### Attributs ARIA utilisés + +- [alert (en)](http://www.w3.org/TR/wai-aria/roles#alert) + +### Techniques ARIA connexes + +- [Utiliser le rôle `alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) ; +- [Utiliser la propriété `aria-invalid`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_la_propriété_aria-invalid). + +### Autres ressources + +- Guide des bonnes pratiques ARIA - Rôle `Alert` : [http://www.w3.org/TR/wai-aria-practices/#alert (en)](http://www.w3.org/TR/wai-aria-practices/#alert) diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 581c7efb46..e6358b5607 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -3584,6 +3584,7 @@ /ja/docs/Web/API/window.unescape /ja/docs/Web/JavaScript/Reference/Global_Objects/unescape /ja/docs/Web/API/window.updateCommands /ja/docs/Web/API/Window/updateCommands /ja/docs/Web/API/window.window /ja/docs/Web/API/Window/window +/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role /ja/docs/conflicting/Web/Accessibility/ARIA/Roles/alert_role /ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute /ja/docs/web/Accessibility/ARIA/Attributes/aria-activedescendant /ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role /ja/docs/Web/Accessibility/ARIA/Roles/button_role /ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role /ja/docs/Web/Accessibility/ARIA/Roles/checkbox_role diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 07dd56eff5..00e9722006 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -26314,12 +26314,6 @@ "davidbrouillette" ] }, - "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role": { - "modified": "2019-03-18T21:24:32.583Z", - "contributors": [ - "8845musign" - ] - }, "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role": { "modified": "2019-03-18T21:10:44.737Z", "contributors": [ @@ -48592,6 +48586,12 @@ "Wind1808" ] }, + "conflicting/Web/Accessibility/ARIA/Roles/alert_role": { + "modified": "2019-03-18T21:24:32.583Z", + "contributors": [ + "8845musign" + ] + }, "conflicting/Web/CSS/CSS_Scroll_Snap": { "modified": "2020-02-21T23:37:52.316Z", "contributors": [ diff --git a/files/ja/conflicting/web/accessibility/aria/roles/alert_role/index.html b/files/ja/conflicting/web/accessibility/aria/roles/alert_role/index.html new file mode 100644 index 0000000000..4953523e24 --- /dev/null +++ b/files/ja/conflicting/web/accessibility/aria/roles/alert_role/index.html @@ -0,0 +1,139 @@ +--- +title: alert ロールの使用 +slug: conflicting/Web/Accessibility/ARIA/Roles/alert_role +tags: + - ARIA + - Accessibility + - Advanced + - CSS + - Example + - HTML + - NeedsContent + - alert + - alert role + - alertrole + - alerts + - assitive technology + - role configuration + - wcag1.2.1 + - wcag3.3.1 +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +--- +

説明

+ +
+

alert ロールの使用方法についての技術デモとブラウザおよび支援技術に及ぼす影響の説明。

+
+ +

alert ロールは重要かつ一般に時間的制約のあるメッセージをユーザーへ伝えるために使用されます。このロールが要素へ追加されたとき、ブラウザはアクセシブルなアラートイベントをユーザーに向けて通知可能な支援技術製品へ送信します。 アラートロールはユーザの注意を即座に必要とする場合において最も便利です、例えば:

+ + + +

その押し付けがましい性質から、アラートロールはユーザーの注意を直ちに引く必要があるときにだけかつ控えめに使用されるべきです。 緊急度の低い動的な変更は、aria-live="polite" や他のライブリージョンロールなどのあまり積極的ではない方法を使うべきです。

+ +

ユーザーエージェントと支援技術への影響

+ +

アラートロールが要素へ追加されたとき、もしくはそのような要素が可視になったときにユーザーエージェントは以下のことを実行する必要があります:

+ + + +

支援技術製品はそのようなイベントを監視し、それに応じてユーザへ通知すべきです:

+ + + +
注釈: 支援技術がこの技術をどのように処理すべきかについては意見が異なる場合があります。上記の情報は意見の一つで、したがって標準ではありません。
+ +

例

+ +

例1: HTMLコードへのロールの追加

+ +

下のスニペットは html ソースコードへどうのようにアラートロールが直接追加されるかを示しています。要素が読み込み完了した瞬間にスクリーンリーダーはアラートの通知をするはずです。ページが読み込み終わったとき、もし要素がすでにオリジナルのソースコードにあったら、スクリーンリーダーはページタイトルをアナウンスした後にすぐにエラーを知らせるでしょう。

+ +
<h2 role="alert">Your form could not be submitted because of 3 validation errors.</h2>
+ +

例2: 動的にアラートロールをもつ要素を追加

+ +

このスニペットはアラートロールを持つ要素を動的に生成し、ドキュメント構造へ追加します。

+ +
var myAlert = document.createElement("p");
+myAlert.setAttribute("role", "alert");
+var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.");
+myAlert.appendChild(myAlertText);
+document.body.appendChild(myAlert);
+
+ +

注: jQuery のようなスクリプトライブラリを使ったときはより少ないコードで同じ結果を実現することができます:

+ +
$("<p role='alert'>You must agree with our terms of service to create an account.</p>").appendTo(document.body);
+
+ +

例3: 存在する要素へのアラートロールの追加

+ +

時々新しい要素を作るよりもすでにページに見えている要素にアラートロールを追加するほうが便利なことがあります。これにより開発者はユーザーへより関連度や緊急性の高い情報を繰り返し表示することができます。例えば、フォームコントロールは期待値についての指示を持っているかもしれません。違う値が入力されたら、スクリーンリーダーがそれを警告としてアナウンスするために role="alert を指示文へ追加される場合があります。以下の疑似スニペットコードはこのアプローチを示しています:

+ +
<p id="formInstruction">You must select at least 3 options</p>
+
+ +
// When the user tries to submit the form with less than 3 checkboxes selected:
+document.getElementById("formInstruction").setAttribute("role", "alert");
+ +

例4: アラートロールをもつ要素を表示する

+ +

要素が既に role="alert" を持ち、CSS を使用して最初に非表示になっている場合、それを表示することはページにちょうど追加されたかのようにアラートをが発せられます。存在するアラートを何回も "再利用" できるということを意味しています。

+ +

注: ほとんどのケースではこのアプローチは推奨されません、なぜなら現在適応できないエラーやアラート文を隠すことは理想的ではないからです。古い支援技術のユーザーは現在アラートが適応されてないときにもかかわらずアラート文を認識して、ユーザへ問題があると間違って信じこませてしまうかもしれません。

+ +
.hidden {
+  display:none;
+}
+
+ +
<p id="expirationWarning" role="alert" class="hidden">Your log in session will expire in 2 minutes</p>
+
+ +
// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:
+document.getElementById("expirationWarning").className = "";
+ +

注記 

+ + + +

使用される ARIA 属性

+ + + +

関連 ARIA 技術

+ + + +

互換性

+ +

TBD: Add support information for common UA and AT product combinations

+ +

その他のリソース

+ + + +

 

diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html deleted file mode 100644 index 367640803c..0000000000 --- a/files/ja/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: alert ロールの使用 -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role -tags: - - ARIA - - Accessibility - - Advanced - - CSS - - Example - - HTML - - NeedsContent - - alert - - alert role - - alertrole - - alerts - - assitive technology - - role configuration - - wcag1.2.1 - - wcag3.3.1 -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role ---- -

説明

- -
-

alert ロールの使用方法についての技術デモとブラウザおよび支援技術に及ぼす影響の説明。

-
- -

alert ロールは重要かつ一般に時間的制約のあるメッセージをユーザーへ伝えるために使用されます。このロールが要素へ追加されたとき、ブラウザはアクセシブルなアラートイベントをユーザーに向けて通知可能な支援技術製品へ送信します。 アラートロールはユーザの注意を即座に必要とする場合において最も便利です、例えば:

- - - -

その押し付けがましい性質から、アラートロールはユーザーの注意を直ちに引く必要があるときにだけかつ控えめに使用されるべきです。 緊急度の低い動的な変更は、aria-live="polite" や他のライブリージョンロールなどのあまり積極的ではない方法を使うべきです。

- -

ユーザーエージェントと支援技術への影響

- -

アラートロールが要素へ追加されたとき、もしくはそのような要素が可視になったときにユーザーエージェントは以下のことを実行する必要があります:

- - - -

支援技術製品はそのようなイベントを監視し、それに応じてユーザへ通知すべきです:

- - - -
注釈: 支援技術がこの技術をどのように処理すべきかについては意見が異なる場合があります。上記の情報は意見の一つで、したがって標準ではありません。
- -

例

- -

例1: HTMLコードへのロールの追加

- -

下のスニペットは html ソースコードへどうのようにアラートロールが直接追加されるかを示しています。要素が読み込み完了した瞬間にスクリーンリーダーはアラートの通知をするはずです。ページが読み込み終わったとき、もし要素がすでにオリジナルのソースコードにあったら、スクリーンリーダーはページタイトルをアナウンスした後にすぐにエラーを知らせるでしょう。

- -
<h2 role="alert">Your form could not be submitted because of 3 validation errors.</h2>
- -

例2: 動的にアラートロールをもつ要素を追加

- -

このスニペットはアラートロールを持つ要素を動的に生成し、ドキュメント構造へ追加します。

- -
var myAlert = document.createElement("p");
-myAlert.setAttribute("role", "alert");
-var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.");
-myAlert.appendChild(myAlertText);
-document.body.appendChild(myAlert);
-
- -

注: jQuery のようなスクリプトライブラリを使ったときはより少ないコードで同じ結果を実現することができます:

- -
$("<p role='alert'>You must agree with our terms of service to create an account.</p>").appendTo(document.body);
-
- -

例3: 存在する要素へのアラートロールの追加

- -

時々新しい要素を作るよりもすでにページに見えている要素にアラートロールを追加するほうが便利なことがあります。これにより開発者はユーザーへより関連度や緊急性の高い情報を繰り返し表示することができます。例えば、フォームコントロールは期待値についての指示を持っているかもしれません。違う値が入力されたら、スクリーンリーダーがそれを警告としてアナウンスするために role="alert を指示文へ追加される場合があります。以下の疑似スニペットコードはこのアプローチを示しています:

- -
<p id="formInstruction">You must select at least 3 options</p>
-
- -
// When the user tries to submit the form with less than 3 checkboxes selected:
-document.getElementById("formInstruction").setAttribute("role", "alert");
- -

例4: アラートロールをもつ要素を表示する

- -

要素が既に role="alert" を持ち、CSS を使用して最初に非表示になっている場合、それを表示することはページにちょうど追加されたかのようにアラートをが発せられます。存在するアラートを何回も "再利用" できるということを意味しています。

- -

注: ほとんどのケースではこのアプローチは推奨されません、なぜなら現在適応できないエラーやアラート文を隠すことは理想的ではないからです。古い支援技術のユーザーは現在アラートが適応されてないときにもかかわらずアラート文を認識して、ユーザへ問題があると間違って信じこませてしまうかもしれません。

- -
.hidden {
-  display:none;
-}
-
- -
<p id="expirationWarning" role="alert" class="hidden">Your log in session will expire in 2 minutes</p>
-
- -
// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:
-document.getElementById("expirationWarning").className = "";
- -

注記 

- - - -

使用される ARIA 属性

- - - -

関連 ARIA 技術

- - - -

互換性

- -

TBD: Add support information for common UA and AT product combinations

- -

その他のリソース

- - - -

 

diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 4edd09566b..da89c57846 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -560,7 +560,8 @@ /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-labelledby /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-required /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_slider_role /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role -/pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Utilizando_o_alert_role /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +/pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role /pt-BR/docs/Web/Accessibility/ARIA/Roles/alert_role +/pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Utilizando_o_alert_role /pt-BR/docs/Web/Accessibility/ARIA/Roles/alert_role /pt-BR/docs/Web/Accessibility/ARIA/Guia_para_implementar_o_leitor_de_tela_ARIA /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide /pt-BR/docs/Web/Accessibility/ARIA/forms/Dicas_básicas_de_form /pt-BR/docs/Web/Accessibility/ARIA/forms/Basic_form_hints /pt-BR/docs/Web/Acessibilidade /pt-BR/docs/Web/Accessibility diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index d02843e10d..638fa546c6 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -7049,13 +7049,6 @@ "Sheppy" ] }, - "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role": { - "modified": "2019-03-23T22:50:52.511Z", - "contributors": [ - "Aschlla", - "iCynthia" - ] - }, "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute": { "modified": "2020-01-24T10:16:14.859Z", "contributors": [ @@ -7101,6 +7094,13 @@ "rafaelcavalcante" ] }, + "Web/Accessibility/ARIA/Roles/alert_role": { + "modified": "2019-03-23T22:50:52.511Z", + "contributors": [ + "Aschlla", + "iCynthia" + ] + }, "Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ": { "modified": "2019-03-23T22:27:11.984Z", "contributors": [ diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html deleted file mode 100644 index 8a8d8398a8..0000000000 --- a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Utilizando a função "alerta" -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role -tags: - - ARIA - - Accessibility - - Acessibilidade - - Alertas - - Avançado - - CSS - - Caixas de aviso - - Configuração role - - Guía - - HTML+ARIA - - NeedsContent - - PrecisaDeConteúdo - - WAI-ARIA - - wcag1.2.1 - - wcag3.3.1 -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role -original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Utilizando_o_alert_role ---- -

Descrição

- -
-

Esta técnica mostra como utilizar o atributo role alert e demonstra seu efeito em navegadores e tecnologias assistivas.

-
- -

O atributo de alerta é utilizado para comunicar alguma mensagem importante e, frequentemente, urgente. Quando este atributo (role) estiver ligado a um elemento, o navegador vai enviar um evento acessível de alerta aos produtos de tecnologia assistiva que, então, poderão notificar seus utilizadores sobre o que estiver acontecendo. O atributo alert é mais útil para as informações que requerem a atenção imediata na tela. Por exemplo:

- - - -

Por causa da sua natureza intrusiva, o atributo de alerta deve ser usado moderadamente e, apenas, nas situações que exigirem atenção imediata. Mudanças dinâmicas que são menos urgentes devem receber um método menos agressivo, tal como a aria-live="polite", ou outros atributos (roles) para regiões dinâmicas.

- -

Efeitos possíveis sobre as tecnologias assistivas e seus utilizadores

- -

Quando o atributo (role) alerta é adicionado a um elemento, ou este se torna visível, o identificador de navegação (user agent) deve fazer o seguinte:

- - - -

Os produtos de tecnologias assistivas devem atender tal evento e notificar seus utilizadores, em conformidade.

- - - -
Nota: As opiniões podem divergir sobre como uma tecnologia assistiva deve gerenciar esta técnica. A informação oferecida acima é uma dessas opiniões e, portanto, não é normativa.
- -

Exemplos

- -

Exemplo 1: Adicionando o atributo (role) no código HTML:

- -

O trecho abaixo mostra como o atributo role alert é inserido, diretamente, no código-fonte HTML. No momento em que o elemento termina de carregar, o leitor de tela deve ser notificado do alerta. Se o elemento já estiver no código-fonte original quando a página carregar, o leitor de tela vai anunciar o erro imediatamente após a apresentação do título da página.

- -
<h2 role="alert">Your form could not be submitted because of 3 validation errors.(Seu formulário não pode ser submetido devido a 3 erros de validação)</h2>
- -

Exemplo 2: Adicionando, dinamicamente, um elemento com a função de alerta:

- -

Esta parte mostra como criar, de forma dinâmica, um elemento com uma função de alerta e como adicioná-lo à estrutura do documento:

- -
var myAlert = document.createElement("p");
-myAlert.setAttribute("role", "alert");
-var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço, a fim de criar uma conta)");
-myAlert.appendChild(myAlertText);
-document.body.appendChild(myAlertText);
-
- -

Nota: O mesmo resultado pode ser obtido com menos código, quando se utiliza uma biblioteca de script, como jQuery:

- -
$("<p role='alert'>You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço para criar uma conta)</p>").appendTo(document.body);
-
- -

Exemplo 3: Adicionando a função de alerta a um elemento existente:

- -

Às vezes é preferível adicionar uma função de alerta a um elemento que já está visível na página, a criar um novo elemento. Isto possibilita que os desenvolvedores reiterem a informação que virá a ser mais importante, ou urgente, para os utilizadores. Por exemplo, um controle de formulário pode ter uma instrução sobre o valor esperado. Caso um valor diferente seja inserido, o role="alert" pode ser adicionado ao texto de instrução e, então, o leitor de tela o anuncia como um alerta. O pseudo código, no fragmento abaixo, ilustra esta abordagem:

- -
<p id="formInstruction">You must select at least 3 options</p>
-
- -
// When the user tries to submit the form with less than 3 checkboxes selected (Quando houver a tentativa de submissão do formulário com menos de 3 caixas de seleção marcadas):
-document.getElementById("formInstruction").setAttribute("role", "alert");
- -

Exemplo 4: Construindo um elemento com uma função de alerta visível:

- -

Se um elemento já tem o atributo role="alert" e é, inicialmente, escondido pelo uso da CSS, torná-lo visível o faz disparar como se estivesse adicionado à página. Isto significa que um alerta existente pode ser "utilizado" múltiplas vezes. 

- -

Nota: Na maioria dos casos, esta abordagem não é recomendada, porque não é a ideal para esconder erro, ou alerta de texto, que não for aplicável no momento. Utilizadores de tecnologias assistivas antigas podem, ainda, perceber o texto de alerta, mesmo quando este não devesse ser aplicado, fazendo com que acreditem, incorretamente, que há um problema.

- -
.hidden {
-  display:none;
-}
-
- -
<p id="expirationWarning" role="alert" class="hidden">Your log in session will expire in 2 minutes(A sua sessão vai expirar em 2 minutos)</p>
-
- -
// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:(Remover a classe "hidden" faz o leitor de tela anunciar o alerta)
-document.getElementById("expirationWarning").className = "";
- -

Notas:

- - - -

Atributos ARIA utilizados

- - - -

Técnicas ARIA relacionadas

- - - -

Compatibilidade

- -

TBD: Adicionar informações de suporte para UA comum e combinações de produtos TA / AT

- -

Recursos Adicionais

- - - -

 

diff --git a/files/pt-br/web/accessibility/aria/roles/alert_role/index.html b/files/pt-br/web/accessibility/aria/roles/alert_role/index.html new file mode 100644 index 0000000000..20000ce49c --- /dev/null +++ b/files/pt-br/web/accessibility/aria/roles/alert_role/index.html @@ -0,0 +1,139 @@ +--- +title: Utilizando a função "alerta" +slug: Web/Accessibility/ARIA/Roles/alert_role +tags: + - ARIA + - Accessibility + - Acessibilidade + - Alertas + - Avançado + - CSS + - Caixas de aviso + - Configuração role + - Guía + - HTML+ARIA + - NeedsContent + - PrecisaDeConteúdo + - WAI-ARIA + - wcag1.2.1 + - wcag3.3.1 +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +--- +

Descrição

+ +
+

Esta técnica mostra como utilizar o atributo role alert e demonstra seu efeito em navegadores e tecnologias assistivas.

+
+ +

O atributo de alerta é utilizado para comunicar alguma mensagem importante e, frequentemente, urgente. Quando este atributo (role) estiver ligado a um elemento, o navegador vai enviar um evento acessível de alerta aos produtos de tecnologia assistiva que, então, poderão notificar seus utilizadores sobre o que estiver acontecendo. O atributo alert é mais útil para as informações que requerem a atenção imediata na tela. Por exemplo:

+ + + +

Por causa da sua natureza intrusiva, o atributo de alerta deve ser usado moderadamente e, apenas, nas situações que exigirem atenção imediata. Mudanças dinâmicas que são menos urgentes devem receber um método menos agressivo, tal como a aria-live="polite", ou outros atributos (roles) para regiões dinâmicas.

+ +

Efeitos possíveis sobre as tecnologias assistivas e seus utilizadores

+ +

Quando o atributo (role) alerta é adicionado a um elemento, ou este se torna visível, o identificador de navegação (user agent) deve fazer o seguinte:

+ + + +

Os produtos de tecnologias assistivas devem atender tal evento e notificar seus utilizadores, em conformidade.

+ + + +
Nota: As opiniões podem divergir sobre como uma tecnologia assistiva deve gerenciar esta técnica. A informação oferecida acima é uma dessas opiniões e, portanto, não é normativa.
+ +

Exemplos

+ +

Exemplo 1: Adicionando o atributo (role) no código HTML:

+ +

O trecho abaixo mostra como o atributo role alert é inserido, diretamente, no código-fonte HTML. No momento em que o elemento termina de carregar, o leitor de tela deve ser notificado do alerta. Se o elemento já estiver no código-fonte original quando a página carregar, o leitor de tela vai anunciar o erro imediatamente após a apresentação do título da página.

+ +
<h2 role="alert">Your form could not be submitted because of 3 validation errors.(Seu formulário não pode ser submetido devido a 3 erros de validação)</h2>
+ +

Exemplo 2: Adicionando, dinamicamente, um elemento com a função de alerta:

+ +

Esta parte mostra como criar, de forma dinâmica, um elemento com uma função de alerta e como adicioná-lo à estrutura do documento:

+ +
var myAlert = document.createElement("p");
+myAlert.setAttribute("role", "alert");
+var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço, a fim de criar uma conta)");
+myAlert.appendChild(myAlertText);
+document.body.appendChild(myAlertText);
+
+ +

Nota: O mesmo resultado pode ser obtido com menos código, quando se utiliza uma biblioteca de script, como jQuery:

+ +
$("<p role='alert'>You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço para criar uma conta)</p>").appendTo(document.body);
+
+ +

Exemplo 3: Adicionando a função de alerta a um elemento existente:

+ +

Às vezes é preferível adicionar uma função de alerta a um elemento que já está visível na página, a criar um novo elemento. Isto possibilita que os desenvolvedores reiterem a informação que virá a ser mais importante, ou urgente, para os utilizadores. Por exemplo, um controle de formulário pode ter uma instrução sobre o valor esperado. Caso um valor diferente seja inserido, o role="alert" pode ser adicionado ao texto de instrução e, então, o leitor de tela o anuncia como um alerta. O pseudo código, no fragmento abaixo, ilustra esta abordagem:

+ +
<p id="formInstruction">You must select at least 3 options</p>
+
+ +
// When the user tries to submit the form with less than 3 checkboxes selected (Quando houver a tentativa de submissão do formulário com menos de 3 caixas de seleção marcadas):
+document.getElementById("formInstruction").setAttribute("role", "alert");
+ +

Exemplo 4: Construindo um elemento com uma função de alerta visível:

+ +

Se um elemento já tem o atributo role="alert" e é, inicialmente, escondido pelo uso da CSS, torná-lo visível o faz disparar como se estivesse adicionado à página. Isto significa que um alerta existente pode ser "utilizado" múltiplas vezes. 

+ +

Nota: Na maioria dos casos, esta abordagem não é recomendada, porque não é a ideal para esconder erro, ou alerta de texto, que não for aplicável no momento. Utilizadores de tecnologias assistivas antigas podem, ainda, perceber o texto de alerta, mesmo quando este não devesse ser aplicado, fazendo com que acreditem, incorretamente, que há um problema.

+ +
.hidden {
+  display:none;
+}
+
+ +
<p id="expirationWarning" role="alert" class="hidden">Your log in session will expire in 2 minutes(A sua sessão vai expirar em 2 minutos)</p>
+
+ +
// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:(Remover a classe "hidden" faz o leitor de tela anunciar o alerta)
+document.getElementById("expirationWarning").className = "";
+ +

Notas:

+ + + +

Atributos ARIA utilizados

+ + + +

Técnicas ARIA relacionadas

+ + + +

Compatibilidade

+ +

TBD: Adicionar informações de suporte para UA comum e combinações de produtos TA / AT

+ +

Recursos Adicionais

+ + + +

 

-- cgit v1.2.3-54-g00ecf