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
|
---
title: Teclado (Keyboard)
slug: Web/Accesibilidad/Understanding_WCAG/Teclado
tags:
- Accesibilidad
- teclado
translation_of: Web/Accessibility/Understanding_WCAG/Keyboard
---
<div>Para ser completamente accesible, una página web debe ser operable por alguién utilizando únicamente un teclado para acceder y controlarla. Esto incluye usuarios de lectores de pantalla, pero también puede incluir a quienes tienen dificultades utilizando un dispositivo apuntador como un ratón o una bola de rastreo, o aquellos cuyo ratón no esta funcionando temporalmente, o la gente que simplemente prefiere usar un teclado como entrada siempre que les sea posible.</div>
<h2 id="Los_elementos_enfocables_deben_tener_una_semántica_interactiva">Los elementos enfocables deben tener una semántica interactiva</h2>
<p>Si un elemento puede ser enfocado utilizando un teclado, entonces debería ser interactivo, es decir, el usuario debería ser capaz de hacer algo y producir un cambio de algún tipo (por ejemplo, activar un enlace o cambiar una opción).</p>
<div class="blockIndicator note">
<p><strong>Nota: </strong>Una excepción importante a esta regla es si el elemento tiene aplicado <code>role="document"</code>, <strong>dentro </strong>un contexto interactivo (como un <code>role="application"</code>). En tal caso, enfocar el documento anidado es la única forma de devolver la tecnología de asistencia a un estado de no interactividad (comúnmente llamado "modo navegador").</p>
</div>
<p>La mayoría de los elementos son enfocables por defecto, y se puede hacer que un elemento sea enfocable al añadir el atributo <code>tabindex=0</code>. Sin embargo, sólo se debería añadir <code>tabindex</code> si el elemento también se hace interactivo, por ejemplo, definiendo los eventos de teclado apropiados para los manejadores de eventos.</p>
<h3 id="Ver_también">Ver también</h3>
<ul>
<li>Atributo HTML global <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></li>
<li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
<li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
</ul>
<h2 id="Evitar_usar_el_atributo_tabindex_con_un_valor_mayor_a_cero">Evitar usar el atributo <code>tabindex</code> con un valor mayor a cero</h2>
<p>El atributo <code>tabindex</code> indica que un elemento es enfocable utilizando el teclado. Un valor de cero indica que el elemento es parte del orden de enfoque normal, que está basado en el orden de los elementos en el documento HTML. Un valor positivo pone al elemento adelante de aquellos con el orden normal; elementos con valores positivos son enfocados en el orden del valor de <code>tabindex</code> (1, luego 2, después 3, etc.).</p>
<p>Esto genera una confusión para usuarios que solo usen el teclado cuando el orden del enfoque difiera al orden lógico de la página. Una mejor estrategia es estructurar el documento HTML para que los elementos enfocables estén es un orden lógico, sin la necesidad de reordenarlos con un valor positivo de <code>tabindex</code>.</p>
<h3 id="Ver_también_2">Ver también</h3>
<ul>
<li>Atributo HTML globlal <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html">Entendiento el orden del enfoque</a></li>
<li><a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">No use un tabindex mayor que 0</a></li>
</ul>
<h2 id="Los_elementos_a_los_que_se_les_puede_hacer_click_deben_ser_enfocables_y_deberían_tener_semánticas_interactivas">Los elementos a los que se les puede hacer click deben ser enfocables y deberían tener semánticas interactivas</h2>
<p>Si a un elemento se le puede hacer click con un dispositivo apuntador, como un ratón, entonces también debería enfocable utilizando el teclado, y el usuario debería ser capaz de hacer algo al interactuar con este.</p>
<p>A un elemento se le puede hacer click si tiene in manejador de evento<code> onclick</code> definido. Se puede hacer enfocable al añadir un atributo-valor <code>tabindex=0</code>. Se puede hacer que se opere con un teclado al definir un manejador de evento <code>onkeydown</code>; en la mayoría de los casos, la acción tomada por el manejador de eventos debería ser la misma para los dos tipos de eventos</p>
<h3 id="Ver_también_3">Ver también</h3>
<ul>
<li>El atributo global HTML <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></li>
<li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
<li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
</ul>
<h2 id="Los_elementos_interactivos_deben_ser_capaz_de_ser_activos_utilizando_un_teclado">Los elementos interactivos deben ser capaz de ser activos utilizando un teclado</h2>
<p>Si el usuario puede interactuar con un elemento utilizando el tacto o un dispositivo apuntador, entonces el elemento debería ser también capaz de interactuar con el teclado, Es decir, si hay manejadores de evento definidos para los eventos al tacto y al hacer click, también debería haber manejadores de eventos para el teclado. Los manejadores de eventos para el teclado deberían realizar la misma interacción que sus contrapartes con el tacto y al hacer click.</p>
<h3 id="Ver_también_4">Ver también</h3>
<ul>
<li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">onkeydown</a></li>
<li>Manejador de evento global: <a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">onkeyup</a></li>
</ul>
<h2 id="Los_elementos_interactivos_deben_ser_enfocables">Los elementos interactivos deben ser enfocables</h2>
<p>Si el usuario puede interactuar con un elemento (por ejemplo, usando el tacto o con un dispositivo apuntador) entonces debería ser enfocable utilizando el teclado. Puede hacerse enfocable al añadirle el atributo-valor<code> tabindex=0</code>. Eso añadirá el elemento a la lista de elementos que pueden ser enfocados al presionar la tecla <kbd>Tab</kbd>, en la secuencia en que dichos elementos se encuentran definidos en el documento HTML.</p>
<h3 id="Ver_también_5">Ver también</h3>
<ul>
<li>Atributo global HTML <a href="/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></li>
</ul>
<h2 id="Elementos_enfocables_deben_tener_un_estilo_al_estar_enfocados">Elementos enfocables deben tener un estilo al estar enfocados</h2>
<p>Cualquier elemento que pueda recibir el enfoque desde el teclado, debería tener un estilo visible que indique cuando el elemento esta enfocado. Se puede hacer esto con la pseudo-clase de CSS <code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code>.</p>
<p>Elementos enfocables estándar como enlaces y los campos de entrada reciben un estilo especial por parte del navegador de forma predeterminada, por lo que podría no ser necesario especificar un estilo de enfoque para éstos, a menos que se quiera que el estilo de enfoque sea más distintivo.</p>
<p>Si se crean componentes enfocables, se debe estar seguro de que también se defina el estilo de enfoque para éstos.</p>
<p>If you create your own focusable components, be sure that you also define focus styling for them.</p>
<h3 id="Ver_también_6">Ver también</h3>
<ul>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C15.html">Utilizando CSS para cambiar la presentación de un componente UI cuando reciba el enfoque</a></li>
</ul>
|
