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.





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.





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.





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.





Tutorial Intermediário de CSS: Pseudo Classes

18 03 2008

Quatro Estados de um Link

Pseudo classes são usadas juntos com seletores para especificar um estado do seletor. Elas aparecem na forma seletor:pseudo classe { propriedade: valor; }, com um sinal de dois-pontos separando o seletor e a pseudo classe.

Muitas das pseudo-classes definidas pelo CSS não são suportadas por todos os navegadores, mas existem quatro que podem ser usadas com segurança quando aplicadas à links:

  • link indica o estilo de links não-visitados.
  • visited indica links que foram visitados.
  • active indica um link que está com o foco (por exemplo, quando ele está sendo clicado).
  • hover indica um link enquanto o cursor é mantido sobre ele.
a.homemdasneves:link {
	color: blue;
}

a.homemdasneves:visited {
	color: purple;
}

a.homemdasneves:active {
	color: red;
}

a.homemdasneves:hover {
	text-decoration: none;
	color: blue;
	background-color: yellow;
}

Experimente. Crie uma página HTML que use esses estilos. Veja quando cada pseudo classe é usada. Crie uma outra página HTML e um outro arquivo CSS e explore um pouco mais essas classes. Dominar esses estados te ajuda a fazer páginas bem mais legais.

Embora CSS te dê o poder de contornar isto, manter links visitados com cores diferentes de links não-visitados é uma boa prática, já que muitos usuários supõe que isso vai acontecer.

Tradicionalmente, links de texto são azuis se não visitados e violeta se visitados, e ainda existem razões para acreditar que essas cores são as mais eficazes para isso. No entanto, com a crescente popularização do uso do CSS, essas cores estão deixando de ser lugares-comum e o usuário médio não assume mais que links precisam ser azul ou violeta.

Você também devia estar apto a usar a pseudo classe hover com outros elementos além de links. Infelizmente, o Internet Explorer (sempre ele) não suporta esse recurso até a versão 6. Isso é uma tremenda irritação, porque existem um monte de truquezinhos legais que você pode fazer com isso que ficam ótimos em outros navegadores.

Páginas Relacionadas

Exemplos

  • Rollovers 1 – links gráficos que mudam quando o cursos passa por eles usando :hover.
  • Rollovers 2 – Efeitos mais interativos, usando :active.
BlogBlogs Tags: , ,

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