A Semântica e a Acessibilidade: um casal perfeito

A semântica, bem como a acessibilidade, podem ser aplicadas a tudo. Na construção de um prédio, na dissertarção de uma redação e claro, na criação de sistemas e websites.

Semântica, pode ser definido como: a realização de algo utilizando um padrão formal.

semantica

Como nesta imagem, você pode perceber a utilização da semântica quando se organiza os veículos de transportes com os tipos de transportes (terrestres, aéreos e aquáticos). Imagine que o “land”, “water” e “air” não estivesse nessa representação, ficaria uma bagunça, dificultando o entendimento e a leitura desta imagem.

 

 

No desenvolvimento de sites, é um pouco diferente, mas com o mesmo objetivo e conceito.

Nesta imagem ao lado (clique nela semantica_html5para ampliar), tento mostrar bem como a semântica pode ser utilizada na criação de sites com a nova versão do HTML, definindo bem os elementos em seu local correto e definindo tag’s corretas para cada informação que será exibida ao cliente. Mas e o cliente saberá que o site está utilizando uma boa semântica na sua estrutura? Não, mas os mecanismos de buscas, leitores de telas e navegadores saberão, e é aí que a acessibilidade entra. Somando a compatibilidade do navegador com a interpretação do leitor de tela, as pessoas com deficiência poderão usufruir do site como deveria e como todo mundo usufrui.

Acessibilidade, além da sua definição clássica que é permitir que pessoas com deficiências ou mobilidade reduzida participem de atividades que incluem o uso de produtos, serviços e informação, também podemos incluir o direito de eliminação de barreiras arquitetônicas, de disponibilidade de comunicação, de acesso físico, de equipamentos e programas adequados, de conteúdo e apresentação da informação em formatos alternativos.

Não é fácil, a princípio, avaliar a importância dessa temática associada à concepção de páginas para a web. Mas os dados da W3C (Consórcio para a WEB) e WAI (Iniciativa para a Acessibilidade na Rede) apontam situações e características diversas que o usuário pode apresentar:

  • Incapacidade de ver, ouvir ou deslocar-se, ou grande dificuldade – quando não a impossibilidade – de interpretar certos tipos de informação.
  • Dificuldade visual para ler ou compreender textos.
  • Incapacidade para usar o teclado ou o mouse, ou não dispor deles.
  • Insuficiência de quadros, apresentando apenas texto ou dimensões reduzidas, ou uma ligação muito lenta à Internet.
  • Dificuldade para falar ou compreender, fluentemente, a língua em que o documento foi escrito.
  • Ocupação dos olhos, ouvidos ou mãos, por exemplo, ao volante a caminho do emprego, ou no trabalho em ambiente barulhento.
  • Desatualização, pelo uso de navegador com versão muito antiga, ou navegador completamente diferente dos habituais, ou por voz ou sistema operacional menos difundido.

Um código HTML com uma boa formatação e semântica, pode ajudar muito o seu site tornar-se mais acessível.

10 Dicas rápidas para construir web sites

Guia completo e checklist: www.w3.org/WAI/

  • Imagens e Animações: Use o atributo alt para descrever a função de cada elemento visual.
  • Imagemaps: Use mapas client-side (o tag map) e texto para as regiões clicáveis.
  • Multimídia: Inclua legendas e transcrições para o áudio, e descrições para o vídeo.
  • Híperlinks: Utilize texto que faça sentido fora do contexto. Evite a frase “clique aqui”.
  • Organização da Página: Use cabeçalhos, listas e uma estrutura consistente. Use CSSpara layout e estilo sempre que possível.
  • Gráficos e Diagramas: Sumarize o conteúdo ou use o atributo longdesc.
  • Scripts, applets e plug-ins: Para o caso de estarem desabilitados ou de não serem suportados pelo browser, forneça conteúdo alternativo.
  • Frames: Use o tag noframes e empregue títulos significativos.
  • Tabelas: Torne compreensível a leitura linha a linha. Resuma.
  • Valide seu trabalho: Use as ferramentas, checklist e os guias disponíveis em http://www.w3.org/TR/WCAG.

 

Com a padronização da W3C, os designers e desenvolvedores estão sendo forçados a criar aplicativos mais acessíveis.

Tutorial de Acessibilidade (aula 1 – Links)

Acessibilidade na web

Vou explicar as melhores práticas sobre a acessibilidade de um site, tratando-se especialmente, neste tópico, de link.

 

 

 

 

 

O texto do link deve ser significativo e claro

Os usuários que usam leitores de tela navegam pelo site usando a tecla Tab do teclado. Para cada tab, é pronunciado o texto do link. Portanto, não se deve utilizar links com texto “Clique aqui”.

 

Exemplo:

 

Modo incorreto:

Clique aqui para visitar o site do Lucas Martins.

 

<a href=”http://www.lucasmartins.com.br/”>Clique aqui</a>

 

Modo correto:

Visite o site do Lucas Martins.

 

<a href=”http://www.lucasmartins.com.br/”>Lucas Martins</a>

 

 

O texto do link deve ser diferenciado

Se há mais de um link na página com o mesmo texto, todos esses links devem apontar para o mesmo endereço. Caso isso não seja possível, diferenciar esses utilizando o atributo title.

 

Se há mais de um link na página apontando para o mesmo endereço, mas os textos dos links são diferentes, utilize o atributo title para indicar que estes links estão apontando para o mesmo endereço.

 

Exemplo:

 

Vocês sabiam que estão navegando no blog do melhor desenvolvedor AJAX do Brasil? ( 😀 Que grande mentira! ). É, ele se chama Lucas Martins e está repartindo seu conhecimento com pessoas do mundo todo. Visite o site do Lucas Martins.

 

<a href=”http://www.lucasmartins.com.br/” title=”Site do Lucas Martins”>melhor desenvolvedor AJAX do Brasil</a>

 

<a href=”http://www.lucasmartins.com.br/” title=”Síte do Lucas Martins”>Lucas Martins</a>

 

<a href=”http://www.lucasmartins.com.br/” title=”Síte do Lucas Martins”>site do Lucas Martins</a>

 

Os links devem seguir uma ordem lógica

Para a navegação do site via teclado, pode-se organizar a seqüência dos links e determinar teclas de atalho para links importantes.

 

As seqüências dos links são organizadas com o atributo tabindex.

 

Exemplo:

 

Home

Notícias

Contato

 

<a href=”http://www.lucasmartins.com.br/” tabindex=”1”>Home</a>

<a href=”http://www.lucasmartins.com.br/blog” tabindex=”3”>Notícias</a>

<a href=”http://www.lucasmartins.com.br/contato.html” tabindex=”2”>Contato</a>

 

As teclas de atalho são referenciadas com o atributo accesskey.

 

Exemplo:

 

Home

Notícias

Contato

 

<a href=”http://www.lucasmartins.com.br/” accesskey=”h”>Home</a>

<a href=”http://www.lucasmartins.com.br/blog” accesskey=”n”>Notícias</a>

<a href=”http://www.lucasmartins.com.br/contato.html” accesskey=”c”>Contato</a>

 

 

 

Referência da WCAG 1.0

O que é WCAG 2.0 ?

Web Content Acessibility Guidelines (Guia de Acessibilidade de Conteúdo Web).

O WCAG é um conjunto de padrões para tornar sites acessíveis e que é um dos termos em processo de padronização pelo W3C.

Web Content Acessibility Guidelines!

(Guia de Acessibilidade de Conteúdo Web) 

WCAG é um conjunto de padrões para tornar sites acessíveis e que é um dos termos em processo de padronização pelo W3C.

Este é um assunto muito importante para quem desenvolve sites.

 Padrões W3C Web Acessibility Initiative   (WAI) Logo

10 Dicas rápidas para construir web sites

Guia completo e checklist: www.w3.org/WAI/

  • Imagens e Animações: Use o atributo alt para descrever a função de cada elemento visual.
  • Imagemaps: Use mapas client-side (o tag map) e texto para as regiões clicáveis.
  • Multimídia: Inclua legendas e transcrições para o áudio, e descrições para o vídeo.
  • Híperlinks: Utilize texto que faça sentido fora do contexto. Evite a frase “clique aqui”.
  • Organização da Página: Use cabeçalhos, listas e uma estrutura consistente. Use CSSpara layout e estilo sempre que possível.
  • Gráficos e Diagramas: Sumarize o conteúdo ou use o atributo longdesc.
  • Scripts, applets e plug-ins: Para o caso de estarem desabilitados ou de não serem suportados pelo browser, forneça conteúdo alternativo.
  • Frames: Use o tag noframes e empregue títulos significativos.
  • Tabelas: Torne compreensível a leitura linha a linha. Resuma.
  • Valide seu trabalho: Use as ferramentas, checklist e os guias disponíveis em http://www.w3.org/TR/WCAG.
 Fonte: http://www.w3.org/WAI/quicktips/qt.br.htm

Julie Howell, Diretora de Acessibilidade

 Julie Howell da Fortune Cookie acredita que a web será mais amigável para pessoas com necessidades especiais.

“Já existem alguns horizontes” – prevê ela – “O que precisamos, e que já começa a acontecer, é de mais desenvolvimento das aplicações e também dos padrões de acessibilidade”.

 

Com a padronização da W3C, os designers e desenvolvedores estão sendo provocados para criar aplicativos mais acessíveis.

Espero que todos tenham entendido esse conceito da W3C, pois é muito importante para todos os envolvidos em um projeto web.

SIM AO PADRÃO W3C!

Até mais!