Libera mi inaccesible corazón etiquetado | trucos CSS

susie nashansky de Calendario de Adviento HTM:

<h2 id="article1-heading">All About Dragons</h2>  
<p>I like dragons. Blah blah blah blah blah.</p>  
<p>
  <a id="article1-read-more" aria-labelledby="article1-read-more article1-heading">Read more</a>  
</p>  

mira este aria-labelledby Concatena dos identificadores del marcado, uno para el título (#article1-heading) y otra para el enlace (#article1-read-more). Lo que sucede allí es que el lector de pantalla reemplazará la etiqueta semántica existente entre las etiquetas de enlace y usará el contenido de ambos elementos y los declarará juntos como una sola cadena de texto:

Read more All About Dragons

Siempre soy tímido cuando me doy cuenta de que hay algo que creo que debería saber, pero no lo sé. Este es definitivamente uno de esos casos y estoy muy agradecida de que Susie lo haya compartido.

De hecho, recientemente estuve en una situación en la que pudo Tuve que hacer esto. Siempre trato de evitar un montón de enlaces "Leer más" en la misma página, pero encontrar diferentes variaciones de lo mismo es difícil cuando ejecutas algo así como un ciclo de 15 publicaciones (aunque hay recursos de ayudaY si tenemos que mantener las etiquetas cortas por razones estéticas (requisitos de diseño y demás), eso es un desafío aún mayor. aria-labelledby El atributo me da exactamente lo que quiero: etiquetas visuales consistentes y mensajes de tecnología de asistencia más contextuales.

Y esto es solo una cosa cuando el texto que desea usar para la etiqueta de accesibilidad ya existe en la página. De lo contrario, querrás usar aria-label Y con la advertencia de que es solo para elementos interactivos que no pueden etiquetar cosas accesibles con HTML semántico.

Si está ejecutando un CMS como WordPress (que soy yo), es posible que deba hacer un poco de trabajo adicional. Por ejemplo, cuando dejo caer un botón de bloqueo en la página, estas son las opciones con las que tengo que trabajar:

Hay algunas buenas opciones, pero nada que ver con el etiquetado asequible. Si se pregunta qué hay oculto en ese panel de funciones avanzadas:

En su lugar, deberá editar el botón en modo HTML:

Pero antes de hacerlo, debe agregar una identificación al título que desea usar. El bloque Título tiene la misma configuración en el panel Avanzado para agregar un ancla que inyectará la ID del elemento:

Luego puede editar el bloque de botones en modo HTML y agregar accessible-labels ID, así como la ID del botón en sí. Este es un ejemplo de marcado editado:

<div class="wp-block-buttons">
  <!-- wp:button -->
  <div class="wp-block-button">
    <a id="read-more-button" aria-labelledby="read-more-button heading-accessible-labels" class="wp-block-button__link wp-element-button" href="https://webaim.org/projects/million/">
      Read Report
    </a>
  </div>
  <!-- /wp:button -->
</div>

¡Impresionante! Pero WordPress simplemente no está bien con esto:

Puedes intentar resolver el problema:

Le suspiro. El bloque de botones debe convertirse en un bloque HTML personalizado. De alguna manera derrota todo el asunto de la edición visual en el que WordPress es tan bueno. Hice una búsqueda súper rápida de un complemento que puede agregar opciones de etiquetado ARIA a ciertos bloques, pero no tuve éxito. Parece una gran oportunidad para hacer uno o envíe un PR para los bloques que podrían usar estas opciones.