From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- .../usando_el_atributo_aria-required/index.html | 76 ----------- .../usando_el_rol_alertdialog/index.html | 89 ------------- .../using_the_alertdialog_role/index.html | 89 +++++++++++++ .../using_the_aria-required_attribute/index.html | 76 +++++++++++ .../accessibility/aria/forms/alertas/index.html | 147 --------------------- .../web/accessibility/aria/forms/alerts/index.html | 147 +++++++++++++++++++++ .../aria/forms/basic_form_hints/index.html | 115 ++++++++++++++++ .../consejos_basicos_para_formularios/index.html | 115 ---------------- .../aria/forms/etiquetas_complejas/index.html | 47 ------- .../aria/forms/multipart_labels/index.html | 47 +++++++ 10 files changed, 474 insertions(+), 474 deletions(-) delete mode 100644 files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html delete mode 100644 files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html create mode 100644 files/es/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html create mode 100644 files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html delete mode 100644 files/es/web/accessibility/aria/forms/alertas/index.html create mode 100644 files/es/web/accessibility/aria/forms/alerts/index.html create mode 100644 files/es/web/accessibility/aria/forms/basic_form_hints/index.html delete mode 100644 files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html delete mode 100644 files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html create mode 100644 files/es/web/accessibility/aria/forms/multipart_labels/index.html (limited to 'files/es/web/accessibility/aria') diff --git a/files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html b/files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html deleted file mode 100644 index 6d744bb956..0000000000 --- a/files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Usando el atributo aria-required -slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_atributo_aria-required -tags: - - Accesibilidad -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute ---- -

Descripción

- -

El atributo aria-required es usado para indicar al usuario que un input es requerido en un elemento antes de que un form pueda ser enviado. Este atributo puede ser usado en un form con cualquier elemento HTML típico; no se limita a elementosque tengan un role ARIA asignado.

- -

{{ HTMLVersionInline("5") }} ahora tiene el atributo required, pero aria-required todavía es útil para un agente de usuario que no soporta HTML5.

- -

Value

- -

true o false (Default: false)

- -

Posibles efectos en agentes de usuario y tecnología asistente.

- -

Los lectores de pantalla deben anunciar el campo como requerido.

- -

Nota que este atributo no cambiará automáticamente la presentación del campo.

- -
Nota: Las opiniones pueden diferir en cuanto a cómo esta técnica debería ser manejada por la tecnología asistente.  La información prevista arribaes una de esas opciones y por lo tanto no es normativa.
- -

Ejemplos

- -

Ejemplo 1: Un formulario sencillo

- -
 <form action="post">
-     <label for="firstName">First name:</label>
-     <input id="firstName" type="text" aria-required="true" />
-     <br/>
-     <label for="lastName">Last name:</label>
-     <input id="lastName" type="text" aria-required="true" />
-     <br/>
-     <label for="streetAddress">Street address:</label>
-     <input id="streetAddress" type="text" />
- </form>
-
- -

Ejemplos en acción:

- -

Ejemplo de un Tooltip (incluye el uso del atributo aria-required)

- -

Notas 

- -

Usan ARIA roles

- - - -

Técnicas relacionadas con ARIA

- - - -

Compatibilidad

- -

Por determinar: Agregar información de soporte para combinaciones comunes de productos UA y AT.

- -

Recursos adicionales

- - diff --git a/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html b/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html deleted file mode 100644 index fad923dd3a..0000000000 --- a/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Usando el rol alertdialog -slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_rol_alertdialog -tags: - - ARIA - - Accesibilidad - - Alertas - - Desarrollo web - - HTML - - agente - - alertdialog - - modal -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role ---- -

Descripción

- -
-

Esta técnica demuestra como usar el rol alertdialog.

-
- -

El rol alertdialog es utilizado para notificar al usuario información urgenete que demanden la atención inmediata del usuario. Como el nombre implica, alertdialog es un tipo de díalogo. Esto significa que la mayoría de las instrucciones proveidas en la técnica de ''usando el rol dialog' son aplicables al rol alertdialog también: 

- - - -

La diferencia con díalogos normales es que el rol de alertdialog debe ser utilizado únicamente cuando una alerta, error, o advertencia ocurre. En otras palabras, cuando la información o controles de un díalogo requieren la inmediata atención del usuario debe usarse alertdialog en lugar de dialog. Sin embargo, depende del desarrollador hacer esta distinción.

- -

Debido a su carácter urgente los díalogos de alerta deben ser siempre modales.

- -
Nota: Este rol solo debe ser usado para mensajes de alerta que tienen controles interactivos asociado. Si un díalogo de alerta solo contiene contenido estático y no tiene controles interactivos, alertdialog es probablemente el rol incorrecto para ser utilizado.. El rol alert debe ser usado en su lugar en éste caso (como se describe en la técnica de Utilizando el rol alert).
- -

Posibles efectos de agentes de usuario y tecnología de asistencia

- -

Cuando un rol alertdialog es utilizado, el agente de usuario debería hacer lo siguiente:

- - - -

Cuando la aleta de díalogo aparece, los lectores de pantalla deberían anunciar la alerta.

- -

Cuando el díalogo de alerta es etiquetado correctamente y el foco es movido de un control a el interior del díalogo, los lectores de pantalla deberían anunciar el rol accesible del díalogo así como su nombre y su descriipción antes de anunciar el elemento enfocado. 

- -
Nota: Opiniones pueden diferir en como tecnología de asistencia debe manejar esta técnica. La información proveída arriba es una de éstas opiniones y por lo tanto no es normativa.
- -

Ejemplos

- -

Ejemplos 1: Un díalogo de alerta básico

- -

El fragmento de código siguiente muestra como marcar un díalogo de alerta que solo provee un mensaje y un botón de OK.

- -
<div role="alertdialog" aria-labelledby="tituloDialogo1" aria-describedby="descrDialogo1">
-  <div role="document" tabindex="0">
-    <h2 id="tituloDialogo1">Tu sesión esta apunto de expirar</h2>
-    <p id="descrDialogo1">Para extender tu sesión de clic en el botón OK</p>
-    <button>OK</button>
-  </div>
-</div>
- -

