Problemas de auditoria de acessibilidade do Lighthouse

Contribuir Experiência do Usuário
1

Estou totalmente disposto a corrigir quaisquer problemas de acessibilidade que surjam. Você está descobrendo esses problemas por meio da auditoria do Lighthouse integrada ao Chrome ou por algo diferente?

7 curtidas
$primary-medium SCSS variable problems
2

Sensacional!

Sim, estou usando a auditoria do Google Lighthouse.

1 curtida
3

Separe isso em seu próprio tópico para investigar um pouco mais os problemas. Começando com o…

Lista de tópicos

Além do contraste, que por enquanto pode ser corrigido com CSS, há 2 problemas:

  1. O primeiro, relacionado aos itens da lista, parece ser um bug do auditor ou talvez uma peculiaridade na forma como o auditor interpreta a renderização da nossa página? Esses itens da lista estão definitivamente contidos.
    18%20PM
    18%20PM1492×610 52 KB

    :male_detective: :mag_right:

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

  1. O segundo problema é [aria-*] attributes do not have valid values (atributos [aria-*] não possuem valores válidos). Isso está apontando especificamente para nossos menus suspensos de categoria e tag… o problema aqui parece ser o aria-haspopup. De acordo com o exemplo aqui Navigation Menu Button Example | APG | WAI | W3C, devemos usar aria-haspopup="true" em vez de apenas aria-haspopup.

    Parece que não estávamos passando true como uma string. Corrigi isso aqui: True should be a string to display properly in aria-haspopup · discourse/discourse@b848bd4 · GitHub

7 curtidas
4

Tópicos

Um problema (além do contraste e da questão não-problema do li mencionada anteriormente)

Links não possuem um nome discernível

O texto do link (e o texto alternativo para imagens, quando usadas como links) que seja discernível, único e focável melhora a experiência de navegação para usuários de leitores de tela. Saiba mais.

Duas ocorrências:

  1. Cada post recebe um elemento a.tabLoc sem dimensões. Eles parecem ser para navegar pelos posts com o teclado? Ocultos com aria-hidden: true porque são inúteis para leitores de tela. Hide empty anchor tag from screen readers · discourse/discourse@bdaf07a · GitHub

  2. O ícone de envelope usado para indicar quando um tópico é uma mensagem privada também vincula à sua caixa de entrada de MP, e estávamos carregando esse link para todos os tópicos… mesmo que não fossem MPs. Tornei esse link condicional a MPs e também adicionei um atributo title e um aria-label. Don't load PM icon in title unless topic is a PM · discourse/discourse@1983f0d · GitHub e UX: Add title attribute and aria-label to PM icon link · discourse/discourse@aa71818 · GitHub

6 curtidas