ARIA DevTools — Visualização da árvore de acessibilidade de sites

 (chromewebstore.google.com)
4 pontos por GN⁺ 2024-10-09 | 1 comentários | Compartilhar no WhatsApp
  • ARIA DevTools é uma extensão do Chrome que permite ver aplicações web pela estrutura interpretada por leitores de tela, facilitando encontrar problemas de acessibilidade durante o desenvolvimento
  • Exibe os elementos da página com base em funções ARIA explícitas e implícitas, permitindo verificar também títulos, imagens, tabelas, campos de formulário e outros itens
  • Tem foco em inspecionar problemas que podem prejudicar a experiência real de uso com tecnologias assistivas, como rótulos ARIA ausentes, atribuição incorreta de funções e suporte incompleto a teclado
  • Segundo a Chrome Web Store, tem 10.000 usuários, nota 4,9/5, 33 avaliações, e está listado na categoria Developer Tools
  • O desenvolvedor declara que não coleta nem usa dados dos usuários, e o estado do projeto pode ser acompanhado pelo repositório no GitHub e pela página de issues

Verificação da árvore de acessibilidade do ponto de vista de leitores de tela

  • ARIA DevTools é uma extensão de ferramentas para desenvolvedores que ajuda no desenvolvimento e teste de aplicações web acessíveis
  • Mostra o site da forma como um leitor de tela o transmite a usuários com deficiência visual
  • Os elementos da página são organizados com base em funções ARIA explícitas ou implícitas
    • Títulos
    • Imagens
    • Tabelas
    • Campos de formulário
    • Outros elementos da página

Problemas de acessibilidade que podem ser verificados

  • Permite identificar com mais facilidade rótulos ARIA ausentes
  • Ajuda a encontrar funções ARIA usadas incorretamente
  • Também permite verificar suporte a teclado incompleto
  • O objetivo é reduzir o processo de desenvolvimento e teste de sites acessíveis

Informações de registro na Chrome Web Store

  • É uma extensão registrada na Chrome Web Store e pertence à categoria Developer Tools
  • O número de usuários informado no cadastro é de 10.000
  • A nota é 4,9/5, com 33 avaliações
  • A versão é 1.4.3, e o tamanho é 156 KiB
  • O projeto é open source e está publicado no GitHub

Tratamento de dados pessoais

  • O desenvolvedor declara que esta extensão não coleta nem usa dados dos usuários
  • Os dados não são vendidos a terceiros
  • Os dados não são usados nem transferidos para finalidades não relacionadas às funções principais da extensão
  • Os dados não são usados nem transferidos para avaliação de crédito ou fins de empréstimo

Leituras relacionadas