Ejemplos en funcionamiento:

- -

Pendiente

- -

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/aria_techniques/using_the_alertdialog_role/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html new file mode 100644 index 0000000000..fad923dd3a --- /dev/null +++ b/files/es/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html @@ -0,0 +1,89 @@ +--- +title: Usando el rol alertdialog +slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_rol_alertdialog +tags: + - ARIA + - Accesibilidad + - Alertas + - Desarrollo web + - HTML + - agente + - alertdialog + - modal +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role +--- +

Descripción

+ +
+

Esta técnica demuestra como usar el rol alertdialog.

+
+ +

El rol alertdialog es utilizado para notificar al usuario información urgenete que demanden la atención inmediata del usuario. Como el nombre implica, alertdialog es un tipo de díalogo. Esto significa que la mayoría de las instrucciones proveidas en la técnica de ''usando el rol dialog' son aplicables al rol alertdialog también: 

+ + + +

La diferencia con díalogos normales es que el rol de alertdialog debe ser utilizado únicamente cuando una alerta, error, o advertencia ocurre. En otras palabras, cuando la información o controles de un díalogo requieren la inmediata atención del usuario debe usarse alertdialog en lugar de dialog. Sin embargo, depende del desarrollador hacer esta distinción.

+ +

Debido a su carácter urgente los díalogos de alerta deben ser siempre modales.

+ +
Nota: Este rol solo debe ser usado para mensajes de alerta que tienen controles interactivos asociado. Si un díalogo de alerta solo contiene contenido estático y no tiene controles interactivos, alertdialog es probablemente el rol incorrecto para ser utilizado.. El rol alert debe ser usado en su lugar en éste caso (como se describe en la técnica de Utilizando el rol alert).
+ +

Posibles efectos de agentes de usuario y tecnología de asistencia

+ +

Cuando un rol alertdialog es utilizado, el agente de usuario debería hacer lo siguiente:

+ + + +

Cuando la aleta de díalogo aparece, los lectores de pantalla deberían anunciar la alerta.

+ +

Cuando el díalogo de alerta es etiquetado correctamente y el foco es movido de un control a el interior del díalogo, los lectores de pantalla deberían anunciar el rol accesible del díalogo así como su nombre y su descriipción antes de anunciar el elemento enfocado. 

+ +
Nota: Opiniones pueden diferir en como tecnología de asistencia debe manejar esta técnica. La información proveída arriba es una de éstas opiniones y por lo tanto no es normativa.
+ +

Ejemplos

+ +

Ejemplos 1: Un díalogo de alerta básico

+ +

El fragmento de código siguiente muestra como marcar un díalogo de alerta que solo provee un mensaje y un botón de OK.

+ +
<div role="alertdialog" aria-labelledby="tituloDialogo1" aria-describedby="descrDialogo1">
+  <div role="document" tabindex="0">
+    <h2 id="tituloDialogo1">Tu sesión esta apunto de expirar</h2>
+    <p id="descrDialogo1">Para extender tu sesión de clic en el botón OK</p>
+    <button>OK</button>
+  </div>
+</div>
+ +

Ejemplos en funcionamiento:

+ +

Pendiente

+ +

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/aria_techniques/using_the_aria-required_attribute/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html new file mode 100644 index 0000000000..6d744bb956 --- /dev/null +++ b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html @@ -0,0 +1,76 @@ +--- +title: Usando el atributo aria-required +slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_atributo_aria-required +tags: + - Accesibilidad +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute +--- +

Descripción

+ +

El atributo aria-required es usado para indicar al usuario que un input es requerido en un elemento antes de que un form pueda ser enviado. Este atributo puede ser usado en un form con cualquier elemento HTML típico; no se limita a elementosque tengan un role ARIA asignado.

+ +

{{ HTMLVersionInline("5") }} ahora tiene el atributo required, pero aria-required todavía es útil para un agente de usuario que no soporta HTML5.

+ +

Value

+ +

true o false (Default: false)

+ +

Posibles efectos en agentes de usuario y tecnología asistente.

+ +

Los lectores de pantalla deben anunciar el campo como requerido.

+ +

Nota que este atributo no cambiará automáticamente la presentación del campo.

+ +
Nota: Las opiniones pueden diferir en cuanto a cómo esta técnica debería ser manejada por la tecnología asistente.  La información prevista arribaes una de esas opciones y por lo tanto no es normativa.
+ +

Ejemplos

+ +

Ejemplo 1: Un formulario sencillo

+ +
 <form action="post">
+     <label for="firstName">First name:</label>
+     <input id="firstName" type="text" aria-required="true" />
+     <br/>
+     <label for="lastName">Last name:</label>
+     <input id="lastName" type="text" aria-required="true" />
+     <br/>
+     <label for="streetAddress">Street address:</label>
+     <input id="streetAddress" type="text" />
+ </form>
+
+ +

Ejemplos en acción:

+ +

Ejemplo de un Tooltip (incluye el uso del atributo aria-required)

+ +

Notas 

+ +

Usan ARIA roles

+ + + +

Técnicas relacionadas con ARIA

+ + + +

Compatibilidad

+ +

Por determinar: Agregar información de soporte para combinaciones comunes de productos UA y AT.

+ +

Recursos adicionales

+ + diff --git a/files/es/web/accessibility/aria/forms/alertas/index.html b/files/es/web/accessibility/aria/forms/alertas/index.html deleted file mode 100644 index 65cc3d3d09..0000000000 --- a/files/es/web/accessibility/aria/forms/alertas/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Alertas -slug: Web/Accessibility/ARIA/forms/alertas -tags: - - ARIA - - Accesibilidad - - Forms - - Web - - formulários -translation_of: Web/Accessibility/ARIA/forms/alerts ---- -

El problema

- -

