Accesibilidad del diseño
La accesibilidad es un tema relativamente largo. No puede abarcarse por completo en un solo módulo de Learn. Sin embargo, hay algunos principios básicos que recomendamos implementar en cada página que cree. Diseñar una página accesible desde el principio siempre es más fácil que hacer que una página que ya exista sea accesible.
Uso del código HTML de la forma en que se diseñó
HTML proporciona muchos elementos que puede usar para crear una página, incluidos botones, vínculos y controles de formulario. Cada uno de esos elementos tiene un conjunto de funcionalidades integradas para, por ejemplo, que se puede hacer clic en ellos, que tengan un vínculo o que acepten el foco.
Nota:
Foco es un término de desarrollo web que significa que un control puede aceptar entradas de un teclado. Un botón puede aceptar el foco, lo que permite a alguien activarlo o "hacer clic" en él seleccionando la barra espaciadora.
Con CSS y JavaScript, es posible que cualquier elemento se parezca a cualquier tipo de control. Por ejemplo, puede usar <span> para crear un elemento<button>, y <b> puede convertirse en <a>. Aunque esta funcionalidad proporciona algunos accesos directos para aplicar estilos o diseñar la página, se quita la funcionalidad integrada. Herramientas como los lectores de pantalla no podrán entender que <span> se usa como <a>. Alguien que navega con un teclado no podrá establecer el foco en un elemento <div> que se haya programado para simular un elemento <button>.
Otro elemento HTML que a menudo se omite son los encabezados (de <h1> a <h6>). Desde un punto de vista visual, las etiquetas de encabezado van de mayor a menor tamaño de texto. Esta convención lleva a muchos desarrolladores a renunciar a los elementos de encabezado y, en su lugar, a aplicar estilo en <div> o en otros elementos genéricos.
Desafortunadamente, los elementos genéricos con estilos solo transmiten información visual en lugar de estructural. Los usuarios de lectores de pantalla dependen en gran medida de los encabezados para buscar información y navegar por una página. La creación de un contenido de encabezado descriptivo y el uso de etiquetas de encabezado semánticas son importantes para crear un sitio fácilmente navegable para los usuarios de lectores de pantalla.
Como procedimiento recomendado, siempre debe usar el código HTML adecuado al crear controles en una página. Si desea un hipervínculo, use <a> o <button> para un botón.
Uso de buenas indicaciones visuales
Los desarrolladores suelen pensar que los lectores de pantalla son la única herramienta de accesibilidad. Sin embargo, es posible que los usuarios usen muchas otras herramientas, o que no usen ninguna. Los usuarios que usan el explorador dependerán de determinadas indicaciones visuales para comprender cómo interactuar con la página.
Una de las características excelentes de CSS es que proporciona un control completo sobre cómo mostrar una página, incluida la eliminación de determinados elementos para mostrar. Por ejemplo, puede quitar el contorno de un cuadro de texto o quitar el subrayado de un hipervínculo. Desafortunadamente, quitar esos tipos de indicaciones puede hacer más difícil que alguien que depende de ellas reconozca el tipo de control.
Tenga en cuenta el teclado
Algunos usuarios no pueden usar un mouse o panel táctil. En su lugar, estos usuarios dependen de las interacciones del teclado para desplazarse con la tecla de tabulación de un elemento al siguiente. Es importante que las páginas presenten el contenido en un orden lógico para que un usuario de teclado pueda acceder a cada elemento interactivo a medida que se desplaza hacia abajo.
Cuando un usuario se desplaza por una página mediante tabulación, el foco se mueve de un control al siguiente en función del orden en el que se enumeran los controles en el origen HTML. Los controles de la página deberían aparecer enumerados en el origen HTML en el orden en el que espera que se navegue por la página, y a la vez usar CSS para mostrar la página visualmente a los usuarios.
Por ejemplo, imagínese que crea un formulario con dos columnas. Recomendamos tener en cuenta cuál es el flujo natural para alguien que rellena el formulario y, a continuación, enumerar los controles en ese orden. A continuación, puede usar CSS para crear las columnas y mostrar los controles en sus ubicaciones adecuadas.
La navegación mediante teclado se basa en gran medida en HTML semántico. Ciertos controles (como botones) aceptan el foco, al contrario que los elementos div. Si va a volver a crear controles que ya existen en HTML, está dificultando que alguien use la página con un teclado.
Importante
La navegación con el teclado debe probarse manualmente, y debe hacerlo en todas las páginas que cree. WebAIM tiene más información sobre las estrategias de navegación con el teclado.