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.