Mudanças entre as edições de "Padrão de desenho da identidade visual"

Exemplo:

Folhas de estilo da Cartilha de Codificação - ePWG

checked="checked"

Não deve ser usada a notação:

checked

(pode-se validar usando o validador da w3c)

(pode-se validar usando o validador da w3c)

OBS: A função “alert” do javascript não gera um pop-up e sim uma mensagem que é lida por todos os leitores de tela.

Recomendação 1.6 eMag

Recomendações de acessibilidade para Conteúdo/Informação

• Mantenha o título com tamanho inferior a 60 caracteres
• Não utilize expressões redundantes como "bem-vindo ao PJe" ou "sítio do PJe" ou "página do PJe" ou "homepage do PJe", entre outros
• Não utilize slogan no início do título. Caso seja necessário, utilize-o após o nome do projeto, por exemplo, separado por hífen. Ex: PJe - Agora, o único papel da justiça é julgar
• Evite o emprego de siglas.

A página deve possuir apenas um elemento H1.

Ex:

Uma div que contenha uma lista vertical de menu:

Errado:

#colunaesquerdavertical {/* regra */}

Certo:

#menu {/* regra */} Ex2:

Uma classe que defina um texto de aviso ou advertência:

Errado:

.vermelho {/* regra */}

Certo:

.aviso {/* regra */}

• Regras para estrutura geral do código (*, html, body, cabecalho, rodapé, etc);
• Regras para navegação;
• Regras para as divs na ordem que aparecem no código;
• Regras gerais para seletores (H1, H2, etc...);
• Regras para links;
• Regras CSS para listas;
• Regras CSS para elementos dentro das divs;
• Regras CSS para classes gerais;
• Outras regras;

Dentro de cada regra defina uma ordem de propriedades (ex: alfabética) e mantenha essa ordem para todos os seletores.

Abrevie as regras CSS para as propriedades que assim as admitem.

Especifique sempre unidades para valores não iguais a zero. O CSS requer que se especifique as unidades (pixels, ems, percentagem, etc...) em propriedades como padding, width, height e font-size. A exceção é quando esse valor é igual a zero (ex:padding=0;). Nesse caso zero é zero e não importa que unidade esteja sendo utilizada.

Links e suas pseudo-classes devem ter regras CSS declaradas em ordem correta para funcionarem corretamente:

   a:link { /* regra */}
   a:visited { /* regra */}
   a:hover { /* regra */}
   a:active { /* regra */}

Seletores semelhantes devem ser agrupados sempre que for possível.

O motivo da instalação de um cookie deve ser sempre avisado ao usuário. O usuário deve ter a opção de recusar um cookie se achar conveniente. De preferência, a recusa do uso de um cookie não deve afetar a usabilidade central do conteúdo.

Para plugins proprietários de outros fabricantes, deve-se fornecer o endereço web para obtenção do plugin. O endereço deve ser da empresa que mantém o programa. Os plugins não devem ser hospedados em páginas do governo. Disponibilizar plugins ou leitores no mesmo endereço das páginas do governo cria tráfego desnecessário e onera os custos com hospedagem.

• 1280x800
• 1024x768
• 800x600

Firefox e Ópera em Windows

São os dois navegadores mais próximos dos padrões web. Se o desenho e estrutura da página funcionam nesses dois navegadores, poucos ajustes precisaram ser realizados nas configurações a seguir. Internet Explorer 7.0 e 6 em Windows XP

São os navegadores mais utilizados do mercado e possuem muitas não-conformidades com os padrões web. A Microsoft recomenda que os ajustes de CSS que precisem ser realizados devem ser feitos por meio de comentários condicionais (conditional comments). Firefox em Linux/Ubuntu

A possibilidade de erros nesse teste é pequena, já que o Firefox foi testado anteriormente no Windows. Os erros mais comuns costumam acontecer na camada de comportamento. Safári em Mac

Apesar do número menor de usuários em Mac o teste nessa plataforma deve ser realizado quando possível.

OBS: O atributo tabindex somente deverá ser utilizado quando existir real necessidade e com a semântica correta. O uso do tabindex pode resultar em uma ordem e tabulação inconsistente.

O HTML5 traz um novo atributo, o required, que especifica que um campo é obrigatório. Esse formato pode ser usado complementarmente, já que essa informação é lida pelo leitor de tela. Além disso, caso o usuário tente enviar o formulário sem preencher o campo obrigatório, uma informação do tipo “por favor, preencha esse campo” aparecerá na tela, além de ser interpretada pelo leitor de tela.

HTML 5
   <label for="nome">Nome:</label>        
    <input type=text name="nome" id="nome" required />    
    <input type="submit" value="Enviar" />

O resultado ficaria assim:

Para facilitar a utilização das âncoras, podem ser disponibilizados atalhos por teclado, utilizando o atributo accesskey nos links relevantes. Não pode haver repetição do mesmo accesskey em uma página. São recomendados atalhos para o menu principal, para o conteúdo e para a caixa de pesquisa.

Orientações para prevenção de erros do WCAG

Caso os links estejam no meio de um parágrafo de conteúdo texto, pode-se utilizar vírgulas, parênteses, colchetes, pipe, entre outros, para fazer a separação.