5 práticas recomendadas para leitores de tela e outros dispositivos de assistência

Este é o terceiro de uma série que estou escrevendo sobre experiências acessíveis na web. No primeiro artigo, “O ADA e o design universal: Por que desenvolvemos experiências acessíveis na web?”Falei sobre o“ porquê ”do design digital acessível. Dentro “O ADA e o design universal: construindo um plano melhor, ”Falei sobre como criar pessoas, jornadas do usuário, mapas de sites e wireframes consistentes com os princípios do design universal. Neste artigo, discutirei técnicas para tornar as experiências da web acessíveis para leitores de tela e outros dispositivos de assistência.

Imagine esta experiência: você vai a um site para procurar informações críticas de que precisa para fazer seu trabalho. Ou pedir um refil com uma receita importante. Ou para baixar o novo álbum que sua banda favorita acabou de lançar.

Você navega até o site, mas precisa pesquisar por cinco minutos antes de encontrar a barra de pesquisa. (Foi enterrado na parte inferior do rodapé, sob o aviso de direitos autorais.) Encontre o caminho para um formulário denominado “formulário”. O formulário possui um campo de texto denominado “genérico” e solicita que você insira o “campo de texto”. Na parte inferior, há um botão denominado “botão”. Conforme você tenta descobrir tudo, a página se esgota e você tem que começar de novo. (Um alerta de contagem regressiva apareceu para avisá-lo, mas você não percebeu.)

Como tem sido sua experiência até agora? Encontre o que você precisa? Você sente que seu tempo está sendo bem gasto? Ou você está se preparando para sair do site e tentar em outro lugar?

Isso é análogo à experiência de alguém acessando um site com um leitor de tela ou outra tecnologia de assistência quando o site não foi desenvolvido de acordo com as melhores práticas de design de site acessível.

ARIA para o resgate

Para resolver este problema crescente, o W3C criou o Iniciativa de acessibilidade da web: aplicativos avançados e acessíveis para a Internet (WAI-ARIA, ou simplesmente ARIA). ARIA é uma estrutura de atributos que você pode adicionar aos elementos HTML, fornecendo contexto adicional e informações alternativas baseadas em texto. Os atributos ARIA tornam os aplicativos da web mais acessíveis para pessoas que usam leitores de tela, monitores braille, navegação apenas com teclado e outras tecnologias de assistência.

Leia Também:  Como criar um link curto no WordPress (a maneira mais fácil)

Observe que os atributos ARIA melhorar as experiências na web para aqueles que usam tecnologias assistivas. Minha premissa nesta série é que o web design acessível torna os sites melhores para todos, não apenas para pessoas com deficiência. Acho que isso é verdade mesmo aqui, porque ARIA nos força a analisar cuidadosamente a organização e as interações de nossas experiências na web.

Como abordarei em minha primeira prática recomendada, a melhor solução é não criar uma experiência separada para usuários com deficiências. Se você está usando o ARIA para modificar substancialmente sua experiência na web, recomendo que repense a experiência que está criando para todos. Muitas correções ARIA serão desnecessárias … e seus sites serão melhores para todos.

Melhores práticas para ARIA

# 1: comece com HTML semântico

Não jogue um bom ARIA em um HTML ruim. Ao desenvolver sites usando HTML semântico bem formado, você não precisa depender muito dos atributos ARIA para torná-los acessíveis.

Se o seu aplicativo da web usa um

elemento como um botão, uma função ARIA pode informar aos leitores de tela que se trata de um botão:

Pedir Milkshake

Mas por que não usar HTML semântico em vez disso?

É mais responsivo, mais legível por máquina e pode até melhorar seu SEO.

Existem alguns cenários em que você não pode usar HTML semântico:

  • É o código de outra pessoa e você não tem autoridade para alterá-lo.
  • É um código legado e você não tem orçamento para corrigi-lo.
  • As telas e dispositivos necessários não oferecem suporte ao elemento semântico.
  • HTML5 não especifica o elemento semântico de que você precisa.

Nesses casos, você não tem escolha a não ser corrigir elementos genéricos com atributos ARIA. Mas sempre que você tiver uma escolha, use HTML semântico.

Leia Também:  Como aplicar marketing localizado ao seu WordPress

# 2: crie um DOM melhor

