Discurso com um leitor de tela

[nolan]

Olá, pessoal,

Não tenho certeza se isso já é conhecido ou rastreado em algum lugar. Se for, adoraria receber os links. Mas, embora a situação esteja melhorando, a experiência de usar o Discourse com um leitor de tela ainda apresenta alguns desafios que gostaria de documentar.

Sou usuário de leitor de tela e queria configurar uma instância auto-hospedada voltada principalmente para usuários cegos. Normalmente, não recomendo o Discourse devido a problemas de acessibilidade, mas vocês estão tornando o auto-hospedamento com os recursos que desejo muito fácil, o que me deixa triste ao ver que a acessibilidade ainda não está totalmente lá. Aqui estão alguns dos desafios que estou enfrentando:

• Os menus suspensos que são reportados ao meu leitor de tela como elementos HTML <select/> estão quase totalmente quebrados. Eles se expandem conforme as convenções normais de teclado, mas é nisso que termina a acessibilidade. Os problemas começaram quando precisei selecionar um idioma durante a configuração. Não tenho certeza imediata se “Inglês: EUA” foi definido como padrão, mas quando fui investigar, acabei definindo o idioma para espanhol e tive dificuldade para voltar ao original. Eventualmente, encontrei a lista com meu leitor de tela e consegui corrigir. Mas praticamente todos os menus suspensos estão quebrados. Não quero dizer “todos” caso exista algum em algum canto remoto da interface que funcione, mas todos os que testei não funcionam de forma alguma.
• Não consigo encontrar uma maneira de acessar a interface de administração sem navegar diretamente. As telas de configuração me disseram que ela estava sob o ícone de engrenagem, mas não consigo encontrar uma representação textual do que esse ícone possa ser, nem nenhum dos controles acessíveis por teclado que encontrei parece levar, no final, à interface de administração. Por enquanto, estou apenas acessando /admin, mas isso me faz questionar quais ferramentas posso não estar descobrindo porque não consigo encontrar essa engrenagem.
• Relacionado ao menu suspenso de configurações, não consigo usar os menus suspensos/seletores no topo das listas de categorias para navegar até as listas de categorias. Sei sobre o link “Categorias”, que é o que geralmente uso. Mas seria bom se esses seletores funcionassem.
• Sempre que não me cadastro em um Discourse, sou informado de que deveria fazê-lo, em parte porque o fórum lembra onde parei de ler. Isso nunca funcionou para mim com um leitor de tela. Como isso deveria funcionar? Clicar no link deveria mover o foco para a postagem que li por último?
• E, não relacionado ao meu site, mas a experiência de cadastro modal aqui apresentou alguns desafios. Tentei me cadastrar por e-mail, mas sua instância rejeitou meu endereço de e-mail .info, que uso há quase 17 anos e que funcionou perfeitamente no meu próprio. Então, me cadastrei via Google, mas o modal que recebei ao retornar apresentou alguns desafios:
  • Ele não capturou o foco do teclado, então precisei procurá-lo e interagir com ele manualmente.
  • Enquanto tentava fazer isso, a lista de tópicos com rolagem infinita estava adicionando novos tópicos, tornando mais difícil para o foco realmente alcançar o diálogo. Não lembro exatamente como consegui me mover mais rápido do que os tópicos apareciam — ainda não tomei meu café —, mas estou aqui.

Então, algumas perguntas:

• Quero muito continuar com o Discourse, se possível. Quanto disso posso alterar no meu próprio site? Em particular:
  • Posso remover os seletores da lista de categorias, para que os usuários tenham que interagir com o link da lista de categorias por enquanto?
  • Posso remover o seletor de categoria nas páginas de novo tópico, para que os usuários primeiro entrem na categoria em que desejam postar e não acidentalmente criem posts sem categoria ou fiquem confusos?
  • Posso fazer ambas as coisas de uma forma que facilite as atualizações? Preferiria não editar os modelos padrão e fazer um fork do projeto se não for necessário, nem necessariamente quero um tema totalmente novo.
• Esse trabalho está sendo rastreado em algum lugar, e há alguém dedicado a assumi-lo? Os fóruns do Discourse estão “comendo” a internet. Em toda parte, os projetos ou comunidades em que gasto tempo estão adotando-os. Droga, como usuário cego, eu quero rodar o Discourse porque, novamente, vocês tornam isso tão fácil. Só não quero que a acessibilidade de uma ferramenta tão crucial seja uma reflexão tardia ou fique perpetuamente tentando acompanhar o novo desenvolvimento.

Obrigado por ler.

[pmusaraj (Penar Musaraj)]

Essa é uma postagem muito bem pensada, @nolan. Tenho certeza de que outros membros da equipe darão sua opinião sobre suas perguntas, mas você poderia compartilhar sua configuração para que um desenvolvedor possa tentar reproduzir os problemas que você está enfrentando? Ou seja, qual sistema operacional, qual leitor de tela e assim por diante.

[nolan]

Windows 10, leitor de tela NVDA. No entanto, para ser delicado, está tão quebrado que provavelmente não funcionará bem em nenhum lugar, então quase qualquer combinação de sistema operacional/leitor de tela provavelmente encontrará esse problema.

[awesomerobot (Kris)]

Obrigado pelo feedback! Sabemos que ainda não atingimos o nível ideal de acessibilidade e temos trabalhado mais nisso recentemente. No final de 2020, realizamos uma auditoria de acessibilidade de terceiros nas páginas não administrativas mais importantes do Discourse e começamos a resolver as questões de alta prioridade nas últimas semanas.

Agora que você mencionou, entendo por que encontrar o menu de administração pode ser difícil. O link para o menu está localizado em um dos menus principais do cabeçalho… o aria-label é “ir para outra lista de tópicos ou categoria”… o que definitivamente não deixa claro que há alguns links administrativos ali.

Quanto à mensagem que diz que o Discourse lembra onde você parou… o comportamento esperado é que, ao entrar no tópico, você pule para onde parou de ler. Acabei de tentar navegar por isso usando o teclado e posso confirmar que o foco não está sendo colocado no local correto.

Muitos de nossos menus suspensos são implementações personalizadas, e essa é uma das áreas que nos foram apontadas para melhoria de acessibilidade. Também estamos cientes de que nossos modais não retêm o foco, o que leva a conteúdos de difícil acesso, especialmente em páginas com rolagem infinita, como você experimentou.

Em relação às suas perguntas sobre continuar usando o Discourse… tudo o que você listou é possível; bastariam algumas linhas de CSS para ocultar esses elementos. Esse CSS teria que estar em um tema, mas poderia existir dentro de um componente de tema, que pode ser adicionado a qualquer tema existente (assim, você não precisaria alterar seu tema principal). Os temas são muito melhores para o processo de atualização, pois funcionam acima do Discourse… editar modelos ou fazer fork, como você mencionou, torna a atualização muito difícil.

Nós marcamos os relatórios de problemas de acessibilidade aqui no Meta com a tag accessibility para facilitar a localização em um único lugar… mas, dito isso, o relatório de acessibilidade de terceiros e o trabalho subsequente que mencionei anteriormente não estão sendo rastreados publicamente.

Agradecemos muito o feedback, especialmente considerando que foi necessário um esforço adicional para publicá-lo. Espero que, nos próximos meses, o Discourse se torne muito mais fácil para você usar.

[aschrijver (Arnold Schrijver)]

Recebi uma pergunta em uma discussão no Fediverse de Robert Kingett, que tem deficiência visual e usa o termo “aceleracionista da acessibilidade” em seu perfil. A pergunta foi:

Como você está tornando o Social Hub acessível para leitores de tela e outras pessoas com deficiência? Convulsões, etc.

Como o SocialHub roda o Discourse, e a pergunta estava relacionada a questões de acessibilidade aqui, ofereci-me para copiar este tópico como um documento Markdown em um Gist do GitHub. Então, aqui está, e pode ser usado por outras pessoas com deficiência visual: Accessibility: Discourse with a screen reader · GitHub

