Consejos de accesibilidad de teclado usando HTML y CSS

Hacer que su sitio web sea accesible para usuarios de solo teclado es una parte importante de la imagen de accesibilidad más grande. Aquí hay algunos consejos de accesibilidad de teclado que puede implementar rápidamente utilizando HTML básico y CSS.

A11y desde el principio

Estos consejos son parte de Accesibilidad web: la Guía de aprendizaje completa, donde hemos recopilado una serie de tutoriales, artículos, cursos y libros electrónicos para ayudarlo a comprender la accesibilidad web desde el principio..

¿Qué es la accesibilidad del teclado??

Un teclado puede ser el medio principal para que algunos usuarios naveguen por sitios web. Hoy en día, cuando la mayoría de las interfaces web están diseñadas teniendo en cuenta los cursores del mouse y la interacción táctil, se descuida la navegación con el teclado. La accesibilidad del teclado es la práctica de asegurarse de que los usuarios puedan navegar de manera eficiente y sin obstáculos utilizando solo su teclado.

Quién podría necesitar accesibilidad del teclado?

Estos son los principales grupos objetivo de accesibilidad del teclado:

• Usuarios con discapacidades motoras que tienen dificultades para usar un mouse, usar un dispositivo táctil o hacer clic en cosas pequeñas.
  
• Los usuarios ciegos o con discapacidades visuales a menudo prefieren navegar por sitios web con teclados Braille específicos.
  
• Los amputados o aquellos con amputación congénita (nacimiento sin una extremidad o extremidades, específicamente las manos en este caso) a menudo usan un hardware especial que imita la funcionalidad del teclado.
  
• Cualquiera que simplemente no tenga acceso a un mouse o touchpad que funcione.

1. Pruebe su sitio para la accesibilidad del teclado

El objetivo más importante de la accesibilidad del teclado es hacer que cada elemento interactivo, como enlaces y controles de formulario, esté disponible con el Lengüeta llave. Así es como los usuarios de solo teclado navegan a través de una página web. En realidad, probar la accesibilidad de su sitio web con el teclado es bastante sencillo: simplemente presione la tecla Lengüeta clave y navegue desde la parte superior de la página hasta la parte inferior, resaltando los elementos activos a medida que avanza.

Navegando enlaces rápidos en el pie de página de Tuts + con el Lengüeta llave

Observe lo fácil o difícil que es llegar al contenido principal, haga clic en un elemento del menú, complete un formulario, opere un control deslizante o siga su posición actual en la página. También puede probar la dirección inversa usando el Mayús + Tabulador atajo de teclado.

2. Crear Notable :atención Estilos

