O design de aplicativos da Web acessíveis é um componente essencial para proporcionar uma experiência positiva ao usuário e a satisfação geral dos usuários do aplicativo. Um aplicativo da Web acessível garante o mesmo acesso a pessoas com diversas habilidades e para pessoas em diversas localizações geográficas. Pessoas com limitações relacionadas às habilidades auditivas, cognitivas, de fala ou visuais, e limitações temporárias relacionadas a deficiências de curto prazo, conexão lenta de Internet ou até mesmo a luz do sol, poderão acessar seu aplicativo da Web. Ao criar o front-end do seu aplicativo da Web, use soluções de acessibilidade desde o início para evitar problemas de acessibilidade e a necessidade de refazer qualquer trabalho mais tarde durante o processo de compilação. Verifique se o conteúdo do seu aplicativo pode ser transmitido por rastreadores da Web e leitores de tela, além de proporcionar uma experiência do usuário positiva.
A acessibilidade é uma obrigação legal em muitos países e setores. Você precisa entender essas diretrizes e incorporar soluções de acessibilidade ao seu design de front-end. Vários casos de negócios destacam a importância da acessibilidade do conteúdo da Web também.
Recursos como o MDN e as WCAG oferecem diretrizes e sugestões essenciais para aumentar a acessibilidade do seu aplicativo da Web. Você também pode fazer o curso Aprender acessibilidade (link em inglês) em web.dev.
A interdependência entre vários componentes é um aspecto essencial para tornar um aplicativo da Web acessível a diversos usuários.
Cor e contraste
O uso de cores é um fator principal na avaliação da acessibilidade de um aplicativo da Web. Os usuários front-end precisam ser capazes de perceber o conteúdo na página, e a cor e o contraste afetam consideravelmente a percepção dos usuários. As condições de visualização e as deficiências relacionadas à visão podem ser temporárias, situacionais ou permanentes, mas precisam ser consideradas ao criar o front-end do seu aplicativo da Web. Criar o contraste correto ou a diferença de brilho entre cores usadas na interface voltada ao usuário pode tornar seu aplicativo da Web mais acessível para diversos usuários. A taxa de contraste fornece a diferença no brilho entre o plano de fundo e o texto.
Para medir o contraste, use a fórmula de proporção para garantir que exista um contraste mínimo para o texto ou os ícones em segundo plano. Há muitas formas de deficiências de percepção de cor a serem consideradas, mas os novos modelos de cores podem garantir que o conteúdo seja percebido corretamente, mesmo se visualizado em escala de cinza.
O uso de um tema escuro geralmente é recomendado para oferecer suporte a cor e contraste para acessibilidade. Os temas escuros geralmente são preferidos para entrada visual devido à luz branca e dificuldades de leitura. Como os aplicativos baseados em conteúdo incluem uma grande quantidade de texto e imagens, é crucial que você use cor e a proporção de contraste de forma inteligente para atender às diversas necessidades dos usuários.
Saiba mais sobre cor e contraste em web.dev (link em inglês).
Tipografia
A tipografia refere-se à escolha e à disposição do texto para que ele seja legível e legível para diversos usuários. Uma das configurações de acessibilidade mais alteradas é o tamanho de fonte padrão nos dispositivos. Alguns usuários podem querer colocar mais texto na tela com uma fonte menor ou deixar o texto o maior possível. Portanto, é muito importante tornar o tamanho da tipografia flexível e legível. Caracteres de texto individuais também precisam ser distinguíveis ao leitor, e o texto geral precisa estar legível. Durante o design do front-end do seu aplicativo, selecione famílias tipográficas que incluam legibilidade e legibilidade.
Fonte
A família tipográfica, ou família de fontes, escolhida para seu aplicativo da Web precisa ser visualmente acessível a uma ampla variedade de leitores. A família tipográfica é o design visual das letras usadas no texto do seu aplicativo. Muitos estudos descrevem a importância da família tipográfica ao avaliar a acessibilidade do conteúdo da Web. Encontrar o equilíbrio entre a marca, os objetivos de design da interface do usuário e a facilidade de leitura torna seu aplicativo mais agradável para uma variedade maior de usuários. Ao criar seu front-end, considere como as opções de família tipográfica e de fontes contribuem para a acessibilidade e o design geral do seu aplicativo.
Tamanho da fonte
Considere permitir o zoom do navegador para ajudar usuários com baixa visão ou deficiência
de percepção de cor. A fonte do texto no seu aplicativo da Web
precisa ser visível para diversos leitores. Para conseguir variações de tamanho de fonte,
mude de px para rem. As unidades Rem permitem um tamanho de fonte relativo
ao elemento raiz do aplicativo Wep. Essa é uma opção versátil que aumentaria a acessibilidade geral do seu aplicativo da Web.
Estrutura e layout
Várias propriedades estruturais e de layout afetam a acessibilidade da interface. Os recursos de layout a serem considerados incluem espaçamento e alinhamento dos blocos de texto, bem como espaço entre as linhas de texto e até letras individuais. Use grades e visualize os componentes que você quer incluir no design. O layout e a estrutura do conteúdo precisam ser envolventes e agradáveis para os usuários consumirem. Layouts complexos ou planos de fundo complexos com vários blocos de texto podem ser difíceis de usar para alguns usuários, como aqueles com TDAH. Priorize a inclusão durante o processo de design do front-end.
ARIA e HTML
Accessible Rich Internet Applications (ARIA) inclui um conjunto de diretrizes e atributos para ajudar a tornar os aplicativos da Web mais acessíveis para os usuários. ARIA complementa o HTML e permite widgets JavaScript acessíveis, atualizações de conteúdo em tempo real e mensagens de erro, entre outros. O uso correto de ARIA é essencial para tornar seu aplicativo da Web mais acessível. O uso incorreto de ARIA pode levar a erros e, na verdade, tornar seu aplicativo menos acessível aos usuários.
Use
rótulos ARIA
quando possível para introduzir formatos alternativos compatíveis com braille
e conversão de texto em voz (TTS). Os papéis e rótulos ARIA permitem mudar a árvore
de acessibilidade quando ela é diferente da árvore dom. Esses rótulos também são importantes ao
usar tags não padrão, como um div sendo usado como botão clicável. ARIA
é necessária quando um elemento HTML não tem suporte de acessibilidade. Ao
projetar um app baseado em conteúdo, confira se os leitores de tela e
outros dispositivos adaptativos têm suporte para ajudar o aplicativo a alcançar
o maior número possível de usuários.
Saiba mais sobre ARIA e HTML em web.dev (link em inglês).
Internacionalização
Internacionalização significa projetar um aplicativo da Web para que seja acessível a usuários de diferentes origens linguísticas e culturais. Ele precisa se adaptar a diferentes idiomas, regiões geográficas e preferências culturais sem mudanças significativas no código. Os principais componentes da internacionalização incluem suporte multilíngue, localização, separação de conteúdo, formatação de data e hora, direção do texto, negociação de idioma, entre outros.
Ao internacionalizar seu aplicativo da Web, é possível criar uma experiência inclusiva e fácil de usar para um público global. A internacionalização é essencial para qualquer aplicativo da Web com uma base de usuários diversificada ou meta de expansão internacional.
Propriedades lógicas
Ao criar estilos no CSS, use start / end em vez de propriedades como top / down/ left/ right. Isso garante que os menus e
layouts do site mudem de acordo com os idiomas RTL.
Conteúdo alternativo
Inclua o atributo
lang
na tag HTML com links para documentos alternativos no cabeçalho para
fornecer uma marcação personalizada ao conteúdo. Isso permite que o navegador selecione a página
correta se o idioma definido for diferente do idioma padrão. Ela ajuda os navegadores da Web e os mecanismos de pesquisa a entender o idioma da página, o que é importante para renderizar o conteúdo corretamente e para uma SEO eficaz.
Internacional
O objeto
Intl
em JavaScript é uma ferramenta importante para criar aplicativos da Web multilíngues e
culturalmente conscientes. Ele fornece recursos de internacionalização e localização em aplicativos da Web, além de garantir que a interface e o conteúdo sejam compreensíveis e culturalmente apropriados para usuários em todo o mundo. Os recursos fornecidos pelo objeto Intl incluem formatação de data e hora,
formatação de números e agrupamento de strings.
Saiba mais sobre internacionalização em web.dev (link em inglês).
Formulários
Os formulários HTML são uma parte essencial dos aplicativos da web orientados a conteúdo. Eles permitem a interação do usuário e fornecem um método estruturado para coletar informações do usuário. Se os formulários HTML não forem acessíveis a um público amplo, eles poderão causar frustração e insatisfação nos usuários.
Para tornar os formulários HTML acessíveis, use elementos HTML semânticos em todos os campos do formulário. Isso ajuda as tecnologias adaptativas a entender o propósito de cada campo e facilitar o preenchimento para os usuários. Além disso, rotule todos os campos do formulário com clareza. Isso ajuda os usuários a fornecer informações precisas e úteis. Também é importante testar a acessibilidade dos seus formulários HTML. Isso pode ser feito usando tecnologias adaptativas para simular a experiência de um usuário que exige essas tecnologias para consumir o conteúdo do seu aplicativo.
Saiba mais sobre como criar formulários no web.dev (link em inglês).