#162 – Accesibilidad web en WordPress con Vicent Sanchis

Cómo ya sabeis, en Freelandev no somos expertos en todo ni pretendemos serlo, por eso cuando nos topamos con algún tema que sabemos que os interesa y del que también nosotros queremos aprender, intentamos traer a alguien que lo domine y nos pueda explicar… y si además es alguien de la comunidad WordPress a quien apreciamos tanto como Vicent, no sólo el aprendizaje está asegurado… también el buen rato que pasamos.

¿Qué tal la semana?

Semana esther

Actualización Osom Blocks, en front_page coge ‘page’ en lugar de ‘paged’ como variable para la paginación

Semana Nahuai

Bastante curro de clientes. 

Trabajando en mejorar la búsqueda dentro de Código Genesis

Contenido Nahuai

3 nuevos tutoriales en Código Genesis, de los cuales destaca:

Ocultar de los resultados de búsqueda los productos de WooCommerce sin stock

Tema de la semana:

Vicent Sanchis: doctor en optometría y ciencias de la visión y desarrollador web especializado en accesibilidad. Y futuro ponente de la WordCamp Europe 2022.

¿Cómo definirías, en pocas palabras, la accesibilidad web?

¿Qué elementos de la web consideras que son los más importantes de cara a la accesibilidad?

¿Cuál es la forma de ocultar un elemento que más respeta la accesibilidad?

¿Hay algún tema o theme framework de WordPress que recomiendes? 

¿Hay algún plugin de WordPress que recomiendes? 

El plugin de Joe Dolson https://wordpress.org/plugins/wp-accessibility/

¿Hay alguna herramienta online que analice la accesibilidad que recomiendes?

Guías de las que hemos hablado 

• WCAG: https://www.w3.org/TR/WCAG21/ >> esta es la importante y más conocida
• ATAG: https://www.w3.org/TR/ATAG20/
• UAAG: https://www.w3.org/TR/UAAG20/

– Requisitos para que un tema sea #accessibility-ready: https://make.wordpress.org/themes/handbook/review/accessibility/

– Herramientas:

• axe: https://www.deque.com/axe/devtools/
• WAVE: https://wave.webaim.org/extension/

Si solo pudieras un consejo para mejorar la accesibilidad ¿cuál sería? => Cuidar el HTML semántico

Podéis encontrar a Vicent en:

vicentsanchis.com

AcessiHUB.es

@visanju en Twitter

Novedades

Tip de la semana

Menciones

Respuesta que recibimos de Jesús Olazagoitia:

Creo que en el podcast de esta semana preguntabas sobre ocultar un label en el html pero manteniendo la accesibilidad. Hay dos opciones, utilizando una clase css para ocultarlo, pero cuidado la mayoría de lectores de pantallas no leen los elementos con display: none; 

Se suele utilizar algo como:

.screen-reader-only  {
   position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    clip-path: inset(50%);
}

https://getbootstrap.com/docs/5.1/getting-started/accessibility/

La otra opción para este caso de un label, utilizar un aria-label en el input y eliminar el label

https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html

Recomendación de Vicent para ocultar elementos de form accesible:

   .visually-hidden { 
      position: absolute; 
      clip: rect(0 0 0 0); 
      border: 0; 
      height: 1px; margin: -1px; 
      overflow: hidden; 
      padding: 0 
      width: 1px; 
      white-space: nowrap; 
    } 

Aclaración de Vicent sobre el display:none y el DOM:

Display:none no quita el elemento del DOM, el elemento no se renderiza y por eso no pasa al árbol de accesibilidad, que es una vista del DOM basada en lo que muestra el navegador, que se le presenta a las ayudas técnicas. 

Estrictamente sigue en el DOM pero no se transmite a lo que deriva de ese DOM porque lo hemos ocultado para todos los usuarios.

Lo que pasa es que en mi cabecita son dos cosas equivalentes y simplifico haciendo esa afirmación pero a nivel de programación JS el elemento seguiría estando en el DOM y se podría manipular.

Para ocultar un elemento podemos:

1.- Display:none y similares: lo ocultará a todos los usuarios >> no lo muestra y el lector de pantalla no lo anuncia

2.- Ocultar a los usuarios visuales: el CSS que te pasé >> no lo muestra pero el lector de pantalla lo anuncia

3.- aria-hidden: oculta el elemento a la API de accesibilidad pero se renderizará y será visible e incluso se podría interactuar con el por teclado. >> lo muestra pero el lector de pantalla NO lo anuncia