Cómo usar Saltar enlaces para hacer que su sitio de WordPress sea más accesible

En nuestra serie de introducción a la accesibilidad, hablamos sobre la base de las diversas Pautas de Accesibilidad al Contenido Web (WCAG). Ahora es el momento de dar el siguiente paso al observar algunas de las pautas clave y mostrarle cómo hacer que su sitio sea más accesible. Comencemos con los bloques de omisión, más comúnmente conocidos como enlaces de omisión.

¿Qué es un enlace de salto?

Un enlace de salto es un enlace especial que está oculto en su sitio hasta que entra en :focus a través de la tecla de tabulación o un lector de pantalla. Su propósito es brindar a los usuarios de tecnologías alternativas (personas que usan teclados y lectores de pantalla) la capacidad de omitir bloques de contenido. Directamente de los estándares:

“Hay un mecanismo disponible para eludir bloques de contenido que se repiten en varias páginas web”. – Estándar WCAG 2.4.1 – Bloques de derivación

2.4.1 es un estándar de nivel A. Esto significa que está cubierto por la Sección 508 y requerido por la ley. Necesitas tener enlaces de salto.

¿Puedes adivinar cuál es el bloque de contenido más común al que se aplican los enlaces de omisión? Si adivinaste "el menú", estarías en lo correcto. Los menús aparecen en casi todas las páginas de un sitio. Los usuarios videntes y los usuarios de mouse tienden a desplazarse hacia ellos porque es uno de esos elementos del sitio que esperas que esté allí. Pero los menús de navegación no son los únicos bloques que necesitan omitir enlaces.

Un área que comúnmente se pasa por alto para omitir enlaces son las barras laterales izquierdas (o las barras laterales derechas para sitios en idiomas de derecha a izquierda como el árabe). Debido a dónde tienden a caer en orden semántico, los usuarios necesitarán una forma de saltarse la barra lateral que se repite regularmente para ir directamente al contenido.

Lo mismo ocurre con los bloques de publicaciones destacadas que aparecen fuera de la página de inicio. Algunos diseños de sitios tienen secciones de publicaciones destacadas o controles deslizantes en las páginas interiores. A menos que el contenido de esas secciones esté cambiando, es decir, categoría o páginas de archivo, debe haber un enlace de omisión en su lugar.

¿Cómo se agregan enlaces de omisión?

Ahora que sabe qué es un enlace de salto, es hora de agregarlo a su sitio. Hay un par de maneras de resolver este problema. La manera fácil (y para los que no son programadores, la única manera) es instalar un complemento. La forma difícil es codificarlos en su tema usted mismo.

Usar un complemento

Un complemento que recomendamos cuando se trata de omitir enlaces: WP Accessibility de Joe Dolson. Resuelve varios problemas de accesibilidad, incluida la adición de enlaces de salto básicos para usted.

Codificándolo usted mismo

Su otra opción es codificar los enlaces de omisión usted mismo. El código en sí es bastante simple y solo requiere algunos conocimientos básicos de HTML y CSS, pero deberá sentirse cómodo con el funcionamiento de los temas y las plantillas de WordPress antes de intentar este método. A partir de este momento, asumiremos que sabe cómo encontrar los archivos a los que se hace referencia y cómo editarlos.

Comenzaremos escribiendo los enlaces de salto reales primero. Esto permitirá copiar y pegar fácilmente en los archivos de plantilla. Recordando el conocimiento de HTML, deberá escribir una etiqueta de anclaje. Tenga en cuenta que el formato aquí es para facilitar la lectura.

 <a href=”[don't fill this in yet]” class=”skip-link”> Skip to Main Content </a>

Hemos dejado el atributo href en blanco a propósito. Esto se debe a que necesitamos definir a dónde se vinculará nuestro enlace de salto. Para este ejemplo, usaremos el elemento <main> como nuestro objetivo. Debido a que no podemos vincular directamente a un elemento sin una ID, debemos asegurarnos de que nuestro elemento <main> tenga una. Su elemento <main> probablemente se encontrará en header.php , pero no siempre. Una vez que haya localizado el elemento, deberá asegurarse de que tenga una identificación. Si no, agrega uno así:

 <main id=”main-content”> [a bunch more code below]

El valor específico de la identificación no es importante, pero deberá recordarlo. Ahora querrá actualizar su código de enlace de omisión con el valor de ID.

 <a href=”#main-content” class=”skip-link”> Skip to Main Content </a>

Ahora que ha creado su enlace de salto, regrese a su archivo header.php o donde sea que se encuentre la etiqueta de apertura <body> de su tema. La etiqueta <body> es una ubicación esencial para los enlaces de omisión, ya que deben ser lo primero que aparezca en :focus para los usuarios de teclados y lectores de pantalla.

Justo después de la etiqueta <body> , pase su HTML completo. A continuación se muestra un ejemplo más detallado con múltiples enlaces de salto. Si desea agregar varios enlaces a su sitio, asegúrese de que los ID estén aplicados correctamente.

 <body> <a href=”#left-sidebar” class=”skip-link”>Skip to Sidebar</a> <a href=”#featured-posts-block” class=”skip-link”>Skip to Featured Posts</a> <a href=”#main-content” class=”skip-link”>Skip to Main Content</a> [Header navigation goes here]

Ahora tiene enlaces de salto en su código, ¡pero aún no ha terminado! Si carga su página ahora, verá los enlaces de omisión en la parte superior. Es hora de agregar algo de CSS. El estilo de los enlaces de salto es bastante simple, usando el siguiente ejemplo:

 .skip-link { position: absolute; top: 0; z-index: 9999; right: 100%; padding: 5px; padding: 0.5rem; font-size: 20px; font-size: 2rem; color: #000; background: #FFF; } .admin-bar .skip-link { top: 32px; } .skip-link:focus { right: auto; }

Lo que no ves es el uso de display: none . Usarlo hará que un lector de pantalla omita el enlace por completo, anulando el propósito por completo. La ocultación se realiza colocando el texto fuera de la pantalla usando right: 100% y moviéndolo a right: auto on :focus .

Con su CSS aplicado, ya está todo listo. Sus enlaces de salto están en su lugar, pero ocultos. Cuando un usuario del teclado o un lector de pantalla carga su página en los inicios :focus , sus enlaces de omisión les permitirán pasar directamente al contenido que buscaban.

Envolviendolo

Saltar enlaces es un ejemplo perfecto de una característica de accesibilidad que parece mucho trabajo, pero en realidad no lo es. Todo lo que hicimos en el lado del código fue agregar un par de líneas de HTML y CSS. Para el enfoque no técnico, instalamos un complemento. Ninguno de los métodos lleva mucho tiempo, lo cual es importante tener en cuenta, ya que los enlaces de omisión son un estándar de nivel A para WCAG 2.0 (los estándares WCAG más actuales). Usted está obligadopor ley a tenerlos en su sitio.No se ponga en riesgo; ¡agregue sus enlaces de salto hoy!