Michel

Depois de aprender as técnicas de acessibilidade, iremos avaliar o nível de acessibilidade, para isso hospede o seu arquivo XHTML em algum servidor e acesse: http://www.accesible.com.ar/examinator/index.php

Examinator Acessible é uma ferramenta que verifica a acessibilidade da sua página, ela segue os padrões WCAG 1.0 da W3C.

O WCAG 1.0 são normas da W3C que explicam como criar documentos acessíveis para deficientes visuais, ela é voltada para desenvolvedores web.

O Examinator é uma ferramenta que nos mostra os pontos aonde podemos melhorar a nossa acessibilidade, irei usar de base a minha index.htm, vamos para a análise:

http://www.accesible.com.ar/examinator/?url=http://www.michelferreira.com

RESULTADO EXAMINATOR

O Examinator verifica 23 pontos na acessibilidade, varia desde número de links até idiomas vamos verificar os pontos:

IDIOMA
Identifique quando sua página possuir outro idioma, principalmente em links externos se sua página é linkada para um site de outra língua identifique.

IMAGENS
Cada imagem deve conduzir o atributo “ALT”, com um texto que descreve o seu conteúdo ou o papel.

ATRIBUTOS ANTIGOS DE DESIGN
Não utilize atributos antigos como “hspace”, “bgcolor” ou “nowrap”. Os atributos obsoletos são estruturas que foram substituídas por outras mais adequadas e devem ser evitadas porque podem provocar problemas de acessibilidade.

DECLARAÇÃO DO DOCUMENTO
Necessário o documento ter a sintaxe DTD para especificar qual a versão usada do XHTML.

TECNOLOGIA W3C
Utilize a tecnologia que a sintaxe DTD suporte. Entre outras razões, porque eles são cada vez mais reconhecidos das questões relativas à acessibilidade.

PÁGINA VÁLIDA PELA W3C
É importante evitar os erros no código fonte para que a página seja corretamente interpretada pelo usuário.

CSS VÁLIDO
È muito importante o CSS está 100% válido, sem erros.

ATRIBUTOS ANTIGOS
Não utilizar atributos antigos como <center>, <applet>, <font>. Os elementos estão desatualizados e foram substituídos por outros mais adequados e devem ser evitados porque podem provocar problemas de acessibilidade.

USO DE CABEÇALHOS H1, H2, ETC.
Utilize cabeçalhos H1, H2, H3 e etc. obedecendo a sua hierarquia, não use os cabeçalhos aleatoriamente para mudar o tamanho da fonte no documento.

UNIDADES ABSOLUTAS
Não use unidade de medidas absoluta no seu documento, use relativas pois os usuários poderão ampliar ou reduzir o tamanho dos elementos da página de acordo com suas necessidades. Evite o uso de pixel como medida de texto.

UTILIZAR FOLHAS DE ESTILO (CSS)
Folhas de estilo representam um grande passo para a Web, porque eles permitem a separação de conteúdo e apresentação das páginas.

TABELAS
As tabelas não devem ser utilizadas para introduzir o layout da página, somente dados tabulares. Isto é especialmente importante para aqueles que utilizam navegadores de texto ou leitores.

Não usar tabelas para compor a página, a menos que o conteúdo das tabelas faça sentido quando é representado de forma linear. Caso contrário, se a tabela não for compreendida, forneça um equivalente alternativo.

APRESENTAÇÃO
Vamos dizer que a apresentação controle o design da página, é errado usar atributos para mudar o design dos elementos para isso é utilizado o CSS.

ELEMENTOS DE APRESENTAÇÃO
São utilizados nas tags <b>, <center>, <font> para controlar a apresentação da página.

É extremamente errado utilizar elementos da linguagem de marcação para controlar a forma como são apresentadas. Em substituição deverá ser utilizado CSS.

DIVISÃO DE CONTEÚDO
Estruture corretamente o texto usando: títulos, capítulos, parágrafos e listas. Lembre que os blocos de informações longas prejudicam a compreensão, faça divisão com <p>.

