Cuiabá 71

• Disponibilize equivalentes em texto para elementos não textuais.
• Utilize tabelas acessíveis (identificando headers para linha e coluna).
• Utilize formulários acessíveis (label, id, fieldset, rótulo).
• De preferência para marcação em relação a imagens para dispor a informação.
• Disponibilize menus de saída visíveis.
• Disponibilize teclas de atalho.
• Utilize folhas de estilo com unidades relativas para controlar o layout e a apresentação.
• Verifique se seus documentos podem ser lidos sem as folhas de estilo.
• Disponibilize meta data para adicionar informação semântica.

• Torne o seu site acessível para um amplo público (deficientes
  físicos, perceptivos, etc).
• Torne o seu site acessível para um amplo número de aparelhos
  helds, leitores de tela, navegadores de texto, sites de busca,
• É um requisito para sites Federais e Governamentais.

Acessibilidade… Você já ouviu muito sobre isso. Quando vemos esta palavra, já relacionamos com site acessível aos deficientes visuais.

Acontece que isso é muito mais amplo do que parece. Acessibilidade sim, tem haver com sites mais acessíveis aos deficientes, mas não só eles. Muito gira em torno disso, e às vezes ficamos condicionados a pensar dessa forma.

Acessibilidade é para todos. Desde o usuário que tenta acessar o site do banco pelo desktop usando um browser como Opera e Firefox não conseguindo acessar corretamente o site, até aquele usuário que está preso no trânsito e aproveita para tentar mandar um email pelo seu PDA.

Fazer um site utilizando os padrões web, é fazer um site melhor acessível a qualquer plataforma ou dispositivo, sem qualquer esforço, ou ainda, sem fazer uma versão específica para um dispositivo específico.

Isto é… Se você faz um site para desktops, com web standards bem feito, seu site vai estar muito bem acessível em leitores de telas e em dispositivos móveis. E você pode melhorar isso usando as famosas Media Types. Assim, você deixa seu site muito mais acessível para o dispositivo / plataforma escolhido.

Temos que entender uma coisa. Não é porque o site é acessível que ele será compatível.
Seu site certamente não será compatível quando comparado no Lynx e Internet Explorer. Mas será perfeitamente acessível aos dois, de formas diferentes, mas será acessível. No Lynx você não verá imagens bonitas, degrades e botões personalizados. Mas se você utilizar o atributo ALT em imagens e até mesmo técnicas como Image Replacement, seu site será perfeitamente acessível.

Logo, logo, a Internet estará em todo o canto, e você não pode estar desenvolvendo sites apenas para um dispositivo.

• Utilize uma ferramenta visual que crie código válido (ex: Dreamweaver MX2004).
• Defina um DOCTYPE apropriado.
• Consulte as especificações da linguagem no W3C.
• Faça da validação um processo normal no seu trabalho.

Validação é o processo de verificação de seus documentos comparando-os com um padrão formal, como os publicados pelo W3C. Um documento que foi checado e aprovado é considerado um documento Válido.

Por que utilizar código válido?

Para que seu arquivo possa ser lido por máquinas além de humanos é muito importante que você escreva um XHTML válido, com isso você está fazendo com que as informações do seu site fiquem mais acessíveis para as buscas, contribuindo para o projeto e principalmente melhorando as visitas do seu site.

E mais:

• Um código válido renderiza mais rápido do que um que contenha erros.
• Um código válido renderiza melhor do que um inválido.
• Os Browsers estão se tornando cada vez mais de acordo com o Web Standards, e torna-se extremamente necessário escrever HTML válido e dentro dos padrões.

Como fazer a verificação de seu código?

Através de aplicações disponíveis online:

• W3C Markup Validation Service http://validator.w3.org
• W3C CSS Validation Service http://jigsaw.w3.org/css-validator/
• WDG HTML Validator http://www.htmlhelp.com/tools/validator/
• Stylesheets.com CSS Validator http://www.style-sheets.com/validator.asp

