Problemas de auditoría de accesibilidad de Lighthouse

Contribuir UX
1

Estoy totalmente dispuesto a solucionar cualquier problema de accesibilidad que surja. ¿Estás descubriendo estos problemas mediante la auditoría de Lighthouse integrada en Chrome o algo más?

7 Me gusta
$primary-medium SCSS variable problems
2

¡Genial!

Sí, estoy utilizando la auditoría de Google Lighthouse.

1 me gusta
3

Separa esto en su propio tema para profundizar un poco más en los problemas. Comenzando con el…

Lista de temas

Fuera del contraste, que por ahora se puede solucionar con CSS… hay 2 problemas:

  1. El primero, relacionado con los elementos de la lista, parece ser un error del auditor o quizás una peculiaridad en cómo el auditor interpreta el renderizado de nuestra página. Estos elementos de la lista definitivamente están contenidos.
    18%20PM
    18%20PM1492×610 52 KB

    :male_detective: :mag_right:

55%20PM
55%20PM1172×166 29.7 KB

  1. El segundo problema es [aria-*] attributes do not have valid values. Esto señala específicamente nuestros menús desplegables de categorías y etiquetas… el problema aquí parece ser aria-haspopup. Según el ejemplo aquí Navigation Menu Button Example | APG | WAI | W3C, deberíamos tener aria-haspopup="true" en lugar de simplemente aria-haspopup.

    Parece que no estábamos pasando true como una cadena. Lo solucioné aquí: True should be a string to display properly in aria-haspopup · discourse/discourse@b848bd4 · GitHub

7 Me gusta
4

Temas

Un problema (además del contraste y el problema no relacionado con li mencionado anteriormente)

Los enlaces no tienen un nombre discernible

El texto del enlace (y el texto alternativo para imágenes, cuando se usan como enlaces) que sea discernible, único y enfocable mejora la experiencia de navegación para los usuarios de lectores de pantalla. Más información.

Dos ocurrencias:

  1. Cada publicación obtiene un elemento a.tabLoc sin dimensiones. Estos parecen estar destinados a navegar por las publicaciones con el teclado. Están ocultos con aria-hidden: true porque son inútiles para los lectores de pantalla. Hide empty anchor tag from screen readers · discourse/discourse@bdaf07a · GitHub

  2. El icono de sobre utilizado para indicar que un tema es un mensaje privado también enlaza a tu bandeja de entrada de MP, y estábamos cargando ese enlace para todos los temas… incluso si no son MP. Hice que ese enlace fuera condicional para los MP y también añadí un atributo title y un aria-label. Don't load PM icon in title unless topic is a PM · discourse/discourse@1983f0d · GitHub y UX: Add title attribute and aria-label to PM icon link · discourse/discourse@aa71818 · GitHub

6 Me gusta