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
|
---
title: Consejos básicos para formularios
slug: Web/Accessibility/ARIA/forms/Basic_form_hints
tags:
- ARIA
- Accesibilidad
- formulários
translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints
original_slug: Web/Accessibility/ARIA/forms/consejos_basicos_para_formularios
---
<p><span class="seoSummary">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.</span> 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.</p>
<p>El ejemplo siguiente muestra un formulario sencillo con etiquetas. Note que cada elemento {{ HTMLElement("input") }} tiene un <code>id</code>, y cada elemento {{ HTMLElement("label") }} tiene un atributo <code>for</code>, indicando el <code>id</code> asociado al {{ HTMLElement("input") }}.</p>
<pre class="brush: html"><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>
</pre>
<h2 id="Labeling_with_ARIA" name="Labeling_with_ARIA">Etiquetando con ARIA</h2>
<p>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. <a href="https://www.w3.org/WAI/standards-guidelines/aria/" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, la especificación <strong>Accessible Rich Internet Applications</strong> de W3C's <a href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a>, provee el atributo <code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby">aria-labelledby</a></code> para estos casos.</p>
<p>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 <code>aria-labelledby</code> a <code>etiqueta_rg1</code>, el <code>id</code> de elemento {{ HTMLElement("h3") }} en la línea 1, que es la etiqueta para el grupo de controles radio.</p>
<pre class="brush: html"><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>
</pre>
<h2 id="Describing_with_ARIA" name="Describing_with_ARIA">Describiendo con ARIA</h2>
<p>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 <code><a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby">aria-describedby</a></code> para directamente asociar la descripción con el control.</p>
<p>El ejemplo siguiente muestra un elemento {{ HTMLElement("button") }} que es descrito por una oración de un diferento elemento {{ HTMLElement("div") }}. El atributo <code>aria-describedby</code> en el {{ HTMLElement("button") }} referencia al <code>id</code> del {{ HTMLElement("div") }}.</p>
<pre class="brush: html"><button aria-describedby="descriptionRevert">Revertir</button>
<div id="descriptionRevert">Revertir deshará cualquier cambio que se haya hecho desde la última que se guardo.</div></pre>
<div class="note">
<p><strong>Nota</strong>: El atributo <code>aria-describedby</code> es utilizado para otros própositos además de los controles de formularios.</p>
</div>
<h2 id="Required_and_invalid_fields" name="Required_and_invalid_fields">Campos requeridos e inválidos</h2>
<div class="note">
<p><strong>Nota</strong>: Ahora que <code>required</code> esta disponible para más del 97% de usuarios globalmente, no se recomienda que se use al mismo tiempo <code>required</code> y <code>aria-required</code>.</p>
</div>
<p>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:</p>
<ul>
<li>La propiedad <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required"><strong>aria-required</strong></a> puede ser aplicada a un elemento de un formulario para indicar a a una AT que es requerida para completar el formulario.</li>
<li>El estado <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid"><strong>aria-invalid</strong></a> puede ser aplicado programáticamente, para indicar al AT que campos de información tienen información incorrecta para que el usuario sepa que ingresaron información inválida.</li>
</ul>
<p>El siguiente ejemplo muestra un formulario sencillo con tres campos. En las líneas 4 y 12, los atributos <code>aria-required</code> 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 <code>aria-invalid</code> del campo email (línea 12 del HTML) de acuerdo al resultado (adicionalmente de cambiar la presentación del elemento).</p>
<pre class="brush: html"><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></pre>
<p>The script that validates the form entry would look something like this:</p>
<pre class="brush: js">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
};
</pre>
<h2 id="Providing_Helpful_Error_Messages" name="Providing_Helpful_Error_Messages">Ofreciendo Mensajes de Error Útiles</h2>
<p>Lea como usar <a href="/en-US/docs/aria/forms/alerts" title="aria/forms/alerts">alertas ARIA para mejorar formularios</a>.</p>
<p>Para mayor orientación en el uso de ARIA para la accesibilidad de los formularios, vea el documento <a href="http://www.w3.org/TR/wai-aria-practices/">Prácticas de Autoria WAI-ARIA (WAI-ARIA Authoring Practices</a>).</p>
|