TÍTULO DA PÁGINA
Escolha um texto apropriado para a página, o nome deve ser claro e objetivo.

LINKS
Especifique claramente cada link para que o usuário saiba realmente para aonde está indo evite os links como “clique aqui”.

IDIOMA
Especifique o idioma principal da página.

ABREVIATURAS
É importante explicar o significado das abreviaturas e siglas que aparecem pela primeira vez e indicar através do atributo título.

DOCUMENTOS RELACIONADOS
Os elementos com atributos <link> “rel” ou “REV” podem ser dados informações sobre a relação entre a página atual e outros recursos.

LINKS
Especifique os links principais em listas <ul><li>.

ACESSKEY
Forneça o acesso dos links através do teclado para isso insira o atributo acesskey nos links.

LIMITE DE LISTAS
Limite seus links em listas, não passando de 25 listas.

Esses foram os 23 pontos que o Examinator estuda no seu documento, esteja o mais acessível possível. Respeitando essas normas o seu documento estará perfeito no quesito acessibilidade.

*CONTEÚDO RETIRADO DO MANUAL WEBMARKETING, DESENVOLVIDO POR MICHEL FERREIRA
http://www.michelferreira.com/desenvolvimentodesites/web-marketing.htm

As tags <h1></h1>, <h2></h2>, <h3></h3>, etc. Nada mais é do que os cabeçalhos da página, o mais importante é o <h1></h1> e menos importante é o <h6></h6>.

Alguns designers não gostam de utilizar pela formatação que traz ao documento, lembre-se: CASO VOCÊ NÃO VENHA UTILIZAR ESSAS TAGS POR ACHAR QUE ELAS ESTRAGAM O DESIGN DO SITE, UTILIZE CSS PARA FORMATÁ-LAS.

Eu aconselho a colocar a palavra-chave desejada dentro do <h1></h1>, ele tem a função de especificar o título principal da página XHTML, as tags <h2></h2> tem a função do subtítulo da página, vamos dizer que sua H1 seria:

<h1>Michel Ferreira desenvolvimento de sites</h1>

A sua H2 seria o nome de cada página ou sessão vamos dizer que iremos para o link aonde eu irei apresentar o meu portfólio:

<h2> Portfólio do Michel Ferreira </h2>

O H3 tem a mesma função do H2 mais seria uma espécie de subtítulo do H2, vamos ao exemplo:

<h1> Michel Ferreira desenvolvimento de sites </h1>

<h2> Portfólio do Michel Ferreira</h2>

<h3> Trabalhos </h3>

Sempre respeite a hierarquia, nunca coloque um H3 na frente do H1 ou coloque na frente do H2, sempre siga a seqüência H1, H2, H3, H4, etc.

PARÁGRAFOS

Respeite sempre os parágrafos utilizando a tag <p></p>, não use excessivamente o uso da tag para preencher buracos no layout como no exemplo:

<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
<p></p><p></p><p></p>

Para isso utilize o CSS para preencher espaços, a mesma coisa para a tag <br/> não utilize várias vezes com o intuito de preencher vazios. Isso conta e muito na acessibilidade web, faça o seu documento respeitando o objetivo de cada tag XHTML.

VALIDANDO O DOCUMENTO PELA W3C

O significado das siglas W3C tem por nome World Wide Web Consortium, é a união de empresas que visa implementar os padrões web, liderada pelo criador da web, Tim Berners-Lee.

O site da W3C nos permite validar o nosso XHTML e CSS, acesse o link http://www.w3.org

VALIDANDO O XHTML

Esse validador verifica se o nosso XHTML possui erros, acesse:
http://validator.w3.org/

VALIDANDO O CSS

Acesse http://jigsaw.w3.org/css-validator/ para verificar se existe algum erro na folha de estilo.

*CONTEÚDO RETIRADO DO MANUAL WEBMARKETING, DESENVOLVIDO POR MICHEL FERREIRA
http://www.michelferreira.com/desenvolvimentodesites/web-marketing.htm

