Em algum momento, aprendemos que os atributos alt
são importantes, então todos começaram a preenchê-los sempre que houvesse uma imagem, mas na verdade eles também precisam seguir algumas regras e dicas úteis:
- Se a imagem tiver um texto próximo a ele que explique a imagem (como uma legenda), o atributo
alt
deverá estar vazio (mas ainda apresentado no elementoimg
); - As imagens que são links devem ter o
alt
para descrever para onde vão. Por exemplo, um botão que envia o usuário à página Produto deve teralt= "Página do produto"
; - Porém, se a imagem fizer parte de um link âncora que possui um atributo de texto sem formatação, ou texto oculto visualmente, ou se houver rótulo de ária, o atributo
alt
da imagem deve então estar vazio; - Se a imagem for completamente decorativa, deixe o
alt
vazio; - Ao usar imagens que contenham texto breve, ou no caso de um logotipo da empresa, o contexto do atributo
alt
deve ser o de explicar a própria imagem ou a ação que a imagem possui, portantoalt= "Logotipo do Paypal"
está incorreta, deve ser apenasalt= "Paypal"
; - Não use as palavras "foto de .." ou "imagem .." na propriedade
alt
da imagem, as tecnologias assistivas já anunciam isso, então você está apenas criando redundância e repetição; - Nunca tente simular quebras de linha no texto alternativo, pois isso causa problemas nos leitores de tela.
Os formulários são uma parte muito importante dos websites, e existem algumas opções comuns de desenvolvimento que, infelizmente, cria muitas violações de acessibilidade.
Não use <fieldset>
em torno de formulários que possuem apenas UM campo de entrada (o button
não conta).
O <fieldset>
deve ser usado apenas para agrupar vários campos com um objetivo comum, por exemplo, ao ter 3 elementos selecionados para definir uma data de nascimento, uma lista de botões de opção ou caixas de seleção com várias opções.
Você pode ter vários <fieldset>
no mesmo formulário, se necessário.
labels
são elementos muito importantes para a acessibilidade, pois são a principal forma de o usuário com deficiência entender e poder usar os formulários.
Uma opção de design comum é usar apenas o placeholder
do campo e sem labels
, mas infelizmente o placeholder
NÃO é visível para leitores de tela, portanto, isso é uma violação das WCAG.
Para resolver esse problema, siga o uso básico de labels
:
- Adicione o elemento
<label>
adequado; - Se, devido a opções de design, o site não puder ter
labels
visíveis, adicione-as usando uma classe que oculte alabel
visualmente; - Lembre-se de que o rótulo deve ter um atributo
for
vinculado aoID
de do atributoinput
.
Algo que se tornou muito comum nos sites é usar algum plugin para substituir o elemento nativo <select>
e simulá-lo usando divs
ou ul > li
.
Infelizmente, independentemente do que essas páginas de plug-in digam, elas não estão em conformidade com os padrões de acessibilidade, porque mesmo que você possa usá-los com navegação no teclado, eles simulam e implementam esses recursos de maneira incorreta e não-nativa.
Como resolver: A maneira mais simples e de longe a mais recomendada é abandonar completamente os plugins e apenas usar o
elemento HTML nativo padrão <select>
.
É claro que os clientes/designers não vão gostar, porque existem algumas limitações no que pode ser estilizado por eles, mas se a acessibilidade for um requisito, então é a direção mais simples.
Falando sobre as limitações dos elementos <select>
nativos, você pode estilizar apenas a seleção em si, definindo o tamanho do texto, a borda, o preenchimento, etc.
É possível trabalhar com estilos e padronizar o elemento arrow entre navegadores e dispositivos.
Como sabemos, não há muita personalização para o elemento option
quando expandido, pois eles são tratados como um elemento do sistema. Os únicos atributos que eles usarão do CSS são:
-
As propriedades da fonte como tamanho, família, peso e cor (altura da linha ou qualquer outra propriedade para adicionar espaço entre os itens não funcionarão. solução alternativa é ter opções vazias + desativadas + ocultas por ária entre elas);
-
Cor de fundo para toda a lista, com uma cor diferente para a selecionada, se desejado.
Infelizmente, esse é o principal motivo pelo qual alguns designers/clientes exigem o uso de plug-ins, pois não gostam da aparência do elemento option
padrão.