Alguns programas possuem mecanismos de validação intrínsecos como o Macromedia Dreamweaver MX2004 e o TopStyle.

A técnica de layout CSS utilizando float é a mais utilizada para definir posicionamento pois permite uma flexibilidade maior que o posicionamento absoluto.

Para relembrar: quando definimos uma propriedade float para um elemento estamos configurando como os elementos definidos após o elemento irão fluir ou se posicionar em volta do elemento.

Quando queremos interromper o fluxo definido, utilizamos a propriedade clear.

Como vimos anteriormente, através do atributo position, podemos especificar uma posição absoluta de um elemento em relação ao seu container. Ou seja, podemos especificar uma posição absoluta de uma tag div dentro de uma página HTML.

Com isso podemos definir um layout de forma semelhante aos programas de editoração para impressão que utilizam o conceito de layers e caixas de texto ou conteúdo.

Trabalhando com a tag DIV

A tag div foi desenvolvida especialmente para substituir as tabelas como ferramenta de layout. Ela é um elemento de bloco (block level), uma DIVisão que pode armazenar qualquer coisa que você precise dentro dela. Você pode colocar blocos de texto, imagens, outras divs, tabelas e formulários dentro delas depois organizar no layout. Você tem enorme liberdade de posicionamento, podendo especificar um posicionamento absoluto ou relativo (método position), ou ainda especificar um fluxo aos elementos adjacentes (método float).

A tag div possui poucos atributos em si mesma (align=”left | right | center”), sendo que toda a sua formatação se dá através de folhas de estilo. Para criar uma barra de navegação simples, por exemplo, podemos utilizar um código como este:

div#navigation {width: 200px; background: gray; padding: 10px; }
<div id=”navigation”>…navigation links…</div>

Block Level

A tag <div>, assim como as tags <table>, <p>, <blockquote>, <ul>, <li> são definidas como elementos de nível bloco (block level) e criam uma caixa em volta de si (Box model). Cada elemento “block level” é exibido em uma linha separada, forçando que os elementos definidos na seqüência apareçam na próxima linha.

Por padrão, a caixa que delimita um elemento “block level” ocupa a largura máxima dentro do seu container. Ou seja, uma tag <div> definida dentro do <body> ocupará toda a largura do corpo do documento.

ID Selectors

Para atribuir as propriedades de posicionamento aos containers, geralmente tags <div>, utilizamos ID Selectors.

Primeiro atribuímos um atributo ID ao elemento, exemplo:

<div id=”conteudo”>Conteúdo… </div>

E no CSS, utilizamos um ID Selector para definir os estilos de formatação e posicionamento do container. A identificação de um ID Selector sempre começa com “#”.

#conteudo{
propriedade: valor;
}

Layout com CSS

Existem basicamente duas técnicas de construção de layouts utilizando CSS, que podem ser utilizadas em conjunto para criação de layouts mais complexos:

• Utilizando tags div com posicionamento absoluto (position: absolute).
• Utilizando tags div com a propriedade float (float: left | float: right | clear).

Outra técnica complementar, é a utilização de listas <li> como barras de navegação, formatadas através das propriedades display e float.

LEIA MAIS:
Tableless
http://www.tableless.com.br
Seybold Seminars – San Francisco 2003
Why tables for layout is stupid?
http://www.hotdesign.com/seybold/

Propriedade do CSS que define o alinhamento vertical de um elemento. Utilizada com freqüência para substituir o atributo align=”absmiddle” usado no HTML para centralizar imagens em relação ao texto adjacente e agora descontinuado no XHTML.

A propriedade Z-Index define a ordem de empilhamento (visualização) dos elementos da página do menor para o maior. Ou seja, um elemento com Z-Index igual a 2 será visualizado sobrepondo um elemento com Z-Index igual a 1 ou 0, se eles estiverem na mesma posição absoluta. O valor padrão da propriedade Z-Index é 0.