Estou trabalhando na iniciativa COVID-19 RAMP. Escolhemos o Discourse para nosso fórum e estamos muito satisfeitos com ele.
Um colega e eu temos analisado a acessibilidade. Acredito que resolvemos os problemas de baixo contraste por meio da funcionalidade de CSS do administrador. No entanto, temos alguns problemas, conforme relatado pelo WAVE, que não temos certeza de que conseguimos resolver sozinhos, conforme descrito abaixo:
Imagem vinculada sem texto alternativo: isso se refere às imagens de avatar. Há um título descritivo, mas o atributo alt está vazio.
Falta um rótulo em todas as páginas:
<div><input type="text"></div>
Há um cabeçalho vazio em todas as páginas:
<div class="title"><h3></h3><!-- --></div>
Há diversos botões vazios relatados, associados a SVG.
Há links vazios, por exemplo: <a href="" aria-hidden="true" tabindex="-1" class="tabLoc"></a>
e <a href="" class="edit-topic" title="edit the title and category of this topic" data-ember-action="" data-ember-action-27="27"><svg class="fa d-icon d-icon-pencil-alt svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#pencil-alt"></svg></a>.
Há um cabeçalho de tabela vazio: <th data-sort-order="posters" class="posters"></th>
Ficarei muito surpreso se formos os únicos a enfrentar esses problemas, então estou me perguntando se o WAVE está exagerando ou se talvez estejamos deixando passar algo. Qualquer ajuda será muito apreciada.
Obrigado pelo interesse. Há um item do qual não tenho certeza se consigo encontrar (o cabeçalho vazio), mas o restante eu identifico pela funcionalidade de “código” do WAVE e consigo localizar (com algum esforço) usando o inspetor F12.
Não tenho certeza se os fusos horários estão a nosso favor (estou no Reino Unido, UTC+01:00), mas ficaria feliz em fazer uma chamada no Teams ou similar para demonstrar, se for útil.
Alguns leitores de tela ignoram corretamente os avatares, mas outros leem o nome/nome de usuário duas vezes por causa disso.
Criei um PR para remover o atributo title dos avatares de post:
Este é o campo de entrada onde mostramos a URL para copiar e compartilhar. PR para adicionar um rótulo ARIA aqui:
Não encontrei esse… pode ser baseado em configurações do site? Preciso investigar um pouco mais.
Não rotulamos isso para usuários que enxergam, pois podemos dar uma olhada na coluna e fazer uma suposição sobre seu conteúdo… isso é muito mais difícil de fazer se você não consegue ver… adicionar um rótulo para leitores de tela faz sentido:
Os problemas restantes que não abordei estão relacionados a botões; ainda preciso investigá-los…
Muito obrigado pelas respostas rápidas e pela ação tomada na época. Posso confirmar que as solicitações mescladas já estão no código desde alguma versão?
Além disso, seria útil se eu (organizado e) compartilhasse o tema que modificamos para passar nos testes de acessibilidade WAVE?
A ideia esperta que tive tarde foi testar apenas a página de cores quanto à acessibilidade.
Em seguida, fizemos muitas alterações usando o editor CSS (admin/customize/themes/3/common/scss/edit) das quais não tenho certeza de como repassar (posso copiar e colar, mas não sei se é isso que você quer ou se deseja que isso fique neste tópico). Acredito que, se pudéssemos ver as outras cores mencionadas (por exemplo, var(–primary-medium)) em uma interface de alto nível, as coisas ficariam mais fáceis. Por exemplo, um caso clássico foi #919191 → #595959, mas meu método apenas trata sintomas que de alguma forma percebo ao navegar pelas páginas (e, novamente, a natureza dinâmica do “site” significa que o que passa hoje pode não passar amanhã).
Estou disposto a tentar de outra forma também, é só me avisar, embora em nenhum momento eu possa executar um serviço de demonstração, verificar o código etc.
Também devo observar que não consegui corrigir admin/upgrade de forma alguma (e ele tem vários problemas de contraste); não sei se ele não segue o CSS ou qual é o motivo.
Minha lembrança é que a parte de administração do Discourse possui folhas de estilo separadas (mais difíceis de editar) para tornar mais difícil que as pessoas trancem sem querer a si mesmas fora de uma interface de administração utilizável com alterações de CSS.
Fiquei um pouco para trás com isso, embora tenhamos atualizado o fórum. Mas achei melhor responder às pessoas que se deram ao trabalho (muito obrigado!) de examinar este tópico.
Obrigado. Se eu clicar no seu link, o Wave encontra 13 problemas de acessibilidade (baixo contraste), mas não nas próprias cores. Isso ocorre porque, diferentemente da página de cores, ele não mostra como elas são usadas (como fundo ou primeiro plano com texto).
Avise-me como posso ajudar; há muitos erros de contraste.
Em postagens com avaliação (não tenho certeza de quão bem isso foi adotado no Discourse, é uma extensão que @angus gentilmente desenvolveu para nós): Etiqueta de formulário ausente
Numerosas (40 na página que estou visualizando, com dois usuários avaliando) instâncias parecidas com esta: <input class=" disabled" type="radio" value="1" checked="" disabled="">. Isso está sob <span class="star-rating">.
