IBIATEC - Soluções Digitais
26/03/2021

Acessibilidade na web

Acessibilidade na web

Assim como no mundo real onde pessoas com deficiência enfrentam barreiras no dia-a-dia, no mundo virtual elas também existem. Já se perguntou como um deficiente visual consegue acessar o Facebook? Ou como o deficiente auditivo acessa o Youtube? 

Naturalmente, quando planejamos a construção de um site ou de um aplicativo, sempre lembramos em fazer um layout incrível, talvez com efeitos sonoros, vídeos e imagens agregando seu conteúdo, imaginando que todas as pessoas poderão consumir estas informações em sua completude. Mas nem sempre pensamos como uma pessoa com baixa visão, ou com baixa audição, ou ainda com alguma mobilidade reduzida pode consumir seu conteúdo.

Por isso, ao elaborar o site, devemos pensar sempre nas melhores práticas para que não coloquemos barreiras de acesso. Devemos lembrar que há recomendações para o uso de cores que se contrastam, privilegiando os deficientes visuais com baixa visão. Também pensar sempre em legendar seus áudios e vídeos para que os deficientes auditivos possam compreender o que está sendo apresentado. Ainda, pensar numa ótima experiência e interface para que os deficientes com mobilidade reduzida possam interagir com o seu site.

Ao quebrar estas barreiras, além de facilitar o uso do seu site para os deficientes, sua audiência aumenta, pois eles também poderão ser consumidores assíduos do seu conteúdo, afinal é um local onde podem navegar livremente.

Front-end

Se pensarmos em 10 anos atrás, no surgimento dos smartphones, a internet era repleta de sites totalmente pensados para serem consumidos em desktops ou laptops. Com a chegada dos smartphones, o mundo da web passou a enfrentar a barreira da tela, pois a diferença de pixels, os 1024px dos desktops contra os 290px dos smartphones da época, muitos sites começaram a receber versões mobile. E o que significa? Os designers passaram a pensar em versões menores dos conteúdos já existentes. Com isso, abriu-se a possibilidade de, além de pensar na utilização em dispositivos variados, tirar as barreiras para os deficientes.

O orgão regulamentador da internet, o W3C, criou a Cartilha de Acessibilidade (https://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-web-fasciculo-I.html), onde contextualiza e orienta os desenvolvedores a construir uma internet mais inclusiva.

E porque esse movimento aconteceu com a chegada dos smartphones? É simples. Ao ter a necessidade de construir um front-end que atenda dispositivos de dimensões diferentes, é preciso construir um HTML único e limpo e, com isso, não incluindo barreiras. Os layous responsivos facilitam a utilização das tags corretas pelos desenvolvedores e assim um computador com leitor de tela consegue passar as informações para o deficiente visual de maneira clara e objetiva.

Cores

Uma das principais preocupações quando se trata de acessibilidade na web, é a utilização de cores. O primeiro passo é tomar cuidado com o contraste entre cores. Pessoas com baixa visão muitas vezes não conseguem ler algum texto que possui um fundo com contraste baixo.

De acordo com W3C, a relação de contraste (“contrast ratio”) entre o texto e a cor de fundo deve ser no mínimo 4.5 para 1 (nível AA), e quanto maior a fonte e maior a densidade da mesma essa relação de contraste se torna maior. Se sua fonte possui 18px ou 14px em negrito a relação de contraste mínima cai para 3 para 1.

E além das cores propriamente ditas, precisamos pensar nas cores dos componentes do site.

Nos links, é recomendado que seja configurado o text-decoration (o traço abaixo do texto), assim o link tem fácil identificação por usuários com baixa visão.

Nos formulários, lembre-se de sempre incluir o label para descrever cada campo de preenchimento além do placeholder. Assim ajudamos o usuário a ler e compreender o que precisa ser preenchido.

Nos botões, além de utilizar as cores para identificar a ação dos botões, como por exemplo o vermelho para exclusão, devemos lembrar de acrescentar outros apoios visuais, como um ícone, por exemplo.

UX/UI

É na etapa de planejamento da experiência e interface do usuário que a promoção do acesso digital aos conteúdos para todas as pessoas é pensada, discutida e colocada em evidência.

Quando pensamos em acessibilidade no design gráfico, temos que ter preocupação com os deficientes visuais, pois se tratam de imagens e elementos que envolvem esse sentido. É necessário a descrição das imagens e produtos, de maneira humanizada, transcrevendo cores e sensações também, para que possam ter a sensação em sua forma completa.

Sobre os materiais de áudio ou vídeo, que ficam à disposição nos sites, todos devem possuir transcrição para os que possuem deficiência auditiva. O texto deve ser fiel ao que está sendo dito.

Ao projetar um site, o HTML deve ser construído de maneira consciente, com botões clicáveis para pessoas com deficiência visual, além de textos claros aos que usam o leitor de tela. Lembrar também que algumas pessoas não podem usar o mouse ou teclado e utilizam a função de comando de voz.