{"id":861,"date":"2019-05-06T07:57:58","date_gmt":"2019-05-06T07:57:58","guid":{"rendered":"https:\/\/devlooper.blog.br\/?p=861"},"modified":"2019-05-06T07:57:58","modified_gmt":"2019-05-06T07:57:58","slug":"acessibilidade-web-entenda-o-que-e-e-qual-o-papel-do-desenvolvedor","status":"publish","type":"post","link":"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/acessibilidade-web-entenda-o-que-e-e-qual-o-papel-do-desenvolvedor\/","title":{"rendered":"Acessibilidade web: entenda o que \u00e9 e qual o papel do desenvolvedor"},"content":{"rendered":"<p><span>Como um bom desenvolvedor, ao construir um site voc\u00ea se preocupa em mant\u00ea-lo com uma apar\u00eancia adequada, com recursos funcionais e navega\u00e7\u00e3o fluida. Por\u00e9m, voc\u00ea tamb\u00e9m tem dado aten\u00e7\u00e3o \u00e0 acessibilidade web?<\/span><\/p>\n<p><span>Esse \u00e9 um ponto que, infelizmente, ainda passa despercebido para muitos devs, mas que precisa ser levado em considera\u00e7\u00e3o tanto para quem trabalha na cria\u00e7\u00e3o quanto na otimiza\u00e7\u00e3o de p\u00e1ginas. Continue a leitura e entenda mais sobre o tema!<\/span><\/p>\n<h2><span>O que \u00e9 acessibilidade web e qual \u00e9 a sua import\u00e2ncia?<\/span><\/h2>\n<p><span>Segundo o portal <\/span><a href=\"https:\/\/www.w3.org\/WAI\/fundamentals\/accessiblity-intro\/\"><span>Web Accessibility Initiative<\/span><\/a><span> (WAI), que pertence ao World Wide Web Consortium (W3C), organiza\u00e7\u00e3o respons\u00e1vel por criar e gerenciar os padr\u00f5es da web, esse ambiente digital no qual navegamos foi feito para todas as pessoas. Isso independe do seu hardware, software, idioma, localiza\u00e7\u00e3o ou habilidades.<\/span><\/p>\n<p><span>Ou seja, a acessibilidade web envolve a preocupa\u00e7\u00e3o tanto com pessoas que tenham alguma defici\u00eancia (auditiva, visual, de fala, f\u00edsica, neurol\u00f3gica, cognitiva etc.) quanto com usu\u00e1rios que se enquadram em casos como estes:<\/span><\/p>\n<ul>\n<li>\n<p><span>pessoas com dificuldades devido \u00e0 idade;<\/span><\/p>\n<\/li>\n<li>\n<p><span>pessoas que acessam a internet de <\/span><a href=\"https:\/\/devlooper.blog.br\/materiais\/artigos\/programacao-para-mobile-tudo-o-que-voce-precisa-saber\/\"><span>dispositivos m\u00f3veis<\/span><\/a><span> com tela muito pequena;<\/span><\/p>\n<\/li>\n<li>\n<p><span>pessoas com conex\u00e3o lenta \u00e0 internet;<\/span><\/p>\n<\/li>\n<li>\n<p><span>pessoas com plano de dados muito limitado de acesso \u00e0 internet.<\/span><\/p>\n<\/li>\n<\/ul>\n<p><span>Logo, se considerarmos que todos devem ter o direito de consumir as informa\u00e7\u00f5es dispon\u00edveis publicamente nos sites que voc\u00ea vier a desenvolver, \u00e9 fundamental ter a acessibilidade em mente. A ideia \u00e9 que nenhum indiv\u00edduo seja exclu\u00eddo devido a uma defici\u00eancia ou qualquer outra condi\u00e7\u00e3o.<\/span><\/p>\n<h2><span>Qual \u00e9 o papel do desenvolvedor na acessibilidade?<\/span><\/h2>\n<p><span>J\u00e1 que o dev \u00e9 uma das figuras-chave no que se refere a transformar o projeto de um sistema em realidade, \u00e9 de se esperar que ele se interesse pelo sucesso do site. Como isso \u00e9 resultado de usu\u00e1rios satisfeitos, que t\u00eam uma experi\u00eancia agrad\u00e1vel independentemente de suas necessidades, \u00e9 fundamental que o desenvolvedor tamb\u00e9m seja respons\u00e1vel por proporcionar a acessibilidade.<\/span><\/p>\n<p><span>Para isso, \u00e9 preciso ter em mente os princ\u00edpios por tr\u00e1s dela e os meios de implement\u00e1-la, como voc\u00ea confere a seguir.<\/span><\/p>\n<h2><span>Quais s\u00e3o os princ\u00edpios da acessibilidade web?<\/span><\/h2>\n<p><span>Ainda de acordo com a Web Accessibility Initiative, a acessibilidade web segue uma s\u00e9rie de princ\u00edpios, dos quais podemos destacar 4 principais. Confira cada um deles a seguir.<\/span><\/p>\n<h3><span>Percept\u00edvel<\/span><\/h3>\n<p><span>O primeiro princ\u00edpio diz respeito \u00e0s possibilidades de o usu\u00e1rio identificar o conte\u00fado e a interface por meio dos sentidos. Se uma pessoa n\u00e3o tiver a capacidade de ver, por exemplo, ter\u00e1 a alternativa de usar um leitor de tela para perceber os elementos do site com o aux\u00edlio de indica\u00e7\u00f5es sonoras.<\/span><\/p>\n<h3><span>Oper\u00e1vel<\/span><\/h3>\n<p><span>O conceito de oper\u00e1vel est\u00e1 relacionado ao uso de recursos interativos, para de fato navegar em um site ou sistema web. Isso envolve clicar, arrastar, tocar, teclar ou usar comandos de voz.<\/span><\/p>\n<p><span>Esses s\u00e3o os m\u00e9todos mais conhecidos, mas podemos considerar outros, desde que ofere\u00e7am o controle para o usu\u00e1rio.<\/span><\/p>\n<h3><span>Compreens\u00edvel<\/span><\/h3>\n<p><span>Um sistema ou tecnologia compreens\u00edvel precisa garantir que o conte\u00fado seja leg\u00edvel (n\u00e3o s\u00f3 visualmente, mas tamb\u00e9m por um leitor de tela, por exemplo) e simples de entender. A interface tamb\u00e9m deve seguir esse princ\u00edpio, de modo que seja f\u00e1cil e siga <\/span><a href=\"https:\/\/devlooper.blog.br\/front-end\/5-melhores-praticas-de-ux-design-no-desenvolvimento-de-sites\/\"><span>boas pr\u00e1ticas de UX design<\/span><\/a><span>, al\u00e9m de ter comportamentos previs\u00edveis, que n\u00e3o distraiam o usu\u00e1rio com erros ou resultados inesperados.<\/span><\/p>\n<h3><span>Robusto<\/span><\/h3>\n<p><span>No contexto da acessibilidade web, um site robusto \u00e9 aquele que \u00e9 compat\u00edvel com diferentes navegadores, solu\u00e7\u00f5es assistivas ou qualquer agente que o usu\u00e1rio possa vir a utilizar para acessar aquela aplica\u00e7\u00e3o. Isso quer dizer que, n\u00e3o importa qual tecnologia o usu\u00e1rio escolher \u2014 desde que seja apropriada para aquela finalidade \u2014, o sistema deve funcionar.<\/span><\/p>\n<h2><span>Como os sites acess\u00edveis s\u00e3o constru\u00eddos?<\/span><\/h2>\n<p><span>Vejamos agora exemplos de particularidades que o desenvolvedor deve levar em conta para construir um site acess\u00edvel. Acompanhe.<\/span><\/p>\n<h3><span>Tenha aten\u00e7\u00e3o \u00e0 escolha das cores<\/span><\/h3>\n<p><span>Tenha em mente que h\u00e1 pessoas com condi\u00e7\u00f5es visuais como o daltonismo ou mesmo que <\/span><a href=\"https:\/\/devlooper.blog.br\/materiais\/artigos\/e-possivel-programar-sem-enxergar\/\"><span>n\u00e3o s\u00e3o capazes de enxergar<\/span><\/a><span>. Por isso, n\u00e3o use indica\u00e7\u00f5es de cor como prioridade quando precisar transmitir um significado ou mensagem. Prefira o texto ou \u00edcones com recursos de acessibilidade.<\/span><\/p>\n<p><span>Atente inclusive para o contraste entre o texto e o fundo, para n\u00e3o dificultar a leitura.<\/span><\/p>\n<h3><span>Use o atributo alt nas imagens<\/span><\/h3>\n<p><span>O <\/span><em>alt<\/em><span> \u00e9 um atributo da tag que tem a fun\u00e7\u00e3o de descrever o que aparece na imagem. Deve ser usado para auxiliar o usu\u00e1rio que usa leitores de tela e tamb\u00e9m aquele que tem uma conex\u00e3o lenta e opta por n\u00e3o exibir figuras nos sites que visita.<\/span><\/p>\n<h3><span>Atente a alguns detalhes dos formul\u00e1rios<\/span><\/h3>\n<p><span>Se o site que estiver desenvolvendo tiver um ou mais formul\u00e1rios, associe r\u00f3tulos aos campos. Al\u00e9m disso, identifique claramente quais s\u00e3o os campos obrigat\u00f3rios e use um m\u00e9todo acess\u00edvel para alertar o usu\u00e1rio quando houver algum erro.<\/span><\/p>\n<h3><span>Permita que o site se adapte \u00e0 tecnologia de acesso do usu\u00e1rio<\/span><\/h3>\n<p><span>Use um design responsivo para permitir que o site se adapte ao tamanho da tela do usu\u00e1rio. Lembrando que \u00e9 importante manter a possibilidade de ele dar zoom, afinal, h\u00e1 pessoas com dificuldades de vis\u00e3o que precisam ampliar os elementos para enxergar o que est\u00e1 na tela.<\/span><\/p>\n<h3><span>Garanta que todos os elementos interativos estejam acess\u00edveis ao teclado<\/span><\/h3>\n<p><span>Lembre-se que o mouse e a tela sens\u00edvel ao toque do smartphone n\u00e3o s\u00e3o os \u00fanicos meios de navegar em um site. Ent\u00e3o, ao criar efeitos interativos, considere que esses podem n\u00e3o ser os melhores m\u00e9todos para o visitante, cuja prefer\u00eancia \u2014 ou \u00fanica op\u00e7\u00e3o \u2014 seja o teclado.<\/span><\/p>\n<h3><span>Inclua legendas ou transcri\u00e7\u00f5es das m\u00eddias do site<\/span><\/h3>\n<p><span>Certifique-se que os v\u00eddeos ou \u00e1udios tenham legenda sincronizada e equivalente ao que \u00e9 dito e\/ou mostrado na m\u00eddia. Se n\u00e3o for poss\u00edvel disponibilizar esses recursos, procure oferecer uma transcri\u00e7\u00e3o.<\/span><\/p>\n<h3><span>Use uma ferramenta para avaliar a acessibilidade do site<\/span><\/h3>\n<p><span>Por fim, use uma ferramenta automatizada para fazer um diagn\u00f3stico no seu site e indicar as melhorias de acessibilidade que ele precisa. O <\/span><a href=\"https:\/\/achecker.ca\/checker\/index.php\"><span>Web Accessibility Checker<\/span><\/a><span> \u00e9 um \u00f3timo exemplo.<\/span><\/p>\n<p><span>Sendo assim, podemos concluir que a acessibilidade web deve fazer parte da sua <\/span><a href=\"https:\/\/devlooper.blog.br\/materiais\/artigos\/checklist-completo-antes-de-lancar-um-novo-site\/\"><span>checklist para o lan\u00e7amento de novos sites<\/span><\/a><span>. Entenda essa medida como uma a\u00e7\u00e3o inclusiva, que permitir\u00e1 que ainda mais pessoas apreciem o resultado do seu trabalho, obtendo acesso f\u00e1cil \u00e0 informa\u00e7\u00e3o que desejam, sem qualquer tipo de frustra\u00e7\u00e3o.<\/span><\/p>\n<p><span>Ent\u00e3o, gostou do post? Quer ficar por dentro dos nossos conte\u00fados feitos especialmente para desenvolvedores? Siga-nos nas redes sociais! Estamos no <\/span><a href=\"https:\/\/www.facebook.com\/locaweb\"><span>Facebook<\/span><\/a><span>, <\/span><a href=\"https:\/\/www.linkedin.com\/company\/locaweb\"><span>LinkedIn<\/span><\/a><span>, <\/span><a href=\"https:\/\/twitter.com\/locaweb\"><span>Twitter<\/span><\/a><span> e <\/span><a href=\"https:\/\/www.instagram.com\/locaweb\/\"><span>Instagram<\/span><\/a><span>!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Como um bom desenvolvedor, ao construir um site voc\u00ea se preocupa em mant\u00ea-lo com uma apar\u00eancia adequada, com recursos funcionais e navega\u00e7\u00e3o fluida. Por\u00e9m, voc\u00ea tamb\u00e9m tem dado aten\u00e7\u00e3o \u00e0 acessibilidade web? Esse \u00e9 um ponto que, infelizmente, ainda passa despercebido para muitos devs, mas que precisa ser levado em considera\u00e7\u00e3o tanto para quem trabalha [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":33255,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-861","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-aberto"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/comments?post=861"}],"version-history":[{"count":0,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/861\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media\/33255"}],"wp:attachment":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media?parent=861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/categories?post=861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/tags?post=861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}