[nolan]

Além disso, se isso ainda não foi levantado, gostaria de destacar como uma forma de obter ganhos rápidos de acessibilidade:

Leitores de tela fazem bom uso de muitas das tags semânticas do HTML 5. Não apenas consigo navegar entre elas de forma eficiente, mas elas também anunciam o tipo de conteúdo em que estou atualmente.

Seria bom se as postagens estivessem dentro de uma tag <article>, com o cabeçalho e o rodapé em elementos <header> e <footer>, respectivamente. Se a troca de elementos não for viável, o uso adequado dos atributos role transmite o mesmo significado.

No momento, é difícil ler threads longas. Após a primeira postagem, preciso rolar a página passando pela seção com tópicos recomendados e afins. Em seguida, leio as postagens subsequentes de forma linear, sem nenhuma maneira de pular os mesmos cabeçalhos que já ouvi um milhão de vezes, sem nada diferente além da data, ou o rodapé com os mesmos controles de mensagem. Certamente existem ajustes avançados de ARIA que tornariam as coisas ainda melhores, mas trocar as tags ou usar roles seria uma correção de baixo esforço com muitos benefícios, na minha opinião.

Obrigado!

[awesomerobot (Kris)]

Tenho uma atualização na nossa fila de revisão que adicionará alguns elementos de marcação ARIA às páginas de tópicos. De acordo com a especificação, parece fazer sentido marcar os controles sob as postagens e na parte inferior da página com o papel de barra de ferramentas.

Também temos uma área de barra de ferramentas de linha do tempo do tópico que funciona como uma barra de rolagem (agora atribuí a ela o papel de barra de rolagem) e também contém os botões “ir para a primeira postagem” e “ir para a última postagem” (aos quais adicionei descrições)…

Essas alterações estarão disponíveis com as atualizações do Discourse na próxima semana.

[nolan]

Legal, estou ansioso por isso!

Isso pode parecer óbvio, mas vou dizer mesmo assim. Note que não basta apenas aplicar ARIA nesses controles e considerar o trabalho feito. Em outras palavras, marcar essas áreas como barras de ferramentas sem seguir o padrão de barra de ferramentas provavelmente é pior do que deixar o papel de função fora completamente. Se eu chegar em uma barra de ferramentas, esperaria que ela se comportasse de maneiras que não ocorrem automaticamente apenas ao adicionar o papel de função. Quero apenas deixar isso claro, já que um erro comum que vejo ao adicionar acessibilidade é adicionar esses papéis de função, mas não incluir os comportamentos de teclado associados. Então, acabo encontrando vários controles que não se comportam como espero, e lutar constantemente contra essas expectativas é pior do que não tê-las desde o início.

Espero que faça sentido. Estou à disposição para responder a perguntas adicionais.

[MarcoZehe]

Olá Chris, o papel de scrollbar pode não ser exatamente o que você deseja aqui. Teremos que ver isso em ação, mas até agora, não vi ele sendo usado dessa forma. É mais algo como um elemento de intervalo (range) no HTML5 que representa uma posição de rolagem relativa de um container. Os itens “Ir para a primeira postagem” e “Ir para a última postagem” são apenas botões que podem rolar a visualização, sim, mas não acho que esses botões sejam adequados como conteúdo para um container de barra de rolagem, que é necessário para obter os atributos aria-value*.

P.S. Na comunidade do VS Code, sou conhecido como o guru dos papéis ARIA. Não sei exatamente o que me rendeu essa reputação, mas sou conhecido por ser exigente quanto aos papéis. Eles podem causar mais mal do que bem, então essa alteração específica pode precisar ser revertida. Tenho quase certeza de que será.

[nolan]

