{"id":4887,"date":"2017-12-18T16:23:14","date_gmt":"2017-12-18T19:23:14","guid":{"rendered":"http:\/\/blog.handtalk.me\/?p=1017"},"modified":"2023-10-09T17:25:39","modified_gmt":"2023-10-09T20:25:39","slug":"acessibilidade-ranking-google","status":"publish","type":"post","link":"https:\/\/www.handtalk.me\/br\/blog\/acessibilidade-ranking-google\/","title":{"rendered":"Voc\u00ea sabia que a acessibilidade pode levar seu site ao topo do Google?"},"content":{"rendered":"

Estar nas primeira posi\u00e7\u00f5es do Google comprovadamente direciona o tr\u00e1fego das buscas para o seu site. Quanto mais acima se est\u00e1 no mecanismo de busca, maior \u00e9 n\u00famero de acessos\u00a0– o primeiro resultado tem, em m\u00e9dia, 32,9% de todo o tr\u00e1fego<\/a><\/span>.\u00a0E isso, naturalmente, gera uma grande competi\u00e7\u00e3o entre as organiza\u00e7\u00f5es para alcan\u00e7ar o topo das buscas.\u00a0O investimento em SEO (Otimiza\u00e7\u00e3o para Motores de Busca, na sigla em ingl\u00eas) explodiu nos \u00faltimos anos, e n\u00e3o \u00e9 dif\u00edcil encontrar artigos e dicas sobre o que fazer para melhorar a sua posi\u00e7\u00e3o no ranking do Google.<\/p>\n

Mas, uma coisa que pouca gente aborda \u00e9\u00a0como a acessibilidade do site pode ser uma forma de melhorar o\u00a0ranking das p\u00e1ginas<\/strong>. A gente vai te mostrar o que uma coisa tem a ver com a outra e como voc\u00ea pode aproveitar essa oportunidade para otimizar o seu site e aumentar os acessos!<\/p>\n

Como funciona o rankeamento do Google<\/h2>\n

Para quem n\u00e3o conhece muito sobre SEO,\u00a0vale fazer uma pequena explica\u00e7\u00e3o. O Google e os outros buscadores usam de algoritmos<\/a><\/span> para calcular a posi\u00e7\u00e3o que uma p\u00e1gina deve ocupar nos resultados das buscas.\u00a0Esses algoritmos s\u00e3o compostos de v\u00e1rios crit\u00e9rios<\/strong> que buscam compreender a relev\u00e2ncia de um site para a palavra-chave pesquisada. No caso do Google, n\u00e3o se sabe exatamente quais e quantos s\u00e3o esses crit\u00e9rios. Mas pesquisas de especialistas e entrevistas com profissionais da empresa mostram que\u00a0h\u00e1 ao menos 200 fatores envolvidos<\/span>!<\/a><\/p>\n

A qualidade do conte\u00fado, o uso adequado das palavras-chave e a\u00a0organiza\u00e7\u00e3o do site s\u00e3o os primeiros pontos que as pessoas costumam trabalhar para melhorar no ranking. Mas, quando todo mundo j\u00e1 faz isso, \u00e9 necess\u00e1rio se dedicar a outros aspectos para conseguir se\u00a0destacar. E a acessibilidade do site entra justamente a\u00ed!\u00a0\ud83e\udd17<\/p>\n

O que Acessibilidade digital tem a ver com SEO?<\/h2>\n

Acessibilidade digital \u00e9 a capacidade de um site de ser flex\u00edvel o suficiente<\/a><\/span> para atender o maior n\u00famero de pessoas poss\u00edvel, independente das necessidades delas e das tecnologias assistivas<\/span><\/a> que usam para navegar. Ou seja, em um site\u00a0acess\u00edvel, todo o conte\u00fado pode ser aproveitado integralmente, sem que as prefer\u00eancias de navega\u00e7\u00e3o do usu\u00e1rio afetem a sua experi\u00eancia.<\/p>\n

O resultado disso \u00e9 que os sites com acessibilidade t\u00eam as portas abertas para um p\u00fablico de mais de 17 milh\u00f5es de brasileiros<\/a> que possuem algum tipo de defici\u00eancia, al\u00e9m de tamb\u00e9m facilitarem a navega\u00e7\u00e3o dos idosos, por exemplo. Ou seja, um site acess\u00edvel \u00e9 naturalmente mais acessado<\/strong><\/a>, por permitir\u00a0que um p\u00fablico maior o utilize. E o aumento do tr\u00e1fego \u00e9 justamente o objetivo final do SEO!<\/p>\n

Al\u00e9m disso, podemos considerar que o algoritmo do Google \u00e9 um usu\u00e1rio cego<\/a><\/span>. Afinal de contas, ele percorre o conte\u00fado do site de forma autom\u00e1tica, como um leitor de tela faz. A diferen\u00e7a \u00e9 que um usu\u00e1rio cego consegue entender os contextos muito melhor que o Google. Logo, um site que est\u00e1 acess\u00edvel para cegos e para as pessoas com outras defici\u00eancias vai ser percebido pelo buscador como um site mais relevante e bem estruturado.<\/strong><\/p>\n

O segredo est\u00e1 na Experi\u00eancia do Usu\u00e1rio (UX, na sigla em ingl\u00eas), um aspecto que sempre recebe a\u00a0aten\u00e7\u00e3o dos programadores\u00a0na hora de desenvolver os sites.\u00a0H\u00e1 diversos fatores que influenciam a UX, como a pr\u00f3pria acessibilidade, a usabilidade do site, a estrutura\u00e7\u00e3o do conte\u00fado e o design. E a maioria desses aspectos s\u00e3o\u00a0considerados\u00a0pelo Google<\/strong> na hora de definir quem deve aparecer primeiro nos resultados. E como muitas vezes eles se misturam (o design pode influenciar a acessibilidade, por exemplo<\/a>), otimizar um deles pode te ajudar a otimizar os outros.<\/p>\n

E \u00e9 sobre isso que vamos falar agora!<\/p>\n

\"Imagem<\/a><\/p>\n

11 dicas e boas pr\u00e1ticas para\u00a0deixar seu site acess\u00edvel<\/h3>\n

O senso comum pode te fazer pensar que acessibilidade digital \u00e9 uma coisa complicada, mas n\u00e3o se engane.\u00a0Al\u00e9m de ser uma grande oportunidade de neg\u00f3cio (clique para ler o post)<\/span><\/a>, as adapta\u00e7\u00f5es de acessibilidade n\u00e3o exigem\u00a0nada que fuja muito\u00a0dos conhecimentos b\u00e1sicos de qualquer programador.\u00a0Al\u00e9m disso,\u00a0grande parte das iniciativas pode ser\u00a0executada pelos\u00a0designers ou por quem escreve e edita os textos.<\/p>\n

Como as diferentes defici\u00eancias que as pessoas podem ter requerem recursos de acessibilidade diferentes, vamos agrupar nossas dicas de acordo com os principais grupos de defici\u00eancia<\/strong>, para facilitar a compreens\u00e3o. Mas isso n\u00e3o significa que voc\u00ea deva pensar em cada grupo de forma isolada, j\u00e1 que uma mesma pessoa pode ter mais de uma defici\u00eancia.\u00a0Vale lembrar que as pr\u00e1ticas de um grupo tamb\u00e9m podem ser ben\u00e9ficas para as pessoas de outro grupo, inclusive para quem n\u00e3o tem defici\u00eancia!<\/p>\n

Vamos \u00e0s dicas!\u00a0\ud83d\udc47<\/p>\n

Defici\u00eancia visual e cegueira<\/h3>\n

1) Fa\u00e7a a descri\u00e7\u00e3o alternativa das imagens<\/h4>\n

Sempre que\u00a0o seu site apresentar imagens,\u00a0uma alternativa textual para elas deve estar presente, para que os leitores de tela reconhe\u00e7am o conte\u00fado. As descri\u00e7\u00f5es alternativas (ALT) tamb\u00e9m s\u00e3o \u00fateis para os usu\u00e1rios videntes, pois s\u00e3o exibidas caso as imagens n\u00e3o sejam carregadas.<\/p>\n

Imagens com descri\u00e7\u00e3o alternativa s\u00e3o reconhecidas mais facilmente pelos mecanismos de busca, o que aumenta a visibilidade do site. O\u00a0ALT tamb\u00e9m \u00e9 um espa\u00e7o \u00f3timo para utilizar a palavra-chave em que voc\u00ea busca se posicionar. D\u00e1 uma olhada nas imagens desse post, por exemplo, e voc\u00ea vai ver que todas seguem essas dicas!\u00a0\ud83d\ude09<\/p>\n

2) Preste aten\u00e7\u00e3o no contraste das cores<\/h3>\n

Essa dica \u00e9 especial para os designers. Colocar um contraste m\u00ednimo entre as cores de fundo e as cores dos textos do site \u00e9 essencial para que todos consigam compreender as informa\u00e7\u00f5es. Isso tamb\u00e9m vale para as imagens e outros elementos visuais coloridos do site.<\/p>\n

A recomenda\u00e7\u00e3o \u00e9 utilizar calculadoras de contraste (clique para acessar)<\/a><\/span> ou ferramentas de an\u00e1lise de contraste (clique aqui)<\/a><\/span>, que auxiliam\u00a0na escolha\u00a0das cores. Outra op\u00e7\u00e3o \u00e9\u00a0disponibilizar uma vers\u00e3o de alto contraste para o site (veja um exemplo aqui<\/a>)<\/span>. H\u00e1 ferramentas que fazem isso de forma autom\u00e1tica, como a Browse Aloud<\/a><\/span>.<\/p>\n

3) Lembre-se dos usu\u00e1rios dalt\u00f4nicos!<\/h4>\n

Estima-se que cerca de\u00a08% dos homens e 0,5% das mulheres do mundo<\/a><\/span>\u00a0tenham dificuldade para diferenciar cores, ou seja, sejam dalt\u00f4nicos.\u00a0Para que a experi\u00eancia de navega\u00e7\u00e3o dessas pessoas n\u00e3o seja comprometida \u00e9 importante que as informa\u00e7\u00f5es do site n\u00e3o dependam das cores<\/strong>. Ou seja, se os links de um post do seu Blog s\u00f3 se diferenciarem do resto do texto pela cor – sem o uso de negrito ou sublinhado – os usu\u00e1rios dalt\u00f4nicos n\u00e3o perceber\u00e3o essa diferen\u00e7a e n\u00e3o captar\u00e3o a informa\u00e7\u00e3o.<\/p>\n

As principais dicas s\u00e3o\u00a0utilizar recursos de destaque n\u00e3o relacionados a cores e, mais uma vez, se atentar \u00e0s cores escolhidas. Ferramentas como o Colorblind<\/a><\/span>\u00a0podem te ajudar a enxergar a sua p\u00e1gina como um dalt\u00f4nico a v\u00ea. Assim voc\u00ea pode realizar as corre\u00e7\u00f5es e deixar tudo acess\u00edvel!<\/p>\n

\"Banner<\/a><\/p>\n

Defici\u00eancias intelectuais e dislexia<\/h3>\n

Nem sempre um bom texto \u00e9 aquele que traz o m\u00e1ximo de informa\u00e7\u00e3o. A organiza\u00e7\u00e3o e a apresenta\u00e7\u00e3o das ideias s\u00e3o t\u00e3o\u00a0importantes quanto o pr\u00f3prio conte\u00fado. Simplificar a leitura \u00e9 de grande ajuda para quem tem defici\u00eancia intelectual, mas facilita a vida de todo mundo!<\/p>\n

4) Organize o conte\u00fado adequadamente<\/h4>\n

Na hora de escrever, preste aten\u00e7\u00e3o na hierarquia dos t\u00edtulos e subt\u00edtulos (tamb\u00e9m conhecidos como heading tags<\/em><\/a><\/span>). O t\u00edtulo com a tag<\/em> H1 deve sempre trazer a informa\u00e7\u00e3o de maior relev\u00e2ncia e ser seguido pelos t\u00edtulos H2, H3 e assim por diante. Isso significa que um “t\u00edtulo menor” sempre deve estar dentro de um “t\u00edtulo maior”<\/strong>, assim como a gente fez nesse post! Se voc\u00ea observar, vai perceber que a leitura fica mais fluida e que \u00e9 mais f\u00e1cil de encontrar as informa\u00e7\u00f5es no texto. E o mesmo funciona para o Google, que consegue escanear o texto com mais facilidade e melhorar o posicionamento dele nas buscas.<\/p>\n

5) Simplifique o seu texto<\/h4>\n

Outra dica que melhora a experi\u00eancia dos usu\u00e1rios \u00e9 a simplifica\u00e7\u00e3o do texto. Prefira sempre as\u00a0frases curtas e na ordem direta<\/a><\/span> (Sujeito -> Predicado -> Complemento). Evite usar palavras muito dif\u00edceis, pois isso pode dificultar a leitura de quem tem dislexia. E se um termo t\u00e9cnico for necess\u00e1rio, explique o seu significado. O mesmo vale para termos em ingl\u00eas, j\u00e1 que nem todo mundo \u00e9 fluente na l\u00edngua. Se as explica\u00e7\u00f5es n\u00e3o couberem no seu texto, use links para p\u00e1ginas\u00a0com mais informa\u00e7\u00e3o sobre as palavras.\u00a0O Google verifica a\u00a0qualidade dos links externos para entender se voc\u00ea \u00e9 confi\u00e1vel, ent\u00e3o capriche nas cita\u00e7\u00f5es!<\/p>\n

Defici\u00eancia auditiva e surdez<\/h3>\n

6) Legendas + Libras = Sucesso!<\/h4>\n

Como a gente comentou nesse post de Curiosidades sobre a Comunidade Surda<\/span><\/a>, h\u00e1 uma diferen\u00e7a entre quem se identifica como surdo e como deficiente auditivo. As pessoas com defici\u00eancia auditiva geralmente s\u00e3o oralizadas e t\u00eam o portugu\u00eas como primeira l\u00edngua. J\u00e1 as surdas se comunicam em\u00a0Libras (L\u00edngua Brasileira de Sinais) e participam da comunidade surda. Sendo assim, \u00e9 importante que os conte\u00fados estejam dispon\u00edveis nos dois idiomas<\/strong>, j\u00e1 que ambos s\u00e3o l\u00ednguas oficiais do Brasil.<\/p>\n

No caso de v\u00eddeos, sempre disponibilize as legendas e a janela de Libras. H\u00e1 programas\u00a0que fazem a legenda automaticamente para voc\u00ea revisar – o que facilita o trabalho. Colocar as legendas tamb\u00e9m possibilita a tradu\u00e7\u00e3o autom\u00e1tica para Libras, caso seu site possua um\u00a0software\u00a0<\/em>que fa\u00e7a isso. Vale lembrar que 80% dos surdos do mundo n\u00e3o compreendem as l\u00ednguas escritas<\/strong><\/span><\/a>, o significa que os textos tamb\u00e9m precisam ser traduzidos para Libras. Nessas horas, o Hugo pode te ajudar!<\/span><\/a><\/p>\n

\"Banner<\/a><\/p>\n

Defici\u00eancias motoras<\/h3>\n

7) Evite fun\u00e7\u00f5es acess\u00edveis s\u00f3 pelo mouse<\/h4>\n

Algumas pessoas com defici\u00eancia motora n\u00e3o conseguem utilizar o mouse para navegar<\/strong>. Logo, \u00e9 importante que o seu site n\u00e3o dependa dele para realizar fun\u00e7\u00f5es espec\u00edficas. Crie atalhos de teclado para a navega\u00e7\u00e3o e tenha \u00e0 disposi\u00e7\u00e3o tecnologias assistivas como a\u00a0eSSENTIAL ACCESSIBILITY<\/a><\/span>. A plataforma permite o controle do cursor com movimentos da cabe\u00e7a e comandos\u00a0de voz, dando acesso a quem n\u00e3o usa mouse e teclado. Voc\u00ea pode conhecer mais sobre o software clicando aqui<\/a><\/span>.<\/p>\n

