Acessibilidade Digital: um guia rápido sobre as melhores práticas

Segundo um relatório produzido pelo We Are Social e Hootsuite de janeiro de 2021, existem atualmente 4,66 bilhões de usuários na internet em todo o mundo. Como a população global está na casa de 7,8 bilhões de pessoas, podemos afirmar que mais da metade da população mundial está ligada na rede.

Isso significa que a internet está no centro dos processos de trabalho, aprendizagem e entretenimento. É nesse contexto que cresce um importante debate acerca da Acessibilidade Digital. Mas o que isso significa?

Acessibilidade Digital quer dizer a eliminação de barreiras na web. O termo tem como premissa que os sites e portais sejam projetados de modo que todas as pessoas possam perceber, entender, navegar e interagir de maneira efetiva com as páginas.

Neste artigo, produzido por Neuber Guadelupe – Analista de UX na Vertigo, você vai entender mais sobre a necessidade de criarmos mecanismos que promovam a acessibilidade digital, bem como dicas para tornar a navegação da web mais inclusiva.

Acessibilidade Digital no Brasil 

Estima-se que há 45,6 milhões de pessoas com algum tipo de PCD no Brasil, isto equivale a 25% da população.

É necessário mencionar que dentro da esfera legal, está na lei brasileira de inclusão (lei 13.146/2015) que todos os sites brasileiros, públicos ou privados tenham ferramentas que promovam acessibilidade.

A Constituição prevê a igualdade material entre todos, sendo de responsabilidade dos governantes viabilizar condições igualitárias para as pessoas em situações especiais, possam realizar suas ações como o restante da população.

ESG e o novo rumo do mercado global

A sigla ESG significa Environmental, Social and Governance, em sua tradução literal: “Ambiental, Social e Governança”.

Promover a acessibilidade digital é uma pauta que está cada vez mais presente nas grandes empresas, tanto no setor público quanto no privado.

Empresas alinhadas com esse movimento também estão envolvidas com as melhores práticas ambientais, sociais e de governança. Essas ações estão se tornando um grande diferencial em meio a concorrência, sendo fator decisivo na tomada de decisão de grandes clientes e  investidores.

Apesar da crescente prática da ESG, muitas empresas ainda estão atrasadas e não colocaram as ações em suas agendas de acessibilidade digital. Até mesmo empresas engajadas enfrentam dificuldades para adaptar seus portais, de forma que estejam acessíveis para pessoas com algum tipo de deficiência.

Acessibilidade na web 

Quando falamos de acessibilidade digital, isso não envolve apenas pessoas com PCD. Existem também os casos de limitação visual “situacional”, ou seja, pessoas com vista cansada e que podem ter dificuldades de preencher um formulário por exemplo, ou até mesmo daltonismo.

Ter atenção a esses detalhes na hora de desenvolver uma plataforma digital faz toda a diferença, pois além de ajudar pessoas com algum tipo de limitação, também é fator relevante junto aos critérios de rankeamento em sites de busca (SEO) como o Google.

Para saber como se enquadrar nas exigências, você pode acessar as Diretrizes de Acessibilidade para Conteúdo Web (WCAG).

Ferramentas para tornar a navegação na web mais inclusiva

A internet é um vasto repositório de informações. É impossível absorver todo o conteúdo novo que é criado diariamente na grande rede. Agora imagine se você for portador de alguma necessidade especial? O grau de dificuldade aumenta um pouco, por isso algumas boas práticas podem tornar esse processo mais igualitário. Confira:

• Jaws – Leitor de tela pago. A licença custa aprox. R$8.000,00;
• NVDA (No Video access) – Leitor de tela free;
• Firefox – 40% dos usuários com PCD tem preferência pelo navegador;
• Hand Talk – Plugin tradutor de conteúdo para libras;
• Essential Accessibility – Ferramenta assistiva para diversos tipos de deficiência. Idade, Derrame, Paralisia, Artrose;
• BrowseAloud – É composto por uma série de ferramentas que adiciona fala, leitura e tradução;
• DYNO Mapper – Ferramenta de diagnóstico;
• WCAG ContrastChecker – Ferramenta para teste de acessibilidade com background e foreground color.

Veja mais algumas possibilidades para promover acessibilidade digital

• Descrição das imagens – conter uma descrição detalhada para que as ferramentas para deficientes visuais a identifiquem;

• Captcha – se já é complicado entender o que significa, imagine interpretar letrinhas distorcidas para pessoas que têm alguma disfunção cognitiva. Hoje existem outros tipos de solução, com imagens e som, por exemplo;

• Teclado virtual – é muito comum para pessoas que precisam digitar uma senha de banco, por exemplo. Não são recomendados para pessoas com mal de Parkinson ou outra deficiência física;

• Atalho para conteúdo – clicando na tecla “tab” o PCD transita entre os itens e elementos presentes. Agora imagine transitar entre os elementos e abrir uma pop up. Como o PCD retorna à navegação? O recomendado é a utilização de botões para que a pessoa acesse diretamente o conteúdo;

• Atalhos de teclado – permitir atalhos para a facilitação da acessibilidade;

• Botões com frase em imagem – botões são elementos fundamentais para qualquer estratégia. Erros comuns são textos aplicados somente nas imagens, não utilizando um texto alternativo. Isto impossibilita a conversão de um PCD;