Por curiosidade, vocês têm alguém com foco em acessibilidade na equipe? Estou animado com a recente auditoria de acessibilidade e as mudanças planejadas, mas como o Discourse impulsiona grande parte da internet, provavelmente deveria haver alguém com experiência prática trabalhando lado a lado e orientando essas mudanças. É muito fácil errar e, sem querer, piorar a situação.

Como exemplo, o Slack afirma ter foco em acessibilidade e realmente tenta usar ARIA, mas suas tentativas parecem ter tornado a área de chat totalmente inacessível para meu leitor de tela. Ou, se for acessível, eu, com algumas décadas de experiência, não consigo entender como funciona. Não quero ver o Discourse seguir esse caminho sem querer.

De qualquer forma, faço isso e coisas similares como profissão e estou disponível. Também uso vários fóruns do Discourse, então ter acessibilidade confiável seria uma melhoria tangível na minha qualidade de vida. Fico à disposição para conversar mais com quem tiver interesse.

[awesomerobot (Kris)]

@MarcoZehe, para o controle da nossa linha do tempo, fiquei um pouco em dúvida se deveria usar o papel de barra de rolagem ou o de controle deslizante. Optei pelo papel de barra de rolagem, pois o controle realmente faz a rolagem da página e parece se encaixar na descrição fornecida pelo W3C:

Um objeto gráfico que controla a rolagem do conteúdo dentro de uma área de visualização, independentemente de o conteúdo estar totalmente exibido nessa área.

Dito isso, é um controle um tanto único que desenvolvemos… ele tanto faz a rolagem da página quanto mostra onde você está dentro do intervalo atual de publicações (por exemplo, indica que você está atualmente na publicação 6 de 12). É possível que não haja uma maneira ideal de marcar isso para leitores de tela, e talvez fosse melhor ocultá-lo… já que a rolagem normal da página funciona como esperado sem ele. Gostaria de tentar e ver o que você acha em ação; se não funcionar, podemos reverter.

Para responder à sua pergunta, @nolan, assumi a responsabilidade de organizar as recomendações de acessibilidade e realizar nossa auditoria, mas a maior parte da minha experiência anterior com acessibilidade vem da implementação de especificações definidas por outros. Não temos um especialista dedicado trabalhando em acessibilidade em tempo integral, pois ainda somos várias ordens de grandeza menores que o Slack… mas isso poderia ser algo para o qual precisemos contratar alguém para trabalhar no meio tempo, a fim de fazer certo e não piorar as coisas…

Obrigado a ambos pelas respostas, realmente aprecio muito!

[awesomerobot (Kris)]

Retomando a questão da função de barra de ferramentas, para esclarecer… você está dizendo que a função não vale a pena de forma alguma, a menos que siga esse padrão conforme descrito pelo W3C?

Implemente o gerenciamento de foco para que a sequência de tabulação do teclado inclua um ponto de parada para a barra de ferramentas e as setas movam o foco entre os controles na barra de ferramentas.

Se for esse o caso, não implementarei a função até que consigamos acertar o controle de foco e das setas.

[MarcoZehe]

Correto, se você usar o role, você promete que também implementará o padrão de projeto. Se você ainda não estiver pronto para fornecer o padrão de projeto, não use o roller ainda.

[aaronbauman]

Este é o local apropriado para relatar descobertas de minha própria auditoria de acessibilidade para uma instância do Discourse hospedada, ou devo iniciar um novo tópico?

E:

o relatório de acessibilidade de terceiros e o trabalho subsequente que mencionei anteriormente não estão sendo rastreados publicamente.

Há alguma chance de essa decisão ser revista? Seria útil ter alguma transparência sobre isso que eu pudesse compartilhar com meus clientes.

[jomaxro (Joshua Rosenfeld)]

Olá, Aaron,

Para garantir que nada se perca, recomendo criar um novo tópico ux (com a tag accessibility) para cada descoberta na sua auditoria. Se as suas descobertas estiverem estreitamente relacionadas, pode fazer sentido usar o mesmo tópico para todas. Basicamente, queremos que as coisas sejam agrupadas em pequenos blocos que possam ser rastreados independentemente e marcados como “concluídos”, sem precisar se preocupar em esquecer um item de uma lista de 53 no OP.

[aaronbauman]

OK, farei isso.
Postei o primeiro aqui: WAVE issues from homepage, embora pareça que ainda não tenho permissão para usar tags.

[nolan]

Para elaborar um pouco mais sobre isso:

Usar a role sem implementar o padrão seria um pouco como estilizar algo para parecer um botão, mas fazê-lo responder apenas se alguém passar o mouse por cima e rolar a roda do mouse. Se eu usar a tecla Tab para focar em uma barra de ferramentas ou de outra forma focar nela, e ela expuser todos os seus botões separadamente ou não responder às setas, então parece aquele estranho botão da roda do mouse. Você teria que pensar antes de cada interação, e ela alegando se comportar de maneiras que não o faz.

Espero que isso esclareça um pouco as coisas. Saber que algo é uma barra de ferramentas só é valioso se ele se comportar como uma barra de ferramentas. Caso contrário, é distrativo.

[nolan]

Aww, que decepcionante. Vim aqui perguntar qual era o status de todas essas atualizações que pareciam estar em andamento quando publiquei isso. Ainda não lançamos nossa comunidade, mas o antigo fórum PHP está prestes a ser desativado, então é agora ou nunca. Imaginei que já haveria algumas mudanças incríveis até agora.

Mas não consegui descobrir como acessar a área de administração do meu site. Com certeza consigo acessar /admin, mas o link para o site ainda não está acessível via teclado de nenhuma forma que eu tenha encontrado. Isso torna um pouco desafiador pedir a usuários de leitores de tela que me ajudem na moderação.

Depois, tentei escrever esta resposta há 5 minutos, mas de alguma forma cliquei em um botão de Editar ou Citar. Isso me levou para o que parecia ser uma versão editável de uma mensagem anterior que eu havia enviado. Tentei pressionar Enter em um link rotulado como Cancelar, mas não funcionou. Recarregar a página também não ajudou. No final, enviei a resposta e, em seguida, encontrei e interagi com um modal inacessível, semelhante ao que relatei inicialmente aqui, para descartar a mensagem.

Algo mudou nesse aspecto ou já existe um roteiro público disponível? Como usuário de leitor de tela que precisa interagir com comunidades Discourse, quer queira ou não, consigo fazer funcionar para mim, mas não me sinto muito confortável pedindo a uma comunidade de pessoas cegas que usem isso — ou, pelo menos, que construam uma comunidade de que gostariam no Discourse.

Obrigado.

[riking (Kane York)]

@nolan

Tentei pressionar Enter em um link rotulado como Cancelar, mas isso não funcionou.

Infelizmente, isso abriu um modal perguntando o que você gostaria de fazer com seu rascunho (descartar/salvar/cancelar), e parece que a captura de foco do modal está quebrada…

[ethindp (Ethin Probst)]

O Discourse funciona para mim, mas eu definitivamente gostaria de ver algumas melhorias na acessibilidade. Faz algum tempo desde que usei a interface de administração ou administrei um fórum Discourse, mas esperaria que muitos avanços tivessem sido feitos em 3 meses.
Entendo que o ARIA pode ser desafiador, mas isso de forma alguma significa que não se possa avançar. @nolan, já passei pelo mesmo problema — levei um tempo para entender por que a caixa de edição não desapareceu quando cliquei em ‘Cancelar’. Eu adoraria usar o Discourse como fórum para minha própria comunidade em algum momento no futuro, mas talvez precise reconsiderar isso se as melhorias de acessibilidade não forem implementadas. E eu odiaria voltar para o PHP.
Vocês praticamente têm alguém oferecendo ajuda com acessibilidade. Desculpe se parecer impaciente — sei que isso é difícil e complicado para vocês. Mas tanto o @nolan quanto eu estamos definitivamente dispostos a ajudar, de qualquer forma. Eu ficaria feliz em configurar uma instância de teste do Discourse.