Existem inúmeros discursos a respeito da acessibilidade em flash, se é possível ou não na verdade eu não irei entrar nesses detalhes, pois o ideal é usar o flash de forma moderada e dosada.

Atualmente o Google inseriu nos seus bancos a possibilidade de indexar arquivos swf, quando o usuário busca por algum arquivo com terminação .swf ele mostra o resultado da busca, a Adobe tem trabalhado em cima a respeito da acessibilidade do flash, muitos desenvolvedores em flash dizem que tudo depende do desenvolvedor para tornar o site em flash acessível.

Recentemente fui convidado para fazer o site de uma cantora evangélica, e a primeira citação que ela fez foi: “Quero um site bem bonito, bastante cores e o principal, que ele seja todo animado, pois eu já possuo um hot-site que a minha gravadora desenvolveu.”

Ao acessar o Google e buscar pelo nome da cantora levei um susto, não existia nenhuma referência do nome dela, achei estranho pois ela é uma cantora de peso no meio evangélico e possui uma grande gravadora, de curiosidade entrei no site da gravadora e depois de muitos cliques achei a abençoada.

O site 100% em flash com o menu todo em flash, essa foi a resposta do sumiço do nome dela no maior site de busca do mundo. O Google pode até indexar arquivos em swf mais entender o que cada link diz dentro do flash isso é impossível, ou até mesmo os texto que estão dentro do arquivo swf, assim como o JPG o Google não consegue ler o que está escrito no swf, por isso reafirmo, use o flash de forma moderada e dosada.

Uma das alternativas para burlar isso seria escrevendo o texto que está dentro do swf no XHTML, esconder o texto com CSS assim como os links, mais isso não é muito recomendado fazer, pois seria uma técnica SEO BLACK HAT que iremos ver mais a frente.

Existem técnicas para validar o documento que usa flash pela W3C, isso ajuda na acessibilidade de todo documento, mais lembre-se use somente o flash para coisas básicas como topo, banner e esteja ciente que o texto que está no flash seja incluso no seu XHTML.

No caso do seu site for 100% em flash a solução é criar uma segunda versão totalmente em XHTML assim o seu conteúdo será indexado pelo spider.

VALIDANDO O FLASH

Iremos aprender como deixar semântica a nossa página que possui um arquivo swf, quando inserimos um swf na nossa página pelo dreamweaver o nosso código fica totalmente sujo veja o exemplo:

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0″ width=”760″ height=”500″>
<param name=”movie” value=”site_edgt_final.swf”>
<param name=quality value=high>
<embed src=”site_edgt_final.swf” quality=high pluginspage=”http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” width=”760″ height=”500″></embed>
</object>

Esse código <object></object> está sujando o nosso documento e deixando ele inacessível, para solucionar o caso poderíamos fazer os seguintes passos:

1. Baixe o arquivo no endereço: http://www.michelferreira.com/swfobject.js
2. Coloque o arquivo no seu servidor. Insira esse java na sua página:

<script type=”text/javascript” src=”swfobject.js” ></script>

3. Use o seguinte script para chamar o swf:

<script type=”text/javascript”>
// <![CDATA[
var so = new SWFObject(”seguros/swf/banner.swf”, “aqui você coloca o nome da sua div”, “758″, “156″, “8″, “#FFF”);
so.write(”aqui você coloca o nome da sua div “);
// ]]>
</script>

Repare na terceira linha do script que diz var so = new SWFObject é justamente dentro do parênteses que deveremos especificar o nosso SWF, aonde eu coloquei o nome “aqui você coloca o nome da sua div” você deverá colocar o nome da div que chama o flash. Os números 758 e 156 é o tamanho do nosso swf.

Com esse script chamamos o swf através de um código Java o que irá validar a nossa página pela W3C.

*CONTEÚDO RETIRADO DO MANUAL WEBMARKETING, DESENVOLVIDO POR MICHEL FERREIRA
http://www.michelferreira.com/desenvolvimentodesites/web-marketing.htm

As imagens no nosso site são fundamental para o design da nossa Home, grande parte dos sites em tableless utiliza poucas imagens, explorando mais os recursos do XHTML criando sites com um design não muito agradável, uma vez um programador me disse: “Michel você cria layouts que não olha o lado do cara que irá estruturá-lo em tableless”.

A estrutura em tableless de um site realmente é trabalhosa, mais afetar o nosso design para criar uma estrutura fácil é o mesmo que retroceder o serviço e perder o foco totalmente. O que mais me chamou a atenção na época quando estava aprendendo tableless era criar um layout lindo sem nada ficar de fora, você já imaginou um menu em imagem e ter que transformá-lo em texto devido a acessibilidade web??

Com conhecimento de CSS é possível inserir imagens no XHTML só que no código fonte ser texto, veja o exemplo do meu site www.michelferreira.com , o meu menu é todo texto só que eu puxo as imagens através do CSS, com um pouco de inteligência e criatividade é possível criar páginas semânticas com imagens, vamos ver alguns exemplos do que se encontra na web atualmente:

<img src=”meucliente.jpg” alt=”foto”/>

<img src=”meucliente.jpg” alt=””/>

Eu não aconselho usar imagens em menus, sempre quando o fizer utilize o CSS para puxar as imagens, pois os sites de busca não conseguem ler o que está escrito no JPG, o ideal é utilizar a tag ALT para escrever o que tem na imagem por exemplo, no nosso menu está escrito SERVIÇOS especifique na tag ALT a palavra SERVIÇOS.

O atributo ALT foi criado para especificar o que contém na imagem, não negligencie deixando vazio ou até mesmo escrevendo qualquer coisa, especifique, pois imagine o seu site com todas as imagens desabilitadas? Os programas para deficientes visuais entendem somente o texto da página, já imaginou o seu site não ter nada específico no atributo ALT? O atributo ALT é essencial na acessibilidade do nosso documento. O spider só entende texto e não consegue entender o que está escrito no JPG, vamos dizer que você esteja incluindo um JPG que esteja escrito: “Desenvolvimento de sites” o atributo alt deverá ficar:

<img src=”nome_imagem.jpg” alt=”desenvolvimento de sites”/>

No exemplo acima você está indicando que aquela imagem corresponde a palavra desenvolvimento de sites.

No exemplo acima você está indicando que aquela imagem corresponde a palavra desenvolvimento de sites.

IMAGENS ATRAVÉS DO CSS

É muito simples chamar uma imagem pelo CSS veja o exemplo:

<a href=”index.htm” title=”Home” id=”genesis” accesskey=”0″> Página principal</a>

No exemplo acima repare que não existe a TAG , mais na verdade eu puxei uma imagem pelo CSS, vamos verificar o CSS:

#genesis{
background-image:url(../imagens/menu_title.jpg);
width:83px;
height:24px;
display:block;
text-indent:-8000em;
}

Repare que a imagem está como um plano de fundo e o texto está com -8000em, isso significa se puxar no XHTML o ID genesis o texto não ficará visível pois ele está em uma resolução de -8000em, nem mesmo se você estivesse usando 2 monitores você iria conseguir ver o texto. Assim só ficou visível a nossa imagem e com o menu totalmente em texto.

CRIANDO O MENU DO SITE

O menu é a principal parte do site, pois através dele sairá a grande maioria da navegação do site, por isso toda atenção na estrutura do menu do site veja esse exemplo:

<ul>
<li><a href=”index.htm” title=”Home” id=”genesis” accesskey=”0″> Página principal (Alt + 0)</a></li>
<li><a href=”desenvolvimentodesites/michelferreira.htm” id=”perfil” accesskey=”1″ title=”Michel Ferreira”> Michel Ferreira (Alt + 1)</a></li>