• Carrossel – segundo as boas práticas da w3c.br, não é proibido o uso de propagandas, fotos em carrossel, destaques animados, entre outros, mas deve-se moderar o uso de animações rápidas demais e que ficam se repetindo infinitamente.

Vai desenvolver um site? Confira abaixo algumas práticas inclusivas 

Desenvolver sites que promovam a acessibilidade digital é um desafio para qualquer bom programador. Por sorte, já existem inúmeros conteúdos informativos que servem de guia para projetar um portal de maneira clara para o maior número de pessoas possível.

• Ao projetar um site, as tabelas precisam seguir uma estrutura padrão que contenham: table, summary, caption, thead, tbody e se necessário, tfoot. Para uma tabela responsiva, utilize a class table-responsive-vertical dentro de uma section. <section class=”table-responsive-vertical’>;

• Label – precisa ter a tag “for“ e seu valor será o mesmo do usado no “id“ do input. Inputs que forem de preenchimento obrigatório, precisa ter required;

• Âncoras e Atalhos –  auxiliam pessoas com deficiência a navegar pelo conteúdo do portal. <a accesskey=”1″ href=”#go-to-main” tabindex=”1″> Ir para o conteúdo</a>.

• H1, H2, H3 – os usuários começam a navegar entre os headings. Em alguns casos, é uma boa prática utilizar o H1 em logotipos no header, entretanto quando tratamos de acessibilidade temos que ver o que mais faz sentido para o usuário;

• Lang – sempre manter na língua em que o portal está sendo criado;

• Alt – o atributo ALT tem um papel muito importante, pois permite que deficientes visuais interpretem uma imagem, e a descrição de um conteúdo de um áudio;

• Title – geralmente utilizado para a descrição de logotipos dentro de tags SVG;

• A tag <figcaption> é utilizada quando houver necessidade de uma descrição mais detalhada da imagem complementando o atributo alt.

Passo a passo para a verificação de acessibilidade

Quer saber como projetar o seu site da melhor forma possível e obedecendo boas práticas de acessibilidade digital? Confira abaixo como fazer:

1. Validar o HTML pelo W3C
2. O idioma da página foi declarado?
3. O contraste da página foi validado (daltonismo e cor por cor)?
4. A logo da página tem link?
5. O primeiro elemento do header é um h1 com o título da página?
6. Os demais h1 da página, se houver, estão dentro de <section> ou <article> ?
7. Os h1-h6 estão de forma hierárquica?
8. As descrições das imagens foram feitas <figcaption> e alt=”” ?
9. O conteúdo do site pode ser compreendido da mesma forma sem utilização de imagens?
10. O focus está estilizado no css, para navegação com tecla tab?
11. Todos os links estão acessíveis via teclado?
12. Os links apresentam suas devidas descrições, não contendo ‘clique aqui’; e ‘leia mais’?
13. Os links externos possuem alguma identificação que os diferenciam?
14. Os arquivos para download possuem alguma identificação que os diferenciam?
15. Os arquivos para download mostram descrição e extensão no texto do link?
16. Os vídeos possuem legenda e libras?
17. Vídeo que começa automaticamente ao entrar na página, tem botão para pausar?
18. Os label e inputs estão relacionados entre si?
19. Os campos obrigatórios do formulário são devidamente sinalizados?
20. As tabelas possuem thead, summary, caption, tbody e tfoot para agrupar conteúdo?
21. As tarefas realizadas possuem feedback ou alertas sobre os possíveis erros e o que deve ser feito?
22. Após tudo necessário para acessibilidade ser incluído, o código foi validado em  algum validador da lista da w3c?

Vertigo e Liferay implementam acessibilidade digital no Brasil 

A Vertigo é parceira de instituições públicas e privadas no desafio de oferecer aos usuários uma experiência digital personalizada, baseada nas melhores práticas de acessibilidade. Para isto, conta em seu portfólio com a solução Liferay DXP, do parceiro estratégico Liferay, líder do quadrante mágico do Gartner na oferta de Produtos Digitais. A Vertigo também é o único parceiro Platinum Partner da Liferay na América Latina, indicando alto nível de qualidade nas implementações em nossos clientes. Atuamos há mais de 20 anos no mercado de tecnologias e seguindo práticas inclusivas, que são tão necessárias.

Como o Liferay DXP pode ajudar na construção de um portal acessível?

A crescente demanda no mercado por Plataformas de Experiências Digitais (DXP) é uma sinalização clara de que empresas do setor público e privado estão buscando promover uma real transformação digital de jornadas na web. A pandemia é um dos fatores que têm acelerado a busca por soluções que promovem uma melhor acessibilidade digital.

Com o Liferay DXP, a Vertigo vem promovendo a melhora na comunicação de empresas junto ao seu público, através da criação de novos portais otimizados, que oferecem uma navegação com layouts inclusivos às pessoas em condições especiais. Além disso, a plataforma oferece suporte qualificado, tempo de resposta e carregamento das páginas com baixa latência.

Gostaria de alinhar a sua empresa às práticas de acessibilidade digital? Entre em contato com o nosso time, teremos prazer em te ajudar.