CSS tiene un :atención pseudo-clase que se activa cuando un usuario hace clic o toca un elemento, o lo selecciona con la Lengüeta llave. los :atención El estado solo se aplica a los elementos enfocados, a saber , , , </code>, <code><select></code>, y <code><area></code>.</p><p>Cada navegador viene con su propio valor predeterminado <code>:atención</code> estilos: generalmente un contorno negro punteado alrededor del elemento, o un brillo borroso, sin embargo, muchos diseñadores no lo encuentran a su gusto y lo eliminarán por completo. Este es realmente el error número uno que arruina la accesibilidad del teclado en las páginas web. Si no le gustan los estilos predeterminados, use algo que coincida con el diseño de su sitio web. </p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css.jpg">Predeterminado: los estilos de enfoque en el navegador Google Chrome<p>Elija un estilo que sea fácilmente perceptible pero que no se base únicamente en los colores. Aquí hay un posible ejemplo que puede funcionar bien para usuarios de solo teclado:</p><pre>: foco esquema: 3px rojo sólido; </pre><h2> 3. Use designadores que no sean de color para los enlaces</h2><p>Los hipervínculos no deben distinguirse solo por el color. Este principio suele mencionarse en relación con la accesibilidad visual, ya que las personas con baja visión encuentran difíciles las diferencias entre ciertos colores. Sin embargo, los enlaces claramente visibles también son importantes para la accesibilidad del teclado. Los usuarios que solo utilizan el teclado deben poder ver los enlaces lo más rápido posible. Esto les ayuda a escanear la página y descubrir cómo navegar a la parte que les interesa..</p><p>similar a <code>:atención</code> En los estilos, los hipervínculos también vienen con un estilo de navegador predeterminado: subrayados azules en la mayoría de los casos. Sin embargo, los diseñadores con frecuencia eliminan el subrayado y solo usan colores para indicar la presencia de un enlace. Si elimina el subrayado predeterminado, siempre use otro designador que no sea de color que coincida con el diseño de su sitio web, como bordes, iconos o contornos.</p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css.png">Borrar enlaces en gov.uk: (1) hipervínculo (2) enfocado (3) visitado<p>Puedes usar el <code>título</code> atributo para describir el contenido de un enlace, pero solo se hace visible cuando alguien coloca el enlace. Los usuarios que solo utilizan el teclado no tienen acceso a eventos de desplazamiento, por lo que nunca coloque información crucial en el <code>título</code> atributo. Tampoco cuenta como un designador sin color. Por ejemplo, nunca hagas esto:</p><pre> haga clic aquí </pre><p>En su lugar, haga esto:</p><pre> Información importante </pre><p>WCAG 2.0 también advierte sobre los problemas de accesibilidad del atributo del título. O lo usas con cuidado o no lo uses en absoluto.</p><h2> 4. Usar elementos de control nativos</h2><p>Los formularios son elementos interactivos, por lo que deben ser accesibles a través del teclado. Los usuarios que solo utilizan el teclado deben poder completar formularios, presionar botones, usar controles deslizantes de rango, seleccionar opciones y operar los controles con facilidad. Si tiene formularios en su sitio web, debe probarlos uno por uno, usando el <strong>Lengüeta</strong> llave. Piense en los formularios de registro, formularios de boletines, formularios de inicio de sesión, formularios de comentarios, carritos de la compra, etc..</p><p>La mejor manera de crear formularios accesibles es mediante el uso de elementos de control nativos siempre que sea posible. Los elementos de control nativos vienen con accesibilidad de teclado incorporada, lo que significa que se pueden enfocar y responden a los eventos de pulsación de tecla de forma predeterminada. Son los siguientes:</p><ul> <li><code><button></code></li> <li><code><input></code></li> <li><code><textarea></code></li> <li><code><select></code></li> <li><code><option></code></li> </ul><p>Por ejemplo, puede crear un control deslizante de rango accesible desde el teclado con el siguiente HTML:</p><pre><input type="range" min="0" max="10"></pre><p>Los usuarios de teclado primero pueden enfocarlo con el <strong>Lengüeta</strong> tecla, luego mueva el control deslizante hacia arriba y hacia abajo con <strong>Espacio</strong>. </p><p>Si necesita usar una etiqueta HTML no enfocable para un elemento interactivo por alguna razón, puede hacerlo enfocable con la <code>tabindex = "0"</code> atributo. Por ejemplo, aquí hay una <code><div></code> convertido en un botón enfocable:</p><pre><div role="button" tabindex="0"> Haz click en mi </div></pre><p>los <code>role = "button"</code> atributo en el fragmento anterior es un papel de hito ARIA. Aunque los usuarios que solo usan el teclado no lo necesitan, es indispensable para los usuarios de lectores de pantalla y accesibilidad visual.</p><p>Incluso si el botón no nativo se ha enfocado, sigue siendo inferior a su contraparte nativa en términos de accesibilidad del teclado. Comprenderá esto inmediatamente cuando intente agregar un controlador de eventos al botón. Así es como se ve un detector de eventos de clic con el nativo <code><button></code> elemento:</p><pre><button onclick="alert('Hi, I am a native button!')"> Haz click en mi </button></pre><p>Y, aquí está el equivalente usando el botón div:</p><pre><div role="button" tabindex="0" onclick="alert('Hi, I am a non-native button!')"> Haz click en mi </div></pre> <iframe src="https://codepen.io/tutsplus/embed/jeYmpE/?height=300&theme-id=12451&default-tab=result&embed-version=2" frameborder="no" allowfullscreen="true" scrolling="no"></iframe> <p>Si hace clic en los botones con el mouse o el panel táctil, puede ver ambos mensajes de alerta. Sin embargo, si navega a cada botón usando <strong>Lengüeta</strong> clave y golpe <strong>Entrar</strong> para procesarlas, solo verá el primer mensaje, perteneciente al botón nativo. Para hacer que el botón no nativo procese la entrada del teclado, también debe definir un controlador de eventos de pulsación de tecla por separado:</p><pre><div role="button" tabindex="0" onclick="alert('Hi, I am a non-native button!')" onkeydown="alert('Hi, I am a non-native button!')"> Haz click en mi </div></pre><p>Ahora, cuando los usuarios del teclado golpean <code>Entrar</code>, También ven el mensaje que pertenece al botón no nativo. Como puede ver, es mucho más fácil y rápido usar la versión nativa. Entonces, a menos que tenga una buena razón para no usarlos, use siempre elementos de control nativos.</p><h2> 5. Agregue un enlace "Saltar al contenido principal"</h2><p>Añadiendo un <strong>Saltar al contenido principal</strong> o <strong>Saltar navegación</strong> El enlace a sus páginas web ayuda enormemente a los usuarios que solo utilizan el teclado. En la mayoría de los casos, estos usuarios no querrán saltar a través de todos los enlaces de navegación antes de comenzar a leer el contenido. Esto es especialmente cierto cuando tienen más de una página en su sitio. Imagínese, sin un enlace de navegación de salto, tienen que pasar por los mismos enlaces de navegación en la página de inicio <em>cada vez</em>. No parece una actividad particularmente entretenida..</p><p>Para crear un enlace de navegación de salto funcional, debe vincularlo al contenido principal usando la <code>carné de identidad</code> y <code>href</code> Atributos de HTML de la siguiente manera:</p><pre>Saltar al contenido principal <nav>Navegación</nav> <main tabindex="-1">Contenido principal</main></pre><p>También es necesario agregar el <code>tabindex = "- 1"</code> Atribuir al contenedor del contenido principal. Este es el mismo índice de índice que hemos utilizado anteriormente para hacer que el botón no nativo sea enfocable. los <code>tabindex</code> atributo se utiliza para modificar el orden de navegación predeterminado. Con un valor de <code>0</code>, hace que los elementos no enfocables sean enfocados. Con un valor de <code>-1</code>, también hace que los elementos se puedan enfocar, pero se vuelven inaccesibles con la navegación por teclado predeterminada. Ciertos navegadores, como Chrome e IE, requieren la presencia de <code>tabindex = "- 1"</code> en el destino del enlace de navegación de omisión, así que nunca lo omita.</p><h3>Revele el enlace de omisión solo para usuarios de teclado</h3><p>Puede usar CSS para hacer que el enlace de navegación de salto sea visible solo para usuarios de teclado. En su estado predeterminado, oculte el enlace a los usuarios normales colocándolo fuera de la ventana gráfica. Luego, muéstrelo a los usuarios del teclado creando estilos separados para el estado de enfoque que se activa cuando el usuario pulsa el botón <strong>Lengüeta</strong> llave. </p><p>Puede ver este efecto en acción en sitios como webaim.org, www.w3.org y (como es habitual) www.gov.uk:</p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css_2.jpg">¿Alguna vez has visto este enlace antes??<p>El siguiente CSS es una versión simplificada del código de navegación de omisión del Manual de Accesibilidad de TI de la Universidad Estatal de Carolina del Norte:</p><pre>a.skip-main izquierda: -999px; posición: absoluta; arriba: auto; ancho: 1px; altura: 1px; desbordamiento: oculto; índice z: -999; a.skip-main: focus left: auto; arriba: auto; ancho: 30%; altura: auto; desbordamiento: auto; margen: 0 35%; relleno: 5px; tamaño de fuente: 20px; esquema: 3px rojo sólido; text-align: center; índice z: 999; </pre><p>Cuando el usuario golpea el <strong>Lengüeta</strong> clave, la <code>.omitir</code> El elemento recibe su estado de enfoque y el enlace de navegación de omisión aparece en la pantalla. </p><p>Puede probar rápidamente cómo funciona si hace clic en la parte superior de la demostración a continuación y pulsa el botón <strong>Lengüeta</strong> llave. Puede resultarle más fácil abrir la demostración a continuación en la vista de página completa..</p> <iframe src="https://codepen.io/tutsplus/embed/VEyboG/?height=400&theme-id=12451&default-tab=result&embed-version=2" frameborder="no" allowfullscreen="true" scrolling="no"></iframe> <h2>Próximos pasos</h2><p>En este artículo, compartí algunos consejos básicos de accesibilidad con el teclado que puedes implementar usando HMTL y CSS. También hay otras cosas más avanzadas que podría hacer para la accesibilidad del teclado. Por ejemplo, usted podría:</p><ul> <li>Agrega atajos de teclado personalizados a tu aplicación web,</li> <li>crear widgets de JavaScript navegable por el teclado,</li> <li>o construir controles deslizantes accesibles desde el teclado.</li> </ul><p>Además de estos consejos, evite usar CAPTCHA siempre que sea posible, ya que tienen graves problemas de accesibilidad, tanto para lectores de pantalla como para usuarios que solo utilizan el teclado. Si aún necesita usarlos, proporcione más de dos maneras de resolverlos, de lo contrario, los usuarios con necesidades de accesibilidad tendrán dificultades para procesar sus formularios. Háganos saber si tiene sus propios consejos de accesibilidad de teclado.!</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/webdesign">Diseño web</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/computers/keyboard-maestro-i-introduction.html">Teclado Maestro I Introducción</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_12/keyboard-maestro-i-introduction_7.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/code/key-value-observing-with-facebooks-kvocontroller.html">Observación de valor-clave con el controlador KVOC de Facebook</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_14/key-value-observing-with-facebooks-kvocontroller.png');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">es.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Información interesante y consejos útiles sobre programación. Desarrollo de sitios web, diseño web y desarrollo web. Tutoriales de Photoshop. Creación de juegos de ordenador y aplicaciones móviles. Conviértete en un programador profesional desde cero. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Buscar..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>