<li><a href=”desenvolvimentodesites/portfolio.htm” id=”portfolio” accesskey=”2″ title=”Portfólio Michel Ferreira”> Portfolio Michel Ferreira (Alt + 2)</a></li>
<li><a href=”desenvolvimentodesites/midia.htm” id=”midia” accesskey=”3″ title=”Michel Ferreira na mídia”> Michel Ferreira na mídia (Alt + 3)</a></li>
<li><a href=”desenvolvimentodesites/siteacessivel.htm” id=”padroes” accesskey=”4″ title=”Padrões W3C”> Padrões w3c (Alt + 4)</a></li>
<li><a href=”desenvolvimentodesites/seo.htm” id=”artigos” accesskey=”5″ title=”SEO”> Aprenda SEO (Alt + 5)</a></li>
<li><a href=”desenvolvimentodesites/site_mobile.htm” id=”mobile” accesskey=”6″ title=”Mobile”> Sites para celular (Alt + 6)</a></li>
<li><a href=”desenvolvimentodesites/contato.htm” id=”contato” accesskey=”7″ title=”Contato”> Contato (Alt + 0)</a></li>

<li><img src=”desenvolvimentodesites/imagens/menu_07.jpg” alt=”menu”/></li>
<li><a href=”http://www.michelferreira.com/teste/rss.xml” id=”rss” title=”Assine meu RSS”>RSS Michel ferreira</a></li>
</ul>

Sempre inicie o seu menu com a tag <ul></ul> responsável por definir o início e o fim de uma lista,  a tag <li></li> é responsável por definir um elemento dentro da lista. Sempre coloque cada link dentro de uma <li></li>.

O atributo ACCESSKEY nada mais é do que a possibilidade de acessar o link sem o mouse, somente usando as teclas especificadas, fundamental para deficientes visuais, no meu documento teclando Alt + 0, é acessado a página principal do site, Alt + 1 o meu perfil, Alt + 2 o meu portfólio.

Cada link do seu menu deverá ter essas especificações, o quanto mais acessível melhor, você talvez até esteja falando que o seu site não é para deficientes visuais, e essas normas não são necessárias, lhe digo que o Google tem a visão de um cego, um cego que possui vários amigos, não obedecer esse requisito no seu menu poderá trazer muitos acessos a menos.

*CONTEÚDO RETIRADO DO MANUAL WEBMARKETING, DESENVOLVIDO POR MICHEL FERREIRA
http://www.michelferreira.com/desenvolvimentodesites/web-marketing.htm

As meta tags, são o rótulo do site, nelas estarão contidas todas as informações possíveis a respeito do site, até mesmo agendar uma visita com o Google bot. Inclua as principais meta tags e não deixe nenhuma de fora do seu cabeçalho, a seguir estarei listando todas elas e o que significa.

Vamos estudar as meta tags do meu site.

1) Especificando a versão do XHTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Especifica a versão do XHTML, no nosso caso é a Strict.
Independente da versão do XTML é necessário especificá-lo.

2) Especificando a nacionalidade da página

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt-BR” lang=”pt-BR”>

Especifica que o site é brasileiro, repare: xml:lang=”pt-BR” lang=”pt-BR”

3) Especificando os caracteres

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

Indica a codificação de caracteres, responsável pelos caracteres do documento, a mais comum são UTF-8 e ISO-8859-1, a grande maioria dos servidores que hospedam sites rodam em UTF-8, caso venha ocorrer algum erro de má visualização de caracteres tente trocar para UTF-8.

4) Definindo o título da página

<title>Michel Ferreira desenvolvimento de sites</title>

O que mais eu vejo na internet são desenvolvedores incluindo de forma exagerada palavras-chave no título, exemplo:

<title> Michel Ferreira, sites, websites, Seo, otimização de sites, web marketing, desenvolvimento de sites, criação de sites</title>

Eles pensam que incluindo a palavra-chave no título da página os bots irão enxergar as mesmas, ERRADO.

Os bots só enxergam os primeiros 60 caracteres do título da nossa página, o ideal é mesclar aqui o título da sua empresa com a sua palavra-chave desejada, não ultrapassando o limite de 60. Lembre-se que a palavra-chave que está no título deverá ser comentada no texto do site, como vimos em keyword densit.

