Voltar para o site

Autor: Russ Weakley
URL do original: https://www.maxdesign.com.au/presentation/checklist.cfm
Título original: A web standards checklist
Traduzido com autorização expressa do autor.
NOTA: Esta página é a tradução da apresentação de Russ Weakly para a "Sydney Web Standards Group" em 5 de Agosto de 2004

Um checklist para web standards

Publicado em: 01/08/2003

Web standards - mais do que 'sites sem tabelas'

O termo 'web standards' pode ter significado distinto para pessoas diferentes. Para uns, pode significar construir websites sem uso de tabelas, para outros, usar código válido . Contudo, web standards significa muito mais que isto. Um site projetado segundo as Web Standards deve estar em conformidade às standards (normas) (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) e segundo as melhores práticas ( código válido, acessível, semanticamente correto, user-friendly URLs etc).

Em outras palavras, um site projetado segundo as Web Standards deve ser leve, claro, baseado em CSS, acessível, atender a usabilidade e amigável aos mecanismos de busca.

Sobre o checklist

Este checklist não é definitivo. Muitos itens provavelmente poderão ser acrescidos. Ele é simplesmente um ponto de partida. Ele tem muitas finalidades:

  • mostrar a amplitude das web standards
  • servir como uma ferramenta para desenvolvedores durante as fases de projeto de um web site.
  • servir como uma ajuda aos desenvolvedores que pretendem migrar para web standards

O checklist

  1. Qualidade do código
    1. O site usa Doctype correto?
    2. O site usa um - Character set - rol de codificação de caracteres correto?
    3. O site usa (X)HTML válido?
    4. A CSS usada pelo site é válida?
    5. A CSS usa algum tipo de "hack"?
    6. Há declaração de classes ou ID's desnecessárias?
    7. O código é bem estruturado?
    8. Há links quebrados?
    9. Qual é a performance velocidade de carregamento/tamanho da página - speed/page size?
    10. Há erros de JavaScript?
  2. Grau de separação entre conteúdo e apresentação
    1. O site usa CSS para todos os aspectos da apresentação (fontes, cores, espaçamentos, bordas etc)?
    2. As imagens estão todas incluidas nas CSS, ou elas são inseridas via (X)HTML?
  3. Acessibilidade para usuários
    1. O atributo "alt" é usado para todas as imagens?
    2. O site usa unidades de medida relativas em lugar de absolutas para tamanhos de texto?
    3. Há quebra do layout quando o usuário aumenta o tamanho da fonte?
    4. O site usa "skip" para menus?
    5. Os formulários são acessíveis?
    6. As tabelas são acessíveis?
    7. O site faz uso de cores contrastantes?
    8. O site faz uso da cor para transmitir informação?
    9. Menus do tipo dropdown foram projetados com "delay" compatível com usuários portadores de reduzida habilidade motora?
    10. Os links são todos descritivos (para usuários com restrições visuais)?
  4. Acessibilidade para dispositivos
    1. O site é bem visualizado tanto em browsers antigos como recentes?
    2. O conteúdo é acessível com as CSS desabilitadas ou não suportadas pelo agente de usuário?
    3. O conteúdo é acessível com as imagens desabilitadas ou não suportadas pelo agente de usuário?
    4. O site é consistente em browsers de texto tais como o Lynx?
    5. O site é legível quando impresso?
    6. O site é bem visualizado em dispositivos portáteis?
    7. O site utiliza corretamente as metadatas?
    8. O site e bem visualizado em diferentes resoluções do browser?
  5. Usabilidade básica
    1. A hierarquia visual do site é clara e bem definida?
    2. Os níveis dos títulos são bem definidos e consistentes?
    3. A navegação no site é fácil de se entender?
    4. O sistema de navegação é consistente?
    5. Há links sublinhados?
    6. A linguagem adotada no site é consistente e apropriada?
    7. Há um Mapa do Site e uma página para contato? São fáceis de serem localizados?
    8. Para sites grandes, há um campo de busca?
    9. Há um link para a home page em cada uma das páginas do site?
    10. Os links visitados são claramente definidos com uso de uma cor única?
  6. Administração do site
    1. O site tem uma página de erro 404 que funciona em todos os níveis?
    2. O site utiliza URL's amigáveis - friendly URLs?
    3. As URLs funcionam sem o "www"?
    4. O site utiliza "favicon" ?

1. Qualidade do código

1.1 O site usa DOCTYPE correto?

Doctype (abreviatura para -'document type declaration' - declaração do tipo de documento) informa ao validador qual é a versão de (X)HTML está sendo usada, e deve ser a primeira declaração a ser inserida em uma página web. Doctypesão a chave para web sites conformes: o código de marcação e as CSS não validarão sem ele (Doctype).
https://www.alistapart.com/articles/doctype/

Mais links sobre doctype:

1.2 O site usa um - Character set - rol de codificação de caracteres?

Se um agente de usuário (p. ex.: um browser) não detectar o tipo de codificação de caracteres usado no documento Web, o usuário corre o risco de ter em seu browser um texto ininteligível. A informação do character set é importante não só para sites multilíngues, mas declarar a codificação é importante também para qualquer desenvolvedor que projete XHTML/HTML ou CSS.
https://www.w3.org/International/tutorials/tutorial-char-enc/

Mais links sobre character set :

1.3 O site usa (X)HTML válido?

Código válido carrega melhor e mais rápido que código com erros. Os browsers estão cada vez mais conformes com as standards tornando assim crescente a necessidade de se escrever HTML conforme e válido.
https://www.maxdesign.com.au/presentation/sit2003/06.htm

Mais links sobnre código válido :

1.4 A CSS usada pelo site é válida?

Você precisa certificar-se de que não há qualquer erro tanto no HTML quanto nas CSS, evitando assim falhas na apresentação do documento.
https://www.meyerweb.com/eric/articles/webrev/199904.html

Mais links sobre CSS válida :

1.5 A CSS usa algum tipo de "hack"?

Basicamente o uso de "hacks" é uma escolha pessoal e quando mais profundo seus conhecimentos sobre "workarounds" mais específico e consistente será seu projeto.
https://www.mail-archive.com/wsg@webstandardsgroup.org/msg05823.html

Mais links sobre "hacks" :

1.6 Há declaração de classes ou ID's desnecessárias?

Eu notei que quanto maior as habilidade desenvolvida pelo projetista quase sempre resulta em desenvolvimento de uma boa CSS mas um código XHTML pobre. Especificamente um código HTML tende há estar recheado de divs e ids desnecessárias. O resultado disto é um HTML e folhas de estilo "inchadas".
https://www.clagnut.com/blog/228/

1.7 O código é bem estruturado?

