Tutorial Avançado de HTML: Recapitulada nos Padrões

31 05 2008

Símbolo da"Acessibilidade na Web"

Essa página é para quem conhece HTML, mas está meio inseguro em relação aos padrões envolvidos no XHTML e à filosofia de separar conteúdo e apresentação.

Separando conteúdo e apresentação

HTML não foi criado pra ser usado para apresentação, mas alguns navegadores incorporaram elementos que formatavam texto e os desenvolvedores deram um jeito de manipular o layout, e o HTRML começou a ser usado pro fim errado. Com o poder do CSS não é mais necessário cuidar da apresentação usando HTML, e o conteúdo (HTML) agora pode ser completamente separado da apresentação (CSS).

Essa abordagem traz inúmeros benefícios – os arquivos ficam menores, você tem mais flexibilidade com uma folha de estilos central sendo aplicada em todo o website e as páginas são muito mais acessíveis.

Seguir essa filosofia significa apenas que você não deve alterar a apresentação de nada com HTML. Tags como font e atributos como bgcolor não devem ser usados. Nem mesmo o artibuto border dentro da tag img é válido no XHTML 1.1. Isso não é um problema – não existe nenhuma formatação que pode ser feita com HTML e não pode ser feita, e muito melhor, com CSS.

Não basta tirar a apresentação do HTML, o termo conteúdo significa que tags HTML específicas devem ser usadas quando apropriado. Por exemplo, h1, h2, etc. devem ser usados para cabeçalhos – vocâ não pode só usar CSS pra deixar suas fontes maiores.

Um bom guia é ver se um navegador visual, com seu estilo padrão, apresenta o documento corretamente sem uma folha de esstilos.

Tabelas não devem ser usadas para o layout – tabelas foram criadas para mostrar dados tabulares. Essa é provavelmente a técnica mais difícil para HTMLzeiros se acostumarem porque muda completamente o modo como o HTML era tradicionalmente estruturado tempos atrás. Essa abordagem reduz drasticamente o tamanho da página e, devido ao código resultante bem estruturado, a torna muito mais acessível.

Leia a página sobre layout no Tutorial Avançado de CSS pra saber mais sobre isso – e aprender a fazer suas páginas sem usar tabelas.

Tags

No XHTML todas as tags devem estar em mínusculo e precisam ser fechadas. As tags que não tem tags de fechamento (como br e img) precisam se fechar com uma ‘/’ no final (como <br />). É recomendável colocar um espaço antes da barra.

A marcação precisa ser “bem-formada” (well formed), com os elementos aninhados da forma correta (por exemplo, <strong><em>assim</em></strong>, não <strong><em>assim</strong></em>).

Todos os documentos precisam ter os elementos html, head, title e body. Eles também devem começar com uma declaração do tipo do documento.

O corpo do elemento deve começar com p, h1, h2, h3, h4, h5, h6, div, pre, address, ins ou del.

Atributos

Todos os atributos devem estar escritos em mínusculo e seus valores dentro de aspas duplas.

Atributos minimizados não são permitidos (como <input type=”checkbox” checked />). O valor dos atributos que geralmente eram minimizados deve ser igual ao seu nome (como <input type=”checkbox” checked=”checked” />).

O atributo name não é mais válido (exceto em elementos de formulário) e deve ser substituído por id.

O atributo target não é um atributo válido. Ainda bem. Ele era mesmo meio idiota.

O atributo alt na tag img é obrigatório.

Acessibilidade

As razões para construir páginas web acessíveis a usuários com deficiências são bem evidentes. Não é apenas questão de moral, mas beneficia nosso futuro, já que os usuários da web vão envelhecendo e a precisão dos sentidos degenera, e é uma vantagem comercial, já que usuários com deficiências são consumidores. Acessibilidade não é apenas permitir que pessoas com deficiências acessem sua página, é garantir que qualquer pessoa possa acessar sua página e facilitar o acesso de pessoas com leves deficiências, como visão baixa.

Já existem alguns incentivos legais à acessibilidade, como a “Seção 508”, nos Estados Unidos, uma tentativa de forçar certas iniciativas referentes a acessibilidade, e leis no Reino Unido e no Brasil que obrigam todos os sites do governo a serem acessíveis. Quanto tempo vai levar até que leis assim sejam aplicadas para sites comerciais no geral, como são nos edifícios?

Se você seguir as práticas acima, seu HTML já deve ser bastante acessível a pessoas com deficiência. Existem alguns cuidados que podem tornar suas páginas ainda mais acessíveis (por exemplo, veja as páginas Links Acessíveis e Formulários Acessíveis) e isso não é nada difícil.

Páginas Relacionadas

Esse material é uma adaptação do HTML Advanced Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios

Ações

Information

4 responses

4 06 2008
Tutorial Avançado de HTML: Links Acessíveis « Codando

[…] Página Anterior: Recapitulada nos Padrões  […]

10 06 2008
Tutorial Avançado de HTML « Codando

[…] Recapitulada nos Padrões – Separando conteúdo de apresentação, e uma visão geral de tags e atributos XHTML e acessibilidades. […]

3 06 2011
A.Maia

Otimo; não conhecia a “etica do cod.”obrg

7 06 2011
A.Maia

Numa “table” e em “td” qual é o atributo que possibilita somar os elementos das restantes “td” da “table”.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: