<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Felipe de Albuquerque &#187; projetos inclusivos</title>
	<atom:link href="http://www.felipealbuquerque.com/tag/projetos-inclusivos/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.felipealbuquerque.com</link>
	<description>Front-End Engineer &#38; Designer / Web Designer / Web Developer</description>
	<lastBuildDate>Sun, 13 Mar 2011 16:01:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Link Acessível</title>
		<link>http://www.felipealbuquerque.com/2009/10/21/link-acessivel/</link>
		<comments>http://www.felipealbuquerque.com/2009/10/21/link-acessivel/#comments</comments>
		<pubDate>Wed, 21 Oct 2009 19:52:52 +0000</pubDate>
		<dc:creator>Felipe de Albuquerque</dc:creator>
				<category><![CDATA[Acessibilidade]]></category>
		<category><![CDATA[href acessível]]></category>
		<category><![CDATA[inclusão digital]]></category>
		<category><![CDATA[link acessível]]></category>
		<category><![CDATA[Navegar com teclado]]></category>
		<category><![CDATA[projetos inclusivos]]></category>
		<category><![CDATA[site acessível]]></category>

		<guid isPermaLink="false">http://www.felipealbuquerque.com/?p=259</guid>
		<description><![CDATA[Para fazer com que os links fiquem acessíveis &#8220;href acessível&#8221; para leitores de telas e usuários que usam o teclado para navegar na internet. É bem simples e vou descrever algumas técnicas, tentando ser mais claro e objetivo possível. Adicionando o Atributo “title” O atributo “title” é muito importante, é ele que vai dar a]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-289" title="links Acessiveis" src="http://www.felipealbuquerque.com/wp-content/uploads/2009/10/linksacessiveis.jpg" alt="links Acessiveis" width="640" height="250" /></p>
<p>Para fazer com que os links fiquem acessíveis &#8220;href acessível&#8221; para leitores de telas e usuários que usam o  teclado para navegar na internet. É bem simples e vou descrever algumas técnicas, tentando ser mais claro e objetivo possível.</p>
<h2>Adicionando o Atributo “title”</h2>
<p>O atributo “title” é muito importante, é ele que vai dar a descrição do link e informar para onde ele vai levar o seu usuário.</p>
<pre><code>
&lt;a href="acessibilidade.html"<strong> title="Ir a página de acessibilidade"&gt;</strong>
     Acessibilidade
&lt;/a&gt;
</code></pre>
<blockquote><p>Facilite a vida dos seus usuários e escreva com um texto conciso, que faça sentido e que tenha relevância.</p></blockquote>
<h2>Adicione Teclas de Atalho</h2>
<p>É uma boa idéia usar teclas de atalho na navegação principal, com isso você vai facilitar a vida de muita gente que tem dificuldade motora e não usa o mouse para acessar o seu conteúdo.</p>
<pre><code>
&lt;a href="acessibilidade.html" <strong>accesskey="a"</strong>&gt;Acessibilidade&lt;/a&gt;
</code></pre>
<h2>Pular para o Conteúdo</h2>
<p>Permita que o usuário possa ir direto ao conteúdo desejado.</p>
<p>Utilize um link com o atributo accesskey no topo do documento, faça com que ele seja o primeiro link do seu site. Com isso você evitará que o usuário percorra o site todo até chegar ao conteúdo desejado.</p>
<p>Caso você não queira que esse link apareça no topo, você poderá ocultar com CSS.</p>
<pre><code>
&lt;div id="topo"&gt;
    &lt;h1&gt;titulo do site&lt;/h1&gt; <span>&lt;!-- "essa área é muito importante p/ SEO mas é assunto para outro post" --&gt;</span>
    &lt;a href="#conteudo" accesskey="p" title="ir ao conteúdo"&gt;Pular para o conteúdo&lt;/a&gt;
&lt;/div&gt;
&lt;div id="menu"&gt;
    <span>&lt;!-- os intens do menu --&gt;</span>
&lt;/div&gt;
&lt;div id="conteudo"&gt;
   <span> &lt;!-- aqui é onde o usuário chegará, o conteúdo desejado --&gt;</span>
&lt;/div&gt;
</code></pre>
<blockquote><p>não que você vá colocar teclas de atalho em todos os links do seu site, mas pense nisso com carinho!</p></blockquote>
<h2>Navegando Através de Tab</h2>
<p>Muitos usuários não podem ou não querem usar dispositivos como mouse para navegar em seu site.</p>
<p>Eles utilizam o teclado pra percorrer os links, geralmente usando a tecla “tab”.</p>
<p>Por este motivo seu código deve estar estruturado semanticamente, principalmente a estrutura de links, eles devem estar em uma ordem lógica de navegação, caso esteja, não é necessário usar o atributo “tabindex”.</p>
<p>Mas caso não esteja ou você queira conduzir seus usuários, use o atributo “tabindex” que permite definir a ordem de navegação dos links em seu sistema web.</p>
<pre><code>
&lt;ul&gt;
    &lt;li&gt;&lt;a href="#" <strong>tabindex="3"</strong>&gt;Link 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" <strong>tabindex="1"</strong>&gt;Link 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" <strong>tabindex="2"</strong>&gt;Link 3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" <strong>tabindex="4"</strong>&gt;Link 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<blockquote><p>Conduza seus usuários, dê a eles o que eles realmente precisam e querem ler</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.felipealbuquerque.com/2009/10/21/link-acessivel/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

