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 --- .../using_the_alert_role/index.html | 131 -------------------- .../accessibility/aria/roles/alert_role/index.html | 132 +++++++++++++++++++++ 2 files changed, 132 insertions(+), 131 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 (limited to 'files/es/web/accessibility/aria') 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

+ + + +

 

-- cgit v1.2.3-54-g00ecf