As demandas por web design incluem cada vez mais acessibilidade à web melhorada. Mas não é suficiente otimizar o site para todos os principais navegadores com compatibilidade de vários dispositivos? Você pode medir facilmente o desempenho, a acessibilidade, as práticas recomendadas e o SEO do seu site usando o Google Lighthouse. Então, por que a acessibilidade é importante?

De acordo com o CDC (Centros para Controle e Prevenção de Doenças), mais de 60 milhões de americanos vivem com alguma deficiência. Seguindo as Diretrizes de Acessibilidade de Conteúdo da Web, você pode apresentar algumas considerações preliminares que contribuirão para tornar um site acessível. Aqui está tudo o que você precisa para começar a acessibilidade na web usando HTML e CSS.

HTML estruturado com semântica adequada

Ao tornar o site visualmente atraente, os usuários de tecnologia assistiva não devem se confundir. Embora muitos sistemas de gerenciamento de conteúdo, como o WordPress, apliquem o HTML, é sua responsabilidade verificar novamente e confirmar se ele foi aplicado corretamente.

Por exemplo, um

Consulte Mais informação: Exemplos de código HTML simples que você pode aprender em 10 minutos

O HTML semântico é mais fácil de desenvolver, pois você obterá funcionalidades adicionais junto com ele. Funciona muito bem no celular. Além disso, quando você dá importância às palavras-chave contidas em

ou tag, ajuda no SEO.

Conteúdo estruturado para usuários de leitor de tela

Aqui está um exemplo de HTML semântico bom vs. mau.

HTML semântico bom
Meu título

Veja como você pode tornar um site acessível usando HTML e CSS

Meu segundo título

HTML semântico ruim
Meu título

Veja como você pode tornar um site acessível usando HTML e CSS

O primeiro caso é muito fácil de navegar para leitores de tela. Ele lerá o cabeçalho notificando sobre o cabeçalho e o parágrafo. Ele irá parar por um segundo após cada elemento. Você pode pular alguns títulos ou voltar ao anterior usando Enter / Return. Você também pode formar um índice analítico usando a tag de cabeçalho.

Quando você escreve HTML de apresentação em vez de HTML semântico (no segundo caso), a linha quebra desnecessariamente e resulta em uma experiência ruim. É como preparar um bloco gigante que é muito mais difícil de cascatear e manipular, uma vez que não há seletores em potencial.

Linguagem e layouts para site acessível

Você deve usar uma linguagem precisa com siglas e abreviações expandidas. Se possível, tente evitar travessões escrevendo 9-5 -> 9 a 5. Anteriormente, as tabelas HTML eram usadas para criar os layouts de página. Costumava dificultar as leituras corretas devido a tabelas aninhadas que formavam um layout bastante complexo. Aqui está uma estrutura de site moderna:

Este é um cabeçalho



Conteúdo da página principal

contendo artigo

Título do artigo

conteúdo do artigo



Rodapé do site

Portanto, como você pode ver, esse layout é amigável ao leitor de tela. A marcação é compreensível com um código claro e conciso. Além disso, é fácil de manter e requer menos largura de banda durante o download. Certifique-se de ter colocado o código-fonte logicamente; Isso fará toda a diferença.

Reconsiderar controles de IU, tabelas e texto alternativo

Mais comumente, os controles da IU são botões, formulário e controles de link de seu documento da web. A regra é que eles podem ser manipulados pelo teclado. Eles têm algum estilo padrão (pode ser diferente em navegadores diferentes) onde você pode pular para outras opções usando a tecla tab e pressionar Enter / Return para chegar a uma conclusão. Você pode gerenciar os rótulos de texto adicionando textos âncora distintos e significativos em vez de "clique aqui".

Para criar tabelas acessíveis, adicione cabeçalhos de tabela

e especifique as linhas ou colunas usando o atributo de escopo. Além disso, você pode usar o ou atributo de resumo para fornecer aos leitores de tela uma visão geral rápida do conteúdo da tabela.

O texto alternativo fornece as informações contextuais da imagem ou vídeo para os rastreadores da web e leitores de tela. Se sua imagem for para fins decorativos, é melhor deixar a alt tag vazia. Caso contrário, dar uma descrição detalhada da imagem ajuda muito.

Na maioria dos casos, o leitor de tela lerá o texto alternativo, o nome do arquivo e o atributo de título (você pode ignorá-lo). Além disso, se você não quiser usar o texto alternativo ou adicionar o mesmo rótulo a várias imagens, aqui vai uma dica rápida:

Uma flor vermelha ...

Você usou o atributo aria-labelledby para se referir a esse id. Isso permitirá que os leitores de tela usem o texto alternativo na forma daquele parágrafo.

CSS padrão para melhor acessibilidade

Atribuir estilo aos recursos acessíveis da página significa que seu design deve se comportar de acordo com o conteúdo principal da página. Por exemplo, para um

,

, e

elemento, um CSS típico deve ser:

h1 {
tamanho da fonte: 4rem;
}
p, li {
tamanho da fonte: 1,5 rem;
cor azul;
}

O tamanho da fonte, espaçamento entre letras, família da fonte, etc., devem ajudar em uma leitura confortável. Os títulos devem se destacar do corpo do texto (o estilo padrão também é bom). Além disso, o texto deve ter uma cor contrastante do fundo que você seleciona com CSS.

Estilo de texto, links e rótulos

Microinterações são possíveis com um CSS acessível. Pode ser tão pequeno quanto enfatizar o texto para destacar os links de maneira adequada. Você pode usar o e tag distintamente. Você pode adicionar um sublinhado pontilhado usando o elemento.

O link padrão deve ser sublinhado com uma cor padrão: azul e um link visitado anteriormente com uma cor padrão: roxo (você pode personalizá-lo).

uma {
cor: # ff0000;
}
a: ativo {
cor: # 000000;
cor de fundo: # a60000;
}
a: pairar, a: visitado, a: focus {
cor: # a60000;
decoração de texto: nenhum;
}

Portanto, com uma mudança no ponteiro do mouse, você deve destacar o texto em foco. O cursor e o contorno desempenham um papel importante na acessibilidade da web.

Use CSS para dar uma aparência limpa aos elementos e rótulos do formulário. Além disso, decida os estados de foco / pairar que são consistentes na maioria dos navegadores. Lembre-se de que essas pequenas dicas ajudam as pessoas a entender sua página da web.

Contraste de cores e valores ocultos

Ajuste o esquema de cores do site para que a cor do primeiro plano (texto / imagem) contraste com a cor do plano de fundo principalmente porque é mais difícil para pessoas com deficiência visual (por exemplo, daltonismo) ler o conteúdo devidamente. Você pode usar Verificador de contraste de cor para obter um esquema de cores decente de acordo com os critérios WCAG. Além disso, tente adicionar sinais de marcação (como um asterisco) junto com avisos ou termos e condições (não apenas um alerta vermelho).

Os leitores de tela não precisam se preocupar até que a ordem do código-fonte seja escrita decentemente. Tente evitar o uso de propriedades display: none ou visibility: hidden, uma vez que ocultam o conteúdo dos leitores de tela.

Torne mais fácil substituir o estilo

O ponto principal é que não importa o quão bem você projete o site, os usuários têm vários motivos para substituir o estilo. Por exemplo, talvez alguns queiram um tamanho de texto maior ou queiram alterar o texto e a cor de fundo para facilitar a leitura. Portanto, sua área de conteúdo deve ser capaz de lidar com isso completamente.

Conclusão: Combine HTML e CSS

Agora, você sabe o básico para começar com HTML semântico e escrever um código-fonte sensato na ordem certa para um site acessível. Concentre-se no HTML e passe a fazer um CSS acessível assim que estiver pronto.

Usando as técnicas acima, você pode aprimorar a experiência do usuário e atender a um belo público. Portanto, comece a criar sites que sejam responsivos e acessíveis.

Como fazer um site: para iniciantes

Hoje irei orientá-lo no processo de criação de um site completo a partir do zero. Não se preocupe se isso parecer difícil. Vou guiá-lo em cada passo do caminho.

Leia a seguir

Sobre o autor

Expandir para ler a história completa