Como tornar seu website acessível?

Ao ler este título talvez você esteja se perguntando: “mas se ele já foi publicado, já pode ser acessado por todos, certo?!” e a resposta mais correta é: “depende”. Que tal entender melhor o que significa acessibilidade na web?

por Thaiana Poplade 18/10/2010 Comentários

Tornar um site acessível, ainda que num processo lento, tem sido uma das buscas de alguns desenvolvedores, seja pelo objetivo específico de um site em questão ou por algum novo público que a agência ou empresa a qual ele trabalha está buscando atender.

Assim como no mundo real, onde lugares adaptados à pessoas com deficiências físicas ou mentais ainda estão em expansão, na internet este mesmo público também encontra dificuldades de acessar diversos websites por falta de um código bem elaborado ou estudado para cumprir as exigências de leitores de tela e navegadores textuais.

Poucos também são, os tutoriais que realmente exemplificam técnicas de acessibilidade e vários são os artigos que ainda insistem em atribuir a necessidade desta característica apenas à websites governamentais.

Ainda que você não tenha visto uma necessidade de elaborar projetos mais acessíveis, saiba que podemos utilizar as mesmas técnicas de acessibilidade para aplicar técnicas de SEO à seu código podendo também garantir um ganho de posições nos resultados de busca.

Então, para colaborar com um público pouco levado em consideração na elaboração de projetos web e ainda de priorizar a “conversa” entre seu código e mecanismos de busca, vamos às dicas para tornar seu website mais acessível.

Nas primeiras linhas de sua página já teremos as primeiras definições.

Iniciamos os códigos html nos “comunicando” com o navegador e “dizendo” que tipo de documento será lido e como ele deve ser validado:



Na segunda linha do código atribuímos o idioma do website e esta informação é de suma importância para que o leitor utilize o dicionário correto ao sintetizar as palavras. Utilizamos tanto a tag xml:lang quanto apenas lang, devido as diferentes versões de navegadores:

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

Depois da tag de abertura , temos a primeira linha de declaração onde também é importante declarar a códificação utilizada para o conteúdo do website. Normalmente, sites em português, utilizam a codificação ISO-8859-1:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

Assim como nas técnicas de SEO, a tag </em> que atribui título à página, também é de igual importância para as técnicas de Acessibilidade. Devido à este fato, temos o primeiro embate entre elas – uma preza por palavras-chave que garantem um melhor page-rank e outra preza pela leitura mais clara do nome e objetivo de um website acessados por navegadores textuais e leitores de tela. A dica é: procure elaborar todos os textos, que serão interpretados por sintetizadores e mecanismos de busca, unindo essas técnicas. No caso da tag <em>title</em> procure escrever um título claro e coerente sem excluir as palavras-chave. Por exemplo:</p> <pre lang="html" line="1"><title> Como tornar seu website acessível? | Boas práticas de Desenvolvimento com Padrões Web

Percebe? Está claro o título da página e não deixamos de usar palavras-chave que vão referenciar o site nos resultados de busca.

Outro atributo bastante importante a ser utilizado é o atributo rel na tag link. Quando linkamos arquivos externos à nossa página é importante para os navegadores textuais que determinemos que tipo de arquivo ou página externa está sendo linkada. Este atributo tem valor pré-definido e o mais usado é: stylesheet. De qualquer forma, a lista prevê conteúdos (content), páginas anteriores (prev) e páginas posteriores (next). Pensando nas técnicas de SEO, caso você não saiba atribuir o conteúdo a ser linkado, é aconselhável que você utilize o valor “nofollow”, que fará com que mecanismos de buscas o ignorem e não saiam da linha geral de leitura da página. Exemplo:



Continuando o código, no de seu site, várias precauções devem ser igualmente tomadas. Os atributos alt e longdesc na tag devem ser preenchidos com textos intuitivos tanto para a falta de carregamento da imagem (no caso de um cuidado na usabilidade do website – vide Usabilidade para desenvolvedores front-end – pela Talita Pagani), quanto no caso dos navegadores textuais e leitores de tela. Lembrando que longdesc não tem suporte em todos os navegadores e é mais utilizado para leitores de tela. O ideal é utilizar os dois atributos:

Imagem teste

Para hyperlinks, tag , a dica é utilizar o atributo </em>, com textos claros que exemplifiquem o destino do usuário ao clicar no link e não apenas com a descrição “clique aqui”. Além deste, outros dois atributos bastante valiosos para esta tag, são <em>tabindex</em> e <em>accesskey</em>. A primeira permite que seja atribuída a ordem a qual a tecla <em>tab</em> acessará o referido link e a segunda atribui uma tecla de atalho para o mesmo. Exemplo:</p> <pre lang="html" line="1"><ul> <li> <a href="index.html">PÁGINA INICIAL</a> </li> </ul></pre> <p>Por fim, para que o deficiente visual não gaste muito tempo ouvindo, através do leitor de tela, todas as linhas de código que seus scripts tem, aconselha-se o uso da tag <em><noscript></em> para descrever o objetivo do script na página. Por exemplo:</p> <pre lang="html" line="1"><!--mce:0--> Funções para auxílio de animações do portal da ANEEL</pre> <p>Quer saber mais detalhes sobre Acessibilidade na Web? Abaixo 3 links que podem te ajudar nesta pesquisa.</p> <p>A avaliação de acessibilidade de seu site pode ser feita pela URL: <a href="http://www.dasilva.org.br/" target="_blank"><a href="http://www.dasilva.org.br/">http://www.dasilva.org.br/</a></a>.</p> <p>A documentação da W3C, para acessibilidade, pode ser adquirida neste link: <a href="http://www.w3.org/WAI/" target="_blank"><a href="http://www.w3.org/WAI/">http://www.w3.org/WAI/</a></a></p> <p>Para visualizar seu site em um navegador textual, acesse: <a href="http://www.delorie.com/web/lynxview.html" target="_blank"><a href="http://www.delorie.com/web/lynxview.html">http://www.delorie.com/web/lynxview.html</a></a></p> <p>Com o HTML5 algumas dessas técnicas devem ser extintas, porque muitas das tags já estão sendo preparadas para ter um valor especialmente elaborado para cumprir requisitos de usabilidade, acessibilidade e SEO. Porém, enquanto a documentação se mantém em fase de formulação, vamos tornando acessíveis os sites que estão hoje na internet, mas ainda dificultam muito a vida deste público também inserido ao mundo virtual.</p> </article> <div class="tb-related-posts"> <h3>Leia mais aqui no Tableless:</h3> <ul> <li><a href="/contraste-de-cores-acessibilidade-na-web/?utm_source=tablelessRelatedLink" class="tb-related-post">Contraste de cores – Acessibilidade na web</a></li> <li><a href="/acessibilidade-basica-no-formulario-de-contato/?utm_source=tablelessRelatedLink" class="tb-related-post">Acessibilidade básica no formulário de contato</a></li> <li><a href="/faz-uma-animacao-legal-ai/?utm_source=tablelessRelatedLink" class="tb-related-post">Faz uma animação legal aí!</a></li> <li><a href="/arquitetura-redux-usando-jails/?utm_source=tablelessRelatedLink" class="tb-related-post">A arquitetura Redux usando Jails</a></li> <li><a href="/por-que-inscrever-seu-site-no-premio-de-acessibilidade/?utm_source=tablelessRelatedLink" class="tb-related-post">Por que inscrever seu site no prêmio de acessibilidade?</a></li> <li><a href="/diga-ola-ao-typescript-e-adeus-ao-javascript/?utm_source=tablelessRelatedLink" class="tb-related-post">Diga olá ao TypeScript e adeus ao JavaScript</a></li> <li><a href="/usando-git-para-atualizar-arquivos-no-servidor-de-hospedagem-ii-final/?utm_source=tablelessRelatedLink" class="tb-related-post">Usando GIT para atualizar arquivos no servidor de hospedagem II – Final</a></li> </ul> </div> <div class="tb-comments"> <div id="disqus_thread"></div> <script> var disqus_config = function () { this.page.url = "https://tableless.com.br/como-tornar-seu-website-acessivel/"; this.page.identifier = 503039664 ; }; (function() { var d = document, s = d.createElement('script'); s.src = 'https://tableless.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> </div> </section> <aside class="tb-aside"> <div id="div-gpt-ad-1491747715151-0" class="tb-banner-sidebar"> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1491747715151-0'); }); </script> </div> <h2>Últimos posts</h2> <ul> <li><a href="/comecando-desenvolver-com-o-postcss/?utm_source=tablelessSidebarLatestLinks" class="tb-latestpost-link">Começando desenvolver com o PostCSS</a></li> <li><a href="/guia-completo-react-ecossistema/?utm_source=tablelessSidebarLatestLinks" class="tb-latestpost-link">O Guia Completo do React e o seu Ecossistema</a></li> <li><a href="/nodejs-umbler/?utm_source=tablelessSidebarLatestLinks" class="tb-latestpost-link">Node.js - o back-end do front-end</a></li> <li><a href="/realidade-virtual-com-a-frame/?utm_source=tablelessSidebarLatestLinks" class="tb-latestpost-link">Construindo protótipos navegáveis em realidade virtual com A-Frame</a></li> <li><a href="/meetup-magento-mercado-pago/?utm_source=tablelessSidebarLatestLinks" class="tb-latestpost-link">MeetUp Magento e Mercado Pago</a></li> <li><a href="/media-queries-simples-com-rupture/?utm_source=tablelessSidebarLatestLinks" class="tb-latestpost-link">Media queries simples com rupture</a></li> <li><a href="/frontend-week/?utm_source=tablelessSidebarLatestLinks" class="tb-latestpost-link">Front-end Week</a></li> </ul> <div class="tb-book-recommend"> <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=BR&source=ac&ref=qf_sp_asin_til&ad_type=product_link&tracking_id=tableless0d-20&marketplace=amazon®ion=BR&placement=B019NG6PH8&asins=B019NG6PH8&linkId=5ebaf7458eff40a4c6ff1f6818d00fee&show_border=true&link_opens_in_new_window=true&price_color=333333&title_color=0066c0&bg_color=ffffff"> </iframe> </div> <h2>Categorias</h2> <ul> <li><a href="/categories/tecnologia-e-tend%C3%AAncias" class="tb-categ-link">tecnologia-e-tendências</a> (324)</li> <li><a href="/categories/geral" class="tb-categ-link">geral</a> (322)</li> <li><a href="/categories/artigos" class="tb-categ-link">artigos</a> (316)</li> <li><a href="/categories/t%C3%A9cnicas-e-pr%C3%A1ticas" class="tb-categ-link">técnicas-e-práticas</a> (284)</li> <li><a href="/categories/c%C3%B3digo" class="tb-categ-link">código</a> (244)</li> <li><a href="/categories/browsers" class="tb-categ-link">browsers</a> (205)</li> <li><a href="/categories/javascript" class="tb-categ-link">javascript</a> (191)</li> <li><a href="/categories/html" class="tb-categ-link">html</a> (183)</li> <li><a href="/categories/css" class="tb-categ-link">css</a> (180)</li> <li><a href="/categories/mercado-e-comportamento" class="tb-categ-link">mercado-e-comportamento</a> (118)</li> </ul> </aside> </div> <footer id="tb-footer"> <div class="tb-container"> <ul class="tb-social-links"> <li><a target="_blank" href="http://facebook.com/tablelessbr">Facebook</a></li> <li><a target="_blank" href="http://twitter.com/tableless">Twitter</a></li> <li><a target="_blank" href="" type="application/rss+xml" class="tb-ico-rss">RSS</a></li> <li><a target="_blank" href="http://medium.com/tableless">Medium</a></li> </ul> <div class="tb-nav-footer"> <nav> <h3>Sobre</h2> <a href="https://tableless.com.br/sobre-nos/" class="tb-link-footer">Sobre o Tableless</a> <a href="https://tableless.com.br/contato/" class="tb-link-footer">Contato</a> <a href="https://tableless.com.br/anuncie-no-tableless/" class="tb-link-footer">Anuncie</a> <a href="https://tableless.com.br/seja-um-autor/" class="tb-link-footer">Seja um Autor</a> <a href="http://tableless.com.br/servicos/" class="tb-link-footer">Fazemos código front-end</a> </nav> <nav> <h3>Acompanhe</h3> <a href="https://www.eventials.com/tableless/" target="_blank" title="Assista algumas vídeo aulas" class="tb-link-footer">Webinars</a> <a href="http://forum.tableless.com.br/" target="_blank" title="Pergunte e resposta perguntas no nosso Fórum" class="tb-link-footer">Fórum</a> <a href="http://medium.com/tableless/" target="_blank" title="Acompanhe artigos no Medium" class="tb-link-footer">Canal no Medium</a> <a href="https://telegram.me/tableless" target="_blank" title="Acompanhe notíficas e novos posts no Telegram" class="tb-link-footer">Canal no Telegram</a> </nav> <nav> <h3>Comunidade</h3> <a href="https://github.com/femug/femug" target="_blank" title="Encontro Front-end no Brasil inteiro">Femug</a> <a href="https://www.meetup.com/pt-BR/CSS-SP/" target="_blank" title="Encontro de CSS em São Paulo">MeetupCSS</a> <a href="http://zofe.com.br/" target="_blank" title="Ouça um Podcast brasileiro sobre Front-end">Podcast ZOFE</a> <a href="https://braziljs.org/" target="_blank" title="Um dos maiores eventos de JavaScript e front-end do Brazil do Universo">BrazilJS</a> <a href="http://devnaestrada.com.br/" target="_blank" title="Podcast brasileiro sobre desenvolvimento web">DevNaEstrada</a> <a href="https://github.com/frontendbr/" target="_blank" title="Portando qualquer coisa relacionada ao mundo frontender para o Github">Front-End Brasil</a> </nav> </div> <p class="tb-for-community"> Escrito pela e para a comunidade web brasileira. <a href="https://tableless.com.br/seja-um-autor/" class="tb-link-help">Ajude</a> </p> </div> </footer> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script> $(function() { $('#tb-menu li ul').addClass('tb-submenu'); $('.tb-submenu').parent().addClass('tb-submenu-parent'); }); </script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script> <script> $(function() { $('pre').each(function(i, block) { hljs.highlightBlock(block); }); }); </script> <script id="dsq-count-scr" src="//tableless.disqus.com/count.js" async></script> <script> window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; ga('create', 'UA-335027-1', 'auto'); ga('send', 'pageview'); </script> <script async src='//www.google-analytics.com/analytics.js'></script> </body> </html>