Acessibilidade em aplicações Web

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?

4 Likes

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.

1 Like

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/

3 Likes

É bom usar os atributos role e aria-label, entre outros, pra auxiliar os usuários que utilizam o leitor de tela.

1 Like

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

4 Likes

Só agora ví que fizeram outro tópico sobre o assunto com muito material:

2 Likes

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)

1 Like

Fiz um post ontem sobre isso com muitos links e materiais. O @vero inclusive mandou o link do meu post aqui (obrigada!).

3 Likes

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 :wink:

  • tem um tempinho para estudar sobre acessiblidade? Sugiro ler as diretrizes na própria cartilha deles: Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1 - Português

1 Like

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 :wink:

3 Likes

Verdade, havia esquecido de mencionar isso! Obrigada :smile:

1 Like