1 comentários

 
GN⁺ 2024-10-09
Comentários do Hacker News

  • Parece excelente. Seria possível fazê-lo rodar também dentro de iframes? Seria muito bom poder usá-lo no Storybook/Playroom
    Link do Firefox: https://addons.mozilla.org/en-US/firefox/addon/aria-devtools...

    • Fico feliz que tenha gostado. O principal motivo de eu ainda não ter incluído suporte a iframe é que o escopo de permissões ficaria muito mais amplo
      Em vez de permitir acesso apenas à aba atual depois de clicar no ícone do "ARIA DevTools", como é agora, seria preciso conceder permissão de acesso a todos os dados de todos os sites que você visita. Mas vou investigar de novo para ver se a situação mudou desde a última vez que verifiquei
    • Fico pensando se daria para abrir o iframe em uma nova aba e usar a extensão sobre ele

  • É uma ferramenta muito útil tanto para verificações rápidas quanto para ensino. Acho que essa visualização ajudaria a mostrar a stakeholders não técnicos como pensar em acessibilidade, especialmente em leitores de tela
    Metade da dificuldade do WCAG está em fazer os stakeholders irem além de simplesmente marcar uma caixa de conformidade

    • "Mas já é texto; o leitor de tela não deveria simplesmente ler?"
    • Até certo ponto, faz sentido. Se 98% dos usuários conseguem usar sem problemas um site sem acessibilidade, especialmente considerando que quem usa muito computador tende a ser mais jovem, por que fazer mais do que marcar a caixa? Parece uma escolha com valor esperado negativo

  • Muito legal. Recentemente implementei minha própria visualização da árvore de acessibilidade [1], e é interessante ver que esta ferramenta sai um pouco da árvore em si e se concentra mais na visualização do agrupamento de unidades individuais
    Eu pensei mais em mostrar a estrutura inteira e, com isso, ajudar a focar no fluxo lógico da página. Por outro lado, a abordagem de ver a árvore como um conjunto de blocos individuais, em que a coesão dentro de cada bloco é mais importante, é bem interessante. Se quiser comparar as duas, eu ficaria feliz em conversar
    [1] https://polypane.app/blog/polypane-20-1-the-accessibility-tr...

  • Parece limpo e é muito mais organizado do que https://wave.webaim.org/

    • Obrigado. Acho que o ARIA DevTools tem bastante potencial. Pelos meus critérios, ele é relativamente popular, mas eu não tinha conexão com pessoas que trabalham profundamente com acessibilidade na web
      Como os detalhes importam nesse tipo de ferramenta, para ser justo, o WAVE provavelmente tem mais chance de ser mais preciso

  • É bem limpo e gostei. Testei em uma página de metadados de programas de TV que estou desenvolvendo
    Um elemento é um conjunto de divs contendo spans que descrevem o conteúdo com aria-label cada um; o VoiceOver no MacOS lê corretamente e a árvore de acessibilidade do Chrome também captura isso, mas esta ferramenta não mostra o aria-label e exibe os valores como uma sequência de strings. Ela também capturou ::before { content: ", " / ""; } como , value, mas isso, de modo geral, não tem um suporte muito bom

    • Você poderia me enviar o link dessa página? Quero testar diretamente e corrigir

  • Gostei. Tenho muito interesse em suporte à acessibilidade
    Hoje sites não são mais meu trabalho principal, mas antigamente eu sempre me preocupava em garantir que os sites sob minha responsabilidade fossem muito acessíveis

  • Gostaria que, nessas ferramentas, a lógica de ARIA fosse separada da UI. Seria bom colocar o processamento complexo relacionado a ARIA em uma biblioteca e construir várias UIs sobre uma base de código comum e bem testada
    Fazendo também um pouco de divulgação: https://github.com/xi/aria-api

  • Como isso se compara às ferramentas integradas do Chrome (https://developer.chrome.com/docs/devtools/accessibility/ref...)?

    • Ao projetar esta ferramenta, tentei refletir a experiência de usuário de leitores de tela, em vez de apenas exibir papéis e atributos ARIA
      Por exemplo, você precisa navegar pela página apenas com o teclado. Se um dropdown não for acessível, isso fica imediatamente evidente para o usuário. Tabelas também mostram apenas uma célula por vez junto com seu cabeçalho. Acho que isso chega muito perto da experiência real de usuários de leitores de tela

  • Boa ideia e boa implementação. Com certeza vou testar em um projeto paralelo. Por acaso, eu tinha acabado de assistir à apresentação da Mandy Michael sobre performance e acessibilidade em HTML [1] e estava me perguntando se existia uma ferramenta melhor do que o visualizador de árvore de acessibilidade integrado ao navegador

    1. https://youtu.be/cghb0VpCJqM?si=5pWNrkPOyUsohyGJ

  • Ferramenta incrível. Tenho me aprofundado mais em acessibilidade recentemente, especialmente tentando melhorar a experiência de usuário de leitores de tela
    Alguém com mais experiência já testou esta ferramenta em situações complexas, como formulários grandes ou tabelas dinâmicas? Fico curioso para saber como ela se compara a outras ferramentas de acessibilidade nesses casos. Agradeço qualquer dica ou insight