Se você não usa um mouse, não pode usar a web!

Ao criar seu site ou plataforma web, você se preucupa com a acessibilidade? independente da resposta vem descobrir um pouco mais sobre como melhorar a acessibilidade na sua aplicação e não deixar seu usuário a merce de um mouse.

O que é acessibilidade para web?

De forma curta é básicamente permitir que a informação esteja disposivel e acessível para qualquer pessoa, independente de qualquer condição, meio de acesso ou dispositivo.

O objetivo é que a informação possa ser acessada por qualquer um, não importando se a pessoa tenha alguma deficiência ou não.

O que envolve acessibilidade na web?

Quando pensamos na acessibilidade na web, muita gente pensa somente em leitores de tela e pasmem saiba que vai muito além disso, o que pouca gente sabe é que acessibilidade também envolve UX, frontend, backend, produção de conteúdo e até QA. Criar interfaces inclusivas e acessiveis faz parte de todo o processo, assim como codificar conhecendo bem patters wai-aria e padrões de acessibilidade.

Principais tópicos

Acesso pelo teclado: o básico para qualquer site hoje é que ele possa ser totalmente navegavel pelo teclado. Não necessáriamente toda pessoa que visita nosso site fará uso do mouse. Existem algumas formas de preparar seu site para ser funcional com o teclado como o uso de caminho de tabs e AccessKey. O tab sendo um dos mais importantes funciona da seguinte forma: basta inserir o atributo tabindex no HTML em componentes como links, inputs e botões para que fiquem acessíveis ao

apertar a tecla TAB do teclado.

<a href="#" tabindex="1">Primeiro link</a>
<a href="#" tabindex="3">Segundo link</a>
<a href="#" tabindex="2">Terceiro link</a>

Input Types: Imagine que o HTML5 é como um arquiteto que decidiu renovar uma casa antiga, começando pelos seus quartos. Antes disso, tínhamos os mesmos tipos de quartos desde que a casa foi construída - simples, funcionais, mas um pouco limitados. Com o passar do tempo, a família que morava lá cresceu, e as necessidades mudaram. Era hora de dar uma cara nova aos quartos para torná-los mais úteis e confortáveis.

Então, o HTML5 entrou em ação, trazendo consigo uma variedade de novos tipos de quartos. Agora, além dos quartos básicos que já tínhamos, como o de texto e o de senha, temos quartos especiais para datas, números e emails. Esses novos quartos não só facilitam o trabalho dos designers e desenvolvedores, mas também tornam a vida mais fácil para quem usa a casa (ou seja, os usuários da internet).

Exemplo do teclado para texto e numeros em dispositiveis moveis de acordo com o type do input.

WAI-ARIA: A WAI-ARIA complementa o HTML5, permitindo uma interpretação mais precisa das interações em um site, especialmente para usuários de leitores de tela. Enquanto o HTML5 proporciona uma estrutura mais significativa ao layout do site, a WAI-ARIA estende esse significado, facilitando a compreensão e a navegação. Anteriormente, sem o HTML5, tudo era basicamente "divs", sem uma distinção clara entre os elementos do site. Com as tags do HTML5, como menu de navegação e barra lateral, podemos atribuir significado semântico às diferentes partes do site. A WAI-ARIA entra em cena para garantir que essa estrutura seja compreendida por todos os usuários, incluindo aqueles que dependem de tecnologias assistivas, como leitores de tela. Em suma, enquanto o HTML5 define a estrutura, a WAI-ARIA a torna acessível e compreensível para todos os públicos.

Roles, States e Properties: Assim como para padrões a WAI-ARIA facilita a compreensão e a interação em sites, dividindo a semântica em Roles e States/Properties. As Roles definem o tipo de elemento, como um collapse, enquanto os States/Properties indicam seu estado, como aberto ou fechado. Essas definições são feitas diretamente no HTML através de atributos. Existem quatro tipos de Roles: Abstract para conceitos gerais, Widgets para elementos de interface, Document Structure para estruturas organizacionais e Landmarks para áreas importantes de navegação. Para explorar todas as Roles, consulte o site do W3C.

Referências:

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/

HTML STANDARD: https://html.spec.whatwg.org/multipage/input.html#states-of-the-type-attribute

Padrões da Web por Diego Eis: https://pt.slideshare.net/diegoeis/padres-web-passado-presente-futuro

Guia Front-End - Casa do Código: https://www.casadocodigo.com.br/products/livro-guia-frontend