Prevenção de Erros de Acessibilidade

Este documento visa listar maneiras de se construir ferramentas e layouts de maneira acessível, de acordo com as regras da W3C. Tal documento servirá como consulta para os desenvolvedores do TelEduc a fim de minimizar os problemas futuros de acessibilidade.

Folhas de estilo: CSS [1]

Erros encontrados na avaliação do TelEduc v4.0: Arquivos_CSS

Unidades CSS de medida:

WCAG 1.0 - Checkpoint 3.4 [Prioridade 2]: Use unidades de tamanho relativo ao invés de absoluto nos atributos da marcação e nas folhas de estilo.

Técnicas sugeridas:

  • Utilize unidade "em" para o tamanho das fontes.
  • Utilize unidades relativas e porcentagens. CSS permite que você use unidades relativas mesmo para posicionamentos absolutos (ex. pocisionamento de uma imagem).
  • Utilize unidades de tamanho absoluto apenas quando o sabe-se características físicas do meio de saída.

Fontes:

WCAG 1.0 - Checkpoint 11.2 [Prioridade 2]: Evite utilizar funcionalidades obsoletas W3C.

Técnicas:

  • Sempre especifique uma fonte genérica (fallback generic font).
  • Ao invés de utilizar elementos de apresentação e atributos obsoletos, utilize as propriedades CSS para controlar características da fonte: 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', e 'font-weight'.
  • Utilize as seguintes propriedades CSS2 para controlar a informação da fonte: 'font', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant' e 'font-weight' ao invés dos elementos de fonte do HTML: FONT, BASEFONT, "face" e "size".
  • Se você precisa utilizar elementos HTML para controlar informações da fonte, utilize BIG e SMALL, que não estão obsoletos.

Substituição para o estilo do usuário/User Style Sheet:

WCAG 1.0 - Checkpoint 11.2 [Prioridade 2]: Evite utilizar funcionalidades obsoletas W3C.

  • !important
    A fim de garantir que os usuários podem controlar os estilos, houveram mudanças no CSS2 quanto a semântica do operador !important definido no CSS1. No CSS1, os autores sempre tiveram a palavra final sobre os estilos (estilo do autor se sobrepunha ao estilo definido pelo usuário). Já no CSS2, se uma folha de estilo do usuário contém !important esta prevalece sobre qualquer regra aplicável em folhas de estilo do autor. Para tal, tanto as folhas de estilo do usuário quanto as do autor, devem ter o operador !important. Esta é uma característica importante para os usuários que precisam ou devem evitar certas combinações de cores e contrastes, precisam de fontes grandes, etc.
    Por exemplo, a seguinte regra especifica um tamanho de letra grande para o parágrafo de texto e iria substituir uma regra autor de igual peso:

P { font-size: 24pt ! important }

Layout, posicionamento, camadas e alinhamento:

WCAG 1.0 - Checkpoint 3.3 [Prioridade 2]: Utilize folhas de estilo para controlar layout e apresentação.
WCAG 1.0 - Checkpoint 5.3 [Prioridade 2]: Não utilize tabelas para layout a menos que a tabela faça sentido quando linearizada. Caso contrário, se a tabela não faz sentido, dê um equivalente alternativo (que pode ser uma versão linearizada).

Técnicas:

  • 'text-indent', 'text-align', 'word-spacing', 'font-stretch' permitem que o usuário controle espaçamento.Utilize 'text-align: center' ao invés do elemento ultrapassado CENTER.
  • 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'. Com estas propriedades, o autor pode criar um espaço em quatro lados do conteúdo de um elemento ao invés de adicionar non-breaking spaces ( ).
  • 'float', 'position', 'top', 'right', 'bottom', 'left' permite que o usuário controle o posicionamento visual de qualquer elemento de forma independente a que o elemento aparece no documento. Autores devem sempre "desenhar" documentos que fazem sentido sem folhas de estilo (ou seja, o documento deve ser escrito em uma ordem lógica)e então aplicar style sheets (folhas de estilo) para documentar os efeitos visuais. As propriedades de posicionamento devem ser usadas para criar notas de margem (margin notes), barras laterais, efeitos de moldura, cabeçalhos simples e rodapés, etc.
  • Caso seja necessário utilizar imagem como espaçamento, deve-se especificar o atributo alt="" para tais imagens. Não é recomendável utilizar espaço como valor do atributo alt: "alt= ". Exemplos:
// Exemplo ruim:  
   my poem requires a big space<IMG src="10pttab.gif" alt="&nbsp;&nbsp;&nbsp;">here

// Exemplo bom: 
// Uma imagem é utilizada para forçar um gráfico a aparecer em determinada posição:

   <IMG src="spacer.gif" alt="spacer">
   <IMG src="colorfulwheel.gif" alt="The wheel of fortune">