Folhas de Estilo em Cascata ou Cascading Style Sheets, as famosas CSS, permitem modificar as características de exibição e estilo de elementos HTML. Mas a maioria dos devs front end negligencia técnicas de CSS acessível.
Todos os navegadores da Web possuem uma folha de estilos interna que define o estilo padrão para o conteúdo da página.
Por exemplo, o elemento <p> possui estilos padrão para margem, tamanho etc. A <strong>, <table> e todas as outras tags HTML são definidas nesta folha de estilos; seu tamanho, cor, posição e outras características são todos definidos nela.
Quando um autor de página define seus próprios estilos, ele pode substituir essa folha de estilos interna e solicitar ao navegador para exibir elementos de uma maneira diferente.
O termo “Cascata” consta no nome de CSS porque existe uma hierarquia (ou precedência) sobre como os estilos são aplicados: os estilos padrão do navegador são substituídos por estilos em uma folha de estilos externa (geralmente um arquivo .css), que são substituídos por estilos internos (normalmente encontrados em <head> de uma página), que são substituídos por estilos de elemento (aplicados diretamente a um elemento).
Mas por que uma pessoa definiria seus próprios estilos? Bem, existem muitos e muitos motivos, dentre os quais:
- Alguém com baixa visão pode definir um tamanho de texto muito maior;
- Outro, com deficiência de cores ou baixa visão, pode substituir as cores da página para impor determinadas cores ou alto contraste;
- Um terceiro, com dificuldades cognitivas ou de aprendizado, pode substituir o posicionamento ou desativar as imagens para garantir uma apresentação mais básica;
- Uma pessoa com dislexia pode alterar fontes e espaçamento de texto para uma melhor legibilidade;
- etc.
Como o CSS trata principalmente sobre apresentação visual, a maioria do CSS não afeta o que um leitor de tela lerá. No entanto, algumas valores de propriedades, como display: none, visibility: hidden, ou pseudo-elementos ::before e ::after podem sim afetar leitores de tela.
Separando conteúdo da apresentação
Um dos principais benefício de CSS é que os autores podemos separar o conteúdo de sua apresentação.
Conteúdo significa o texto, títulos, lista, regiões, imagens e outros elementos definidos na marcação HTML, juntamente com sua semântica ou significado inerentes.
Apresentação significa a maneira pela qual o conteúdo é exibido conforme definido pelo CSS. Ao garantir que o conteúdo esteja em HTML e a apresentação em CSS, se alguém desabilitar ou substituir o CSS, o conteúdo e a semântica ainda deverão estar totalmente acessíveis.
Controlando o layout
CSS oferece algumas maneiras para se lidar com layouts (especialmente CSS Grid), conferindo a possibilidade de um grande controle sobre o posicionamento dos elementos em uma página, independentemente da ordem desses elementos no código HTML.
A ordem do código-fonte subjacente determina a ordem de leitura do leitor de tela e a ordem de navegação do teclado. Normalmente, eles devem corresponder ao layout visual e à ordem de apresentação. Ambos devem ser lógicos e intuitivos e geralmente devem se alinhar.
Escondendo conteúdos com CSS
Em quase todos os casos, se o conteúdo for apresentado visualmente em uma página, ele deverá estar acessível a pessoas usando um leitor de tela. Da mesma forma, seria muito raro ter conteúdo apresentado a leitores de tela que não é apresentado visualmente em uma página.
No entanto, há exceções a isso, principalmente para coisas que podem fazer sentido visualmente, mas para as quais uma explicação ou instrução sucinta pode ser útil para quem usa esses leitores.
Apresentando conteúdo e significado com CSS
Ao contrário de ocultar conteúdo com CSS, às vezes o conteúdo ou o significado são apresentados exclusivamente com CSS.
Isso pode incluir o uso de CSS para fazer o seguinte:
- Definir imagens de background que têm conteúdo
- Controlar o layout de maneira a afetar o significado
- Usar apenas a cor para transmitir significado
- Gerar conteúdo com CSS (com
::beforee::after)
Regra geral, essas técnicas devem ser evitadas. No entanto, nas situações em que CSS é usado para apresentar informações ou conteúdo (ou significado que não seria acessível de outra maneira), uma alternativa acessível deve ser fornecida.
Por exemplo, as imagens de background CSS não podem receber texto alternativo diretamente (embora uma propriedade alt para CSS esteja atualmente em desenvolvimento).
Se uma imagem transmitir conteúdo, ela deve ser idealmente colocada no conteúdo usando o elemento <img> com um valor de atributo alt apropriado.
Se isso não for possível, texto oculto ou fora da tela (ou talvez ARIA) pode ser usado para transmitir o conteúdo da imagem às pessoas que não podem vê-lo.
Sempre use a marcação HTML nativa para fornecer o conteúdo e significado semânticos necessários, depois use CSS para aprimorar e alterar os estilos-padrão.
Conclusão
O assunto acessibilidade na Web (a11y), em geral, é obviamente muito mais amplo, mas essas são as dicas mais básicas sobre CSS acessível.
Cada vez mais, desenvolvedores (e quem nos contratam) percebem a extrema importância de se preocupar com acessibilidade em projetos Web. Prestar atenção em CSS acessível certamente é um belo passo rumo ao aprimoramento da acessibilidade na Web.