Um guia básico para criar aplicações inclusivas

Pensar em acessibilidade quando se está desenvolvendo um software é a chave para garantir que todes, independentemente de suas capacidades, tenham igual acesso aos recursos de uma aplicação.

Acessibilidade é fundamental para atender as necessidades de diferentes grupos, incluindo pessoas neuroatípicas, como aquelas com autismo e TDAH, assim como pessoas de baixa escolaridade, idosos ou com mobilidade reduzida. Além disso, implementá-la amplia o alcance de mercado do produto, aprimora a experiência da pessoa usuária e estabelece você como profissional diferenciade.

Neste artigo, vamos explorar diferentes aspectos a serem considerados, relacionados a código, interface e comunicação.

Acessibilidade no front-end

Estrutura semântica com HTML

Comece utilizando HTML semântico. Declare a linguagem do documento para leitores de tela poderem ler no idioma correto, inclua metadados apropriados e forneça um título coerente para a página.

Construa o documento com títulos e textos estruturados com as tags HTML adequadas, respeitando a hierarquia de cabeçalhos. Marque as seções do conteúdo com as “landmark roles” para uma melhor navegação.

Links e atalhos de navegação

Crie links e atalhos de navegação, posicionando o link “skip to content” como o primeiro elemento da página. Certifique-se de que os links tenham descrições precisas usando o atributo “aria-label”.

Modais e carrosséis

Em modais, evite que a navegação continue na página principal após a abertura do modal. Garanta que o primeiro elemento tabulável dentro do modal seja o botão de fechar.

Em carrosséis, inclua um botão “skip” para pessoas usuárias que navegam pelo teclado pularem o conteúdo.

Foco e zoom

Mantenha o outline dos elementos para facilitar a navegação. Permita que outros elementos, como parágrafos, também recebam foco via teclado.

No CSS, personalize o hover, focus e active. Utilize unidades de medidas relativas ao invés de medidas fixas. Não bloqueie o zoom e inclua descrições para imagens, a menos que sejam decorativas.

Texto e idioma

Evite justificar textos, a dica é separá-los por blocos. Evite também utilizar sublinhado para melhorar a legibilidade.

Use o CSS para textos capitalizados ou em caixa alta, nunca o HTML. Use o atributo “src-only” para ocultar elementos disponíveis apenas para leitores de tela.

Bibliotecas e ferramentas

Considere o uso de bibliotecas e ferramentas específicas para implementar a acessibilidade, tornando o processo mais eficiente.

Extensões do Chrome como axe Devtools, Landmark Navigation via Keyboard or Pop-up e Screen Reader, e a extensão do VS Code axe Accessibility Linterpodem ajudar.

Caso trabalhe com o React, utilize bibliotecas como @axe-core/react e Radix UI.

Formulários acessíveis

Em formulários, inclua labels para facilitar a compreensão e interação, e garanta a estrutura correta.

Acessibilidade no back-end

Escreva mensagens de erro que façam sentido, inclua códigos de status HTTP apropriados para facilitar o tratamento de erros no lado cliente e forneça respostas claras da API.

Design acessível

Evite paletas de cores saturadas e teste o contraste entre fonte e cores/imagens de fundo, de acordo com as diretrizes fornecidas pelo WCAG.

Não dependa exclusivamente de cores, imagens ou texto para transmitir informações, busque associá-las de várias formas.

Comunicação acessível

Mantenha o texto simples, evite metáforas e analogias, e opte por uma linguagem objetiva e direta.

Facilite o preenchimento de formulários por meio de corretores automáticos e forneça sugestões.

Testes de acessibilidade

Compreenda como os leitores de tela funcionam e teste a navegação usando o teclado. Desabilite CSS e JavaScript para verificar o funcionamento do software sem essas tecnologias.

Experimente interagir com a aplicação com o monitor desligado e considere utilizar ferramentas de avaliação de acessibilidade.

Ao adotar a acessibilidade como princípio fundamental no desenvolvimento de software, as pessoas desenvolvedoras não apenas atendem às necessidades de diversos grupos de pessoas usuárias, mas também aprimoram a qualidade de seus produtos e contribuem para um ambiente tecnológico mais inclusivo.

A acessibilidade deve ser um compromisso constante, com o objetivo de tornar o mundo digital acessível a todes, independentemente de suas capacidades, promovendo a equidade e a igualdade no acesso à tecnologia.

➡️E você, conhecia essas orientações? Deixe um comentário!

Artigo escrito por Madalena Rocha, da Comunidade PrograMaria.

Recomendação de conteúdo

➡️W3C

➡️WCAG