![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/public\")
<\/a><\/figure>Infelizmente, apesar da Organização Mundial da Saúde (OMS) estimar que 15%<\/strong><\/a> da população global viva com algum tipo de deficiência, 70%<\/strong><\/a> dos sites verificados possuem grandes falhas em termos de acessibilidade.<\/p> Neste artigo você irá aprender mais sobre acessibilidade web e por que ela é importante. Também iremos te mostrar como construir um site acessível e testar suas páginas, ambos processos baseados em padrões internacionais da internet.<\/p> \n\n\n\n Acessibilidade web se refere a criação de um site que seja acessível para todas as pessoas, especialmente usuários com deficiências. Para atingir um bom nível de acessibilidade em suas páginas, incentiva-se o uso de design inclusivo, tecnologias integradas e uso de softwares especializados.<\/p>\n <\/div>\n\n\n\n<\/p> A acessibilidade web cria oportunidades para que todas as pessoas tenham a mesma possibilidade de acesso a uma plataforma digital.<\/p> Além disso, a acessibilidade promove uma melhor experiência do cliente, impulsionando suas estratégias de SEO<\/strong><\/a> (Search Engine Optimization). Isso significa que um site mais acessível estará melhor posicionado no ranking dos resultados do Google.<\/p> O resultado é um aumento no número de visitas às suas páginas, já que o site alcançará mais pessoas.<\/p> Assim, a acessibilidade web ajuda negócios a expandirem seu alcance de mercado e a aumentarem a satisfação dos clientes.<\/p> Antes de começar a criar um design acessível em suas páginas, abaixo listamos algumas das situações que podem ser beneficiadas por um site com soluções de acessibilidade:<\/p> Note que não se trata apenas de situações de deficiências permanentes, mas também usuários que passam por limitações temporárias ou problemas situacionais de acessibilidade.<\/p> Por exemplo, algumas pessoas podem ter dificuldade em ouvir seu vídeo por estarem em um local muito movimentado e barulhento.<\/p> Para garantir que seu site, aplicações web e conteúdos tenham um bom nível de acessibilidade, você deve ficar atento a diversos componentes web, como agentes de usuário e ferramentas de autoria.<\/p> Para facilitar essa tarefa, vamos indicar as diretrizes e especificações que você deve seguir para atingir os padrões internacionais de acessibilidade web.<\/p> Os Estados Unidos da América introduziram o Ato dos Americanos com Deficiências<\/strong><\/a> (ADA), um documento com diretrizes sobre acessibilidade. Ele garante que todo indivíduo possa utilizar instalações públicas, incluindo sites. Resumidamente, esse documento torna a acessibilidade web uma exigência legal no país.<\/p> No Brasil, diversas leis e decretos foram aprovados com relação à acessibilidade web, instituindo a obrigatoriedade da inclusão de pessoas com deficiência nos ambientes web. Exemplo disso é a Lei nº 13.146<\/strong><\/a>, Lei Brasileira de Inclusão da Pessoa com Deficiência, sancionada em 6 de julho de 2015.<\/p> Como resultado, se você não cumprir com esses requisitos, pode enfrentar riscos jurídicos. O não cumprimento das diretrizes não é tolerado por motivos como desconhecimento ou o fato do site ainda estar em processo de desenvolvimento.<\/p> Sendo assim, implantar logo de início um design acessível e inclusivo no seu site evita possíveis processos e ajuda a construir uma boa reputação para sua marca.<\/p> As Diretrizes de Acessibilidade para Conteúdo Web (WCAG<\/strong><\/a>) oferecem um padrão global de conteúdos acessíveis que cumprem com as obrigações legais e possibilitam a inclusão de todos os indivíduos e organizações na internet.<\/p> Fundamentalmente, essas diretrizes são direcionadas a desenvolvedores web, principalmente desenvolvedores de ferramentas de autoria web. Elas também direcionadas a todas as pessoas que desejam criar um site acessível.<\/p> Muitos países incluem em suas políticas de acessibilidade a documentação do WCAG 2.1<\/strong><\/a> ou 2.0, como referências para construção de sites acessíveis, já que essas diretrizes são aprovadas como um padrão ISO.<\/p> Além disso, a versão 3.0 do guia WCAG<\/strong><\/a> está em processo de desenvolvimento, e quando publicada irá suportar um amplo conjunto de exigências dos usuários, aplicar uma forma holística de testagem e possibilitar uma manutenção periódica de diretrizes e conteúdos relacionados à adaptação tecnológica.<\/p> O critério de sucesso das diretrizes WCAG consiste em três níveis de conformidade:<\/p> As exigências e padrões de acessibilidade se baseiam em quatro princípios, chamados POUR<\/strong> — um acrônimo em inglês para as seguintes palavras:<\/p> Perceptível<\/strong><\/p> Significa que os usuários devem ser capazes de entender as informações incluídas em conteúdos web. Por exemplo, em caso de deficiências visuais, o conteúdo do site deve ser acessível para instrumentos de tecnologia assistiva<\/strong><\/a>, como leitores de tela.<\/p> Operável<\/strong><\/p> Os usuários devem ser capazes de operar todos os componentes da interface do site, bem como navegar por ele com várias ferramentas. Por exemplo, se algum visitante tiver dificuldades em utilizar um mouse, a tecla Tab (↹) do teclado, ou os comandos de voz, devem ser suficientes para que ele navegue pelo site. <\/p> Compreensível<\/strong><\/p> Quando estiver criando conteúdos para a web, você deve fazer com que eles sejam legíveis e intuitivos, através de instruções claras e de fácil entendimento. <\/p> Aplicar este princípio ajuda usuários a entenderem melhor o fluxo de conteúdos e estrutura do site, evitando erros e confusões.<\/p> Robusto<\/strong><\/p> O conteúdo deve ser acessível por vários dispositivos de usuário, incluindo celulares, navegadores web e instrumentos de tecnologia assistiva (TA). Resumidamente, os sites não podem ditar como os usuários devem acessar seus conteúdos.<\/p> A WAI-ARIA<\/strong><\/a> é uma especificação técnica criada pela W3C<\/strong><\/a>. Ela foi inicialmente desenvolvida para garantir que o funcionamento e estrutura de conteúdos e aplicações web sejam mais acessíveis para pessoas com deficiências.<\/p> Utilizando o WAI-ARIA<\/strong><\/a>, um desenvolvedor web ou criador de site pode prescrever informações semânticas ao conteúdo e resolver problemas que o HTML nativo não consegue solucionar, como a melhoria da acessibilidade através do teclado.<\/p> A ARIA possui três atributos: papéis, estados e propriedades (roles, states <\/em>e properties<\/em>). Esses atributos ajudam os instrumentos de tecnologia assistiva a identificarem os elementos acessíveis na interface das páginas web, permitindo que os usuários interajam com tais elementos.<\/p> Por exemplo, os papéis descrevem os widgets<\/em><\/strong><\/a> visíveis, como cursores e barras de rolagem. Já os estados e propriedades representam o estado em que os widgets<\/em> estão, como aria-haspopup <\/strong>para um menu.<\/p> Note que os atributos não alteram nada na página do site, exceto as informações expostas pela API de acessibilidade do navegador de internet. Essas interfaces especializadas são oferecidas por sistemas operacionais para ajudar as tecnologias de assistência a coletar informações e interagir com os elementos do site.<\/p> Há vários tipos de APIs<\/strong><\/a> de acessibilidade disponíveis na internet, cada uma dependendo do sistema operacional do dispositivo. Por exemplo, tem o Microsoft Active Accessibility<\/strong><\/a> e o Microsoft UI Automation<\/strong><\/a> para Windows, enquanto há o NSAccessibility<\/strong><\/a> para o macOS.<\/p> APIs de acessibilidade incluem uma “árvore” de objetos e informações acessíveis, chamada “árvore de acessibilidade”. Ela contém informações sobre propriedades descritivas, eventos, conteúdos textuais e acessibilidade em geral.<\/p> É essencial fazer um teste de acessibilidade em seu site enquanto ele ainda está no processo de desenvolvimento. Afinal, você vai querer ver se ele está cumprindo com as obrigações aplicáveis nesse sentido.<\/p> Através de processos de testagem, muitos problemas podem ser identificados mais cedo e resolvidos de forma mais eficiente.<\/p> Há diversas ferramentas de teste na internet que te ajudam a avaliar seu site em termos de acessibilidade:<\/p> Para melhorar a acessibilidade, verifique os seguintes fatores em seu site e publicações, para assim saber se ele responde às exigências descritas nas diretrizes WCAG.<\/p> Alt Text<\/strong><\/p> Ao invés de apresentar as imagens, ilustrações ou gráficos incluídos em conteúdos web, os textos alternativos oferecem informações escritas aos leitores de tela. Afinal, esses conteúdos gráficos não são acessíveis para visitantes com deficiências visuais, por exemplo. <\/p> Resumidamente, todos os usuários devem ter acesso a mesma informação, independente de terem ou não a possibilidade de visualizar imagens.<\/p> Alternativas de Áudio e Vídeo<\/strong><\/p> Oferecer alternativas multimídia, como transcrições textuais ou descrições em arquivos de áudio, ajuda usuários com deficiências visuais ou auditivas a acessarem as informações contidas no seu site.<\/p> Um bom exemplo de acessibilidade nesse sentido é incluir legendas em seus conteúdos ou oferecer uma descrição de áudio e vídeo. <\/p> Navegação<\/strong><\/p> Garantir que todas as partes do site possam ser acessadas a partir de um teclado ou instrumento de tecnologia assistiva é essencial para qualquer pessoa que não utiliza um mouse para navegação na internet.<\/p> Elementos estruturais dos sites, como campos de pesquisa e sitemaps<\/strong><\/a>, devem possuir uma navegação lógica e intuitiva para ajudar os usuários a facilmente encontrarem o que estão buscando. <\/p> Contraste de Cores<\/strong><\/p> Usuários com baixa visão ou daltonismo podem enfrentar dificuldades para visualizar os conteúdos de seu site caso eles não estejam com um alto contraste de cores.<\/p> Por exemplo, utilizar uma cor escura para o texto e uma cor clara no plano de fundo — ou vice-versa — ajuda muito na visualização dos elementos nas páginas do site. <\/p> De todo modo, lembre-se que os usuários possuem diferentes níveis de sensibilidade. Sendo assim, ofereça a opção de alterar a combinação de cores existente no navegador. O contraste mínimo exigido é de pelo menos 4.5:1 para textos de tamanho normal.<\/p> Formulários Acessíveis<\/strong><\/p> Para ajudar usuários com alguma deficiência a entender e utilizar um formulário web, você deve garantir que há uma etiqueta ao lado do campo no qual você deseja que eles cliquem ou preencham. Esse campo pode ser, por exemplo, o campo e-mail ou nome num formulário de contato.<\/p> Ao fazer isso, você ajuda usuários que usam ferramentas de tecnologia assistiva a entender o que deve ser feito naquela sessão. <\/p> Conteúdos em Movimento e com Flashes<\/strong><\/p> Conteúdos com movimentos e flashes — como vídeos piscando — que estejam presentes em anúncios, reels <\/em>e carrosséis podem ser um problema para usuários com deficiências cognitivas. Então pense em evitar esse tipo de produção.<\/p> Adicionalmente, inclua em suas páginas um limite de tempo para conteúdos que rodam em alta velocidade, garantindo que esse recurso possa ser ajustado ou desabilitado. Assim, você não confunde usuários quando estão processando as informações exibidas. <\/p> Note que os conteúdos que piscam mais de três vezes por segundo podem causar convulsões em pessoas com transtornos de fotossensibilidade.<\/p> Texto<\/strong><\/p> Ter um título descritivo em uma página na internet pode ajudar os usuários a navegarem por inúmeros sites. Afinal, os recursos tecnológicos, como leitores de tela, fazem a leitura do título da página juntamente dos conteúdos presentes nela.<\/p> Você também deve sinalizar os cabeçalhos para ajudar ainda mais a navegação dos usuários que dependem de teclados ou TA.<\/p> Algumas pessoas precisam aumentar o tamanho da fonte dos textos, e até mesmo alterar o estilo da fonte e o espaçamento entre as linhas na hora de ler um conteúdo.<\/p> Sendo assim, para tornar seu site mais acessível, é importante que você permita o recurso de zoom na área textual das páginas, sem que isso afete o formato do resto do conteúdo.<\/p> \n\n\n\n Quando estiver fazendo o design da interface do seu site, é importante pensar em elementos para além das cores. Você deve utilizar mais uma variável para diferenciar as informações visualmente. Por exemplo, inclua um elemento visual adicional, como uma borda ou ícone, para assim reajustar direções que podem não estar claras em um formulário de contato. Possuir conhecimentos sobre acessibilidade web vai te ajudar a criar um design de alta qualidade<\/strong><\/a> para o seu site, além de entender mais sobre as soluções em termos de inclusividade web.<\/p> Algumas páginas do governo federal do Brasil contam com materiais sobre acessibilidade, incluindo documentos com diretrizes, modelos e padrões legislativos. Vale a pena conferir:<\/p> Mais cursos estão disponíveis em plataformas de aprendizado pagas, como o curso Acessibilidade: Como garantir ambientes inclusivos<\/strong><\/a> da Udemy, e diversas outras opções<\/strong><\/a> no portal de cursos de acessibilidade da Alura.<\/p> Aqui estão algumas de nossas recomendações de cursos online sobre acessibilidade web, incluindo os prós e contras de cada uma das indicações:<\/p> O curso de Introdução à Acessibilidade Web<\/strong><\/a> (em inglês) oferece conhecimentos fundamentais sobre acessibilidade digital. A página de cursos do W3C Brasil<\/strong><\/a> possui ainda outras opções de cursos em português, que ensinam como construir um site acessível para todo mundo, cumprindo com os padrões internacionais.<\/p> Os cursos são abertos para qualquer pessoa, incluindo estudantes, designers e demais profissionais.<\/p> Prós:<\/strong><\/p> Contras<\/strong>:<\/p> A Universidade de Illinois oferece um curso de Introdução à Acessibilidade e Design Inclusivo<\/strong><\/a> (em inglês, com legendas). Seu conteúdo inclui em detalhes os princípios centrais de acessibilidade web e design inclusivo.<\/p> Além disso, você ainda vai aprender mais sobre TA e as diretrizes centrais na criação de um design universal. <\/p> Esse curso é indicado para iniciantes. <\/p> Prós:<\/strong><\/p> Contras<\/strong>:<\/p> O curso de Acessibilidade Web do Google<\/strong><\/a> (em inglês), disponível no portal Udacity, oferece aulas mais técnicas sobre a construção de páginas que funcionem bem com recursos de tecnologia assistiva. Eles também têm aulas sobre o gerenciamento de focos de entrada.<\/p> Além disso, você vai aprender mais sobre linguagens de marcação. De todo modo, este curso exige certos níveis de conhecimento em programação<\/strong><\/a>, incluindo HTML, CSS e JavaScript. <\/p> Prós:<\/strong><\/p> Contras<\/strong>:<\/p> O próprio Google<\/strong><\/a> conta com uma página completa sobre acessibilidade web, que inclui diversos materiais, como Iniciativas e pesquisa<\/strong><\/a> sobre o tema. <\/p> A acessibilidade web melhora a experiência do usuário no seu site. Muitas empresas e organizações já implementaram práticas de acessibilidade web devido a diversos benefícios, que vão além da inclusividade.<\/p> Afinal, sites acessíveis têm uma maior audiência e ranqueiam melhor nas páginas de resultados dos mecanismos de pesquisa (SERPs).<\/p> Lembrando também que a acessibilidade web é uma obrigação legal. <\/p> Além de seguir as diretrizes oficiais do WCAG, é essencial avaliar e testar seu site para evitar problemas complexos. Você pode utilizar ferramentas de análise de acessibilidade, como WAVE <\/strong>e WebAim<\/strong>, mas também pode fazer a verificação manual do seu site para saber se ele é acessível. <\/p> Para fazer isso, preste atenção aos seguintes elementos:<\/p> Adicionalmente, você pode fazer algum curso online para aprender mais sobre acessibilidade web. Confira os conteúdos oficiais nacionais, além de verificar as opções de cursos nas plataformas EdX<\/strong>, Coursera<\/strong>, Udemy<\/strong> e até no Google<\/strong>. <\/p> Se você tiver questões ou dicas, não hesite em comentar na sessão de discussão abaixo. E não se esqueça de utilizar uma hospedagem de sites<\/strong><\/a> de qualidade para garantir o melhor desempenho possível para seu site.<\/p>\n","protected":false},"excerpt":{"rendered":" A acessibilidade web ajuda pessoas com deficiência a navegarem por um site e a acessarem conteúdos através de ferramentas específicas, como um leitor de tela. Ao tornar seu site acessível, você permite que mais pessoas possam interagir com ele e ter uma boa experiência, além de gerar mais tráfego para as suas páginas. Infelizmente, apesar […]<\/p>\nO Que É Acessibilidade Web?<\/strong><\/h4>\n
Por Que É Importante ter Acessibilidade no Design do Site?<\/strong><\/h2>
\n
Padrões de Acessibilidade Web<\/strong><\/h2>
Requisitos Legais para Acessibilidade Web<\/strong><\/h3>
Diretrizes de Acessibilidade para Conteúdo Web (WCAG)<\/strong><\/h3>
\n
Accessible Rich Internet Applications (WAI-ARIA)<\/strong><\/h3>
![\"Esquema](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-50.jpeg\/public\")
<\/figure><\/div>Como Testar a Acessibilidade de um Site?<\/strong><\/h2>
\n
Checklist de Acessibilidade Web<\/strong><\/h3>
Dica do Especialista<\/strong><\/h4>\n
anajursa
Designer de Produto<\/p>\n <\/div>\n\n\n\n<\/p>Aprendendo Mais Sobre Acessibilidade Web<\/strong><\/h2>
\n
1. W3C<\/strong><\/h3>
![\"Página](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-51.jpeg\/public\")
<\/figure><\/div>\n
\n
2. Coursera<\/strong><\/h3>
![\"Página](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-52.jpeg\/public\")
<\/figure><\/div>\n
\n
3. Udacity<\/strong><\/h3>
![\"Página](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-53.jpeg\/public\")
<\/figure>\n
\n
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/public\")
<\/a><\/figure>Conclusão<\/strong><\/h2>
\n