Tienes un formulario — un formulario de contacto — por ejemplo, en el que deseas poner algún control de error accesible. Ejemplos de problemas comunes incluyen direcciones de correo electrónico que no son válidas o un campo de nombre que no contiene al menos un nombre o apellido.

- -

El formulario

- -

Primero, lee acerca de la técnica requerida por aria si no lo has hecho, ya que esta técnica amplía a esa.

- -

Aquí hay un sencillo formulario:

- -
 <form method="post" action="post.php">
-   <fieldset>
-     <legend>Introduce tus datos de contacto</legend>
-     <label for="name">Tu nombre (obligatorio):</label>
-     <input name="name" id="name" aria-required="true"/>
-     <br />
-     <label for="email">Dirección de correo electrónico (obligatorio):</label>
-     <input name="email" id="email" aria-required="true"/>
-     <br />
-     <label for="website">Sitio web (opcional):</label>
-     <input name="website" id="website"/>
-   </fieldset>
-   <label for="message">Por favor ingresa tu mensaje (requerido):</label>
-   <br />
-   <textarea name="message" id="message" rows="5" cols="80"
-             aria-required="true"></textarea>
-   <br />
-   <input type="submit" name="submit" value="Enviar mensaje"/>
-   <input type="reset" name="reset" value="Restablecer formulario"/>
- </form>
-
- -

Verificación de validez y notificación al usuario

- -

La validación de formularios consta de varios pasos:

- -
    -
  1. Verificando si la dirección de correo electrónico o el nombre ingresado son válidos. Cada campo tiene un conjunto de criterios que se deben cumplir para aprobar la validación. Para simplificar este ejemplo, verificaremos si la dirección de correo electrónico contiene el símbolo "@" y si la entrada del nombre contiene al menos 1 carácter.
    2. -
  2. Si no se cumplen los criterios anteriores, el atributo aria-invalid del campo recibirá un valor de "true".
    3. -
  3. Si no se cumplieron los criterios, se notificará al usuario mediante una alerta. En lugar de usar la función "alert" de JavaScript, usaremos un widget WAI-ARIA simple para la notificación. Esto notifica al usuario del error, pero le permite continuar modificando el formulario sin perder el foco (causado por el controlador "onblur" en la función "alert" predeterminada de JavaScript).
    4. -
- -

A continuación se muestra un código JavaScript de ejemplo que se podría insertar encima de la etiqueta de cierre "head":

- -
 <script type="application/javascript">
- function removeOldAlert()
- {
-   var oldAlert = document.getElementById("alert");
-   if (oldAlert){
-     document.body.removeChild(oldAlert);
-   }
- }
-
- function addAlert(aMsg)
- {
-   removeOldAlert();
-   var newAlert = document.createElement("div");
-   newAlert.setAttribute("role", "alert");
-   newAlert.setAttribute("id", "alert");
-   var msg = document.createTextNode(aMsg);
-   newAlert.appendChild(msg);
-   document.body.appendChild(newAlert);
- }
-
- function checkValidity(aID, aSearchTerm, aMsg)
- {
-   var elem = document.getElementById(aID);
-   var invalid = (elem.value.indexOf(aSearchTerm) < 0);
-   if (invalid) {
-     elem.setAttribute("aria-invalid", "true");
-     addAlert(aMsg);
-   } else {
-     elem.setAttribute("aria-invalid", "false");
-     removeOldAlert();
-   }
- }
- </script>
-
- -

La función checkValidity

- -

El método principal en JavaScript utilizado para la validación de formularios es la función checkValidity. Este método toma tres parámetros: el ID de el input que se va a validar, el término que se busca para asegurar la validez y el mensaje de error que se inserta en la alerta.

- -

Para ver si es válido, la función comprueba si el valor indexOf del input es algo mayor que -1. Se devuelve un valor de -1 o menos si el índice del término de búsqueda no se pudo encontrar dentro del valor.

- -

Si no es válido, la función hace dos cosas:

- -
    -
  1. Establece el atributo aria-invalid del elemento en "true", lo que indicará a los lectores de pantalla que hay contenido no válido aquí.
    2. -
  2. Llamará a la función addAlert para agregar la alerta con el mensaje de error proporcionado.
    3. -
- -

Si se encuentra el término de búsqueda, el atributo aria-invalid se restablece a “false”. Además, se eliminan las alertas sobrantes.

- -

La función addAlert

- -

Esta función primero elimina las alertas antiguas. La función es simple: busca un elemento con id "alert" y, si lo encuentra, lo elimina del modelo de objetos del documento.

- -

A continuación, la función crea un elemento div para contener el texto de alerta. Obtiene un ID de "alert". Y obtiene un conjunto de roles de "alert". En realidad, está inspirado en ARIA, aunque no dice "aria" en el nombre del atributo. Esto se debe a que ese rol se basa en el Módulo de atributos de rol XHTML que simplemente se transfirió a HTML para simplificar.

- -

El texto se agrega al elemento div y el elemento div se agrega al documento.

- -

En el momento en que esto suceda, Firefox lanzará un evento "alert" a las tecnologías de asistencia cuando aparezca este div. La mayoría de los lectores de pantalla la recogerán automáticamente y la pregonarán. Esto es similar a la barra de notificaciones en Firefox que te pregunta si deseas guardar una contraseña. La alerta que acabamos de crear no tiene ningún botón para presionar, solo nos dice lo que está mal.

- -

Modificar el evento "onblur"

- -

Todo lo que queda ahora es agregar el controlador de eventos. Necesitamos cambiar las dos entradas para el correo electrónico y el nombre para esto:

- -
 <input name="name" id="name" aria-required="true"
-        onblur="checkValidity('name', '', '¡Se ingresó un nombre no válido!');"/>
- <br />
- <input name="email" id="email" aria-required="true"
-        onblur="checkValidity('email', '@', 'Dirección de correo electrónico no válida');"/>
-
- -

Probar el ejemplo

- -

Si usas Firefox 3 y un lector de pantalla compatible actualmente, intenta lo siguiente:

- -
    -
  1. Ingresa solo tu primer nombre como nombre. Al pulsar la tecla de tabulación, escucharás una alerta que te indicará que ingresaste un nombre no válido. Luego puedes volver atrás con Mayús-Tab y corregir el error.
    2. -
  2. Ingresa una dirección de correo electrónico sin el símbolo “@”. Cuando salgas de este campo, deberías escuchar una advertencia que dice que no ingresaste una dirección de correo electrónico válida.
    3. -
- -

En ambos casos, al volver a enfocar el campo en cuestión, tu lector de pantalla debería decirte que este campo no es válido. JAWS 9 admite esto, pero JAWS 8 no, por lo que es posible que esto no funcione en todas las versiones de los lectores de pantalla compatibles.

- -

Algunas preguntas que podrías tener

- -
-
P. ¿Por qué pusiste “(obligatorio)” en el texto de la etiqueta y el atributo aria-required en algunas de las entradas?
-
R. Si se tratara de un formulario real en vivo y el sitio estuviera siendo visitado por un navegador que aún no es compatible con ARIA, aún quisiéramos dar una indicación de que este es un campo obligatorio.
-
P. ¿Por qué no vuelve a enfocarse en el campo no válido automáticamente?
-
R. Porque esto no está permitido por las especificaciones de la API de Windows y posiblemente otras. Además, dejar que el enfoque salte sin interacción real del usuario con demasiada frecuencia no es algo agradable en general. 
-
- -
Aún no definido: reconsideremos esto ─ personalmente, creo que establecer el enfoque podría ser bueno si se hace sin causar una trampa en el teclado.
diff --git a/files/es/web/accessibility/aria/forms/alerts/index.html b/files/es/web/accessibility/aria/forms/alerts/index.html new file mode 100644 index 0000000000..65cc3d3d09 --- /dev/null +++ b/files/es/web/accessibility/aria/forms/alerts/index.html @@ -0,0 +1,147 @@ +--- +title: Alertas +slug: Web/Accessibility/ARIA/forms/alertas +tags: + - ARIA + - Accesibilidad + - Forms + - Web + - formulários +translation_of: Web/Accessibility/ARIA/forms/alerts +--- +

El problema

+ +

Tienes un formulario — un formulario de contacto — por ejemplo, en el que deseas poner algún control de error accesible. Ejemplos de problemas comunes incluyen direcciones de correo electrónico que no son válidas o un campo de nombre que no contiene al menos un nombre o apellido.

+ +

El formulario

+ +

Primero, lee acerca de la técnica requerida por aria si no lo has hecho, ya que esta técnica amplía a esa.

+ +

Aquí hay un sencillo formulario:

+ +
 <form method="post" action="post.php">
+   <fieldset>
+     <legend>Introduce tus datos de contacto</legend>
+     <label for="name">Tu nombre (obligatorio):</label>
+     <input name="name" id="name" aria-required="true"/>
+     <br />
+     <label for="email">Dirección de correo electrónico (obligatorio):</label>
+     <input name="email" id="email" aria-required="true"/>
+     <br />
+     <label for="website">Sitio web (opcional):</label>
+     <input name="website" id="website"/>
+   </fieldset>
+   <label for="message">Por favor ingresa tu mensaje (requerido):</label>
+   <br />
+   <textarea name="message" id="message" rows="5" cols="80"
+             aria-required="true"></textarea>
+   <br />
+   <input type="submit" name="submit" value="Enviar mensaje"/>
+   <input type="reset" name="reset" value="Restablecer formulario"/>
+ </form>
+
+ +

Verificación de validez y notificación al usuario

+ +

La validación de formularios consta de varios pasos:

+ +
    +
  1. Verificando si la dirección de correo electrónico o el nombre ingresado son válidos. Cada campo tiene un conjunto de criterios que se deben cumplir para aprobar la validación. Para simplificar este ejemplo, verificaremos si la dirección de correo electrónico contiene el símbolo "@" y si la entrada del nombre contiene al menos 1 carácter.
    2. +
  2. Si no se cumplen los criterios anteriores, el atributo aria-invalid del campo recibirá un valor de "true".
    3. +
  3. Si no se cumplieron los criterios, se notificará al usuario mediante una alerta. En lugar de usar la función "alert" de JavaScript, usaremos un widget WAI-ARIA simple para la notificación. Esto notifica al usuario del error, pero le permite continuar modificando el formulario sin perder el foco (causado por el controlador "onblur" en la función "alert" predeterminada de JavaScript).
    4. +
+ +

A continuación se muestra un código JavaScript de ejemplo que se podría insertar encima de la etiqueta de cierre "head":

+ +
 <script type="application/javascript">
+ function removeOldAlert()
+ {
+   var oldAlert = document.getElementById("alert");
+   if (oldAlert){
+     document.body.removeChild(oldAlert);
+   }
+ }
+
+ function addAlert(aMsg)
+ {
+   removeOldAlert();
+   var newAlert = document.createElement("div");
+   newAlert.setAttribute("role", "alert");
+   newAlert.setAttribute("id", "alert");
+   var msg = document.createTextNode(aMsg);
+   newAlert.appendChild(msg);
+   document.body.appendChild(newAlert);
+ }
+
+ function checkValidity(aID, aSearchTerm, aMsg)
+ {
+   var elem = document.getElementById(aID);
+   var invalid = (elem.value.indexOf(aSearchTerm) < 0);
+   if (invalid) {
+     elem.setAttribute("aria-invalid", "true");
+     addAlert(aMsg);
+   } else {
+     elem.setAttribute("aria-invalid", "false");
+     removeOldAlert();
+   }
+ }
+ </script>
+
+ +

La función checkValidity

+ +

El método principal en JavaScript utilizado para la validación de formularios es la función checkValidity. Este método toma tres parámetros: el ID de el input que se va a validar, el término que se busca para asegurar la validez y el mensaje de error que se inserta en la alerta.