Uma marcação semanticamente correta usa elementos html apropriados para seus propósitos. HTML bem estruturado tem significado semântico para uma vasta gama de agentes de usuários (browsers sem suporte para CSS, browsers de texto, PDA's, mecanismos de busca etc.)
https://www.maxdesign.com.au/presentation/benefits/index04.htm

Mais links sobre semântica :

1.8 Há links quebrados?

Links quebrados podem frustrar e afastar visitantes. Podem também dificultar a apropriada indexação do site pelos mecanismos de busca.

Mais links sobre links quebrados :

1.9 Qual é a performance velocidade de carregamento/tamanho da página - speed/page size?

Não me faça esperar.... Esta é a mensagem que os usuários nos passam quando se deparam com páginas pesadas. Mesmo os usuários em banda-larga são penalizados com páginas de carregamento lento.
https://www.websiteoptimization.com/speed/

1.10 Há erros de JavaScript?

O Internet Explorer para Windows incorpora um "debugger" que através de uma janela pop up acusa erros de javascript no site. Você pode habilitar/desabilitar esta ferramenta do browser no menu Tools, Internet Options e na guia Advanced desmarcar/marcar a caixa 'Disable script debugging'.

2. Grau de separação entre conteúdo e apresentação

2.1 O site usa CSS para todos os aspectos da apresentação (fontes, cores, espaçamentos, bordas etc)?

Use folhas de estilo para controlar o layout e a apresentação.
https://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-style-sheets

2.2 As imagens estão todas incluidas nas CSS, ou elas são inseridas via (X)HTML?

O objetivo é remover toda a apresentação do código html deixando-o claro e semanticamente correto.
https://www.maxdesign.com.au/presentation/benefits/index07.htm

3. Acessibilidade para usuários

3.1 O atributo "alt" é usado para todas as imagens?

Forneça um texto equivalente para todo elemento não textual.
https://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalent

3.2 O site usa unidades de medida relativas em lugar de absolutas para tamanhos de texto?

Use unidades de medidas relativas em lugar de absolutas, nos atributos da linguagem de marcação e nos valores de propriedade da folha de estilo.
https://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units

Mais links sobre unidades de medidas:

3.3 Há quebra do layout quando o usuário aumenta o tamanho da fonte?

Experimente este teste bem simples. Abra seu site em um browser que ofereça a possibilidade de incrementar o tamanho da fonte. Vá aumentando o tamanho da fonte e observe o site. O layout da página permanece íntegro na tela? O desenvolvedor web deve ser cauteloso e não assumir que todos os browsers usam a fonte default.

3.4 O site usa skip para menus?

Deve ser previsto um método que permita ao usuário "pular" links de navegação repetitivos.
https://www.section508.gov/index.cfm?FuseAction=Content&ID=12

Agrupe links relacionados, identifique o grupo (para os agentes de usuário) e até que os agentes sejam capazes de realizar a tarefa, forneça uma maneira de se "bypassar" o grupo.
https://www.w3.org/TR/WCAG10-TECHS/#tech-group-links

. ... os visitantes cegos não são únicos prejudicados por uma quantidade excessiva de links em uma área de navegação. Lembre-se que uma pessoa com restrições motora e um equipamento com tecnologia adaptável pobre, terá dificuldades sérias em tabular através dos itens de navegação.
https://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020

Mais links :

3.5 Os formulários são acessíveis?

Formulários não são fáceis de serem manipulados por pessoas com restrições físicas. Navegar por textos em uma página é uma coisa, navegar por campos de formulário e preenchê-los é outra bem mais difícil.
https://www.htmldog.com/guides/htmladvanced/forms/

Mais links sobre formulários:

3.6 As tabelas são acessíveis?

Identifique as linhas e colunas de títulos das tabelas de dados... Tabelas contendo dois ou mais níveis lógicos de linhas e colunas, devem ter suas células de dados bem identificadas no código de marcação.
https://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-table-headers

Mais links sobre tabelas acessíveis:

3.7 O site faz uso de cores contrastantes?

Assegure-se de que as cores de fundo oferecem constraste suficiente para perfeita legibilidade do documento para usuários com restrições visuais.
https://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-contrast

Mais links :

3.8 O site faz uso da cor para transmitir informação?

Assegure-se de que toda informação transmitida por cor está também disponível sem a cor, como por exemplo com uso de texto alternativo, contexto, ou definida no código de marcação.
https://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-convey

Existe basicamente três tipos de restrição visual para cores; Deuteranomalia (dificuldade de distiguir vermelho/verde), Protanomalia (outra forma de dificuldade de distiguir vermelho/verde) e Tritanomalia (dificuldade de distiguir azu/lamarelo - bastante rara).

Mais links :

3.9 Menus do tipo dropdown foram projetados com "delay" compatível com usuários portadores de reduzida habilidade motora?

Usuários com restrições motoras encontrarão dificuldades em manipular menus do tipo dropdown se forem projetados com tempo de resposta muito rápido.

3.10 Os links são todos descritivos (para usuários com restrições visuais)?

Links de texto devem ser projetados de modo que o texto transmita de maneira inequívoca o destino do link tanto quando isolados como quando parte de uma sequência de links. Os textos dos links devem ser concisos.
https://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-links

4. Acessibilidade para dispositivos

4.1 O site é bem visualizado tanto em browsers antigos como recentes?

Antes de construir um layout CSS, você deve definir quais os browsers e em que nível será a visualização.
https://www.maxdesign.com.au/presentation/process/index_step01.cfm

4.2 O conteúdo é acessível com as CSS desabilitadas ou não suportadas pelo agente de usuário?

Alguns usuários visitarão seu site com browsers sem suporte para CSS ou mesmo com esta facilidade desabilitada. Um conteúdo bem estruturado não impedirá estes usuários de visualizar seu site.

4.3 O conteúdo é acessível com as imagens desabilitadas ou não suportadas pelo agente de usuário?

Alguns usuários visitarão seu site com browsers ajustados para não carregar imagens - em especial aqueles com conexões lentas. O conteúdo deve estar acessível também para estes uauários.

4.4 O site é consistente em browsers de texto tais como o Lynx?

Isto é como uma combinação de imagens e CSS desabilitadas. Um conteúdo bem estruturado terá sentido em um browser de texto.

Mais links :

4.5 O site é legível quando impresso?

Você pode estilizar qualquer documento (X)HTML para ser impresso, sem tocar no código de marcação.
https://www.alistapart.com/articles/goingtoprint/

Mais links :

4.6 O site é bem visualizado em dispositivos portáteis ?

Esta é uma tarefa difícil de ser cumprida até que os dispositivos portáteis consistentemente sejam capazes de uma correta interpretação da marcação. Contudo, alguns layouts já são bem visualizados nos dispositivos portáteis atuais. A importância de ser suportado por dispositivos portáteis vai depender do público alvo do site.

4.7 O site utiliza corretamente as metadatas?

Metadata é uma informação web interpretável por máquinais
https://www.w3.org/Metadata/

Metadata é uma informação estruturada que foi criada para descrever recursos. Em outras palavras, metadata é 'dados informando sobre dados'

4.8 O site e bem visualizado em diferentes resoluções do browser?

É senso comum entre desenvolvedores que os tamanhos de tela estão crescendo. Alguns desenvolvedores assumem que o tamanho da tela é de 1024px de largura. Mas, e os usuários com telas menores e aqueles com dispositivos portáteis? Eles são parte da sua audiência e estão prejudicados?

5. Usabilidade básica

5.1 A hierarquia visual do site é clara e bem definida?

Organize e priorize o conteúdo de uma página fazendo uso de tamanhos, considerando a relevância e o relacionamento entre os conteúdos.
https://www.great-web-design-tips.com/web-site-design/165.html

5.2 Os níveis dos títulos são bem definidos?

Use cabeçalhos para transmitir a estrutura do documento e use-os de acordo com as especificações.
https://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headings

5.3 A navegação no site é fácil de se entender ?

O sistema de navegação deve informar claramente ao visitante onde ele está e para onde pode ir.
https://www.1stsitefree.com/design_nav.htm

5.4 O sistema de navegação é consistente?

Se cada página do seu site tem um estilo de apresentação consistente, os visitantes terão facilidade de navegar e de encontrar a informação que procuram.
https://www.juicystudio.com/tutorial/accessibility/navigation.asp

5.5 A linguagem adotada no site é consistente e apropriada?

O uso de linguagem clara e simples facilita a comunicação. A leitura de um texto pode tornar-se difícil se ele for mal escrito, especialmente para o visitante cuja língua nativa não é aquela em que o texto foi escrito.
https://www.juicystudio.com/tutorial/accessibility/clear.asp

5.6 Há um Mapa do Site e uma página para contato? São fáceis de serem localizados?

Muitos mapa de site são falhos ao informar os níveis e estrutura do site. Teste de usabilidade comprovam que usuários frequentemente desprezam ou não conseguem encontrar os mapas de site. A complexidade é outro problema: um mapa de site deve ser um mapa e não um desafio de navegação.
https://www.useit.com/alertbox/20020106.html

5.7 Para sites grandes, há um campo de busca?

Embora campos de busca não sejam necessários em sites pequenos e alguns usuários sequer os usam, as ferramentas de busca no site se constituem em uma opção de navegação.

5.8 Há um link para a home page em cada uma das páginas do site?

Algus usuários tem o hábito de retornar para a home page do site após navegar em uma página. A home page se constitui em uma base para estes usuários, oferecendo uma espécie de campo de reagrupamento para nova exploração do conteúdo do site.

5.9 Há links sublinhados?

Para maximizar a capacidade de percepção de um texto clicável, há o recurso da cor e sublinhado nos links de texto. Os usuários não devem ter que supor ou rastrear a página para descobrir onde eles podem clicar.
https://www.useit.com/alertbox/20040510.html

5.10 Os links visitados são claramente definidos com uso de uma cor única?

Mais importante, sabendo quais as páginas já visitadas, evita que os usuários voltem sem querer a uma página já visualizada anteriormente.
https://www.useit.com/alertbox/20040503.html

6. Administração do site

6.1 O site tem uma página de erro 404 que funciona em todos os níveis?

Você requisitou uma página - tanto por digitação do endereço na barra de endereços do browser como por ter clicado em um link quebrado para a página, e de repente você se vê no meio do ciber-espaço. Um site amigável fornecerá uma ajuda através de uma página de erro explicando o problema enquanto outro (não tão amigável) deixará por conta do browser tratar do erro.
https://www.alistapart.com/articles/perfect404/

6.2 O site utiliza URL's amigáveis - friendly URLs?

Muitos mecanismos de busca (com poucas exceções - Google) não indexam páginas que contenham pontos de interrogação ou outro caracter (como um & ou =) na sua URL... que tal um site que ninguém consegue encontrar?
https://www.sitepoint.com/article/search-engine-friendly-urls

Para a interface do usuário, a URL é um dos piores elementos web. Contudo se elas são curtas, lógicas e auto corrigíveis tornarse-ão também aceitáveis e usáveis.
https://www.merges.net/theory/20010305.html

Mais links:

6.3 As URLs funcionam sem o "www"?

Embora isto não seja crítico e em alguns casos até mesmo impossível, é sempre uma boa escolha poder oferecer ambas as opções aos usuários. Se o seu visitante digitar a URL sem o www e o site não carregar, isto será desvantajoso tanto para você quanto para o usuário.

6.4 O site utiliza "favicon" ?

Um Favicon é uma imagem multi-definição, incluída em quase todos os sites profissionalmente desenvolvidos. O Favicon permite que o webmaster promova seu site e crie uma aparência personalizada no browser do visitante.
https://www.favicon.com/

Favicons não são indispensáveis. Entretanto, se não estiverem atualizados, podem causar erro 404 em seus registros (estatísticas do site). Os browsers como o IE os requisitarão do servidor quando o endereço estiver em favoritos no usuário. Se um favicon não estiver disponível, um erro 404 pode ser gerado. Conseqüentemente, ter um favicon pode gerar erro 404 específico ao favicon. O mesmo é válido para o arquivo 'robots.txt '

Mais sobre esta lista

Esta checklist originarialmente foi desenvolvida de forma sumária em uma Web Standards Mail lista em Maio de 2004. Ela foi apresentada no Sydney Web Standards Group em 5 de Agosto de 2004. Ela está também disponível para download formato pdf - checklist para desenvolvedores

Esta apresentação está disponível também:

Obrigado a Rose pela prova de leituras do texto a Lea de Groot pelas sugestões para a checklist.

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo