12 dicas para deixar sua página web mais acessível
Você pensa em acessibilidade quando está programando?
Desenvolver um sistema ou um site pensando em acessibilidade pode parecer difícil e demorado. Porém, mesmo com diversas outras atividades para desenvolver no dia a dia, existe uma série de pequenas ações que farão uma grande diferença na vida das pessoas ❤
Neste post irei compartilhar com vocês 12 dicas para deixar suas páginas mais acessíveis com base nos meus aprendizados.
Aproveito para compartilhar meu Repositório no Github com a implementação das dicas mencionadas abaixo.
DICA Nº 1
Busque Referências sobre acessibilidade. Existem diversos conteúdos de boas práticas e profissionais especializados que podem te ajudar a desenvolver aplicações mais acessíveis, podendo citar:
- W3C: é a principal padronizadora da Web e desenvolveu um documento com as diretrizes de melhores praticas de acessibilidade para a web, conhecida como WCAG 2.0.
- GOV.BR: uma das principais atribuições do Governo Federal é promover a inclusão social. Por isso, um modelo de acessibilidade, conhecido como EMAG, foi desenvolvido.
- WPT: conhecido como 'Web para todos', é um movimento que tem o propósito de mobilizar, educar e transformar a sociedade para a construção de uma web acessível.
- Especialista UX: é o profissional que executa ações com foco no usuário e pode te ajudar a desenvolver aplicações mais acessíveis.
DICA Nº 2
Implemente ajustes de fontes. Usuários com deficiência visual ou baixa visão podem ter dificuldade em ler o conteúdo do seu site. Por isso, é importante disponibilizar uma funcionalidade em que o usuário possa ajustar a fonte conforme sua necessidade, conforme o exemplo abaixo.
DICA Nº 3
Descreva corretamente o atributo ALT da imagem. Você não precisa ser mestre na descrição da imagem, precisa apenas escrever algo que faça sentido e fique claro para o usuário. Usuários que utilizam leitor de tela e usuários que possuem baixa conexão com a internet podem não conseguir ver a imagem; logo, o atributo ALT é acionado.
DO
DONT
DICA Nº 4
Implemente Alto contraste. A utilização de cor é um problema comum de acessibilidade que muitas vezes passa despercebido quando se está desenvolvendo uma aplicação Web. Nem todas as pessoas percebem a cor da mesma maneira e, por isso, implementar alto contraste é uma forma de reduzir esse problema. Além disso, implementar essa funcionalidade irá ajudar pessoas com algum tipo de deficiência visual.
DICA Nº 5
Declare a linguagem(idioma) correta do documento HTML. Essa marcação, apesar de simples, é muito importante, pois quando leitor de tela acessar sua página ele poderá ajustar a linguagem e a entonação da fala conforme a linguagem do documento configurado. lang="pt-br"
DICA Nº 6
Implemente tradução em libras. Essa funcionalidade é super importante pois traz acessibilidade e inclusão para milhares de brasileiros que se comunicam através da Língua Brasileira de Sinais "Libras". Nem sempre é possível fazer uma tradução humana do conteúdo para libras, que é o mais indicado, porém existem diversos intérpretes no mercado nos ajudando nessa missão. Podemos citar o Handtalk, por exemplo.
DICA Nº 7
Utilize HTML semântica correta. Com o HTML5 isso ficou mais fácil, pois cada elemento já vem com um propósito pré-definido. Além disso, usar uma semântica correta é importante para SEO e principalmente para leitores de tela que, ao ler o elemento, já informam ao usuário qual é o significado daquele componente.
EX: uma lista de itens, se usarmos a marcação correta, o leitor de tela, ao ler o conteúdo, já identifica que se trata de uma lista e automaticamente informa ao usuário quantos itens estão listados.
DO
DONT
DICA Nº 8
Estilize o elemento que está em estado de Foco. Essa estilização é muito importante, pois você informa ao usuário de maneira visual qual o elemento que está em foco e, além disso, ainda ajuda na leitura e compreensão de conteúdos para pessoas com dislexia, dificuldade visual ou motora.
DICA Nº 9
Transforme textos em caixa alta no CSS. Não escreva texto em caixa alta direto no html, isso deve ser alterado no CSS. Quando o leitor de tela lê sua página, ele pode entender esse texto como uma sigla ou ler com uma entonação indesejada. Sempre que existir essa necessidade, faça essa transformação pelo CSS usando o text-transform. Com isso, o texto será alterado visualmente e não terá impacto para o leitor de tela.
DICA Nº 10
Configure o TabIndex para navegar entre os elementos. Muitas pessoas utilizam o TAB do teclado para navegar pela página, e com o atributo TabIndex configurado, você consegue ordenar os elementos que receberão o foco quando a tecla TAB do teclado for pressionada.
DICA Nº 11
Utilize os atributos Aria no documento HTML quando necessário. Existem momentos em que somente o HTML nativo não dá conta do trabalho. Nestes casos, podemos usar o ARIA, que é um conjunto de atributos especiais para a acessibilidade e que pode ser adicionado no HTML. Esses atributos definem o significado do componente e informam o estado atual do elemento.
Essas tags são importantes principalmente para leitores de tela que, ao ler, a interpretam.Aria-label: é o atributo utilizado para descrever o significado daquele elemento. Quando utilizamos imagens, temos o atributo ALT por default. Porém, quando precisamos descrever outros elementos, podemos utilizar o Aria-label.
Aria-hidden: é o atributo que recebe um valor booleano. Ele é utilizado para esconder ou não um conteúdo do leitor do Tela. Um exemplo de caso de uso é utilizar esse atributo com o valor "true" em uma tag de vídeo de tradução em libras, pois não faz sentido ter um vídeo de tradução em libras para um usuário com deficiência visual.
<video Aria-hidden=“true”></video>
Aria-haspopup: é o atributo utilizado para dizer que o elemento apresenta alguma informação quando clicado. Podemos utilizá-lo, por exemplo, em um menu hambúrguer, que é expandido ao clicar.
Aria-Expanded: é o atributo utilizado para dizer ao usuário se o elemento está ou não expandido. Um caso de uso é o menu Hambúrguer, o qual você pode indicar para o leitor de tela, com esse atributo, se o menu está aberto ou fechado.
Role: é o atributo utilizado para definir o papel do elemento. Usamos o elemento role para dizer, por exemplo, que uma div é um botão.
DICA Nº 12
Realize testes com o Leitor de Telas. O leitor de telas é uma tecnologia muito utilizadas por pessoas com deficiência visual e com baixa visão. Por isso, é importante realizar testes com essa tecnologia para a identificação de possíveis barreiras que precisem ser eliminadas em sua aplicação.
No Mac, utilize o comando "fn+command+f5" para habilitar o voice over.
Chegamos ao final, pessoal. Espero que tenham gostado das dicas e até a próxima.✌🏼