+ +

Para ver si es válido, la función comprueba si el valor indexOf del input es algo mayor que -1. Se devuelve un valor de -1 o menos si el índice del término de búsqueda no se pudo encontrar dentro del valor.

+ +

Si no es válido, la función hace dos cosas:

+ +
    +
  1. Establece el atributo aria-invalid del elemento en "true", lo que indicará a los lectores de pantalla que hay contenido no válido aquí.
    2. +
  2. Llamará a la función addAlert para agregar la alerta con el mensaje de error proporcionado.
    3. +
+ +

Si se encuentra el término de búsqueda, el atributo aria-invalid se restablece a “false”. Además, se eliminan las alertas sobrantes.

+ +

La función addAlert

+ +

Esta función primero elimina las alertas antiguas. La función es simple: busca un elemento con id "alert" y, si lo encuentra, lo elimina del modelo de objetos del documento.

+ +

A continuación, la función crea un elemento div para contener el texto de alerta. Obtiene un ID de "alert". Y obtiene un conjunto de roles de "alert". En realidad, está inspirado en ARIA, aunque no dice "aria" en el nombre del atributo. Esto se debe a que ese rol se basa en el Módulo de atributos de rol XHTML que simplemente se transfirió a HTML para simplificar.

+ +

El texto se agrega al elemento div y el elemento div se agrega al documento.

+ +

En el momento en que esto suceda, Firefox lanzará un evento "alert" a las tecnologías de asistencia cuando aparezca este div. La mayoría de los lectores de pantalla la recogerán automáticamente y la pregonarán. Esto es similar a la barra de notificaciones en Firefox que te pregunta si deseas guardar una contraseña. La alerta que acabamos de crear no tiene ningún botón para presionar, solo nos dice lo que está mal.

+ +

Modificar el evento "onblur"

+ +

Todo lo que queda ahora es agregar el controlador de eventos. Necesitamos cambiar las dos entradas para el correo electrónico y el nombre para esto:

+ +
 <input name="name" id="name" aria-required="true"
+        onblur="checkValidity('name', '', '¡Se ingresó un nombre no válido!');"/>
+ <br />
+ <input name="email" id="email" aria-required="true"
+        onblur="checkValidity('email', '@', 'Dirección de correo electrónico no válida');"/>
+
+ +

Probar el ejemplo

+ +

Si usas Firefox 3 y un lector de pantalla compatible actualmente, intenta lo siguiente:

+ +
    +
  1. Ingresa solo tu primer nombre como nombre. Al pulsar la tecla de tabulación, escucharás una alerta que te indicará que ingresaste un nombre no válido. Luego puedes volver atrás con Mayús-Tab y corregir el error.
    2. +
  2. Ingresa una dirección de correo electrónico sin el símbolo “@”. Cuando salgas de este campo, deberías escuchar una advertencia que dice que no ingresaste una dirección de correo electrónico válida.
    3. +
+ +

En ambos casos, al volver a enfocar el campo en cuestión, tu lector de pantalla debería decirte que este campo no es válido. JAWS 9 admite esto, pero JAWS 8 no, por lo que es posible que esto no funcione en todas las versiones de los lectores de pantalla compatibles.

+ +

Algunas preguntas que podrías tener

+ +
+
P. ¿Por qué pusiste “(obligatorio)” en el texto de la etiqueta y el atributo aria-required en algunas de las entradas?
+
R. Si se tratara de un formulario real en vivo y el sitio estuviera siendo visitado por un navegador que aún no es compatible con ARIA, aún quisiéramos dar una indicación de que este es un campo obligatorio.
+
P. ¿Por qué no vuelve a enfocarse en el campo no válido automáticamente?
+
R. Porque esto no está permitido por las especificaciones de la API de Windows y posiblemente otras. Además, dejar que el enfoque salte sin interacción real del usuario con demasiada frecuencia no es algo agradable en general. 
+
+ +
Aún no definido: reconsideremos esto ─ personalmente, creo que establecer el enfoque podría ser bueno si se hace sin causar una trampa en el teclado.
diff --git a/files/es/web/accessibility/aria/forms/basic_form_hints/index.html b/files/es/web/accessibility/aria/forms/basic_form_hints/index.html new file mode 100644 index 0000000000..48f2dba3e3 --- /dev/null +++ b/files/es/web/accessibility/aria/forms/basic_form_hints/index.html @@ -0,0 +1,115 @@ +--- +title: Consejos básicos para formularios +slug: Web/Accessibility/ARIA/forms/consejos_basicos_para_formularios +tags: + - ARIA + - Accesibilidad + - formulários +translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints +--- +

Cuando se implementan formularios utilizando elementos relacionados con los formularios HTML tradicionales, es importante proveer etiquetas para los controles y explicitamente asociar una etiqueta con su control. Cuando un usuario de lector de pantalla navega una página, el lector de pantalla describirá los controles del formulario. Sin una asociación directa entre el control y su etiqueta, el lector de pantalla no tiene forma de saber que etiqueta es la correcta para el control.

+ +

El ejemplo siguiente muestra un formulario sencillo con etiquetas. Note que cada elemento {{ HTMLElement("input") }} tiene un id, y cada elemento {{ HTMLElement("label") }} tiene un atributo for, indicando el id asociado al {{ HTMLElement("input") }}.

+ +
<form>
+  <ul>
+    <li>
+      <input id="vino-1" type="checkbox" value="riesling"/>
+      <label for="vino-1">Berg Rottland Riesling</label>
+    </li>
+    <li>
+      <input id="vino-2" type="checkbox" value="pinot-blanc"/>
+      <label for="vino-2">Pinot Blanc</label>
+    </li>
+    <li>
+      <input id="vino-3" type="checkbox" value="pinot-grigio"/>
+      <label for="vino-3">Pinot Grigio</label>
+    </li>
+    <li>
+      <input id="vino-4" type="checkbox" value="gewurztraminer"/>
+      <label for="vino-4">Gewürztraminer</label>
+    </li>
+  </ul>
+</form>
+
+ +

