{"id":3476,"date":"2021-11-26T14:31:13","date_gmt":"2021-11-26T17:31:13","guid":{"rendered":"https:\/\/temp.leadster.com.br\/blog\/?p=3476"},"modified":"2022-03-02T16:39:15","modified_gmt":"2022-03-02T19:39:15","slug":"acessibilidade-web-otimizar-imagens","status":"publish","type":"post","link":"https:\/\/leadster.com.br\/blog\/acessibilidade-web-otimizar-imagens\/","title":{"rendered":"O que \u00e9 Acessibilidade Web e como Otimizar as Imagens do Site"},"content":{"rendered":"\n<p>Voc\u00ea gostaria que todo o conte\u00fado do seu site pudesse ser compreendido por todos os visitantes que cheguem at\u00e9 as p\u00e1ginas, certo? <\/p>\n\n\n\n<p>De nada adianta atrair um tr\u00e1fego qualificado se nem todo o conte\u00fado apresentado for claro.&nbsp;<\/p>\n\n\n\n<p>E uma parcela desses visitantes t\u00eam uma necessidade especial em rela\u00e7\u00e3o \u00e0s imagens: o p\u00fablico com defici\u00eancia visual.<\/p>\n\n\n\n<p>De acordo com <a href=\"http:\/\/portal.mec.gov.br\/component\/tags\/tag\/deficiencia-visual#:~:text=Desse%20total%2C%206%2C5%20milh%C3%B5es,enxergar%20(3%2C2%25).\" target=\"_blank\" rel=\"noopener\">dados do MEC<\/a>, s\u00f3 no Brasil s\u00e3o mais de 6,5 milh\u00f5es de pessoas com algum problema severo de vis\u00e3o, cerca de 3,5% da popula\u00e7\u00e3o.<\/p>\n\n\n\n<p>A acessibilidade web transforma a experi\u00eancia dessas pessoas e voc\u00ea pode providenciar essa possibilidade. <\/p>\n\n\n\n<p>Continue sua leitura para entender como.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"o-que-e-acessibilidade-web\">O que \u00e9 acessibilidade web?<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"750\" height=\"400\" src=\"https:\/\/leadster.com.br\/blog\/wp-content\/uploads\/2021\/11\/O-que-e-acessibilidade-web.png\" alt=\"\" class=\"wp-image-3482\" srcset=\"https:\/\/leadster.com.br\/blog\/wp-content\/uploads\/2021\/11\/O-que-e-acessibilidade-web.png 750w, https:\/\/leadster.com.br\/blog\/wp-content\/uploads\/2021\/11\/O-que-e-acessibilidade-web-300x160.png 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n\n<p>A acessibilidade web est\u00e1 relacionada com a elimina\u00e7\u00e3o das barreiras existentes na internet, incluindo deixar todos os materiais publicados, sejam eles textos, v\u00eddeos, imagens ou outros formatos, acess\u00edveis para qualquer pessoa, como para aquelas que t\u00eam algum tipo de defici\u00eancia visual.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"quais-sao-os-padroes-de-acessibilidade-a-web\">Quais s\u00e3o os padr\u00f5es de acessibilidade \u00e0 web?<\/h3>\n\n\n\n<p>Para garantir a acessibilidade \u00e9 preciso uma combina\u00e7\u00e3o de programa\u00e7\u00e3o, tecnologia, design e conte\u00fado, com padr\u00f5es recomendados pela <a href=\"https:\/\/www.w3c.br\/\" target=\"_blank\" rel=\"noopener\">W3C (World Wide Web Consortium)<\/a>.&nbsp;<\/p>\n\n\n\n<p>Esses padr\u00f5es s\u00e3o divididos em tr\u00eas grupos:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Acessibilidade web para pessoas cegas;<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Acessibilidade web para pessoas com defici\u00eancia; e<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Acessibilidade web universal, uma web para todos.<\/li><\/ul>\n\n\n\n<p>Alguns pontos para atender aos padr\u00f5es s\u00e3o c\u00f3digos semanticamente corretos e validados, separa\u00e7\u00e3o de conte\u00fado, apresenta\u00e7\u00e3o e comportamento em camadas e acessibilidade de imagens. <\/p>\n\n\n\n<p>Voc\u00ea pode conferir todos os detalhes dos padr\u00f5es no site <a href=\"http:\/\/www.acessibilidadelegal.com\/23-padroes-web.php\" target=\"_blank\" rel=\"noopener\">Acessibilidade Legal<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"por-que-tornar-os-materiais-acessiveis\">Por que tornar os materiais acess\u00edveis?<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"750\" height=\"400\" src=\"https:\/\/leadster.com.br\/blog\/wp-content\/uploads\/2021\/11\/Por-que-tornar-os-materiais-acessiveis.png\" alt=\"\" class=\"wp-image-3479\" srcset=\"https:\/\/leadster.com.br\/blog\/wp-content\/uploads\/2021\/11\/Por-que-tornar-os-materiais-acessiveis.png 750w, https:\/\/leadster.com.br\/blog\/wp-content\/uploads\/2021\/11\/Por-que-tornar-os-materiais-acessiveis-300x160.png 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n\n<p>Imagine a experi\u00eancia de um usu\u00e1rio com defici\u00eancia visual ao entrar em um e-commerce, por exemplo? <\/p>\n\n\n\n<p>Se as imagens do site n\u00e3o forem acess\u00edveis para ele, grande parte do conte\u00fado n\u00e3o poder\u00e1 ser compreendido. <\/p>\n\n\n\n<p>Esse consumidor provavelmente vai, ent\u00e3o, procurar por outro site que melhor atende \u00e0s suas necessidades.&nbsp;<\/p>\n\n\n\n<p>Tornar os materiais da sua marca acess\u00edveis \u00e9 fundamental para garantir o acesso de uma maior parcela da popula\u00e7\u00e3o, al\u00e9m de lhes garantir autonomia e uma experi\u00eancia de compra completa.&nbsp;<\/p>\n\n\n\n<p>Esse tamb\u00e9m \u00e9 um diferencial competitivo, uma vez que, ainda, poucos sites utilizam recursos de acessibilidade web. <\/p>\n\n\n\n<p>Segundo o <a href=\"https:\/\/mwpt.com.br\/\" target=\"_blank\" rel=\"noopener\">Movimento Web para Todos<\/a>, apenas 1% dos sites brasileiros est\u00e1 preparado para a navega\u00e7\u00e3o de pessoas com defici\u00eancia.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"como-tornar-imagens-acessiveis\">Como tornar imagens acess\u00edveis?<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"750\" height=\"400\" src=\"https:\/\/leadster.com.br\/blog\/wp-content\/uploads\/2021\/11\/Como-tornar-imagens-acessiveis.png\" alt=\"\" class=\"wp-image-3481\" srcset=\"https:\/\/leadster.com.br\/blog\/wp-content\/uploads\/2021\/11\/Como-tornar-imagens-acessiveis.png 750w, https:\/\/leadster.com.br\/blog\/wp-content\/uploads\/2021\/11\/Como-tornar-imagens-acessiveis-300x160.png 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n\n\n\n<p>As <a href=\"https:\/\/leadster.com.br\/blog\/como-otimizar-imagens-ranqueamento\/\">imagens podem ser otimizadas para web<\/a> de diversas formas e uma delas acontece ao torn\u00e1-las mais acess\u00edveis.<\/p>\n\n\n\n<p>Pessoas portadoras de defici\u00eancia visual podem utilizar ferramentas de leitor de tela ou de audiodescri\u00e7\u00e3o para ter acesso ao conte\u00fado de diferentes p\u00e1ginas online. <\/p>\n\n\n\n<p>Al\u00e9m da leitura dos textos, essas ferramentas tamb\u00e9m conseguem descrever as imagens, caso estas estejam de acordo com os par\u00e2metros de acessibilidade.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"escreva-texto-alternativo-para-suas-imagens\">Escreva texto alternativo para suas imagens<\/h3>\n\n\n\n<p>O texto alternativo \u00e9 um texto utilizado para descrever o conte\u00fado da imagem. <\/p>\n\n\n\n<p>Ele \u00e9 inserido no atributo alt e \u00e9 \u00fatil para as pessoas com defici\u00eancia visual, al\u00e9m de ser exibido para todos os usu\u00e1rios em casos de erro de carregamento da imagem.&nbsp;&nbsp;<\/p>\n\n\n\n<p>A maioria das plataformas de site, como o WordPress, por exemplo, j\u00e1 oferecem a possibilidade de incluir um t\u00edtulo, texto alternativo e descri\u00e7\u00e3o para todas as imagens inclu\u00eddas no site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"como-fazer-um-atributo-alt-de-qualidade\">Como fazer um atributo alt de qualidade<\/h3>\n\n\n\n<p>Reunimos algumas dicas para a composi\u00e7\u00e3o desse texto alternativo, para que ele realmente cumpra o prop\u00f3sito.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"seja-descritivo-e-especifico\">Seja descritivo e espec\u00edfico<\/h4>\n\n\n\n<p>Um bom texto alternativo n\u00e3o deve explicar o que \u00e9 a imagem, mas sim descrev\u00ea-la com o que pode ser observado. <\/p>\n\n\n\n<p>O que est\u00e1 visualmente dispon\u00edvel na imagem? <\/p>\n\n\n\n<p>Isso deve ser descrito com naturalidade e com riqueza de detalhes, se necess\u00e1rio.&nbsp;<\/p>\n\n\n\n<p>Lembre-se, voc\u00ea descrever\u00e1 a imagem para quem n\u00e3o consegue enxerg\u00e1-la, mas a interpreta\u00e7\u00e3o daquele conte\u00fado \u00e9 de autonomia de cada usu\u00e1rio.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"seja-relevante\">Seja relevante<\/h4>\n\n\n\n<p>Leve em considera\u00e7\u00e3o o contexto da imagem para melhor descrev\u00ea-la e utilize-se de s\u00edntese para que ela seja relevante e interessante. <\/p>\n\n\n\n<p>N\u00e3o torne um conte\u00fado longo ou enfadonho, pois n\u00e3o existe essa necessidade.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"seja-unico\">Seja \u00fanico<\/h4>\n\n\n\n<p>Assim como o restante do conte\u00fado produzido pela sua marca, a descri\u00e7\u00e3o das imagens deve ser original, para n\u00e3o gerar puni\u00e7\u00f5es dos buscadores como conte\u00fado publicado. <\/p>\n\n\n\n<p>Seja tamb\u00e9m criativo e coloque esfor\u00e7o e inten\u00e7\u00e3o ao criar esse tipo de conte\u00fado: ele \u00e9 muito importante para seu p\u00fablico e deve ser tratado como tal.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusao\">Conclus\u00e3o<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"751\" height=\"401\" src=\"https:\/\/leadster.com.br\/blog\/wp-content\/uploads\/2021\/11\/Acessibilidade_Conclusa\u2560ao.png\" alt=\"\" class=\"wp-image-3480\" srcset=\"https:\/\/leadster.com.br\/blog\/wp-content\/uploads\/2021\/11\/Acessibilidade_Conclusa\u2560ao.png 751w, https:\/\/leadster.com.br\/blog\/wp-content\/uploads\/2021\/11\/Acessibilidade_Conclusa\u2560ao-300x160.png 300w\" sizes=\"(max-width: 751px) 100vw, 751px\" \/><\/figure><\/div>\n\n\n\n<p>Pronto para tornar o seu site um exemplo de acessibilidade web com as dicas do post?&nbsp;<\/p>\n\n\n\n<p>Al\u00e9m de deixar todo o conte\u00fado do seu site acess\u00edvel, voc\u00ea tamb\u00e9m melhora os resultados de SEO, j\u00e1 que a inclus\u00e3o de palavras-chave no atributo alt \u00e9 um dos crit\u00e9rios de avalia\u00e7\u00e3o das plataformas de busca, como o Google.&nbsp;<\/p>\n\n\n\n<p>Se voc\u00ea gostou deste conte\u00fado pode se interessar tamb\u00e9m por: <strong><a href=\"https:\/\/leadster.com.br\/blog\/o-que-e-cro-marketing-digital\/\">O que \u00e9 CRO? 3 Letras que v\u00e3o Dobrar sua Gera\u00e7\u00e3o de Leads<\/a>. <\/strong><\/p>\n\n\n\n<p>Confira agora!<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"750\" height=\"250\" src=\"https:\/\/leadster.com.br\/blog\/wp-content\/uploads\/2022\/03\/comentarios_leadster1.webp\" alt=\"\" class=\"wp-image-4051\" srcset=\"https:\/\/leadster.com.br\/blog\/wp-content\/uploads\/2022\/03\/comentarios_leadster1.webp 750w, https:\/\/leadster.com.br\/blog\/wp-content\/uploads\/2022\/03\/comentarios_leadster1-300x100.webp 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea gostaria que todo o conte\u00fado do seu site pudesse ser compreendido por todos os visitantes que cheguem at\u00e9 as p\u00e1ginas, certo? De nada adianta atrair um tr\u00e1fego qualificado se nem todo o conte\u00fado apresentado for claro.&nbsp; E uma parcela desses visitantes t\u00eam uma necessidade especial em rela\u00e7\u00e3o \u00e0s imagens: [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":3478,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[66],"tags":[],"class_list":["post-3476","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing-digital"],"_links":{"self":[{"href":"https:\/\/leadster.com.br\/blog\/wp-json\/wp\/v2\/posts\/3476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/leadster.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/leadster.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/leadster.com.br\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/leadster.com.br\/blog\/wp-json\/wp\/v2\/comments?post=3476"}],"version-history":[{"count":0,"href":"https:\/\/leadster.com.br\/blog\/wp-json\/wp\/v2\/posts\/3476\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/leadster.com.br\/blog\/wp-json\/wp\/v2\/media\/3478"}],"wp:attachment":[{"href":"https:\/\/leadster.com.br\/blog\/wp-json\/wp\/v2\/media?parent=3476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leadster.com.br\/blog\/wp-json\/wp\/v2\/categories?post=3476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leadster.com.br\/blog\/wp-json\/wp\/v2\/tags?post=3476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}