[{"@context":"https:\/\/schema.org\/","@type":"Article","@id":"https:\/\/nacao.digital\/blog\/acessibilidade-no-site\/#Article","mainEntityOfPage":"https:\/\/nacao.digital\/blog\/acessibilidade-no-site\/","headline":"Acessibilidade no site: como implementar no e-commerce?","name":"Acessibilidade no site: como implementar no e-commerce?","description":"Seu e-commerce j\u00e1 implementou a acessibilidade no site? Ter uma loja virtual acess\u00edvel significa garantir que todos os visitantes, com defici\u00eancias ou n\u00e3o, tenham a melhor experi\u00eancia de navega\u00e7\u00e3o poss\u00edvel, consigam acessar e compreender todo o conte\u00fado das p\u00e1ginas, sem precisar de ajuda para isso.  O W3C (World Wide Web Consortium), cons\u00f3rcio internacional que atua…","datePublished":"2021-10-04","dateModified":"2021-10-04","author":{"@type":"Person","@id":"https:\/\/nacao.digital\/blog\/author\/redacao\/#Person","name":"Reda\u00e7\u00e3o - Na\u00e7\u00e3o Digital","url":"https:\/\/nacao.digital\/blog\/author\/redacao\/","identifier":7,"image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/02e4691d00230d3425c562e7e363f571?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/02e4691d00230d3425c562e7e363f571?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"Na\u00e7\u00e3o Digital","logo":{"@type":"ImageObject","@id":"https:\/\/nacao.digital\/blog\/wp-content\/uploads\/2019\/03\/logo-nd-1.png","url":"https:\/\/nacao.digital\/blog\/wp-content\/uploads\/2019\/03\/logo-nd-1.png","width":174,"height":22}},"image":{"@type":"ImageObject","@id":"https:\/\/nacao.digital\/blog\/wp-content\/uploads\/2021\/10\/acessibilidade-no-site-e1641986780472.jpg","url":"https:\/\/nacao.digital\/blog\/wp-content\/uploads\/2021\/10\/acessibilidade-no-site-e1641986780472.jpg","height":337,"width":625},"url":"https:\/\/nacao.digital\/blog\/acessibilidade-no-site\/","about":["E-commerce","Gest\u00e3o","Marketing"],"wordCount":1166,"keywords":["acessibilidade e-commerce","acessibilidade no site"],"articleBody":"Seu e-commerce j\u00e1 implementou a acessibilidade no site? Ter uma loja virtual acess\u00edvel significa garantir que todos os visitantes, com defici\u00eancias ou n\u00e3o, tenham a melhor experi\u00eancia de navega\u00e7\u00e3o poss\u00edvel, consigam acessar e compreender todo o conte\u00fado das p\u00e1ginas, sem precisar de ajuda para isso. O W3C (World Wide Web Consortium), cons\u00f3rcio internacional que atua no desenvolvimento de padr\u00f5es para tornar o conte\u00fado da web mais acess\u00edvel para pessoas com defici\u00eancia, define a acessibilidade na internet da seguinte forma: “(…) Significa que pessoas com defici\u00eancia podem perceber, entender, navegar, interagir e contribuir para a web. Tamb\u00e9m beneficia pessoas idosas\u201d.\u00a0No Brasil, 17,3 milh\u00f5es de pessoas \u2013 o equivalente a 8,9% da popula\u00e7\u00e3o \u2013 t\u00eam alguma defici\u00eancia, de acordo com a Pesquisa Nacional de Sa\u00fade. Conduzido pelo IBGE em 2019, o levantamento mostra que 6,9 milh\u00f5es de brasileiros t\u00eam defici\u00eancia visual; 2,3 milh\u00f5es, defici\u00eancia auditiva e 13,3 milh\u00f5es apresentam alguma defici\u00eancia f\u00edsica.\u00a0Portanto, um site que n\u00e3o \u00e9 acess\u00edvel fecha as portas para milh\u00f5es de pessoas, que s\u00e3o consumidoras, e cria uma barreira enorme de comunica\u00e7\u00e3o. Neste artigo, vamos explicar por que e como deixar seu site acess\u00edvel do come\u00e7o ao fim. Continue a leitura para se informar!Por que ter um site com acessibilidade?Um e-commerce que n\u00e3o segue as boas pr\u00e1ticas de acessibilidade digital n\u00e3o perde s\u00f3 em tr\u00e1fego, mas tamb\u00e9m em diversifica\u00e7\u00e3o do p\u00fablico, uma vez que dificulta o entendimento das informa\u00e7\u00f5es aos consumidores com algum tipo de defici\u00eancia. Lojas virtuais que atendem as diretrizes de acessibilidade na web obt\u00eam v\u00e1rios benef\u00edcios, entre os quais: mais visibilidade nos buscadores, melhor intera\u00e7\u00e3o com o p\u00fablico, inclus\u00e3o social, incentivo \u00e0 inova\u00e7\u00e3o, maior alcance do mercado consumidor e melhor experi\u00eancia de compra. No pa\u00eds, menos de 1% dos sites s\u00e3o considerados acess\u00edveis.\u00a0Leia tamb\u00e9m: Guia de SEO para loja virtual \u2013 t\u00e9cnicas e segredos para ranquear melhorAl\u00e9m do diferencial competitivo, um e-commerce com acessibilidade estar\u00e1 cumprindo a Lei Brasileira de Inclus\u00e3o, que exige que todas as p\u00e1ginas, p\u00fablicas e privadas, estejam acess\u00edveis. A legisla\u00e7\u00e3o est\u00e1 em vigor desde 2016.Menos de 1% dos sites brasileiros s\u00e3o considerados acess\u00edveisO que torna um e-commerce acess\u00edvel?As diretrizes de acessibilidade na web, segundo o W3C, t\u00eam o objetivo de tornar o conte\u00fado dos sites compreens\u00edvel pelo maior n\u00famero de pessoas com defici\u00eancia, incluindo cegueira, baixa vis\u00e3o, surdez e baixa audi\u00e7\u00e3o; com dificuldades de aprendizagem; limita\u00e7\u00f5es cognitivas e de movimentos; com fotossensibilidade e incapacidade de fala.Para tornar seu e-commerce acess\u00edvel, \u00e9 preciso torn\u00e1-lo percept\u00edvel, oper\u00e1vel, compreens\u00edvel e robusto. Um site que cumpre esses tr\u00eas princ\u00edpios apresenta informa\u00e7\u00f5es que s\u00e3o percebidas e s\u00e3o de f\u00e1cil compreens\u00e3o pelo usu\u00e1rio, tem interface e navega\u00e7\u00e3o funcionais e possui conte\u00fado que pode ser interpretado por tecnologias assistivas. Veja, a seguir, exemplos dentro de cada princ\u00edpio. Alternativas em textoUm site acess\u00edvel precisa fornecer alternativas para que todo conte\u00fado n\u00e3o textual (imagens, gr\u00e1ficos, fotos, ilustra\u00e7\u00f5es, infogr\u00e1ficos, gifs e emojis, por exemplo) possa ser transformado e, assim, entendido por qualquer pessoa.\u00a0No caso de imagens, \u00e9 preciso que elas sejam descritas. Na plataforma de e-commerce, procure pelo campo texto alternativo (alt text) e utilize-o para descrever o conte\u00fado da foto para que pessoas com defici\u00eancia visual saibam o seu teor. Se o alt text n\u00e3o estiver presente, os leitores de tela, que leem as informa\u00e7\u00f5es da p\u00e1gina, n\u00e3o ser\u00e3o capazes de identificar a imagem.V\u00eddeos devem ter audiodescri\u00e7\u00e3o, legendas e interpreta\u00e7\u00e3o em Libras, seja com avatar digital ou int\u00e9rprete. J\u00e1 para os conte\u00fados em \u00e1udio, como podcasts, \u00e9 necess\u00e1rio inserir a transcri\u00e7\u00e3o em texto e ter int\u00e9rprete de Libras.Tamb\u00e9m \u00e9 importante que o texto possa ser redimensionado em at\u00e9 200% sem prejudicar a navega\u00e7\u00e3o e o entendimento do conte\u00fado. O tamanho das fontes deve facilitar a leitura, as cores t\u00eam de seguir normas de contraste para permitir a identifica\u00e7\u00e3o dos elementos da p\u00e1gina e os links precisam ser f\u00e1ceis de encontrar. Navega\u00e7\u00e3o simplesO visitante precisa conseguir navegar pelo site usando o teclado \u2013 um site acess\u00edvel n\u00e3o depende do mouse \u2013 e deve ter a escolha de pausar, parar e ocultar facilmente conte\u00fados em movimento (como sliders).Outro ponto de aten\u00e7\u00e3o \u00e9 sobre a forma de apresenta\u00e7\u00e3o de conte\u00fados, que n\u00e3o devem piscar mais de tr\u00eas vezes no per\u00edodo de 1 segundo \u2013 essa recomenda\u00e7\u00e3o serve para n\u00e3o provocar convuls\u00f5es. Sites acess\u00edveis respeitam a hierarquia das p\u00e1ginas. Todas cont\u00eam t\u00edtulo, apresentam links dentro de um contexto e permitem uma navega\u00e7\u00e3o de forma sequencial, de forma a preservar o significado dos conte\u00fados e melhorar a experi\u00eancia do usu\u00e1rio.\u00a0Conte\u00fado f\u00e1cil de entenderUm conte\u00fado acess\u00edvel tem texto leg\u00edvel e compreens\u00edvel. A recomenda\u00e7\u00e3o do W3C \u00e9 que as informa\u00e7\u00f5es sejam escritas para serem assimiladas por uma pessoa com n\u00edvel fundamental completo e sejam identificadas em qualquer idioma.Al\u00e9m disso, o site deve fornecer defini\u00e7\u00f5es para palavras, express\u00f5es e abrevia\u00e7\u00f5es que sejam incomuns. O ideal \u00e9 que o texto seja constru\u00eddo da forma mais clara poss\u00edvel para facilitar o entendimento. Segundo o Movimento Web Para Todos, outras boas pr\u00e1ticas de acessibilidade digital incluem:Hierarquia de cabe\u00e7alhosLinks e atalhos de navega\u00e7\u00e3oEstrutura de formul\u00e1riosPadr\u00f5es W3C de HTML e CSSElementos descontinuadosMetadados de HTML da p\u00e1ginaOutras especifica\u00e7\u00f5es t\u00e9cnicas para aumentar a acessibilidade de uma p\u00e1ginaA maioria dos princ\u00edpios de acessibilidade \u00e9 f\u00e1cil de implementar e est\u00e1 associada ao time de desenvolvimento web e de design. Existem algumas ferramentas e empresas que auxiliam a deixar o site com acessibilidade, como:Hand Talk: plugin traduz todo o conte\u00fado do site para Libras.\u00a0Essential Accessibility: plataforma realiza testes e faz gerenciamento do site para assegurar que a experi\u00eancia do visitante nas p\u00e1ginas esteja acess\u00edvel.\u00a0ReachDeck: ferramenta auxilia a melhorar acessibilidade, legibilidade e alcance do conte\u00fado online, al\u00e9m de identificar problemas.\u00a0Dyno Mapper: ferramenta avalia o conte\u00fado HTML do site e detecta problemas de acessibilidade.\u00a0Coloque em pr\u00e1tica as diretrizes de acessibilidade na web para agregar valor \u00e0 marca e ampliar a diversifica\u00e7\u00e3o do p\u00fablico. Conte com a Na\u00e7\u00e3o Digital neste processo t\u00e3o importante para o seu e-commerce. Clique no banner abaixo e marque uma conversa sem compromisso com os nossos especialistas!Compartilhe:"},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/nacao.digital\/blog\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"Acessibilidade no site: como implementar no e-commerce?","item":"https:\/\/nacao.digital\/blog\/acessibilidade-no-site\/#breadcrumbitem"}]}]