Etiquetando con ARIA

+ +

El elemento HTML {{ HTMLElement("label") }} es apropiado para elementos relacionados a formularios, pero muchos controles de formulario son implementados como un widget dinámico de JavaScript, utilizando {{ HTMLElement("div") }}s o {{ HTMLElement("span") }}s. WAI-ARIA, la especificación Accessible Rich Internet Applications de W3C's Web Accessibility Initiative, provee el atributo aria-labelledby para estos casos.

+ +

El siguiente ejemplo muestra un grupo de radio buttons implementado usando una lista no ordenada. Note que en la línea 3, el elemento {{ HTMLElement("ul") }} define el atributo aria-labelledby a etiqueta_rg1, el id de elemento {{ HTMLElement("h3") }} en la línea 1, que es la etiqueta para el grupo de controles radio.

+ +
<h3 id="etiqueta_rg1">Opciones para el almuerzo</h3>
+
+<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="etiqueta_rg1">
+  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
+    <img role="presentation" src="radio-unchecked.gif" /> Thai
+  </li>
+  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
+    <img role="presentation" src="radio-unchecked.gif" /> Subway
+  </li>
+  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
+    <img role="presentation" src="radio-checked.gif" /> Radio Maria
+  </li>
+</ul>
+
+ +

Describiendo con ARIA

+ +

Los controles de formulario en ocasiones tienen una descripción asociada con ellos, además de la descripción de la etiqueta. ARIA provee el atributo aria-describedby  para directamente asociar la descripción con el control.

+ +

El ejemplo siguiente muestra un elemento {{ HTMLElement("button") }} que es descrito por una oración de un diferento elemento {{ HTMLElement("div") }}. El atributo aria-describedby en el {{ HTMLElement("button") }} referencia al id del {{ HTMLElement("div") }}.

+ +
<button aria-describedby="descriptionRevert">Revertir</button>
+<div id="descriptionRevert">Revertir deshará cualquier cambio que se haya hecho desde la última que se guardo.</div>
+ +
+

Nota: El atributo aria-describedby es utilizado para otros própositos además de los controles de formularios.

+
+ +

Campos requeridos e inválidos

+ +
+

Nota: Ahora que required esta disponible para más del 97% de usuarios globalmente, no se recomienda que se use al mismo tiempo required y aria-required.

+
+ +

Los desarrolladores Web típicamente usan estrategias de presentación para inidicar campos requeridos o inválidos. Tecnologías asistivas (Assistive technologies - ATs) no necesariamente pueden inferir de la presentación. ARIA provee atributos para indicar que controles de formulario son requeridos o inválidos:

+ + + +

El siguiente ejemplo muestra un formulario sencillo con tres campos. En las líneas 4 y 12, los atributos aria-required son establecidos a true (en adición a los asteriscos junto a las etiquetas), indicando que los campos de nombre y email son requeridos. La segunda parte del ejemplo, es un fragmento de código de JavaScript que valida el formato del email, y establece el atributo aria-invalid del campo email (línea 12 del HTML) de acuerdo al resultado (adicionalmente de cambiar la presentación del elemento).

+ +
<form>
+  <div>
+    <label for="nombre">* Nombre:</label>
+    <input type="text" value="nombre" id="nombre" aria-required="true"/>
+  </div>
+  <div>
+    <label for="telefono">Phone:</label>
+    <input type="text" value="telefono" id="telefono" aria-required="false"/>
+  </div>
+  <div>
+    <label for="email">* E-mail:</label>
+    <input type="text" value="email" id="email" aria-required="true"/>
+  </div>
+</form>
+ +

The script that validates the form entry would look something like this:

+ +
var validar = function () {
+  var elementoEmail = document.getElementById(emailFieldId);
+  var esValido = emailValid(formData.email); // regresa verdadero si es válido, de otro modo devuelve falso.
+
+  elementoEmail.setAttribute("aria-invalid", !esValido);
+  setElementBorderColour(elementoEmail, esValido); // establece el borde de color rojo si el segundo argumento es falso
+};
+
+ +

Ofreciendo Mensajes de Error Útiles

+ +

Lea como usar alertas ARIA para mejorar formularios.

+ +

Para mayor orientación en el uso de ARIA para la accesibilidad de los formularios, vea el documento Prácticas de Autoria WAI-ARIA (WAI-ARIA Authoring Practices).

diff --git a/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html b/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html deleted file mode 100644 index 48f2dba3e3..0000000000 --- a/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Consejos básicos para formularios -slug: Web/Accessibility/ARIA/forms/consejos_basicos_para_formularios -tags: - - ARIA - - Accesibilidad - - formulários -translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints ---- -

Cuando se implementan formularios utilizando elementos relacionados con los formularios HTML tradicionales, es importante proveer etiquetas para los controles y explicitamente asociar una etiqueta con su control. Cuando un usuario de lector de pantalla navega una página, el lector de pantalla describirá los controles del formulario. Sin una asociación directa entre el control y su etiqueta, el lector de pantalla no tiene forma de saber que etiqueta es la correcta para el control.

- -

El ejemplo siguiente muestra un formulario sencillo con etiquetas. Note que cada elemento {{ HTMLElement("input") }} tiene un id, y cada elemento {{ HTMLElement("label") }} tiene un atributo for, indicando el id asociado al {{ HTMLElement("input") }}.

- -
<form>
-  <ul>
-    <li>
-      <input id="vino-1" type="checkbox" value="riesling"/>
-      <label for="vino-1">Berg Rottland Riesling</label>
-    </li>
-    <li>
-      <input id="vino-2" type="checkbox" value="pinot-blanc"/>
-      <label for="vino-2">Pinot Blanc</label>
-    </li>
-    <li>
-      <input id="vino-3" type="checkbox" value="pinot-grigio"/>
-      <label for="vino-3">Pinot Grigio</label>
-    </li>
-    <li>
-      <input id="vino-4" type="checkbox" value="gewurztraminer"/>
-      <label for="vino-4">Gewürztraminer</label>
-    </li>
-  </ul>
-</form>
-
- -

