Spanish (Español) translation by Javier Salesi (you can also view the original English article)
En un artículo previo hablamos sobre por qué importa la accesibilidad, en términos de negocio, SEO, usabilidad, e incluso legalmente. En éste artículo explicaré cómo crear temas de WordPress accesibles, aunque las mismas ideas se aplican a cualquier plataforma.
Una visión general de Accesibilidad y Diseño Web Inclusivo
No hay manera que podamos cubrir todas las mejores prácticas en éste artículo, pero las bases siguen siendo verdaderas para todo sitio web. Utilizaré un par de recursos como la columna vertebral de éste artículo.
- La fantástica lista de comprobación de Diseño web incluslivo de Heydon Pickering en Github.
- Las pautas requeridas para crear temas listos para accesibilidad del equipo de calificación de Temas de WordPress.
- Lectura recomendada: creando temas de WordPress accesibles.
Cubriremos los siguientes consejos:
- Usar HTML Semántico
- Esctructurar Con Elementos de Seccionado HTML5
- Especificar Bien la Jerarquía de los Encabezados
- Navegar por la Página Usando Tecnología Asistiva
- Considerar la Navegación por Teclado y Estilos de Focus
- Verificar el Contraste de Color
- Recordar los Enlaces para Saltar al Contenido
- Evitar Texto de Enlace Reiterativo
1. Usar HTML Semántico
No puedo enfatizar lo suficiente la importancia de HTML semántico: Es la base de tu sitio web accesible. Léonie Watson explica perfectamente lo que significa semántico en su artículo comprendiendo la semántica:
"HTML semántico es por lo tanto importante en dos maneras: Tenemos una comprensión consistente de estructura de contenido y comportamiento nativo, y tenemos una comprensión común del significado y propósito del contenido. Lo mejor de todo, es que tenemos esas cosas gratuitamente cuando usamos HTML como era la intención.
Cuando estamos escribiendo elementos HTML no deberíamos únicamente pensar en cómo están diseñados, o como se ven. Deberíamos también pensar en cómo funcionan...
- ..con el teclado.
- ...cuando hacemos click o cuando usamos el tabulador.
- ...con la API de accesibilidad y teconologías asistivas (AT) como
- lectores de pantalla
- software magnificador de pantalla
- software de reconocimiento de voz
- apuntadores - ...con diferentes navegadores y dispositivos.
Un ejemplo muy común es el uso de <a>, <button>, y <div>. Utilizaremos éstos para ilustrar mi concepto.
Cuando Utilizar <a>
Usa <a> (etiqueta anchor) cuando estás creando un enlace a otra página, archivo, correo electrónico, o un achor (ancla) en la misma página.
- Buen ejemplo:
<a href="https://developer.mozilla.org/">Mozilla</a> - Buen ejemplo:
<a href="#back-to-top">Back to top</a>. - Mal ejemplo:
<a href="#" class="menu-toggle-button">Menu</a>. Ésto debería ser<button>
Nota: tras bambalinas la API de accesibilidad proporciona información a las tecnologías asistivas sobre el nombre el papel y el estado de cada elemento.
Aquí está un enlace de ejemplo, Creando una Web Inclusiva: Por qué Importa la Accesibilidad, con cómo lo ve el Espectador de Accesibilidad, con cómo un Espectador de Accesibilidad lo ve:
En la práctica ésto significa que los lectores de pantalla y otras Tecnologías Asistivas reconocen el anchor y pueden anunciar el papel y el nombre del elemento.Por ejemplo: "Enlace, Creando una Web Inclusiva: Por Qué Importa la Accesibilidad".
También pueden navegar por la página usando únicamente los enlaces:
Cuando Utilizar <button>
Usa <button> cuando necesitas desencadenar una acción, como abrir un menú. Éste video de Rob Dodson explica por qué ésta situación solicita <button> en lugar de <div>.
Para resumir, el elemento <button> tiene los siguientes beneficios ya creados:
- Foco de teclado nativo.
- Papel nativo de
button, que ayuda a los usuarios de Tecnologías Asistivas (AT) a entender que es un elemento interactivo. - Puede ser desencadenado con Enter o la Barra Espaciadora sin agregar nada de JavaScript.
- Puede usar el atributo
disable, para cuando el button ya no pueda ser interactivo.
Consejo: En Chrome 64 hay una sección de Accesibilidad que te muestra una posición del elemento seleccionado en el árbol de accesibilidad, así como sus atributos ARIA y las propiedades registradas.
Cuándo Utilizar <div>
Usa <div> cuando necesitas un elemento para fines de aplicación de estilo. Naturalmente, primero verifica si hay cualquier elemento HTML nativo que fuera mejor. Por ejemplo <article>, <nav>, <p>,<blockquote>, <figure>, <table>, o <ul>.
Lee más sobre Links (Enlaces), Buttons (Botones), Submits (Envío) y Divs por Adrian Roselli.
En la siguiente sección, veremos los elementos de seccionado de HTML5 y cómo se ve el marcado semántico.
2. Estructura Con Elementos de Seccionado de HTML5
Muchos elementos HTML5 definen los landmark roles o puntos de navegación de ARIA por defecto. Éstos identifican las secciones de una página y ayudan a los usuarios de Tecnologías Asistivas a navegar por cada una. Por ésta razón todo el contenido debería estar dentro de elementos semánticamente significativos para que puedan ser encontrados por el usuario.
Éstos son los elementos landmark más comunes:
| elemento HTML5 | Landmark role (punto de navegación) predeterminado |
|---|---|
<header> | banner |
<nav> | navegación |
<main> | principal |
<aside> | complementario |
<footer> | información de contenido |
Nota: combinaciones de navegadores más antiguos y Tecnologías Asistivas no necesariamente reconocen elementos HTML5 y los esquematiza con los landmark roles correctos. En éstos casos puedes agregar roles manualmente como éste: <header role="banner">.
Para más información verifica el marcado de ejemplo en la página del manual de WordPress sobre landmarks de ARIA y la página de ejemplos landmark de ARIA.
3. Especifica Bien la Jerarquia de los Encabezados
¿En verdad has leído un artículo largo sin encabezados? ¿Te pareció difícil de leer? Yo ciertamente tuve dificultad. Los encabezados ayudan a los usuarios a recorrer rápidamente y a entender el contenido de la página. Al mismo tiempo los encabezados dan a los usuarios de Tecnologías Asistivas una manera de navegar por el contenido y definen la estructura de la página.
Los enfoques varían, pero mi recomendación es la misma que la que se mencionó en la estructura de encabezados en el desarrollo de temas:
- Usar únicamente una H1 por página. Para la mayoría de los temas ésta sería el título del post, la página o el archivo.
- Usar H2 hasta H6 para dividir secciones de la página, como áreas de widgets.
- No te saltes niveles de encabezado porque ello puede confundir cuando se navega por el contenido utilizando encabezados. Ésto significa que después de H2, sigue H3, no H4.
Nota: los usuarios no pueden romper la jerarquía de los encabezados cuando ingresan su propio contenido al usar H1 o saltándose niveles de encabezado. Aconséjalos que se dirijan a nuestra documentación sobre cómo utilizar los encabezados en el contenido.
Uso éstas herramientas para verificar la estructura de encabezados:
- Barra de Herramientas de Esquematización de Encabezados para Chrome
- Barra de Herramientas de Esquematización de Encabezados para Firefox
4. Navegar por la Página Utilizando Tecnología Asistiva
Hasta ahora hemos mencionado varias maneras de navegar por la página: usando enlaces, encabezados, o landmarks. Y lo misma funciona para otros elementos de HTML semántico como listas, tablas o imágenes.
Los usuarios de tecnología asistiva también pueden navegar utilizando éstos elementos. Aquí está un breve video que demuestra el uso del lector de pantalla Voiceover, algo con lo que definitivamente deberías probar tu tema:
Lee más sobre utilizar Voiceover o lee éste similar artículo utilizando NVDA.
5. Considera Navegación por Teclado y Aplicar Estilos a Focus
Regla número uno: ¡ no elimines los estilos de outline usando : focus { outline: none; } !
Hay muchos usuarios que son dependientes del teclado y no pueden usar un mouse. Para usuarios del teclado es crucial tener estilos de focus visibles en todos los elementos interactivos: enlaces, campos de formulario, botones, etc. En otras palabras, los usuarios deben poder ver qué elemento interactivo tiene actualmente el foco en el teclado cuando se navega por la página. Los controles más comunes del teclado para la navegación son Tab, Mayúsculas + Tab, Enter, Barra Espaciadora y las teclas de las flechas.
Nota: los estilos predefinidos de focus del navegador no siempre son la solución más accesible- estilos outline personalizados a veces son mejores.
También percátate: A veces los estilos de outline no son el mejor enfoque de diseño porque outline no respeta el border radius de un elemento. Una solución es utilizar mejor box-shadow, pero... estilos de focus deberían funcionar en todos los escenarios, como en el modo de Contraste Alto de Windows que remueve los estilos de box-shadow.
Aquí está un buen truco que utiliza un outline transparente para el modo de Contraste Alto de Windows.
1 |
:focus { |
2 |
box-shadow: inset 0 0 0 1px #6c7781; |
3 |
|
4 |
/* Only visible in Windows High Contrast mode */
|
5 |
outline: 2px solid transparent; |
6 |
|
7 |
}
|
Puedes leer más información sobre ésto en Gutenberg PR 5138 y Trac ticket 41286.
Por otro lado la navegación por el teclado no únicamente es sobre estilos de focus. Todas las acciones deben ser posibles también con el teclado.
Un ejemplo común es cuando un usuario no puede navegar hacia elementos de submenú utilizando ya sea la tecla tabulador o al usar las teclas de las flechas. Los temas del inicializador Underscores tiene una solución JavaScript para ésto: cada vez que un enlace del menú está enfocado o desenfocado, establecen o eliminan la clase .focus en el enlace del menú. Ver la función toggleFocus.
Otro ejemplo es cuando la navegación actúa similarmente a un diálogo modal, como una navegación a pantalla completa. En éstos casos es importante establecer el focus correctamente.
6. Verificar el Contraste de Color
Aún veo muchos diseños con bajo contraste de color. Ésto puede ser imposible para usuarios daltónicos, usuarios con visión deficiente o usuarios con monitores de baja calidad para leer el contenido.
El contraste entre los colores de fondo y de primer plano deberían tener una relación de contraste de
- 4.5:1 para texto normal.
- 3:1 para texto grande (24 px equivalente o 19px equivalente y bold).
Hay muchas herramientas para verificar el contraste de color, como contrast ratio checker.
Encontrarás más información en artículos como éste sobre el uso de los colores y el contraste de color como requisito para temas listos para la accesibilidad.
7. Recuerda los Enlaces para Saltar al Contenido
Un enlace "saltar al contenido" habilita una manera de saltar todos los elementos extra antes del contenido principal, y dirigirse directo al contenido. Podrías estar preguntándote ¿por qué el landmark <main> no es suficiente ya que los usuarios de Tecnologías Asistivas pueden navegar al contenido principal utilizando landmarks? De hecho, el principal grupo objetivo del enlace del salto son los usuarios del teclado, que probablemente no utilizan ningun dispositivo de tecnología asistiva. Así que no tienen atajos a <main> u otras regiones landmarks.
En cualquier caso, los usuarios de Tecnologías Asistivas utilizan enlaces de salto de acuerdo a ésta encuesta de lectores de pantalla:
"Es importante notar que mientras que el uso ha disminuído entre los usuarios de lectores de pantalla, los enlaces para "saltar" aún proporcionana un beneficio notable para otros usuarios de teclado."
Lee más sobre cómo utilizar los enlaces de saltar al contenido en el manual.
8. Evita Texto de Enlace Reiterativo
Trata de evitar los textos de enlace reiterativos como "Leer más" o "Aprende más". Para usuarios de lectores de pantalla que navegan utilizando enlaces el resultado puede verse así:
El tema Twenty Seventeen tiene buenos ejemplos de cómo añadir el título del post en el extracto:
1 |
/**
|
2 |
* Replaces "[...]" (appended to automatically generated excerpts) with ... and
|
3 |
* a 'Continue reading' link.
|
4 |
*
|
5 |
* @since Twenty Seventeen 1.0
|
6 |
*
|
7 |
* @param string $link Link to single post/page.
|
8 |
* @return string 'Continue reading' link prepended with an ellipsis.
|
9 |
*/
|
10 |
|
11 |
function twentyseventeen_excerpt_more( $link ) { |
12 |
|
13 |
if ( is_admin() ) { |
14 |
return $link; |
15 |
}
|
16 |
|
17 |
$link = sprintf( |
18 |
'<p class="link-more"><a href="%1$s" class="more-link">%2$s</a></p>', |
19 |
esc_url( get_permalink( get_the_ID() ) ), |
20 |
|
21 |
/* translators: %s: Name of current post */
|
22 |
|
23 |
sprintf( __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ), get_the_title( get_the_ID() ) ) |
24 |
);
|
25 |
|
26 |
return ' … ' . $link; |
27 |
|
28 |
}
|
29 |
|
30 |
add_filter( 'excerpt_more', 'twentyseventeen_excerpt_more' ); |
"Continúa leyendo el título del post". Aquí es un ejemplo similar para el contenido:
1 |
/* translators: %s: Name of current post */
|
2 |
the_content( |
3 |
|
4 |
sprintf( |
5 |
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ), |
6 |
get_the_title() |
7 |
)
|
8 |
|
9 |
);
|
10 |
La clase screen-reader-text oculta el título del post visualmente pero los usuarios de los lectores de pantalla pueden aún acceder al texto. Verifica el ejemplo de código más reciente de texto de lector de pantalla en el manual.
Conclusión
Únicamente hemos tocado superficialmente la accesibilidad en temas de WordPress, pero ojalá que ésto haya marcado tu inicio. HTML Semántico y el uso inteligente de CSS tiene mucho camino que recorrer.
Recuerda verificar todas las pautas de accesibilidad para temas y leer más consejos en el manual de accesibilidad.
By
