Exibir código-fonte para Padrão de desenho da identidade visual

O objetivo da padronização do desenho da identidade visual é agregar os conceitos de acessibilidade previstos no Modelo de Acessibilidade em Governo Eletrônico - [http://emag.governoeletronico.gov.br/ eMag] na metodologia de desenvolvimento do PJe.

Conforme preconiza o modelo, são previstos os seguintes passos para desenvolvimento de um sítio acessível:

    1. [http://emag.governoeletronico.gov.br/#s2.1 Seguir os padrões Web];
    2. [http://emag.governoeletronico.gov.br/#s2.2 Seguir as diretrizes ou recomendações de acessibilidade];
    3. [http://emag.governoeletronico.gov.br/#s2.3 Realizar a avaliação de acessibilidade].

Descreveremos nesse padrão as diretrizes e recomendações de acessibilidade, assim como os padrões web determinados pelo ePWG, ou seja, os passos 1 e 2 acima.

A avaliação de acessibilidade é um passo que deve estar descrito no processo de desenvolvimento de software utilizado.

== IV1 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Erros de entrada de dados
| Após submissão de formulários, quando um ou mais erros de entrada de dados for detectado, o foco deve retornar ao início do formulário contendo o(s) aviso(s) do(s) erro(s) e, para cada erro encontrado, um link para permitir ao usuário retornar o foco ao campo onde o erro foi detectado. 
Exemplo:
[[imagem:erros.png]]
| Recomendação 6.6 [http://emag.governoeletronico.gov.br/eMag]
|-
|}

== IV2 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Páginas leves
| As páginas devem ter até 50 kb, somados código, conteúdo e imagens. Recomenda-se que as páginas não ultrapassem 70kb de tamanho. A verificação do tamanho da página é viabilizada por meio da verificação de suas propriedades.
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s1.1 Diretrizes da Cartilha de Codificação - ePWG]
|-
|}


== IV3 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Separar forma do conteúdo
| Devem ser utilizadas folhas de estilo (CSS) para separar a forma do conteúdo das páginas. 
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s1.1 Diretrizes da Cartilha de Codificação - ePWG]
|-
|}


== IV4 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Independência de navegadores
| Não utilizar tags ou comandos proprietários. (pode-se validar usando o [https://validator.w3.org/ validador da w3c])
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s1.1 Diretrizes da Cartilha de Codificação - ePWG]
|-
|}


== IV5 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Valores nas linguagens de marcação XHTML E HTML
| Deve-se usar caixa baixa e aspas em todos os valores (pode-se validar usando o [https://validator.w3.org/ validador da w3c])
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s1.1 Padrões Web da Cartilha de Codificação - ePWG]
|-
|}

== IV6 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Fechamento dos elementos
| Todos elementos devem ser fechados, incluindo os elementos que em HTML não possuem tag de fechamento. Exemplo: <nowiki><br/></nowiki> (pode-se validar usando o [https://validator.w3.org/ validador da w3c])
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s1.1 Padrões Web da Cartilha de Codificação - ePWG]
|-
|}

== IV7 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Abreviação de atributos
| Os atributos dos elementos não devem ser abreviados, ou seja, em um [[Manual_de_referência#Campos_de_sele.C3.A7.C3.A3o|checkbox]] marcado, por exemplo, o certo é escrever:
 checked="checked"
Não deve ser usada a notação:
 checked
(pode-se validar usando o [https://validator.w3.org/ validador da w3c])
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s1.1 Padrões Web da Cartilha de Codificação - ePWG]
|-
|}

== IV8 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Não usar elementos depreciados
| Elementos e atributos depreciados não devem ser utilizados. A lista atualizada dos elementos está disponível na [http://www.w3.org/TR/html4/index/elements.html lista de elementos do html do w3c] (coluna Depr marcada com "D"). A lista atualizada dos atributos está disponível na [http://www.w3.org/TR/html4/index/attributes.html lista de atributos do html do w3c] (coluna Depr marcada com "D").  Na lista disponível em [[Elementos e atributos depreciados HTML]] consta o que estava depreciado em 22/06/2015.
(pode-se validar usando o [https://validator.w3.org/ validador da w3c])
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s1.1 Padrões Web da Cartilha de Codificação - ePWG]
|-
|}


== IV9 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Utilizar estilos específicos por dispositivo
| Na construção do CSS, deve-se evitar o uso do Media Type "all" a fim de melhorar a acessibilidade. Por exemplo, para estilos que serão apresentados em telas de computador, deve-se usar o Media Type "screen".
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s2.3 CSS da Cartilha de Codificação - ePWG]
|-
|}

== IV10 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Utilizar arquivos externos para especificar estilos e scripts
| A especificação dos estilos e dos scripts javascript deve ser realizada em arquivos separados.
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s2.3 CSS da Cartilha de Codificação - ePWG]
|-
|}

== IV11 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Utilizar recursos de impressão amigável
| A impressão de páginas deve retirar da página elementos não relevantes, com a preservação do conteúdo. Recomenda-se a utilização do Media Type "print" na especificação do estilo.
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s3.1 Recomendações gerais da Cartilha de Codificação - ePWG]
|-
|}

== IV12 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Não utilizar o elemento "frame"
| A utilização do elemento "frame" não deve acontecer. Para as exceções, o Web designer deve alinhar com o Analista de requisitos e a justificativa deve estar registrada no levantamento de requisitos e como comentário na página.
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s3.1 Recomendações gerais da Cartilha de Codificação - ePWG]
|-
|}


== IV13 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Não utilizar pop-ups
| A utilização de pop-ups não deve acontecer. Para as exceções, o Desenvolvedor deve alinhar com o Analista de requisitos e a justificativa deve estar registrada no levantamento de requisitos e como comentário na página.
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s3.1 Recomendações gerais da Cartilha de Codificação - ePWG]
|-
|}


== IV14 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Utilize comentários no código
| Sempre comente seu código. Utilize comentários principalmente nas declarações de classes, métodos, objetos e constantes. Lembre-se de que outros desenvolvedores darão manutenção no seu código, então comente pensando em qual(is) informação(ões) será(ão) necessária(s) para viabilizar essa manutenção de forma segura.
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s3.1 Recomendações gerais da Cartilha de Codificação - ePWG]
|-
|}

== IV15 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Utilize URLs amigáveis
| As URLs devem ser únicas e compreensíveis. Não se deve utilizar "?", "&", "=" ou outros caracteres especiais. De preferência, utilize mecanismos de reescrita de URL para garantir o uso de URLs amigáveis.
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s3.1 Recomendações gerais da Cartilha de Codificação - ePWG]
|-
|}


== IV16 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| As URLs devem funcionar sem o "www"
| O usuário deve poder digitar apenas o nome do domínio para acessar as URLs.
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s3.1 Recomendações gerais da Cartilha de Codificação - ePWG]
|-
|}

== IV17 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Evite utilização de elementos e classes HTML quando desnecessário
| Utilize os atributos “class” e “id” com parcimônia assim como os elementos SPAN e DIV.
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s3.1 Recomendações gerais da Cartilha de Codificação - ePWG]
|-
|}


== IV18 ==
{| border=0 width="50%"
|-
|<b>Nome do padrão</b>
|<b>Descrição do padrão</b>
|<b>Referência</b>
|-
| Evite utilização de elementos e classes HTML quando desnecessário
| O elemento <table> nunca deve ser utilizado para formatação de layouts de páginas e posicionamento de elementos. Quando tabelas de dados forem criadas, deve-se associar a célula ao cabeçalho e à linha. Recomenda-se o uso de elementos de acessibilidade na criação de tabelas de dados, tais como summary, caption, abbr, id, headers, além da identificação dos cabeçalhos por meio do atributo “th".
| [http://epwg.governoeletronico.gov.br/cartilha-codificacao#s3.1 Recomendações gerais da Cartilha de Codificação - ePWG]
|-
|}




[[Category:PJe2]]