Acessibilidade em aplicações Web é um assunto muito importante e que vem ganhando cada vez mais visibilidade, não só pela inclusão social, mas também pela quantidade de pessoas que nosso serviço conseguirá alcançar.
Quais técnicas de Acessibilidade vocês costumam usar no desenvolvimento dos seus projetos?
Eu não conheço muito sobre o tema, mas acho super válido.
Já refiz uma página para deixá-la acessível para pessoas com daltonismo, porque as cores que havia escolhido eram muito próximas umas das outras, (azul escuro, roxo, lilás) repensei os tons e deixei algo mais neutro.
Acho importante para um desenvolvedor front end usar um screen reader pelo menos uma vez para entender como uma pessoa com deficiência visual acessa um site. Eu tenho instalado o NVDA que é um dos mais utilizados: https://www.nvaccess.org/download/
Não sei de pessoas que se aprofundam nesse assunto, mas tem as documentações da mozilla que sempre são de qualidade. # HTML: Boas práticas em acessibilidade
# CSS e JavaScript - melhores práticas de acessibilidade
Desde 2004, um Decreto Federal (nº 5.296) torna obrigatório que todos os portais e sites dos órgãos da administração pública atendam aos padrões de acessibilidade digital. Depois disso, vários decretos, portarias e até uma lei – a Lei de Acesso à Informação Nº 12.527, de novembro de 2011 - trataram do tema, abrangendo todos os sites e não apenas os governamentais. No dia 06 de julho de 2015 foi sancionada a Lei Brasileira de Inclusão da Pessoa com Deficiência (Lei 13.146) que torna obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País ou por órgãos de governo. Mas, mesmo existindo a legislação, isso não foi suficiente para que de fato a situação tenha sido resolvida até hoje.
(Acesso para Todos: Acessibilidade na Web)
Algumas dicas sobre acessibilidade que posso dar que eu também aplico nos meus projetos no dia a dia:
escolher com cuidado as cores que serão utilizadas no projeto. Elas precisam ter contraste, não só para os deficientes visuais (não incluo apenas os cegos, mas quem tem algum tipo de daltonismo) mas também para aqueles que acessam a interface no celular quando estão num ambiente de pouca ou muita luminosidade. Uma sugestão é usar o site WebAIM: Contrast Checker para verificar se o contraste está adequado entre a cor de fundo e a cor da fonte do texto.
sempre que inserir uma imagem ou vídeo na página, colocar o atributo ALT na tag e com uma explicação adequada do que tal elemento representa. Por exemplo: vou usar no meu site a foto de pessoas sorrindo e trabalhando, então no atributo ALT vou colocar: “Equipe de três pessoas trabalhando e felizes/sorridentes.”
alvos clicáveis devem possuir um tamanho adequado. Isso inclui botões, links e imagens clicáveis. Nada de inserir um link que tem 12px x 12x. Precisa ser maior a área clicável para que o usuário do mobile consiga utilizar sem maiores problemas.
para saber se o seu site está aplicando as diretrizes de acessibilidade corretamente, você pode utilizar o LIGHTHOUSE do inspector do Chrome (acredito que todos navegadores tenham essa feramenta, já usei no firefox e no mozilla também). Ele irá apontar se tem algum problema no seu site ou se está tudo ok. Quanto maior a avaliação de cara área, melhor o seu site está. Isso é importante para ter um bom rankeamento no Google também
Só reiterando que nem toda imagem precisa ser lida pelo leitor de tela, se for meramente ilustrativo, melhor nem colocar. Nesse caso, eu uso o alt vazio alt="" em conjunto com a tag aria-hidden="true". Alguns leitores já passam batido pela imagem só com o alt vazio, mas outros não. O aria-hidden garante que a imagem não vai ser lida por nenhum