8) Crie \u00e1reas de clique maiores<\/h4>\n

Outra dica simples \u00e9 aumentar a \u00e1rea de clique dos bot\u00f5es do site. Muitas vezes, os usu\u00e1rios n\u00e3o t\u00eam precis\u00e3o nos cliques e isso\u00a0pode dificultar o acesso a conte\u00fados espec\u00edficos. Aumentando a \u00e1rea clic\u00e1vel dos bot\u00f5es voc\u00ea resolve o problema e garante que sua oferta seja acessada!<\/p>\n

Dicas gerais para todos os p\u00fablicos<\/h3>\n

9) Atalhos no menu superior<\/h4>\n

Nossa leitura \u00e9 feita da esquerda para direita, come\u00e7ando sempre pelo topo. Assim, quanto mais para cima estiverem os atalhos para os recursos de acessibilidade, mais f\u00e1cil ser\u00e1 identific\u00e1-los<\/strong>. Em um site sem acessibilidade, os leitores de tela precisam passar por todos os menus e submenus\u00a0at\u00e9 que o usu\u00e1rio encontre o conte\u00fado que procura, ent\u00e3o evite esse problema com um atalho para pular para o conte\u00fado.<\/p>\n

Os atalhos tamb\u00e9m ajudam os surdos, que s\u00e3o muito visuais. Se voc\u00ea n\u00e3o quiser disponibilizar o bot\u00e3o da janela de libras na lateral da tela (como fazemos aqui no Blog), d\u00ea prefer\u00eancia por um bot\u00e3o na barra superior. Disponibilizar um recurso que seja dif\u00edcil de acessar n\u00e3o vai adiantar<\/strong> nada<\/strong> e ainda vai contra toda a ideia da acessibilidade digital!<\/p>\n

10) Avalie a acessibilidade do seu site<\/h4>\n

Se voc\u00ea j\u00e1 trabalha a acessibilidade digital na sua p\u00e1gina e quer garantir que tudo est\u00e1 em ordem, fa\u00e7a uma avalia\u00e7\u00e3o online\u00a0para encontrar pontos\u00a0adicionais para ajustar. A gente recomenda o avaliador da Access Monitor<\/a><\/span>.<\/p>\n

Se voc\u00ea ainda est\u00e1 em um est\u00e1gio inicial e n\u00e3o sabe por onde come\u00e7ar, vale \u00e0 pena consultar um especialista<\/span><\/a>. E a gente indica o pessoal da Good Bros<\/a><\/span>, grandes parceiros da Hand Talk.\u00a0Inclusive, a gente fez um webinar com o fundador da empresa, o Rodrigo Credidio, falando dos 4 Princ\u00edpios da Acessibilidade Digital<\/a><\/span>\u00a0e voc\u00ea pode assistir ao\u00a0v\u00eddeo da conversa clicando aqui!<\/span><\/a><\/p>\n

11) Mergulhe no mundo da acessibilidade digital!<\/h4>\n

A acessibilidade digital pode parecer uma \u00e1rea de conhecimento bastante ampla para quem n\u00e3o tem muito contato com ela.\u00a0Mas, no fundo, ela envolve conceitos bastante conhecidos por\u00a0quem \u00e9 da \u00e1rea digital, seja quem trabalhe com Marketing, Design ou Programa\u00e7\u00e3o. Se voc\u00ea se interessou pelo tema, n\u00e3o deixe de conferir os links abaixo para se aprofundar no assunto. Assim voc\u00ea consegue deixar seu site cada vez mais acess\u00edvel e trazer cada vez mais acessos para ele!\u00a0\ud83d\ude1b<\/p>\n