Você já deve saber como um Document Object Model (DOM) bem estruturado pode melhorar o SEO. Isso geralmente ocorre quando o JavaScript manipula o DOM, às vezes de maneiras que os motores de busca têm dificuldade em rastrear. Mas mesmo algumas práticas rudimentares de SEO são fundamentalmente sobre o DOM.

Quando você se junta a um grupo de

e Itens, mecanismos de busca e tecnologias assistivas não possuem uma estrutura para guiá-los. Eles veem apenas uma coleção de conteúdo genérico.

Em vez disso, organize seu conteúdo logicamente em , , ,

e outros elementos semânticos. Torne a estrutura do documento muito mais explícita e fácil de navegar para tecnologias assistivas. (Os spiders do mecanismo de pesquisa também agradecerão.)

# 3: apare a árvore de acessibilidade

A árvore de acessibilidade de um documento da web é uma transformação do DOM, renderizada pelo navegador e disponível para tecnologia assistiva. É menos e mais que o DOM. Os navegadores removem informações supérfluas e adicionam informações adicionais (às vezes calculadas) para ajudar as pessoas que usam tecnologias assistivas.

Inspecione a árvore de acessibilidade de seu aplicativo da web para ver quais informações serão enviadas para tecnologias assistivas. Que informações importantes estão faltando? Que informações estranhas estão incluídas? Que informações genéricas poderiam ser mais precisas?

Faça uma lista e volte às práticas recomendadas n. 1 e n. 2. Você pode adicionar as informações que faltam ao DOM? Essas informações estranhas deveriam estar em seu aplicativo da web? Você pode usar um HTML semântico mais informativo?

Se você pode corrigir a árvore de acessibilidade com as técnicas acima, faça isso. Isso tornará a estrutura do documento mais clara e o código mais limpo. Mecanismos de busca e tecnologias assistivas irão entendê-lo melhor.

Mas haverá momentos em que você não poderá consertar a árvore de acessibilidade dessa maneira. Nesse caso, é hora de usar algum ARIA.

# 4: Aplicar levemente benchmarks ARIA e outras funções

Analisamos brevemente os papéis do ARIA no exemplo do n. # 1. Recomendei que você usasse HTML semântico.

Leia Também:  Como conduzir o funil por meio do marketing de conteúdo e do link building

Porém, HTML5 não especifica todos os elementos semânticos de que você pode precisar para criar seu aplicativo da web. Mesmo onde isso acontece, alguns itens não são compatíveis com todos os monitores e dispositivos. Esses elementos incluem recursos comuns de experiências modernas da web, como hambúrguer e menus suspensos, pop-ups e alertas.

As funções ARIA eliminam a lacuna de acessibilidade definindo explicitamente a função semântica de um item. Os pontos de sinalização ARIA são um subconjunto de funções que definem as principais áreas de conteúdo de um documento, como um menu de navegação ou uma ferramenta de pesquisa.

Alertas, por exemplo, transmitem informações urgentes que um usuário deve ler imediatamente. No entanto, não há Elemento HTML para transmitir essa urgência às tecnologias assistivas. É aqui que entra um papel ARIA.

O número CSV é necessário para concluir seu pedido.

Com ele “alerta” conjunto de funções, os leitores de tela anunciarão imediatamente o alerta e lerão o texto que ele contém.

# 5: Preencha as lacunas finais com estados e propriedades ARIA

Finalmente, temos estados e propriedades ARIA. Esses atributos ARIA têm um lugar em experiências da web acessíveis, mas você deve usá-los somente depois de aproveitar ao máximo as Práticas 1-4.

Na minha agência, mais de 90% do nosso uso de atributos ARIA se resume às funções e benchmarks no nº 4 e três propriedades ARIA:

  • aria-label para descrever itens sem rótulo de texto visível, como menus de hambúrguer
  • ária marcada por para identificar outro elemento cujo texto rotula o elemento
  • ária-descrita por para identificar outro item que tenha informações adicionais sobre o item

Ao criar experiências da web acessíveis, saber quando não usar tags ARIA é tão importante quanto saber quando usá-las. Use a lente ARIA para examinar seus aplicativos da web em maior profundidade. Torne-os o mais acessíveis possível sem adicionar ARIA e, em seguida, use funções, propriedades e estados ARIA para obter o resto do caminho. Você acabará com um aplicativo avançado da Internet que funciona melhor para todos.

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: