Tutorial Avançado de HTML: Links Acessíveis

4 06 2008

Link "Pular para o conteúdo"

Essa página trata de várias maneiras de melhorar a acessibilidade dos links na sua página.

Navegação com o teclado

Usuários que não podem ou não querem usar dispositivos apontadores (mouses, por exemplo) podem usar o teclado pra percorrer os links, geralmente usando a tecla “tab”. Por isso, links devem estar numa ordem lógica de navegação. O atributo tabindex permite definir essa ordem ainda que, se o HTML estiver linear como ele deve, uma ordem lógica de navegação exista automaticamente.

Pra testar o efeito do tabindex, faça o seguinte:

Coloque três links numa página HTML:

<p><a href="#">Link 1</a></p>

<p><a href="#">Link 2</a></p>

<p><a href="#">Link 3</a></p>

Abra a página em seu navegador e tecle “tab” até chegar no último link. Você deve ter percebido que a ordem foi a mesmo em que eles foram definidos no documento.

Agora, mude o código para isso e teste novamente.

<p><a href="#" tabindex="3">Link 1</a></p>

<p><a href="#" tabindex="1">Link 2</a></p>

<p><a href="#" tabindex="2">Link 3</a></p>

Teclas de Atalho

Teclas de atalho (accesskeys) permitem uma navegação mais fácil, ao atribuir um atalho a um link (que geralmente vai ganhar foco quando o usuário pressionar ‘Alt’ ou ‘Shift’ + ‘Alt’ + a tecla de atalho, dependendo do navegador). Pra usuários que não usam dispositivos apontadores, esse é um modo muito mais fácil e rápido de navegar do que navegar pelos links usando ‘tab’.

Não é necessário usar teclas de atalho em todos os links, mas é uma boa idéia colocar nos links da navegação primária.

<a href="algumapagina.html" accesskey="a">Alguma Página</a>

O problema com teclas de atalho é que geralmente não existe nenhum jeito do usuário descobrir aonde elas estão (a não ser que ele olhe o código fonte). JAWS, o leitor de tela mais popular que existe, vai ler em voz alta essas teclas de atalho, mas para obter todas as vantagens delas você precisa deixá-las mais explícitas.

Você pode usar uma técnica similar ao link “Pular navegação” (veja abaixo), ou optar por uma página separada explicando as funcionalidades relacionadas à acessiblilidade, incluindo as teclas de atalho. Um método que está crescendo em popularidade é sublinhar a primeira letra do link, similar ao método usado nos menus da maioria dos programas Windows.

Títulos de Links

É uma boa idéia adicionar o atributo title, que vai mostrar uma descrição do lugar pra onde o link leva, melhorando a navegação.

Se o link é usado pra executar Javascript, também é bom explicar o que devia (mas não vai) acontecer pra usuários que não tem Javascript.

<a href="#" onclick="abrepopupdetestável()" onkeypress="abrepopupdetestável()" title="Abre uma janela pop-up detestável com Javascript">Monstro</a>

Popups

Por falar em popups Javascript, se você vai insistir em usá-los, ou se alguém te disse pra usá-los, você pode deixar as coisas mais acessíveis usando o evento onkeypress além de onclick. Além disso, se você incluir uma página normal no valor do atributo href do link e retornar false na função que abre o popup, se o usuário não tiver Javascript uma página normal vai abrir. Por exemplo:

<script type="text/javascript"> function abrepopupdetestável() { window.open("monstro.html", "", "toolbar=no,height=100,width=200"); return false; } </script> ... <a href="monstro.html" onclick="return abrepopupdetestável()" onkeypress="return abrepopupdetestável()">Monstro</a>

Links Adjacentes

Links adjacentes devem ser separador por mais que simples espaços, pra que eles possam ser compreendidos por leitores de tela.

Isso pode ser feito colocando caracteres entre os links (como uma barra vertical – ‘link | link‘) ou os cercando com caracteres (como colchetes – ‘[link] [link]‘). Também é uma boa idéia colocar os links de navegação dentro de listas. Essas listas podem ser estilizadas com CSS para serem mostradas do jeito que você quiser, até mesmo com os itens lado-a-lado (usando display: in-line).

Pular Navegação

Você deve dar a usuários de leitores de tela a oportunidade de pular a navegação e ir direto para o conteúdo. Isso porque se sua navegação for consistente (como ela deve ser), o usuário não precisa atravessar a mesma informação em todas as páginas, especialmente se sua navegação for muito longa. Você pode pular a navegação colocando um link antes dela que leve direto para o conteúdo.

Alguma coisa assim:

<div id="cabecalho"> <h1>O Cabeçalho</h1> <a href="#conteudo" accesskey="p">Pular navegação</a> </div> <div id="navegacao"> <!-- um monte de coisas de navegação --> </div> <div id="conteudo"> <!-- conteúdo adorável --> </div>

Obviamente você não quer que esse link apareça em navegadores visuais, por isso é melhor usar CSS pra torná-lo invisível.

Essa é uma dica de CSS, mas específica pra “pular navegação”.

O jeito mais óbvio de fazer isso é usar display: none, mas alguns leitores de tela vão levar isso a sério e não ler o link, como nós queremos. Ao invés de usar isso, você pode definir a largura e o comprimento do elemento como zero (width: 0; height: 0; overflow: hidden;), que tem o mesmo efeito visual mas ainda é lido por leitores de tela. 

Páginas Relacionadas

Referência

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

Anúncios




Tutorial Avançado de HTML

27 05 2008

"XHTML Válido", "CSS Válido" e "Acessibilidade Brasil"

O objetivo do Tutorial Avançado de HTML é te mostrar como aproveitar ao máximo as características do HTML e como tornar suas páginas mais acessíveis.

Como o Tutorial Iniciante de HTML e o Tutorial Intermediário de HTML ensinam a usar o padrão mais recente do HTML (XHTML 1.0+), alguns aspectos desse guia podem não ser familiares pra muitas pessoas que não leram os tutoriais Iniciante e Intermediário, e é por isso que vamos dar uma recapitulada nos padrões. No geral, as páginas nessa seção assumem que você já conhece HTML e quer usá-lo em seu máximo potencial.

Conteúdos

Páginas Relacionadas

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





Tutorial Intermediário de HTML: Exercícios

22 04 2008

Logo do +web em tom verde escuro

Antes de irmos pro próximo assunto, vamos praticar um pouco o que vimos por aqui.

Primeiro, dê uma incrementada no projeto que você começou lá atrás. Use as tags novas que você aprendeu, retire as tags más. Atualiza o seu servidor e envie o resultado pra meu email.

O segundo exercício é esse:

Exercício

Como você viu no começo desse curso e nesse texto que foi indicado, html é pra conteúdo e CSS é pra apresentação.

No código abaixo temos conteúdo e apresentação misturados no HTML – muito feio. Sua missão é limpar esse código. Substituir tudo que for relativo a apresentação por CSS, acrescentar o que estiver faltando, usar a tag certa pra cada elemento – p para parágrafos, h# para cabeçalhos, etc.

<html>
  <head>
    <title>Minha Página Misturada</title>
  </head>

  <body bgcolor="#00FFFF">
  <p align="center"><b><font size="6" face="Verdana">Um Cabeçalho</font></b></p>
  <p align="center"></p>
  <hr>
  <p><font face="Verdana" size="2">Esse texto que você está lendo foi retiradao de um <b> curso</b> de html.
  Desse mesmo jeito. <b> Só estou mudando os textos</b>, pro autor não ficar com raiva de mim</b>.</font></p>
  <p><font face="Verdana" size="2">E eu vou continuar escrevendo <b>qualquer coisa</b>, <b>qualquer coisa mesmo</b>,
  <b>sem ter nada pra falar</b>, <b>enrolando</b>, mais um pouco.</font></p>
  <p><font face="Verdana" size="2">E não ligue se isso não fizer sentido</font></p>
  <p align="center"><font face="Verdana" size="2">
  <img border="0" src="imagem.jpg" width="400" height="300"></font></p>
  <p><font face="Verdana" size="2"><b>Correio Electrónico:</b><a href="mailto:htmlvelhinho@algumauniversidade.pt">htmlvelhinho@algumauniversidade.pt</a></font></p>
  <p> </p><p><a href="um-link.html"><font face="Verdana" size="1">código HTML desta página</font></a></p>
  <p><a href="diario.html"><font face="Verdana" size="1">Um texto bem pequeninho.</font></a></p>
  </body>
</html>

O que é importante aqui: Compare o tamanho do arquivo antes de depois de ser limpado e você vai perceber que o arquivo limpo é bem menor. Um arquivo menor significa uma página que carrega mais rápido e que ocupa menos espaço.

Quem não quer uma página carregando mais rápido?

Quando estiver pronto, sigara para a próxima parte: CSS Intermediário.

Páginas Relacionadas





curso online grátis de introdução ao desenvolvimento web

19 04 2008

Hoje pela manhã acontece o Primeiro sábado+web, com o lançamento oficial do Curso Online de Introdução ao Desenvolvimento Web. O curso é grátis, e qualquer pessoa pode participar. Nos assuntos, XHTML, CSS e Javascript – e o jeito certo de fazer as coisas.

Mais informações sobre o curso você encontra lá na página do curso ou na lista de discussão do +web.

Espero ver vocês por lá!

Depois publico os slides e as fotos das palestras, com mais detalhes do curso e do grupo.





minicursos(3): cursos interessantes: desenvolvendo direito pra web!

12 04 2008

Nos últimos dois posts com minicursos (esse e esse) passei links que ensinavam o básico – programar. dessa vez trouxe uns links mais divertidos – cursos que fazem a diferença

Primeiro, tem o pdf grátis sobre xslt do pessoal da visie – já viu que tem qualidade. A visie lançou também um pdf sobre produtividade e web 2.0, que eu tô com muita vontade de ler mas ainda não deu. É baratinho, e um investimento que com certeza compensa, mas estágio em programação no Rio Grande do Norte paga tão pouquinho…

Tem ainda o sun student courses. Até agora estão disponíveis dois cursos bem legais: Real World Technologies: NetBeans GUI Builder, JRuby, JavaFX, and JavaME e Introduction to Solaris and opensolaris.org. Se não fosse coisa de primeira, não tava na sun. Nem aqui.

Você também devia dar uma olhada no ambiente de aprendizado da DERI, NUI Galway (se não me engano, uma universidade). O cadastro é fechado, mas você pode acessar como visitante pra conferir o material das disciplinas
de Next Generation Technologies I (Semantic Web), Advanced Studies in IT (Semantic Web and Semantic Web Services), Digital Information (Multimedia Semantics) e Emerging Web Media. Pra quem quer desenvolver “direito” pra web, são quase um must read.

Ainda tem dois cursos deveriam ter entrado na lista anterior, ótimos pra quem quer começar com Ruby on Rails mas não sabe direito por onde: O curso de Ruby de Salish Talim, que está com inscrições abertas até 6 de maio, e o curso de Rails de Sunil Kelkar, com inscrições abertas até 15 de abril. Corra! Esses dois são gratuitos, de muita qualidade, e se complementam. O ideal é fazer o de Ruby e o de Rails logo depois.

Espero que vocês tenham aproveitado a listinha. Comentem aí outros materiais que vocês conheçam que eu vou adicionando aqui!





Tutorial Intermediário de CSS: Imagens de Background

19 03 2008

Página com Imagem de Background

Existem várias propriedades envolvidas na manipulação de imagens de background.

Felizmente, a propriedade background cuida de todas as outras.

body {
	background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}

Esse código une essas propriedades:

  • background-color, que nós já vimos antes.
  • background-image, que é o endereço da imagem que vai servir de fundo.
  • background-repeat, que é como a imagem se repete na página. Pode ser repeat-y (repetindo no eixo y, de cima até embaixo), repeat-x (repetindo no eixo x, lado a lado), repeat (repetindo nos eixos x e y, efeito semelhante a um telhado, por exemplo) ou no-repeat (que mostra apenas uma ocorrência da imagem).
  • background-position, que pode ser top (topo), center (centro), bottom (parte inferior), left (esquerda) e right (direita), ou uma combinação de dois desses elementos. Nesse caso, o primeiro indica a posição no eixo horizontal e o segundo a posição no eixo vertical.

Imagens de background podem ser usadas na maioria dos elementos HTML – não apenas pra página inteira (body) e podem ser usados pra efeitos simples mas eficazes, como bordas arredondadas.

É fácil se envolver demais com imagens de background e querer usá-las na página inteira. Algumas pessoas visualmente hiperativas podem acreditar que é uma boa ter uma foto cheia de cores vivas em todo o fundo da página, dando ao usuário o desafio de decifrar o texto no primeiro plano. Isso é um exemplo meio radical, mas o fato é que o texto mais amigável ao usuário, legível, é fonte preta em um fundo simples branco ou fonte branca num fundo preto. Algumas pessoas defendem que um fundo “quase” branco ou “quase” preto é melhor, já que reduz a claridade. Sugiro que você teste essas possibilidades e escolha a que você achar mais adequada ao seu projeto.

O melhor uso pra imagens de background é preencher espaços onde não haja nenhum conteúdo, deixando a página mais visualmente agradável sem atrapalhar o conteúdo.

Páginas Relacionadas

Exemplos

Referência

BlogBlogs Tags: , ,

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





Tutorial Intermediário de CSS: Propriedades Atalho

18 03 2008

Trecho de código CSS

Algumas propriedades CSS permitem que uma sequência de valores substituam uma série de propriedades. Elas são representadas por valores separador por espaços.

margin, padding e border-width permitem a você combinar margin-top-width, margin-right-width, margin-bottom-width e etc. na forma

propriedade: top right bottom left;

Então:

p {
	border-top-width: 1px;
	border-right-width: 5px;
	border-bottom-width: 10px;
	border-left-width: 20px;
}

Pode ser resumido como:

p {
	border-width: 1px 5px 10px 20px;
}

border-width, border-color e border-style também podem ser somadas como, por exemplo:

p {
	border: 1px red solid;
}

(Isso também pode ser aplicado a border-top, border-right, etc.)

Ao declarar apenas dois valores (como margin: 1em 10em;), o primeiro valor vai ser o topo e a base, e o segundo valor vai ser a direita e a esquerda. Ao declarar apenas um valor, esse vai ser aplicado em todos os lados.

Propriedades relacionadas a fontes também podem ser unidas com a propriedade font:

p {
	font: italic bold 1em/1.5 courier;
}

(Onde o ‘/1.5’ é o atributo line-height.)

Então, juntando tudo, experimente esse código:

p {
	font: 1em/1.5 "Times New Roman", times, serif;
	padding: 3em 1em;
	border: 1px black solid;
	border-width: 1px 5px 5px 1px;
	border-color: red green blue yellow;
	margin: 1em 5em;
}

Atraente.

Existem bem mais atalhos que esses. E são todos muito, muito úteis. Leia esse guia de abreviações de CSS, mais abrangente que esse texto.

Páginas Relacionadas

Referência

BlogBlogs Tags: , ,

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