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

• Mozilla Firefox versões 41 e seguintes
• Google Chrome, versões 43 e seguintes

Deve-se, então, testar o CSS e o HTML nos navegadores citados acima.

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.

Recomendação 6.3 eMag

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.

Para exclusões/inativações, deve-se sempre confirmar com o usuário, independente do objeto, se o usuário tem certeza do procedimento antes de prosseguir.

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.

• O texto for incluído após a entrada de dados pelo usuário (por exemplo, sugerir um novo nome de usuário caso o escolhido já exista);
• A semântica do documento justifique a inclusão de texto pré-definido (por exemplo, um campo de unidade da federação já preenchido para instalações do PJe em tribunais estaduais, quando pertinente);
• Os caracteres tenham sido fornecidos previamente pelo usuário (por exemplo, refinamento de busca).

• Opção de uso do sítio em alto contraste
• Atalhos de teclado
• Página de descrição com os recursos de acessibilidade do sítio

• para ir ao painel do usuário;
• para ir à caixa de perfis;
• para ir ao desconectar;
• para ir à caixa de pesquisa (Acesso rápido).

Os atalhos deverão funcionar através de números precedidos da tecla padrão de cada navegador (Alt no Internet Explorer, Shift + Alt no Firefox, Shift + Esc no Opera, etc.). As dicas dos atalhos deverão ser disponibilizadas na barra de acessibilidade e na página sobre a acessibilidade do sítio,

• Cor de fundo : independente da cor utilizada, ela deve ser alterada para preto (#000000) ;
• Cor de texto : independente da cor utilizada, ela deve ser alterada para branco (#FFFFFF) ;
• Links : O modo normal do link deve ser sublinhado (para que ele se diferencie do texto normal), assim como o modo hover e o modo active. O link deve ser alterado para amarelo (#FFF333) ;
• Ícones : Todos os ícones devem ser brancos;
• Linhas e Contornos : As linhas e os contornos de elementos devem ser alterados para branco.

Um modelo funcional da página pode ser visto em: http://portalpadrao.plone.org.br/acessibilidade