As práticas de CSS que podem prejudicar a acessibilidade

CSS tornou-se uma linguagem todo-poderosa. O que começou como um meio de adicionar estilo básico ao texto e outros elementos de design agora é capaz de muito mais.

Podemos usá-lo para criar praticamente qualquer layout imaginável. Efeitos especiais e interatividade que costumavam exigir JavaScript ou plug-ins de navegador agora são suportados nativamente. A linguagem passou de uma ferramenta básica para uma das tecnologias fundamentais por trás de cada site.

Mas, como qualquer ferramenta poderosa, o CSS também pode ter efeitos colaterais indesejados. A acessibilidade está entre as maiores áreas de preocupação. Algumas implementações podem realmente fazer mais mal do que bem.

Com isso em mente, vejamos algumas práticas de CSS que podem prejudicar a acessibilidade. Eles incluem recursos comuns que requerem consideração cuidadosa antes de começar a escrever o código. Vamos começar!

Exibindo texto importante usando a propriedade content

A propriedade de content CSS oferece uma maneira inteligente de adicionar aprimoramentos visuais a um elemento. Por exemplo, você pode usá-lo em combinação com um pseudoelemento para adicionar um ícone antes de uma passagem de texto ou item de lista. Ele também pode exibir imagens ou strings de texto.

Mas esse último pode ser particularmente problemático. O texto adicionado por meio da propriedade de content não é incluído no modelo de objeto de documento (DOM). Isso significa que a tecnologia assistiva, como leitores de tela, pode não reconhecê-lo.

Isso é bom para itens puramente decorativos. No entanto, pode levar a problemas de acessibilidade se o texto fornecer um contexto vital para uma página. Os usuários podem perder informações importantes.

Portanto, é melhor evitar usar a propriedade content para exibir texto. Isto é, a menos que você tenha certeza de que isso não interferirá na capacidade do usuário de compreender a página.

Criando Sequências Animadas Piscantes Intensas

A animação é uma área onde o CSS tem visto uma grande evolução. Os efeitos que antes eram território de bibliotecas de terceiros agora podem ser criados com relativa facilidade. E como eles têm suporte nativo, eles podem aproveitar recursos como aceleração de hardware para aumentar o desempenho.

Transições e transformações básicas podem fazer maravilhas para criar um clima e chamar a atenção do usuário. E também é possível construir efeitos incrivelmente realistas com a ajuda do JavaScript.

Mas certos estilos de animação podem ter efeitos negativos. Para alguns usuários, muito movimento pode ser desorientador – ou muito pior. Efeitos intermitentes ou estroboscópicos intensos podem levar a convulsões. Isso é possível na web – assim como em filmes, programas de televisão e videogames.

O WCAG 2.0 oferece algumas orientações baseadas em pesquisas para a criação de animações que não desencadearão convulsões ou outras reações adversas. Por exemplo, é recomendável que uma apresentação seja configurada para piscar não mais do que três vezes por segundo, além de manter o tamanho pequeno e evitar a cor vermelha.

Felizmente, isso não limita nossa capacidade de impressionar os usuários com o movimento. Ainda há muitas oportunidades para aprimorar nosso trabalho. Mas os tipos de animação usados ​​e seus impactos potenciais devem ser examinados.

Não intuitivo :hover ou :focus Estados em elementos interativos

CSS é especialista em estilizar elementos interativos. Considere o que é possível com itens do dia-a-dia, como hiperlinks e campos de formulário. Eles podem ser personalizados a ponto de ficarem irreconhecíveis quando comparados com sua aparência padrão.

Isso é tudo muito bem. Mas também é importante pensar no que acontece quando um usuário interage com um elemento. Imagine clicar em um botão que não oferece nenhuma pista visual para confirmar o que aconteceu. Ou usar um teclado para percorrer um menu que não destaca o link atual.

Eles podem ser simples, mas essas microinterações ajudam a fornecer contexto aos usuários. Confirmar um clique de botão ou entender em qual item de menu seu cursor está focado são apenas dois exemplos. E cada um traz uma sensação de confiança quando o visitante navega em um site.

O estilo inicial de um elemento interativo é apenas metade da batalha. Oferecer estilos intuitivos para as :hover e :focus completam a experiência do usuário.

Vale a pena notar que esses estilos devem ser facilmente perceptíveis. Na prática, isso significa usar mais do que apenas a cor como indicador. Adicionar animações, contornos ou ícones pode ajudar a garantir que ninguém fique de fora.

Tomando como garantidos os fundamentos do design acessível

Todos nós já estivemos lá. O prazo de um projeto está se aproximando rapidamente e você precisa fazer as coisas. Na corrida para o lançamento, alguns itens relacionados à acessibilidade podem passar despercebidos.

Muitas vezes, são os fundamentos do design acessível que ficam para trás. Essas práticas de CSS que os designers podem considerar normais e assumir que já estão de acordo com o padrão.

Os principais exemplos incluem fundamentos como tipografia legível e taxas de contraste de cores aceitáveis. Sem considerar e testar esses itens, um site pode não ser tão acessível quanto você pensa.

É por isso que vale a pena reservar um tempo extra para revisar os aspectos mais amplos dos estilos do seu site. Mesmo que um item passe na inspeção do “globo ocular”, faça um esforço extra para realizar uma auditoria. Você pode se surpreender com quantas oportunidades de melhoria sutil encontrará.

É sobre usar CSS com responsabilidade

Como o CSS é tão poderoso, é fácil ser tentado pelas possibilidades que ele oferece. Por que se contentar com uma animação básica quando você pode criar algo cinematográfico? E como não amar a praticidade de usá-lo para gerar conteúdo?

Tudo se resume a empatia e responsabilidade. Como qualquer ferramenta, o CSS é capaz de grandes coisas. Mas só porque podemos implementar um recurso específico não significa que seja adequado para acessibilidade. Vivemos em um mundo onde pessoas de todas as esferas da vida consumirão o que construímos. E é nosso trabalho garantir que eles possam fazer isso sem obstáculos.

O lado bom é que evitar as práticas acima está ao alcance de todos. Na maioria das vezes, é uma questão de pensar no impacto potencial do que fazemos. A partir daí, o teste nos fornece os dados de que precisamos para refinar ainda mais as coisas.

O CSS existe para facilitar a acessibilidade. Está tudo em como escolhemos usá-lo.