{"id":1916,"date":"2018-06-26T17:45:22","date_gmt":"2018-06-26T20:45:22","guid":{"rendered":"http:\/\/blog.handtalk.me\/?p=1916"},"modified":"2023-04-12T16:39:23","modified_gmt":"2023-04-12T19:39:23","slug":"acessibilidade-na-web","status":"publish","type":"post","link":"https:\/\/www.handtalk.me\/br\/blog\/acessibilidade-na-web\/","title":{"rendered":"Acessibilidade na Web: tudo o que voc\u00ea precisa saber sobre o assunto!"},"content":{"rendered":"<p>Muitos veem a internet como uma melhor amiga que est\u00e1 ali, sempre disposta a ajudar. Ela aproxima os que est\u00e3o longe, tira aquela d\u00favida que surge no momento mais inapropriado, ajuda a fazer compras e at\u00e9 a pagar aquela conta sem enfrentar fila no banco. Milhares de pessoas no mundo est\u00e3o conectadas \u00e0 ela nesse exato momento. S\u00f3 <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.techtudo.com.br\/noticias\/2018\/02\/10-fatos-sobre-o-uso-de-redes-sociais-no-brasil-que-voce-precisa-saber.ghtml\" target=\"_blank\" rel=\"noopener\">o brasileiro passa em m\u00e9dia 9 horas conectado por dia<\/a>.<\/span>\u00a0Bastante tempo, n\u00e3o \u00e9 mesmo!? <strong>E \u00e9 por isso que falar de acessibilidade na web \u00e9 t\u00e3o importante<\/strong>.\u00a0Sem ela, milh\u00f5es de pessoas n\u00e3o conseguem realizar todas essas atividades simples e cotidianas.<\/p>\n<p>Assim como os conte\u00fados que encontramos na web, os seus usu\u00e1rios tamb\u00e9m s\u00e3o muito diversos. <strong>E pessoas diferentes acessam informa\u00e7\u00f5es de formas diferentes<\/strong>. Ter um site acess\u00edvel \u00e9 garantir que todas elas consigam ter a melhor experi\u00eancia poss\u00edvel durante a navega\u00e7\u00e3o. Mas quantos dos sites da web est\u00e3o acess\u00edveis?<\/p>\n<p>Vamos responder essa e outras d\u00favidas comuns sobre acessibilidade na web, come\u00e7ando com a mais b\u00e1sica:<\/p>\n<h3>O que \u00e9 Acessibilidade na Web?<\/h3>\n<p>N\u00f3s sabemos que ainda existe pouca informa\u00e7\u00e3o sobre o assunto, e algumas pessoas acabam acreditando em diversos <a title=\"Desmistificando 5 mitos sobre Acessibilidade na Web\" href=\"https:\/\/www.handtalk.me\/br\/blog\/5-mitos-acessibilidade-na-web\/?utm_source=Blog&amp;utm_medium=TudoSobreAcessibilidadeNaWeb_Link\" target=\"_blank\" rel=\"noopener\"><span style=\"text-decoration: underline;\">mitos<\/span><\/a>. Mas acessibilidade na web \u00e9 sobre uma coisa bem simples: <a title=\"Barreiras de acessibilidade: o que \u00e9, quais s\u00e3o e como elimin\u00e1-las?\" href=\"https:\/\/www.handtalk.me\/br\/blog\/barreiras-para-a-acessibilidade\/?utm_source=Blog&amp;utm_medium=AcessibilidadeNaWeb_Link\" target=\"_blank\" rel=\"noopener\"><span style=\"text-decoration: underline;\">quebrar barreiras nos ambientes virtuais<\/span><\/a>. Tornar uma p\u00e1gina acess\u00edvel \u00e9 permitir que diferentes tipos de pessoas, com defici\u00eancia ou n\u00e3o, possam chegar aos conte\u00fados e compreend\u00ea-los com autonomia.<\/p>\n<blockquote>\n<p><em>&#8220;Acessibilidade na web significa que pessoas com defici\u00eancia podem usar a web. Mais especificamente, a acessibilidade na web significa que pessoas com defici\u00eancia podem perceber, entender, navegar, interagir e contribuir para a web. E mais. Ela tamb\u00e9m beneficia outras pessoas, incluindo pessoas idosas com capacidades em mudan\u00e7a devido ao envelhecimento.&#8221;<\/em><\/p>\n<\/blockquote>\n<p style=\"text-align: right;\"><a href=\"https:\/\/www.w3c.br\/pub\/Materiais\/PublicacoesW3C\/cartilha-w3cbr-acessibilidade-web-fasciculo-I.html\"><span style=\"font-weight: 400;\">(<span style=\"text-decoration: underline;\">Cartilha Acessibilidade na Web &#8211; W3C Brasil<\/span>)<\/span><\/a><\/p>\n<p><strong>Um bom primeiro passo \u00e9 se colocar no lugar do outro<\/strong>. Compreendendo que uma pessoa cega n\u00e3o acessa um conte\u00fado da mesma maneira que uma surda. A primeira utiliza um leitor de telas e a segunda muitas vezes precisa de tradu\u00e7\u00e3o em <a title=\"Conhe\u00e7a a hist\u00f3ria da Libras, a L\u00edngua Brasileira de Sinais\" href=\"https:\/\/www.handtalk.me\/br\/blog\/historia-lingua-de-sinais\/?utm_source=Blog&amp;utm_medium=TudoSobreAcessibilidadeNaWeb_Link\" target=\"_blank\" rel=\"noopener\"><span style=\"text-decoration: underline;\">Libras (a L\u00edngua Brasileira de Sinais).<\/span><\/a>\u00a0Ou seja, pessoas com diferentes tipos de defici\u00eancias utilizam recursos e <a title=\"Tecnologia assistiva para surdos: o que s\u00e3o e quais os exemplos?\" href=\"https:\/\/www.handtalk.me\/br\/blog\/tecnologia-assistiva-surdos\/\" target=\"_blank\" rel=\"noopener\"><span style=\"text-decoration: underline;\">tecnologias assistivas<\/span><\/a> espec\u00edficos na hora de navegar. E os sites precisam\u00a0estar adaptados a todos eles.<\/p>\n<p>No come\u00e7o, pode parecer complicado. Mas deixar sua p\u00e1gina acess\u00edvel n\u00e3o \u00e9 um bicho de 7 cabe\u00e7as\u2026 N\u00f3s te explicamos um pouco mais sobre o assunto aqui embaixo!<\/p>\n<h3>Qual a import\u00e2ncia de deixar seu site acess\u00edvel?<\/h3>\n<p>As pessoas est\u00e3o se sentido cada vez mais confort\u00e1veis para realizar todo tipo de atividade no mundo virtual. Por isso, muito mais do que ter um design bonito e atraente, os sites precisam atender a todos. <strong>Quando uma p\u00e1gina n\u00e3o est\u00e1 acess\u00edvel, ela est\u00e1 fechando as portas para milh\u00f5es de pessoas<\/strong>, indo contra o seu prop\u00f3sito &#8211; que \u00e9 atrair mais visitantes.<\/p>\n<p>Ou seja, n\u00e3o <a href=\"https:\/\/www.handtalk.me\/br\/blog\/acessibilidade-exemplos\/\" target=\"_blank\" rel=\"noopener\">pensar em acessibilidade<\/a> pode ser sin\u00f4nimo de deixar dinheiro em cima da mesa.\u00a0Vale refor\u00e7ar que hoje em dia j\u00e1 existem recursos que permitem criar sites bonitos, funcionais e acess\u00edveis ao mesmo tempo. Al\u00e9m do mais, a <span style=\"text-decoration: underline;\"><a title=\"Voc\u00ea sabia que a acessibilidade pode levar seu site ao topo do Google?\" href=\"https:\/\/www.handtalk.me\/br\/blog\/acessibilidade-ranking-google\/?utm_source=Blog&amp;utm_medium=TudoSobreAcessibilidadeNaWeb_Link\" target=\"_blank\" rel=\"noopener\">acessibilidade pode melhorar o rankeamento da sua p\u00e1gina no Google<\/a>,<\/span> uma vez que o algoritmo do buscador reconhece essas pr\u00e1ticas e o enxerga com maior relev\u00e2ncia.<\/p>\n<p>Tendo isso em vista, desde 2016 a\u00a0<a title=\"Lei Brasileira de Inclus\u00e3o: o que \u00e9, como foi criada e o que diz?\" href=\"https:\/\/www.handtalk.me\/br\/blog\/lei-brasileira-de-inclusao\/\" target=\"_blank\" rel=\"noopener\"><span style=\"text-decoration: underline;\">Lei Brasileira de inclus\u00e3o<\/span><\/a>\u00a0(LBI)<strong>\u00a0exige que todos os sites, p\u00fablicos e privados, estejam acess\u00edveis<\/strong>. Mas infelizmente <span style=\"text-decoration: underline;\"><a href=\"https:\/\/mwpt.com.br\/3o-estudo-de-acessibilidade-do-movimento-web-para-todos-nos-sites-brasileiros\/\" target=\"_blank\" rel=\"noopener\">apenas 1% deles seguem essa regra no Brasil<\/a><\/span>. Diante disso, <strong>ter um site acess\u00edvel n\u00e3o \u00e9 s\u00f3 cumprir a lei, \u00e9 ter um diferencial competitivo<\/strong>. E as organiza\u00e7\u00f5es que sa\u00edram na frente nesse movimento j\u00e1 tem sido reconhecidas. A Prefeitura de S\u00e3o Paulo, por exemplo, lan\u00e7ou o\u00a0seu <a title=\"Saiba como ter o Selo de Acessibilidade Digital no seu site\" href=\"https:\/\/www.handtalk.me\/br\/blog\/selo-acessibilidade-digital\/?utm_source=Blog&amp;utm_medium=AcessibilidadeNaWeb_Link\" target=\"_blank\" rel=\"noopener\"><span style=\"text-decoration: underline;\">Selo de Acessibilidade Digital<\/span><\/a> justamente com esse prop\u00f3sito e j\u00e1 tem ratificado sites de empresas de todo o Brasil, como a <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.samsung.com\/br\/accessibility\/mobile-voice-assistant\/\" target=\"_blank\" rel=\"noopener\">Samsung<\/a>.<\/span><\/p>\n<p>S\u00e3o motivos de sobra para pensar se no assunto, n\u00e3o \u00e9 mesmo?<\/p>\n<h3>Os primeiros passos para\u00a0a acessibilidade<\/h3>\n<p>Est\u00e1 com muitas d\u00favidas e n\u00e3o sabe por onde come\u00e7ar? Separamos algumas dicas bem simples e pr\u00e1ticas para voc\u00ea ir aquecendo os motores e tornando seu site mais acess\u00edvel pouco a pouco. S\u00e3o pequenos detalhes, mas que fazem toda a diferen\u00e7a para quem precisa!<\/p>\n<p>Aqui v\u00e3o algumas dicas:<\/p>\n<ol>\n<li>Fa\u00e7a descri\u00e7\u00e3o alternativa das imagens, pois assim os leitores de tela poder\u00e3o identific\u00e1-las e descrev\u00ea-las para os usu\u00e1rios cegos.<\/li>\n<li>N\u00e3o use apenas cores para destacar uma informa\u00e7\u00e3o. Isso ajudar\u00e1 pessoas com daltonismo, por exemplo, que n\u00e3o conseguiriam diferenciar os itens destacados apenas por cores.<\/li>\n<li>Simplifique seu texto. Ao fazer isso, voc\u00ea facilita a leitura de pessoas com dislexia.<\/li>\n<li>Crie \u00e1reas de clique maiores nos bot\u00f5es, isso ajudar\u00e1 usu\u00e1rios que n\u00e3o t\u00eam precis\u00e3o nos cliques a acessar conte\u00fados espec\u00edficos.<\/li>\n<\/ol>\n<p>A <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noopener\">W3C<\/a><\/span> (World Wide Web Consortium) \u00e9 uma organiza\u00e7\u00e3o mundial que desenvolve especifica\u00e7\u00f5es t\u00e9cnicas e orienta\u00e7\u00f5es para web. Ou seja,<strong> ela quem cria e mant\u00e9m os padr\u00f5es para os sites na internet, incluindo os de acessibilidade<\/strong>. O\u00a0<span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.w3.org\/Translations\/WCAG20-pt-PT\/\" target=\"_blank\" rel=\"noopener\">WCAG<\/a><\/span>\u00a0(<i>Web Content Accessibility<\/i> <em>Guidelines<\/em>) \u00e9 o seu documento que traz as diretrizes de acessibilidade para a web, explicando como tornar o conte\u00fado acess\u00edvel para pessoas com defici\u00eancias. De acordo com elas, um site acess\u00edvel segue os seguintes princ\u00edpios:<\/p>\n<ul>\n<li><strong>Percept\u00edvel<\/strong>: As informa\u00e7\u00f5es e interface s\u00e3o apresentadas de uma forma que possa ser percebida;<\/li>\n<li><strong>Oper\u00e1vel<\/strong>: A Interface e a navega\u00e7\u00e3o devem ser oper\u00e1veis para todos os usu\u00e1rios;<\/li>\n<li><strong>Compreens\u00edvel<\/strong>: A informa\u00e7\u00e3o deve ser apresentada de forma simples e compreens\u00edvel;<\/li>\n<li><strong>Robusto<\/strong>: O conte\u00fado deve ser robusto de uma forma que possa maximizar sua compatibilidade com diferentes tipos de pessoas e<a href=\"https:\/\/www.handtalk.me\/br\/blog\/tecnologia-assistiva\/\" target=\"_blank\" rel=\"noopener\"> tecnologias assistivas<\/a>.<\/li>\n<\/ul>\n<p>Seguindo esses princ\u00edpios n\u00e3o tem erro, seu site estar\u00e1 acess\u00edvel para todos! Mas esse \u00e9 s\u00f3 o primeiro passo, ainda h\u00e1 um bom caminho a ser percorrido. E n\u00f3s vamos falar sobre algumas ferramentas bem simples que s\u00e3o uma m\u00e3o na roda!<\/p>\n<p><a href=\"https:\/\/acessibilidade.handtalk.me\/ebook-o-guia-final-de-ferramentas-de-acessibilidade-digital\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7572 size-full\" src=\"https:\/\/www.handtalk.me\/br\/wp-content\/uploads\/sites\/8\/2018\/07\/guiadeferramentas_bannerblog_01.png\" alt=\"Imagem de fundo roxo, com o sinal de acessibilidade \u00e0 esquerda. Ao lado direito da figura est\u00e1 escrito: o guia final de ferramentas de acessibilidade digital.\" width=\"750\" height=\"140\" srcset=\"https:\/\/www.handtalk.me\/br\/wp-content\/uploads\/sites\/8\/2018\/07\/guiadeferramentas_bannerblog_01.png 750w, https:\/\/www.handtalk.me\/br\/wp-content\/uploads\/sites\/8\/2018\/07\/guiadeferramentas_bannerblog_01-300x56.png 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/a><\/p>\n<h3>Ferramentas de acessibilidade para facilitar a sua vida<\/h3>\n<h4>Plugin\u00a0Hand Talk<\/h4>\n<p>O <a title=\"Plugin de acessibilidade para aumentar o impacto do seu site\" href=\"https:\/\/www.handtalk.me\/br\/plugin\/\" target=\"_blank\" rel=\"noopener\"><span style=\"text-decoration: underline;\">plugin da Hand Talk<\/span><\/a> deixa todo o conte\u00fado em texto e imagens (com descri\u00e7\u00e3o alternativa) do site acess\u00edvel em Libras, permitindo que o p\u00fablico surdo &#8211;\u00a0 que muitas vezes a tem como primeira l\u00edngua &#8211; navegue com autonomia. A instala\u00e7\u00e3o \u00e9 r\u00e1pida e simples: basta inserir o c\u00f3digo no seu site que em quest\u00e3o de minutos o Hugo ou a Maya, tradutores virtuais da Hand Talk, estar\u00e3o prontos para realizar as tradu\u00e7\u00f5es. <span style=\"text-decoration: underline;\"><a href=\"https:\/\/acessibilidade.handtalk.me\/motivos-para-contratar-a-hand-talk?utm_source=Blog&amp;utm_medium=AcessibilidadeNaWeb_Link\" target=\"_blank\" rel=\"noopener\">Para conhecer mais sobre a Hand Talk clique aqui<\/a>.<\/span><\/p>\n<h4><span style=\"text-decoration: underline;\">eSSENTIAL ACCESSIBILITY<\/span><\/h4>\n<p>\u00c9 uma tecnologia assistiva que facilita a navega\u00e7\u00e3o de pessoas com diferentes tipos de defici\u00eancia, principalmente as que t\u00eam dificuldade na hora de utilizar o mouse ou teclado. Ela permite o controle do cursor com movimentos da cabe\u00e7a ou comando de voz. Al\u00e9m disso, a ferramenta tamb\u00e9m realiza a leitura do conte\u00fado na tela, beneficiando pessoas com baixa vis\u00e3o ou problemas de leitura.<\/p>\n<h4><span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.texthelp.com\/en-gb\/products\/reachdeck\/browsealoud-is-now-the-reachdeck-toolbar\/\" target=\"_blank\" rel=\"noopener\">BrowseAloud<\/a><\/span><\/h4>\n<p>\u00c9 uma ferramenta que auxilia a compreens\u00e3o do conte\u00fado por usu\u00e1rios com dislexia, baixa escolaridade ou defici\u00eancia visual, pois realiza leitura em voz alta de todo conte\u00fado. A instala\u00e7\u00e3o \u00e9 bem simples e conta com uma barra de ferramentas personaliz\u00e1vel e fun\u00e7\u00f5es como a redu\u00e7\u00e3o da velocidade da leitura dos textos.<\/p>\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.handtalk.me\/br\/plugin\/?utm_source=blog&amp;utm_medium=organic&amp;utm_term=plugin&amp;utm_content=acessibilidade-na-web-tudo-o-que-voce-precisa-saber&amp;utm_campaign=content-marketing\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"160\" src=\"https:\/\/www.handtalk.me\/br\/wp-content\/uploads\/sites\/8\/2018\/12\/banners-personas-MKT.png\" alt=\"Banner com fndo azul escuro. Do lado esquerdo e no centro est\u00e1 escrito &quot;Seu site melhor ranqueado no Google por estar acess\u00edvel em Libras&quot;. Bot\u00e3o escrito &quot;quero conhecer a ferramenta&quot;. Do lado direiro a ilustra\u00e7\u00e3o da Maya saindo de um computador.\" class=\"wp-image-7146\" srcset=\"https:\/\/www.handtalk.me\/br\/wp-content\/uploads\/sites\/8\/2018\/12\/banners-personas-MKT.png 750w, https:\/\/www.handtalk.me\/br\/wp-content\/uploads\/sites\/8\/2018\/12\/banners-personas-MKT-300x64.png 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/a><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Muitos veem a internet como uma melhor amiga que est\u00e1 ali, sempre disposta a ajudar. Ela aproxima os que est\u00e3o longe, tira aquela d\u00favida que surge no momento mais inapropriado, ajuda a fazer compras e at\u00e9 a pagar aquela conta sem enfrentar fila no banco. Milhares de pessoas no mundo est\u00e3o conectadas \u00e0 ela nesse [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":4854,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,14],"tags":[52,91,269,92,311,202,37,54,415,283,285],"class_list":["post-1916","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-acessibilidade","category-acessibilidade-digital","tag-acessibilidade","tag-acessibilidade-digital","tag-acessibilidade-em-libras","tag-acessibilidade-na-web","tag-acessibilidade-no-site","tag-estatuto-da-pessoa-com-deficiencia","tag-hand-talk","tag-lbi","tag-selo-de-acessibilidade-digital","tag-site-acessivel","tag-sites-acessiveis"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/posts\/1916","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/comments?post=1916"}],"version-history":[{"count":0,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/posts\/1916\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/media\/4854"}],"wp:attachment":[{"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/media?parent=1916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/categories?post=1916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/tags?post=1916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}