1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
---
title: Alertas
slug: Web/Accessibility/ARIA/forms/alerts
tags:
- ARIA
- Accesibilidad
- Forms
- Web
- formulários
translation_of: Web/Accessibility/ARIA/forms/alerts
original_slug: Web/Accessibility/ARIA/forms/alertas
---
<h2 id="El_problema">El problema</h2>
<p>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.</p>
<h2 id="El_formulario">El formulario</h2>
<p>Primero, lee acerca de la <code><a href="/es/docs/Web/Accessibility/ARIA/forms/Basic_form_hints#Required_and_invalid_fields" title="/es/Web/Accessibility/ARIA/forms/Basic_form_hints">técnica requerida por aria</a></code> si no lo has hecho, ya que esta técnica amplía a esa.</p>
<p>Aquí hay un sencillo formulario:</p>
<pre class="brush: html notranslate"> <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>
</pre>
<h2 id="Verificación_de_validez_y_notificación_al_usuario"><span class="mw-headline" id="Checking_for_validity_and_notifying_the_user">Verificación de validez y notificación al usuario</span></h2>
<p>La validación de formularios consta de varios pasos:</p>
<ol>
<li>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.</li>
<li>Si no se cumplen los criterios anteriores, el atributo <code>aria-invalid</code> del campo recibirá un valor de "<code>true</code>".</li>
<li>Si no se cumplieron los criterios, se notificará al usuario mediante una alerta. En lugar de usar la función "<code>alert</code>" de JavaScript, usaremos un <em>widget WAI-ARIA</em> 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 "<code>onblur</code>" en la función "<code>alert</code>" predeterminada de JavaScript).</li>
</ol>
<p>A continuación se muestra un código JavaScript de ejemplo que se podría insertar encima de la etiqueta de cierre "<code>head</code>":</p>
<pre class="brush: js notranslate"> <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>
</pre>
<h2 id="La_función_checkValidity"><span class="mw-headline" id="The_checkValidity_function">La función <code>checkValidity</code></span></h2>
<p>El método principal en JavaScript utilizado para la validación de formularios es la función <code>checkValidity</code>. Este método toma tres parámetros: el ID de el <code>input</code> 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.</p>
<p>Para ver si es válido, la función comprueba si el valor <code>indexOf</code> del <code>input</code> es algo mayor que <code>-1</code>. Se devuelve un valor de <code>-1</code> o menos si el índice del término de búsqueda no se pudo encontrar dentro del valor.</p>
<p>Si no es válido, la función hace dos cosas:</p>
<ol>
<li>Establece el atributo <code>aria-invalid</code> del elemento en "<code>true</code>", lo que indicará a los lectores de pantalla que hay contenido no válido aquí.</li>
<li>Llamará a la función <code>addAlert</code> para agregar la alerta con el mensaje de error proporcionado.</li>
</ol>
<p>Si se encuentra el término de búsqueda, el atributo <code>aria-invalid</code> se restablece a “<code>false</code>”. Además, se eliminan las alertas sobrantes.</p>
<h2 id="La_función_addAlert"><span class="mw-headline" id="The_addAlert_function">La función <code>addAlert</code></span></h2>
<p>Esta función primero elimina las alertas antiguas. La función es simple: busca un elemento con id "<code>alert</code>" y, si lo encuentra, lo elimina del <a href="/es/docs/Mozilla/Tech/XUL/Tutorial/Document_Object_Model">modelo de objetos del documento</a>.</p>
<p>A continuación, la función crea un elemento <code>div</code> para contener el texto de alerta. Obtiene un ID de "<code>alert</code>". 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 <a class="external text" href="http://www.w3.org/TR/xhtml-role/" title="Módulo de atributo de rol XHTML">Módulo de atributos de rol XHTML</a> que simplemente se transfirió a HTML para simplificar.</p>
<p>El texto se agrega al elemento <code>div</code> y el elemento <code>div</code> se agrega al documento.</p>
<p>En el momento en que esto suceda, Firefox lanzará un evento "<code>alert</code>" a las tecnologías de asistencia cuando aparezca este <code>div</code>. 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.</p>
<h2 id="Modificar_el_evento_onblur"><span class="mw-headline" id="Adding_the_magic_to_the_.E2.80.9Conblur.E2.80.9D_event">Modificar el evento "<code>onblur</code>"</span></h2>
<p>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:</p>
<pre class="brush: html notranslate"> <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');"/>
</pre>
<p><strong>Probar el ejemplo</strong></p>
<p>Si usas Firefox 3 y un lector de pantalla compatible actualmente, intenta lo siguiente:</p>
<ol>
<li>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 <code>Mayús-Tab</code> y corregir el error.</li>
<li>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.</li>
</ol>
<p>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.</p>
<h2 id="Algunas_preguntas_que_podrías_tener"><span class="mw-headline" id="A_few_questions_that_you_might_have">Algunas preguntas que podrías tener</span></h2>
<dl>
<dt>P. ¿Por qué pusiste “<code>(obligatorio)</code>” en el texto de la etiqueta y el atributo <code>aria-required</code> en algunas de las entradas?</dt>
<dd>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.</dd>
<dt>P. ¿Por qué no vuelve a enfocarse en el campo no válido automáticamente?</dt>
<dd>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. </dd>
</dl>
<div class="warning">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.</div>
|