Não pense que apenas incluindo as suas palavras-chaves poderá lhe ajudar mesmo respeitando o limite de 60 caracteres, temos que ter referências no conteúdo do site com as palavras-chave do título.

5) Especificando o tipo de documento

<meta name=”resource-type” content=”document” />

Essa meta tag só possui um valor “document” a função dela é dizer que o arquivo é um documento, não é muito utilizada, mais não custa colocá-la na página.

6) Configurando o cache

<meta http-equiv=”pragma” content=”no-cache” />

Sempre ao acessar a página o navegador não irá deixar no cache sempre vai buscar uma nova página.

7) Classificação da página

<meta name=”classification” content=”Internet” />

Essa meta tag é fundamental para alguns bots definirem a categoria da sua página, essa meta é responsável por dar o tema a página. Excelente para cadastramento em diretórios de busca.

Descrição da página

<meta name=”description” content=”Michel Ferreira é um profissional voltado ao desenvolvimento de sites nos padrões web, criando estruturas semânticas para otimização nos principais sites de buscas tais como: Google, MSN Search, Yahoo, Cadê. ” />

Esse será a descrição da nossa página dando um breve resumo do site, lembre-se de inserir a palavra-chave na sua descrição.

9) Palavras-chave

<meta name=”keywords” content=”desenvolvimento de sites,criação de sites,dispositivo moveis,tableless,semantico,webdesign,web marketing,w3c,artigos de TI,michel ferreira,Jesus,otimização de sites,site,consulta de dominios,e-commerce” />

Todas as palavras-chave que você deseja ser achado pelos sites de busca devem estar aqui, não adianta colocar uma palavra-chave que não tem relação nenhuma com o conteúdo do site. Lembre-se do conceito keyword density.

10) Robots

<meta name=”robots” content=”all” />

Através dessa meta podemos restringir algumas páginas, as opções além de all:
[NO]INDEX, [NO] FOLLOW.
Para bloquear páginas não utilize essa meta sempre deixe como all, para bloquearmos URL iremos utilizar o robot.txt, que irei falar mais na frente.

11) Google bot

<meta name=”googlebot” content=”all” />

A mesma função da meta anterior só que essa é especifica para o spider do Google.

12) Distribuição da página

<meta name=”distribution” content=”Global” />

Define se o nosso documento será fornecido para o mundo ou somente em redes locais ou até mesmo intranets, as opções são: global, local e IU

13) Classificação

<meta name=”rating” content=”General” />

Essa meta define a classificação da sua página se ela é aberta a todo público, somente a crianças, 14 anos, conteúdo adulto e restrito as opções são:
14 Years, General, Mature, Restricted e Safe For Kids

14) Autor

<meta name=”author” content=”Michel Ferreira ” />

O nome já diz, define o desenvolvedor da página.

15) Direitos autorais

<meta name=”copyright” content=”Michel Ferreira” />

Inclui informações de direitos autorais do documento.

16) Idioma

<meta name=”language” content=”pt-br” />

Define o idioma da página.

17) Define o status da página

<meta name=”doc-class” content=”Completed” />

Define a página está em construção ou já finalizada, as opções são:
Completed, Draft, Living Document, Published

18) Define o status do documento

<meta name=”doc-rights” content=”Public” />

Define o status do documento.

19) Produtos Microsoft

<meta name=”MSSmartTagsPreventParsing” content=”true” />

Impede que os produtos Microsoft gerem etiquetas inteligentes em seu site, deixe sempre como true.

20) Image Tool Bar

<meta http-equiv=”imagetoolbar” content=”no” />

Desliga a barra do Internet Explorer que aparece ao passar o mouse sobre a imagem, aparecendo opções de salvar, imprimir, enviar por e-mail e adicionar no “My Pictures”.

*CONTEÚDO RETIRADO DO MANUAL WEBMARKETING, DESENVOLVIDO POR MICHEL FERREIRA
http://www.michelferreira.com/desenvolvimentodesites/web-marketing.htm