Etiquetando con ARIA

- -

El elemento HTML {{ HTMLElement("label") }} es apropiado para elementos relacionados a formularios, pero muchos controles de formulario son implementados como un widget dinámico de JavaScript, utilizando {{ HTMLElement("div") }}s o {{ HTMLElement("span") }}s. WAI-ARIA, la especificación Accessible Rich Internet Applications de W3C's Web Accessibility Initiative, provee el atributo aria-labelledby para estos casos.

- -

El siguiente ejemplo muestra un grupo de radio buttons implementado usando una lista no ordenada. Note que en la línea 3, el elemento {{ HTMLElement("ul") }} define el atributo aria-labelledby a etiqueta_rg1, el id de elemento {{ HTMLElement("h3") }} en la línea 1, que es la etiqueta para el grupo de controles radio.

- -
<h3 id="etiqueta_rg1">Opciones para el almuerzo</h3>
-
-<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="etiqueta_rg1">
-  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
-    <img role="presentation" src="radio-unchecked.gif" /> Thai
-  </li>
-  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
-    <img role="presentation" src="radio-unchecked.gif" /> Subway
-  </li>
-  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
-    <img role="presentation" src="radio-checked.gif" /> Radio Maria
-  </li>
-</ul>
-
- -

Describiendo con ARIA

- -

Los controles de formulario en ocasiones tienen una descripción asociada con ellos, además de la descripción de la etiqueta. ARIA provee el atributo aria-describedby  para directamente asociar la descripción con el control.

- -

El ejemplo siguiente muestra un elemento {{ HTMLElement("button") }} que es descrito por una oración de un diferento elemento {{ HTMLElement("div") }}. El atributo aria-describedby en el {{ HTMLElement("button") }} referencia al id del {{ HTMLElement("div") }}.

- -
<button aria-describedby="descriptionRevert">Revertir</button>
-<div id="descriptionRevert">Revertir deshará cualquier cambio que se haya hecho desde la última que se guardo.</div>
- -
-

Nota: El atributo aria-describedby es utilizado para otros própositos además de los controles de formularios.

-
- -

Campos requeridos e inválidos

- -
-

Nota: Ahora que required esta disponible para más del 97% de usuarios globalmente, no se recomienda que se use al mismo tiempo required y aria-required.

-
- -

Los desarrolladores Web típicamente usan estrategias de presentación para inidicar campos requeridos o inválidos. Tecnologías asistivas (Assistive technologies - ATs) no necesariamente pueden inferir de la presentación. ARIA provee atributos para indicar que controles de formulario son requeridos o inválidos:

- - - -

El siguiente ejemplo muestra un formulario sencillo con tres campos. En las líneas 4 y 12, los atributos aria-required son establecidos a true (en adición a los asteriscos junto a las etiquetas), indicando que los campos de nombre y email son requeridos. La segunda parte del ejemplo, es un fragmento de código de JavaScript que valida el formato del email, y establece el atributo aria-invalid del campo email (línea 12 del HTML) de acuerdo al resultado (adicionalmente de cambiar la presentación del elemento).

- -
<form>
-  <div>
-    <label for="nombre">* Nombre:</label>
-    <input type="text" value="nombre" id="nombre" aria-required="true"/>
-  </div>
-  <div>
-    <label for="telefono">Phone:</label>
-    <input type="text" value="telefono" id="telefono" aria-required="false"/>
-  </div>
-  <div>
-    <label for="email">* E-mail:</label>
-    <input type="text" value="email" id="email" aria-required="true"/>
-  </div>
-</form>
- -

The script that validates the form entry would look something like this:

- -
var validar = function () {
-  var elementoEmail = document.getElementById(emailFieldId);
-  var esValido = emailValid(formData.email); // regresa verdadero si es válido, de otro modo devuelve falso.
-
-  elementoEmail.setAttribute("aria-invalid", !esValido);
-  setElementBorderColour(elementoEmail, esValido); // establece el borde de color rojo si el segundo argumento es falso
-};
-
- -

Ofreciendo Mensajes de Error Útiles

- -

Lea como usar alertas ARIA para mejorar formularios.

- -

Para mayor orientación en el uso de ARIA para la accesibilidad de los formularios, vea el documento Prácticas de Autoria WAI-ARIA (WAI-ARIA Authoring Practices).

diff --git a/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html b/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html deleted file mode 100644 index 4bc8cafa67..0000000000 --- a/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: >- - Etiquetas complejas: Utilizando ARIA para etiquetas con campos embebidos - dentro de ellos -slug: Web/Accessibility/ARIA/forms/Etiquetas_complejas -tags: - - ARIA - - Accesibilidad - - Firefox - - Guía - - HTML - - NeedsContent - - aria-labelledby - - etiqueta - - label -translation_of: Web/Accessibility/ARIA/forms/Multipart_labels ---- -
-

Problema

- -

Tiene un formulario donde le pregunta a su usuario una pregunta, pero la respuesta es mencionada en la misma pregunta. Un ejemplo clásico que todos conocemos de las configuraciones de nuestro navegador es la opción "Eliminar el historial despues de x días". "Eliminar  el historial despues" está a la izquierda de la caja de texto, x es el número, por ejemplo 21, y la palabra "días" sigue a la caja de texto, formando una oración que es fácil de comprender.

- -

Si se esta usando un lector de pantalla, quizá ha notado que, cuando se van a las configuraciónes de Firefox, el lector dice: ¿"Eliminar el historial después de 21 días"?, seguidamente anuncia que está en una caja de texto y que contiene el número 21. ¿No es super? No necesita navegar alrededor para darse cuenta de la unidad. "Días" podría ser fácilmente "meses" o "años", y en muchos dialogos ordinarios no hay forma de descubrirlo más que navegando utilizando los comandos de revisión del lector de pantalla.

- -

La solución esta en un atributo ARIA llamado aria-labelledby. Su parámetro es una cadena de texto que consiste de los IDs de los elementos HTML que se deseen concatenar dentro de un solo nombre accesible.

- -

Tanto aria-labelledby y aria-describedby se especifican en el elemento de formulario   que debe etiquetarse, por ejemplo un <input>. En ambos casos, la etiqueta for/label para ligar a los controles que puedan existir son anuladas por aria-labelledby. Si en una página se provee aria-labelledby, se debería colocar también una etiqueta para también soportar navegadores antiguos que no tengan aún soperte ARIA. Con Firefox 3, los usuarios ciegos tendrán automáticamente mejor accesibilidad con el nuevo atributo, pero los usuarios de navadores antiguos de esta forma no son dejados en la oscuridad.

- -

Ejemplo:

- apagar computadora después de  minutos - -
<input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" type="checkbox" />
-<span id="etiquetaApagado">Apagar computadora después de </span>
-<input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" id="tiempoApagado" type="text" value="10" />
-<span id="unidadApagado"> minutos</span>
-
- -

Nota para usuarios de JAWS 8

- -

JAWS 8.0 tiene su propia lógica para encontrar etiquetas, causando que siempre sobreescriba el nombre accesible que obtiene la caja de texto de un documento HTML. Con JAWS 8, no se ha encontrado una manera de hacer que acepte la etiqueta del ejemplo anterior. Pero NVDA y  Window-Eyes funcionan correctamente, Orca on Linux tampoco tiene problemas.

- -
TBD (pendiente): añadir más información sobre compatiblidad
- -

¿Puede hacerse sin ARIA?

- -

 Community member Ben Millard has pointed out in a blog post that controls can be embedded in labels as shown in the above example using HTML 4, simply by embedding the input into the label. Thanks for that info, Ben! It is very useful and shows that some techniques that have been available for years escape even the gurus sometimes. This technique works in Firefox; however, it doesn't currently work in many other browsers, including IE. For labels with embedded form controls, using aria-labelledby is still the best approach.

-
diff --git a/files/es/web/accessibility/aria/forms/multipart_labels/index.html b/files/es/web/accessibility/aria/forms/multipart_labels/index.html new file mode 100644 index 0000000000..4bc8cafa67 --- /dev/null +++ b/files/es/web/accessibility/aria/forms/multipart_labels/index.html @@ -0,0 +1,47 @@ +--- +title: >- + Etiquetas complejas: Utilizando ARIA para etiquetas con campos embebidos + dentro de ellos +slug: Web/Accessibility/ARIA/forms/Etiquetas_complejas +tags: + - ARIA + - Accesibilidad + - Firefox + - Guía + - HTML + - NeedsContent + - aria-labelledby + - etiqueta + - label +translation_of: Web/Accessibility/ARIA/forms/Multipart_labels +--- +
+

Problema

+ +

Tiene un formulario donde le pregunta a su usuario una pregunta, pero la respuesta es mencionada en la misma pregunta. Un ejemplo clásico que todos conocemos de las configuraciones de nuestro navegador es la opción "Eliminar el historial despues de x días". "Eliminar  el historial despues" está a la izquierda de la caja de texto, x es el número, por ejemplo 21, y la palabra "días" sigue a la caja de texto, formando una oración que es fácil de comprender.

+ +

Si se esta usando un lector de pantalla, quizá ha notado que, cuando se van a las configuraciónes de Firefox, el lector dice: ¿"Eliminar el historial después de 21 días"?, seguidamente anuncia que está en una caja de texto y que contiene el número 21. ¿No es super? No necesita navegar alrededor para darse cuenta de la unidad. "Días" podría ser fácilmente "meses" o "años", y en muchos dialogos ordinarios no hay forma de descubrirlo más que navegando utilizando los comandos de revisión del lector de pantalla.

+ +

La solución esta en un atributo ARIA llamado aria-labelledby. Su parámetro es una cadena de texto que consiste de los IDs de los elementos HTML que se deseen concatenar dentro de un solo nombre accesible.

+ +

Tanto aria-labelledby y aria-describedby se especifican en el elemento de formulario   que debe etiquetarse, por ejemplo un <input>. En ambos casos, la etiqueta for/label para ligar a los controles que puedan existir son anuladas por aria-labelledby. Si en una página se provee aria-labelledby, se debería colocar también una etiqueta para también soportar navegadores antiguos que no tengan aún soperte ARIA. Con Firefox 3, los usuarios ciegos tendrán automáticamente mejor accesibilidad con el nuevo atributo, pero los usuarios de navadores antiguos de esta forma no son dejados en la oscuridad.

+ +

Ejemplo:

+ apagar computadora después de  minutos + +
<input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" type="checkbox" />
+<span id="etiquetaApagado">Apagar computadora después de </span>
+<input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" id="tiempoApagado" type="text" value="10" />
+<span id="unidadApagado"> minutos</span>
+
+ +

Nota para usuarios de JAWS 8

+ +

JAWS 8.0 tiene su propia lógica para encontrar etiquetas, causando que siempre sobreescriba el nombre accesible que obtiene la caja de texto de un documento HTML. Con JAWS 8, no se ha encontrado una manera de hacer que acepte la etiqueta del ejemplo anterior. Pero NVDA y  Window-Eyes funcionan correctamente, Orca on Linux tampoco tiene problemas.

+ +
TBD (pendiente): añadir más información sobre compatiblidad
+ +

¿Puede hacerse sin ARIA?

+ +

 Community member Ben Millard has pointed out in a blog post that controls can be embedded in labels as shown in the above example using HTML 4, simply by embedding the input into the label. Thanks for that info, Ben! It is very useful and shows that some techniques that have been available for years escape even the gurus sometimes. This technique works in Firefox; however, it doesn't currently work in many other browsers, including IE. For labels with embedded form controls, using aria-labelledby is still the best approach.

+
-- cgit v1.2.3-54-g00ecf