{"id":27604,"date":"2022-05-18T10:38:22","date_gmt":"2022-05-18T13:38:22","guid":{"rendered":"\/tutoriais\/?p=27604"},"modified":"2024-12-17T12:29:05","modified_gmt":"2024-12-17T15:29:05","slug":"acessibilidade-web","status":"publish","type":"post","link":"\/br\/tutoriais\/acessibilidade-web\/","title":{"rendered":"Acessibilidade web \u2013 o que \u00e9 e como construir um site acess\u00edvel?"},"content":{"rendered":"<p class=\"wp-block-paragraph\">A acessibilidade web ajuda pessoas com defici&ecirc;ncia a navegarem por um site e a acessarem conte&uacute;dos atrav&eacute;s de ferramentas espec&iacute;ficas, como um leitor de tela.<\/p><p class=\"wp-block-paragraph\">Ao tornar seu site acess&iacute;vel, voc&ecirc; permite que mais pessoas possam interagir com ele e ter uma boa experi&ecirc;ncia, al&eacute;m de gerar mais tr&aacute;fego para as suas p&aacute;ginas.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Build-website-in-9-easy-steps-BR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-30342\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/12\/eBook_-Build-website-BR.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p class=\"wp-block-paragraph\">Infelizmente, apesar da Organiza&ccedil;&atilde;o Mundial da Sa&uacute;de (OMS) estimar que <a href=\"https:\/\/www.who.int\/news-room\/fact-sheets\/detail\/disability-and-health\" target=\"_blank\" rel=\"noopener\"><strong>15%<\/strong><\/a> da popula&ccedil;&atilde;o global viva com algum tipo de defici&ecirc;ncia, <a href=\"https:\/\/wearepurple.org.uk\/web-accessibility-infographic\" target=\"_blank\" rel=\"noopener\"><strong>70%<\/strong><\/a> dos sites verificados possuem grandes falhas em termos de acessibilidade.<\/p><p class=\"wp-block-paragraph\">Neste artigo voc&ecirc; ir&aacute; aprender mais sobre acessibilidade web e por que ela &eacute; importante. Tamb&eacute;m iremos te mostrar como construir um site acess&iacute;vel e testar suas p&aacute;ginas, ambos processos baseados em padr&otilde;es internacionais da internet.<\/p><p class=\"wp-block-paragraph\">        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    &lt;strong&gt;O Que &Eacute; Acessibilidade Web?&lt;\/strong&gt;                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Acessibilidade web se refere a cria&ccedil;&atilde;o de um site que seja acess&iacute;vel para todas as pessoas, especialmente usu&aacute;rios com defici&ecirc;ncias. Para atingir um bom n&iacute;vel de acessibilidade em suas p&aacute;ginas, incentiva-se o uso de design inclusivo, tecnologias integradas e uso de softwares especializados.<\/p>\n                    <\/div>\n        <\/p><h2 class=\"wp-block-heading\" id=\"h-por-que-e-importante-ter-acessibilidade-no-design-do-site\"><strong>Por Que &Eacute; Importante ter Acessibilidade no Design do Site?<\/strong><\/h2><p class=\"wp-block-paragraph\">A acessibilidade web cria oportunidades para que todas as pessoas tenham a mesma possibilidade de acesso a uma plataforma digital.<\/p><p class=\"wp-block-paragraph\">Al&eacute;m disso, a acessibilidade promove uma melhor experi&ecirc;ncia do cliente, impulsionando suas estrat&eacute;gias de <a href=\"\/br\/tutoriais\/o-que-e-seo\/\"><strong>SEO<\/strong><\/a> (Search Engine Optimization). Isso significa que um site mais acess&iacute;vel estar&aacute; melhor posicionado no ranking dos resultados do Google.<\/p><p class=\"wp-block-paragraph\">O resultado &eacute; um aumento no n&uacute;mero de visitas &agrave;s suas p&aacute;ginas, j&aacute; que o site alcan&ccedil;ar&aacute; mais pessoas.<\/p><p class=\"wp-block-paragraph\">Assim, a acessibilidade web ajuda neg&oacute;cios a expandirem seu alcance de mercado e a aumentarem a satisfa&ccedil;&atilde;o dos clientes.<\/p><p class=\"wp-block-paragraph\">Antes de come&ccedil;ar a criar um design acess&iacute;vel em suas p&aacute;ginas, abaixo listamos algumas das situa&ccedil;&otilde;es que podem ser beneficiadas por um site com solu&ccedil;&otilde;es de acessibilidade:<\/p><ul class=\"wp-block-list\">\n<li><strong>Defici&ecirc;ncias Visuais <\/strong>&ndash; inclui casos de baixa vis&atilde;o, cegueira e daltonismo. A maioria das pessoas nesses casos utiliza softwares de amplia&ccedil;&atilde;o de tela ou leitores de tela, que fazem a leitura de textos digitais em voz alta &mdash; incluindo a descri&ccedil;&atilde;o das imagens de uma p&aacute;gina. Exemplos de leitores de tela s&atilde;o <a href=\"https:\/\/www.freedomscientific.com\/products\/software\/jaws\/\" target=\"_blank\" rel=\"noopener\"><strong>JAWS<\/strong><\/a> e <a href=\"https:\/\/www.nvaccess.org\/\" target=\"_blank\" rel=\"noopener\"><strong>NVDA<\/strong><\/a>.<\/li>\n\n\n\n<li><strong>Defici&ecirc;ncias Auditivas <\/strong>&ndash; refere-se a v&aacute;rios poss&iacute;veis n&iacute;veis de perda de audi&ccedil;&atilde;o, de moderada a severa. O conte&uacute;do de &aacute;udio de um site deve incluir legendas ou uma op&ccedil;&atilde;o de transcri&ccedil;&atilde;o para que todos os visitantes possam compreender o conte&uacute;do e interagir com ele.<\/li>\n\n\n\n<li><strong>Defici&ecirc;ncias Motoras <\/strong>&ndash; pessoas com controle motor limitado podem encontrar dificuldades no uso de mouses e <em>touchpads<\/em>. Sendo assim, muitos usu&aacute;rios acabam tendo que utilizar apenas o teclado. Nesses casos, podem precisar de recursos espec&iacute;ficos, como sistemas de reconhecimento de voz e dispositivos de tecnologia assistiva.<\/li>\n\n\n\n<li><strong>Defici&ecirc;ncias Cognitivas <\/strong>&ndash; caracterizam-se amplamente como defici&ecirc;ncias de aprendizagem. Para ajudar usu&aacute;rios a interagirem com seu site, utilize um <a href=\"\/br\/tutoriais\/importancia-do-design\/\"><strong>design<\/strong><\/a>, navega&ccedil;&atilde;o e <em>layouts<\/em> consistentes. A linguagem deve simples e os conte&uacute;dos criativos, podendo assumir formato de v&iacute;deo.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Note que n&atilde;o se trata apenas de situa&ccedil;&otilde;es de defici&ecirc;ncias permanentes, mas tamb&eacute;m usu&aacute;rios que passam por limita&ccedil;&otilde;es tempor&aacute;rias ou problemas situacionais de acessibilidade.<\/p><p class=\"wp-block-paragraph\">Por exemplo, algumas pessoas podem ter dificuldade em ouvir seu v&iacute;deo por estarem em um local muito movimentado e barulhento.<\/p><h2 class=\"wp-block-heading\" id=\"h-padroes-de-acessibilidade-web\"><strong>Padr&otilde;es de Acessibilidade Web<\/strong><\/h2><p class=\"wp-block-paragraph\" id=\"h-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\">Para garantir que seu site, aplica&ccedil;&otilde;es web e conte&uacute;dos tenham um bom n&iacute;vel de acessibilidade, voc&ecirc; deve ficar atento a diversos componentes web, como agentes de usu&aacute;rio e ferramentas de autoria.<\/p><p class=\"wp-block-paragraph\">Para facilitar essa tarefa, vamos indicar as diretrizes e especifica&ccedil;&otilde;es que voc&ecirc; deve seguir para atingir os padr&otilde;es internacionais de acessibilidade web.<\/p><h3 class=\"wp-block-heading\"><strong>Requisitos Legais para Acessibilidade Web<\/strong><\/h3><p class=\"wp-block-paragraph\" id=\"h-os-estados-unidos-da-am-rica-introduziram-o-ato-dos-americanos-com-defici-ncias-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\">Os Estados Unidos da Am&eacute;rica introduziram o <a href=\"https:\/\/purplecowagency.com\/is-website-accessibility-a-legal-requirement\/\" target=\"_blank\" rel=\"noopener\"><strong>Ato dos Americanos com Defici&ecirc;ncias<\/strong><\/a> (ADA), um documento com diretrizes sobre acessibilidade. Ele garante que todo indiv&iacute;duo possa utilizar instala&ccedil;&otilde;es p&uacute;blicas, incluindo sites. Resumidamente, esse documento torna a acessibilidade web uma exig&ecirc;ncia legal no pa&iacute;s.<\/p><p class=\"wp-block-paragraph\" id=\"h-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-no-13-146-lei-brasileira-de-inclus-o-da-pessoa-com-defici-ncia-sancionada-em-6-de-julho-de-2015\">No Brasil, diversas leis e decretos foram aprovados com rela&ccedil;&atilde;o &agrave; acessibilidade web, instituindo a obrigatoriedade da inclus&atilde;o de pessoas com defici&ecirc;ncia nos ambientes web. Exemplo disso &eacute; a <a href=\"https:\/\/www.w3c.br\/pub\/Materiais\/PublicacoesW3C\/cartilha-w3cbr-acessibilidade-web-fasciculo-II.pdf\" target=\"_blank\" rel=\"noopener\"><strong>Lei n&ordm; 13.146<\/strong><\/a>, Lei Brasileira de Inclus&atilde;o da Pessoa com Defici&ecirc;ncia, sancionada em 6 de julho de 2015.<\/p><p class=\"wp-block-paragraph\" id=\"h-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\">Como resultado, se voc&ecirc; n&atilde;o cumprir com esses requisitos, pode enfrentar riscos jur&iacute;dicos. O n&atilde;o cumprimento das diretrizes n&atilde;o &eacute; tolerado por motivos como desconhecimento ou o fato do site ainda estar em processo de desenvolvimento.<\/p><p class=\"wp-block-paragraph\" id=\"h-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\">Sendo assim, implantar logo de in&iacute;cio um design acess&iacute;vel e inclusivo no seu site evita poss&iacute;veis processos e ajuda a construir uma boa reputa&ccedil;&atilde;o para sua marca.<\/p><h3 class=\"wp-block-heading\" id=\"h-diretrizes-de-acessibilidade-para-conteudo-web-wcag\"><strong>Diretrizes de Acessibilidade para Conte&uacute;do Web (WCAG)<\/strong><\/h3><p class=\"wp-block-paragraph\">As Diretrizes de Acessibilidade para Conte&uacute;do Web (<a href=\"https:\/\/www.w3.org\/Translations\/WCAG20-pt-br\/\" target=\"_blank\" rel=\"noopener\"><strong>WCAG<\/strong><\/a>) oferecem um padr&atilde;o global de conte&uacute;dos acess&iacute;veis que cumprem com as obriga&ccedil;&otilde;es legais e possibilitam a inclus&atilde;o de todos os indiv&iacute;duos e organiza&ccedil;&otilde;es na internet.<\/p><p class=\"wp-block-paragraph\">Fundamentalmente, essas diretrizes s&atilde;o direcionadas a desenvolvedores web, principalmente desenvolvedores de ferramentas de autoria web. Elas tamb&eacute;m direcionadas a todas as pessoas que desejam criar um site acess&iacute;vel.<\/p><p class=\"wp-block-paragraph\">Muitos pa&iacute;ses incluem em suas pol&iacute;ticas de acessibilidade a documenta&ccedil;&atilde;o do <a href=\"https:\/\/www.w3c.br\/traducoes\/wcag\/wcag21-pt-BR\/\" target=\"_blank\" rel=\"noopener\"><strong>WCAG 2.1<\/strong><\/a> ou 2.0, como refer&ecirc;ncias para constru&ccedil;&atilde;o de sites acess&iacute;veis, j&aacute; que essas diretrizes s&atilde;o aprovadas como um padr&atilde;o ISO.<\/p><p class=\"wp-block-paragraph\">Al&eacute;m disso, a <a href=\"https:\/\/www.w3.org\/TR\/wcag-3.0\/\" target=\"_blank\" rel=\"noopener\"><strong>vers&atilde;o 3.0 do guia WCAG<\/strong><\/a> est&aacute; em processo de desenvolvimento, e quando publicada ir&aacute; suportar um amplo conjunto de exig&ecirc;ncias dos usu&aacute;rios, aplicar uma forma hol&iacute;stica de testagem e possibilitar uma manuten&ccedil;&atilde;o peri&oacute;dica de diretrizes e conte&uacute;dos relacionados &agrave; adapta&ccedil;&atilde;o tecnol&oacute;gica.<\/p><p class=\"wp-block-paragraph\">O crit&eacute;rio de sucesso das diretrizes WCAG consiste em tr&ecirc;s n&iacute;veis de conformidade:<\/p><ul class=\"wp-block-list\">\n<li><strong>N&iacute;vel A<\/strong> &ndash; indica que um site tem o n&iacute;vel m&iacute;nimo de acessibilidade, o que significa que nem todos os usu&aacute;rios com defici&ecirc;ncias conseguem navegar e compreender os conte&uacute;dos. Se uma p&aacute;gina web n&atilde;o consegue atingir nem este n&iacute;vel m&iacute;nimo, certamente n&atilde;o &eacute; acess&iacute;vel.&nbsp;<\/li>\n\n\n\n<li><strong>N&iacute;vel AA<\/strong> &ndash; representa um padr&atilde;o apropriado para a maioria dos sites, pois significa que as barreiras mais comuns &agrave; acessibilidade foram removidas com sucesso.&nbsp;<\/li>\n\n\n\n<li><strong>N&iacute;vel AAA<\/strong> &ndash; o mais alto n&iacute;vel de acessibilidade listado pela WCAG. Alguns sites podem n&atilde;o ser capazes de atingir esse status pois n&atilde;o conseguem cumprir com todos os requisitos.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">As exig&ecirc;ncias e padr&otilde;es de acessibilidade se baseiam em quatro princ&iacute;pios, chamados <strong>POUR<\/strong> &mdash; um acr&ocirc;nimo em ingl&ecirc;s para as seguintes palavras:<\/p><p class=\"wp-block-paragraph\"><strong>Percept&iacute;vel<\/strong><\/p><p class=\"wp-block-paragraph\">Significa que os usu&aacute;rios devem ser capazes de entender as informa&ccedil;&otilde;es inclu&iacute;das em conte&uacute;dos web. Por exemplo, em caso de defici&ecirc;ncias visuais, o conte&uacute;do do site deve ser acess&iacute;vel para instrumentos de <a href=\"https:\/\/www.assistiva.com.br\/#:~:text=%22Tecnologia%20Assistiva%20%C3%A9%20uma%20%C3%A1rea,incapacidades%20ou%20mobilidade%20reduzida%2C%20visando\" target=\"_blank\" rel=\"noopener\"><strong>tecnologia assistiva<\/strong><\/a>, como leitores de tela.<\/p><p class=\"wp-block-paragraph\"><strong>Oper&aacute;vel<\/strong><\/p><p class=\"wp-block-paragraph\">Os usu&aacute;rios devem ser capazes de operar todos os componentes da interface do site, bem como navegar por ele com v&aacute;rias ferramentas. Por exemplo, se algum visitante tiver dificuldades em utilizar um mouse, a tecla Tab (&#8633;) do teclado, ou os comandos de voz, devem ser suficientes para que ele navegue pelo site.&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>Compreens&iacute;vel<\/strong><\/p><p class=\"wp-block-paragraph\">Quando estiver criando conte&uacute;dos para a web, voc&ecirc; deve fazer com que eles sejam leg&iacute;veis e intuitivos, atrav&eacute;s de instru&ccedil;&otilde;es claras e de f&aacute;cil entendimento.&nbsp;<\/p><p class=\"wp-block-paragraph\">Aplicar este princ&iacute;pio ajuda usu&aacute;rios a entenderem melhor o fluxo de conte&uacute;dos e estrutura do site, evitando erros e confus&otilde;es.<\/p><p class=\"wp-block-paragraph\"><strong>Robusto<\/strong><\/p><p class=\"wp-block-paragraph\">O conte&uacute;do deve ser acess&iacute;vel por v&aacute;rios dispositivos de usu&aacute;rio, incluindo celulares, navegadores web e instrumentos de tecnologia assistiva (TA). Resumidamente, os sites n&atilde;o podem ditar como os usu&aacute;rios devem acessar seus conte&uacute;dos.<\/p><h3 class=\"wp-block-heading\" id=\"h-accessible-rich-internet-applications-wai-aria\"><strong>Accessible Rich Internet Applications (WAI-ARIA)<\/strong><\/h3><p class=\"wp-block-paragraph\">A <a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/aria\/\" target=\"_blank\" rel=\"noopener\"><strong>WAI-ARIA<\/strong><\/a> &eacute; uma especifica&ccedil;&atilde;o t&eacute;cnica criada pela <a href=\"https:\/\/www.w3c.br\/\" target=\"_blank\" rel=\"noopener\"><strong>W3C<\/strong><\/a>. Ela foi inicialmente desenvolvida para garantir que o funcionamento e estrutura de conte&uacute;dos e aplica&ccedil;&otilde;es web sejam mais acess&iacute;veis para pessoas com defici&ecirc;ncias.<\/p><p class=\"wp-block-paragraph\">Utilizando o <a href=\"https:\/\/www.gov.br\/ds\/guias\/uso-do-wai-aria\" target=\"_blank\" rel=\"noopener\"><strong>WAI-ARIA<\/strong><\/a>, um desenvolvedor web ou criador de site pode prescrever informa&ccedil;&otilde;es sem&acirc;nticas ao conte&uacute;do e resolver problemas que o HTML nativo n&atilde;o consegue solucionar, como a melhoria da acessibilidade atrav&eacute;s do teclado.<\/p><p class=\"wp-block-paragraph\">A ARIA possui tr&ecirc;s atributos: pap&eacute;is, estados e propriedades (<em>roles, states <\/em>e <em>properties<\/em>). Esses atributos ajudam os instrumentos de tecnologia assistiva a identificarem os elementos acess&iacute;veis na interface das p&aacute;ginas web, permitindo que os usu&aacute;rios interajam com tais elementos.<\/p><p class=\"wp-block-paragraph\">Por exemplo, os pap&eacute;is descrevem os <a href=\"\/br\/tutoriais\/o-que-e-widget\/\"><strong><em>widgets<\/em><\/strong><\/a> vis&iacute;veis, como cursores e barras de rolagem. J&aacute; os estados e propriedades representam o estado em que os <em>widgets<\/em> est&atilde;o, como <strong>aria-haspopup <\/strong>para um menu.<\/p><p class=\"wp-block-paragraph\">Note que os atributos n&atilde;o alteram nada na p&aacute;gina do site, exceto as informa&ccedil;&otilde;es expostas pela API de acessibilidade do navegador de internet. Essas interfaces especializadas s&atilde;o oferecidas por sistemas operacionais para ajudar as tecnologias de assist&ecirc;ncia a coletar informa&ccedil;&otilde;es e interagir com os elementos do site.<\/p><p class=\"wp-block-paragraph\">H&aacute; v&aacute;rios tipos de <a href=\"\/br\/tutoriais\/api-restful\/#O_Que_E_API\"><strong>APIs<\/strong><\/a> de acessibilidade dispon&iacute;veis na internet, cada uma dependendo do sistema operacional do dispositivo. Por exemplo, tem o <a href=\"https:\/\/docs.microsoft.com\/pt-br\/dotnet\/framework\/ui-automation\/ui-automation-and-microsoft-active-accessibility\" target=\"_blank\" rel=\"noopener\"><strong>Microsoft Active Accessibility<\/strong><\/a> e o <a href=\"https:\/\/docs.microsoft.com\/pt-br\/dotnet\/framework\/ui-automation\/ui-automation-overview\" target=\"_blank\" rel=\"noopener\"><strong>Microsoft UI Automation<\/strong><\/a> para Windows, enquanto h&aacute; o <a href=\"https:\/\/developer.apple.com\/documentation\/appkit\/accessibility_for_appkit\/nsaccessibility\" target=\"_blank\" rel=\"noopener\"><strong>NSAccessibility<\/strong><\/a> para o macOS.<\/p><p class=\"wp-block-paragraph\">APIs de acessibilidade incluem uma &ldquo;&aacute;rvore&rdquo; de objetos e informa&ccedil;&otilde;es acess&iacute;veis, chamada &ldquo;&aacute;rvore de acessibilidade&rdquo;. Ela cont&eacute;m informa&ccedil;&otilde;es sobre propriedades descritivas, eventos, conte&uacute;dos textuais e acessibilidade em geral.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"803\" height=\"489\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-50.jpeg\/public\" alt=\"Esquema ilustrativo de como funciona API de acessibilidade e tecnologia assistiva para navega&ccedil;&atilde;o de um site\" class=\"wp-image-47475\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-50.jpeg\/w=803,fit=scale-down 803w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-50.jpeg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-50.jpeg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-50.jpeg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 803px) 100vw, 803px\" \/><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-como-testar-a-acessibilidade-de-um-site\"><strong>Como Testar a Acessibilidade de um Site?<\/strong><\/h2><p class=\"wp-block-paragraph\">&Eacute; essencial fazer um teste de acessibilidade em seu site enquanto ele ainda est&aacute; no processo de desenvolvimento. Afinal, voc&ecirc; vai querer ver se ele est&aacute; cumprindo com as obriga&ccedil;&otilde;es aplic&aacute;veis nesse sentido.<\/p><p class=\"wp-block-paragraph\">Atrav&eacute;s de processos de testagem, muitos problemas podem ser identificados mais cedo e resolvidos de forma mais eficiente.<\/p><p class=\"wp-block-paragraph\">H&aacute; diversas ferramentas de teste na internet que te ajudam a avaliar seu site em termos de acessibilidade:<\/p><ul class=\"wp-block-list\">\n<li><strong>WAVE<\/strong> &ndash; uma ferramenta simples e bastante popular entre desenvolvedores. Ela identifica os problemas das sess&otilde;es n&atilde;o acess&iacute;veis e oferece solu&ccedil;&otilde;es para corrigi-los. Al&eacute;m disso, o WAVE conta com informa&ccedil;&otilde;es sobre acessibilidade com &iacute;cones e indicadores de erros nas p&aacute;ginas do seu site.<\/li>\n\n\n\n<li><strong>WebAim<\/strong> &ndash; utilize-o para verificar a cor de seus textos e planos de fundo, garantindo que estes componentes est&atilde;o cumprindo os requisitos determinados pelos padr&otilde;es WCAG.&nbsp;<\/li>\n\n\n\n<li><strong>NVACCESS<\/strong> &ndash; um leitor de tela gratuito para Windows. Ele possui um recurso de foco e destaque que ajuda os desenvolvedores web a localizarem objetos-foco na tela. Adicionalmente, os criadores do site podem ver o produto textual do leitor de tela atrav&eacute;s do visualizador de discurso.<\/li>\n\n\n\n<li><strong>Axe DevTools<\/strong> &ndash; essa ferramenta automatizada de testes identifica e soluciona problemas de acessibilidade quando voc&ecirc; estiver desenvolvendo seu site. A ferramenta de Teste Inteligente Guiado (IGT) permite que voc&ecirc; complete o teste manual mais rapidamente, mesmo sem ser um especialista.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-checklist-de-acessibilidade-web\"><strong>Checklist de Acessibilidade Web<\/strong><\/h3><p class=\"wp-block-paragraph\">Para melhorar a acessibilidade, verifique os seguintes fatores em seu site e publica&ccedil;&otilde;es, para assim saber se ele responde &agrave;s exig&ecirc;ncias descritas nas diretrizes WCAG.<\/p><p class=\"wp-block-paragraph\"><strong>Alt Text<\/strong><\/p><p class=\"wp-block-paragraph\">Ao inv&eacute;s de apresentar as imagens, ilustra&ccedil;&otilde;es ou gr&aacute;ficos inclu&iacute;dos em conte&uacute;dos web, os textos alternativos oferecem informa&ccedil;&otilde;es escritas aos leitores de tela. Afinal, esses conte&uacute;dos gr&aacute;ficos n&atilde;o s&atilde;o acess&iacute;veis para visitantes com defici&ecirc;ncias visuais, por exemplo.&nbsp;<\/p><p class=\"wp-block-paragraph\">Resumidamente, todos os usu&aacute;rios devem ter acesso a mesma informa&ccedil;&atilde;o, independente de terem ou n&atilde;o a possibilidade de visualizar imagens.<\/p><p class=\"wp-block-paragraph\"><strong>Alternativas de &Aacute;udio e V&iacute;deo<\/strong><\/p><p class=\"wp-block-paragraph\">Oferecer alternativas multim&iacute;dia, como transcri&ccedil;&otilde;es textuais ou descri&ccedil;&otilde;es em arquivos de &aacute;udio, ajuda usu&aacute;rios com defici&ecirc;ncias visuais ou auditivas a acessarem as informa&ccedil;&otilde;es contidas no seu site.<\/p><p class=\"wp-block-paragraph\">Um bom exemplo de acessibilidade nesse sentido &eacute; incluir legendas em seus conte&uacute;dos ou oferecer uma descri&ccedil;&atilde;o de &aacute;udio e v&iacute;deo.&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>Navega&ccedil;&atilde;o<\/strong><\/p><p class=\"wp-block-paragraph\">Garantir que todas as partes do site possam ser acessadas a partir de um teclado ou instrumento de tecnologia assistiva &eacute; essencial para qualquer pessoa que n&atilde;o utiliza um mouse para navega&ccedil;&atilde;o na internet.<\/p><p class=\"wp-block-paragraph\">Elementos estruturais dos sites, como campos de pesquisa e <a href=\"\/br\/tutoriais\/como-criar-sitemap-para-wordpress\/\"><strong>sitemaps<\/strong><\/a>, devem possuir uma navega&ccedil;&atilde;o l&oacute;gica e intuitiva para ajudar os usu&aacute;rios a facilmente encontrarem o que est&atilde;o buscando.&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>Contraste de Cores<\/strong><\/p><p class=\"wp-block-paragraph\">Usu&aacute;rios com baixa vis&atilde;o ou daltonismo podem enfrentar dificuldades para visualizar os conte&uacute;dos de seu site caso eles n&atilde;o estejam com um alto contraste de cores.<\/p><p class=\"wp-block-paragraph\">Por exemplo, utilizar uma cor escura para o texto e uma cor clara no plano de fundo &mdash; ou vice-versa &mdash; ajuda muito na visualiza&ccedil;&atilde;o dos elementos nas p&aacute;ginas do site.&nbsp;<\/p><p class=\"wp-block-paragraph\">De todo modo, lembre-se que os usu&aacute;rios possuem diferentes n&iacute;veis de sensibilidade. Sendo assim, ofere&ccedil;a a op&ccedil;&atilde;o de alterar a combina&ccedil;&atilde;o de cores existente no navegador. O contraste m&iacute;nimo exigido &eacute; de pelo menos 4.5:1 para textos de tamanho normal.<\/p><p class=\"wp-block-paragraph\"><strong>Formul&aacute;rios Acess&iacute;veis<\/strong><\/p><p class=\"wp-block-paragraph\">Para ajudar usu&aacute;rios com alguma defici&ecirc;ncia a entender e utilizar um formul&aacute;rio web, voc&ecirc; deve garantir que h&aacute; uma etiqueta ao lado do campo no qual voc&ecirc; deseja que eles cliquem ou preencham. Esse campo pode ser, por exemplo, o campo e-mail ou nome num formul&aacute;rio de contato.<\/p><p class=\"wp-block-paragraph\">Ao fazer isso, voc&ecirc; ajuda usu&aacute;rios que usam ferramentas de tecnologia assistiva a entender o que deve ser feito naquela sess&atilde;o.&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>Conte&uacute;dos em Movimento e com Flashes<\/strong><\/p><p class=\"wp-block-paragraph\">Conte&uacute;dos com movimentos e flashes &mdash; como v&iacute;deos piscando &mdash; que estejam presentes em an&uacute;ncios, <em>reels <\/em>e carross&eacute;is podem ser um problema para usu&aacute;rios com defici&ecirc;ncias cognitivas. Ent&atilde;o pense em evitar esse tipo de produ&ccedil;&atilde;o.<\/p><p class=\"wp-block-paragraph\">Adicionalmente, inclua em suas p&aacute;ginas um limite de tempo para conte&uacute;dos que rodam em alta velocidade, garantindo que esse recurso possa ser ajustado ou desabilitado. Assim, voc&ecirc; n&atilde;o confunde usu&aacute;rios quando est&atilde;o processando as informa&ccedil;&otilde;es exibidas.&nbsp;<\/p><p class=\"wp-block-paragraph\">Note que os conte&uacute;dos que piscam mais de tr&ecirc;s vezes por segundo podem causar convuls&otilde;es em pessoas com transtornos de fotossensibilidade.<\/p><p class=\"wp-block-paragraph\"><strong>Texto<\/strong><\/p><p class=\"wp-block-paragraph\">Ter um t&iacute;tulo descritivo em uma p&aacute;gina na internet pode ajudar os usu&aacute;rios a navegarem por in&uacute;meros sites. Afinal, os recursos tecnol&oacute;gicos, como leitores de tela, fazem a leitura do t&iacute;tulo da p&aacute;gina juntamente dos conte&uacute;dos presentes nela.<\/p><p class=\"wp-block-paragraph\">Voc&ecirc; tamb&eacute;m deve sinalizar os cabe&ccedil;alhos para ajudar ainda mais a navega&ccedil;&atilde;o dos usu&aacute;rios que dependem de teclados ou TA.<\/p><p class=\"wp-block-paragraph\">Algumas pessoas precisam aumentar o tamanho da fonte dos textos, e at&eacute; mesmo alterar o estilo da fonte e o espa&ccedil;amento entre as linhas na hora de ler um conte&uacute;do.<\/p><p class=\"wp-block-paragraph\">Sendo assim, para tornar seu site mais acess&iacute;vel, &eacute; importante que voc&ecirc; permita o recurso de zoom na &aacute;rea textual das p&aacute;ginas, sem que isso afete o formato do resto do conte&uacute;do.<\/p><p class=\"wp-block-paragraph\">        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    &lt;strong&gt;Dica do Especialista&lt;\/strong&gt;                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Quando estiver fazendo o design da interface do seu site, &eacute; importante pensar em elementos para al&eacute;m das cores. Voc&ecirc; deve utilizar mais uma vari&aacute;vel para diferenciar as informa&ccedil;&otilde;es visualmente. Por exemplo, inclua um elemento visual adicional, como uma borda ou &iacute;cone, para assim reajustar dire&ccedil;&otilde;es que podem n&atilde;o estar claras em um formul&aacute;rio de contato.<br>anajursa<br>Designer de Produto<\/p>\n                    <\/div>\n        <\/p><h2 class=\"wp-block-heading\" id=\"h-aprendendo-mais-sobre-acessibilidade-web\"><strong>Aprendendo Mais Sobre Acessibilidade Web<\/strong><\/h2><p class=\"wp-block-paragraph\">Possuir conhecimentos sobre acessibilidade web vai te ajudar a criar um <a href=\"\/br\/tutoriais\/como-fazer-o-design-de-um-site\/\"><strong>design de alta qualidade<\/strong><\/a> para o seu site, al&eacute;m de entender mais sobre as solu&ccedil;&otilde;es em termos de inclusividade web.<\/p><p class=\"wp-block-paragraph\">Algumas p&aacute;ginas do governo federal do Brasil contam com materiais sobre acessibilidade, incluindo documentos com diretrizes, modelos e padr&otilde;es legislativos. Vale a pena conferir:<\/p><ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.gov.br\/governodigital\/pt-br\/acessibilidade-digital\/recursos-de-acessibilidade\" target=\"_blank\" rel=\"noopener\"><strong>Recursos de Acessibilidade<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.gov.br\/governodigital\/pt-br\/acessibilidade-digital\/material-de-apoio\" target=\"_blank\" rel=\"noopener\"><strong>Material de apoio<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.gov.br\/governodigital\/pt-br\/acessibilidade-digital\/ferramentas\" target=\"_blank\" rel=\"noopener\"><strong>Ferramentas<\/strong><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.gov.br\/governodigital\/pt-br\/acessibilidade-digital\/referencias-e-modelos-de-implementacao\" target=\"_blank\" rel=\"noopener\"><strong>Refer&ecirc;ncias e Modelos de Implementa&ccedil;&atilde;o<\/strong><\/a><\/li>\n<\/ul><p class=\"wp-block-paragraph\">Mais cursos est&atilde;o dispon&iacute;veis em plataformas de aprendizado pagas, como o curso <a href=\"https:\/\/www.udemy.com\/course\/acessibilidade\/\" target=\"_blank\" rel=\"noopener\"><strong>Acessibilidade: Como garantir ambientes inclusivos<\/strong><\/a> da Udemy, e diversas <a href=\"https:\/\/www.alura.com.br\/busca?query=acessibilidade+web\" target=\"_blank\" rel=\"noopener\"><strong>outras op&ccedil;&otilde;es<\/strong><\/a> no portal de cursos de acessibilidade da Alura.<\/p><p class=\"wp-block-paragraph\">Aqui est&atilde;o algumas de nossas recomenda&ccedil;&otilde;es de cursos online sobre acessibilidade web, incluindo os pr&oacute;s e contras de cada uma das indica&ccedil;&otilde;es:<\/p><h3 class=\"wp-block-heading\" id=\"h-1-w3c\"><strong>1. W3C<\/strong><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"477\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-51.jpeg\/w=1024,h=1024,fit=scale-down\" alt=\"P&aacute;gina do curso online de acessibilidade W3C dispon&iacute;vel no site edX\" class=\"wp-image-47476\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-51.jpeg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-51.jpeg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-51.jpeg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-51.jpeg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">O curso de <a href=\"https:\/\/www.edx.org\/course\/web-accessibility-introduction\" target=\"_blank\" rel=\"noopener\"><strong>Introdu&ccedil;&atilde;o &agrave; Acessibilidade Web<\/strong><\/a> (em ingl&ecirc;s) oferece conhecimentos fundamentais sobre acessibilidade digital. A <a href=\"https:\/\/www.w3c.br\/Cursos\/WebHome\" target=\"_blank\" rel=\"noopener\"><strong>p&aacute;gina de cursos do W3C Brasil<\/strong><\/a> possui ainda outras op&ccedil;&otilde;es de cursos em portugu&ecirc;s, que ensinam como construir um site acess&iacute;vel para todo mundo, cumprindo com os padr&otilde;es internacionais.<\/p><p class=\"wp-block-paragraph\">Os cursos s&atilde;o abertos para qualquer pessoa, incluindo estudantes, designers e demais profissionais.<\/p><p class=\"wp-block-paragraph\"><strong>Pr&oacute;s:<\/strong><\/p><ul class=\"wp-block-list\">\n<li>Gratuito.<\/li>\n\n\n\n<li>Sem pr&eacute;-requisitos.<\/li>\n\n\n\n<li>Vale certificado que pode ser inclu&iacute;do em seu curr&iacute;culo.&nbsp;<\/li>\n\n\n\n<li>O curso de introdu&ccedil;&atilde;o &eacute; dividido em t&oacute;picos espec&iacute;ficos, dos quais voc&ecirc; pode escolher o que desejar.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Contras<\/strong>:<\/p><ul class=\"wp-block-list\">\n<li>Acesso limitado a apenas alguns materiais do curso com a vers&atilde;o gratuita.<\/li>\n\n\n\n<li>Idioma apenas em ingl&ecirc;s no curso introdut&oacute;rio.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-2-coursera\"><strong>2. Coursera<\/strong><\/h3><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"444\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-52.jpeg\/w=1024,h=1024,fit=scale-down\" alt=\"P&aacute;gina do curso online da Universidade de Illinois sobre acessibilidade e design inclusivo oferecido no site da Coursera\" class=\"wp-image-47477\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-52.jpeg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-52.jpeg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-52.jpeg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-52.jpeg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">A Universidade de Illinois oferece um curso de <a href=\"https:\/\/www.coursera.org\/learn\/accessibility\" target=\"_blank\" rel=\"noopener\"><strong>Introdu&ccedil;&atilde;o &agrave; Acessibilidade e Design Inclusivo<\/strong><\/a> (em ingl&ecirc;s, com legendas). Seu conte&uacute;do inclui em detalhes os princ&iacute;pios centrais de acessibilidade web e design inclusivo.<\/p><p class=\"wp-block-paragraph\">Al&eacute;m disso, voc&ecirc; ainda vai aprender mais sobre TA e as diretrizes centrais na cria&ccedil;&atilde;o de um design universal.&nbsp;<\/p><p class=\"wp-block-paragraph\">Esse curso &eacute; indicado para iniciantes.&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>Pr&oacute;s:<\/strong><\/p><ul class=\"wp-block-list\">\n<li>Legendas em Portugu&ecirc;s, Espanhol, Franc&ecirc;s, Russo e Ingl&ecirc;s.<\/li>\n\n\n\n<li>Op&ccedil;&atilde;o de teste gratuito.<\/li>\n\n\n\n<li>Op&ccedil;&atilde;o de aux&iacute;lio financeiro para cursar.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Contras<\/strong>:<\/p><ul class=\"wp-block-list\">\n<li>O curso completo precisa ser pago.&nbsp;<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-3-udacity\"><strong>3. Udacity<\/strong><\/h3><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"491\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-53.jpeg\/w=1024,h=1024,fit=scale-down\" alt=\"P&aacute;gina do curso de acessibilidade web do Google oferecido no site da Udacity\" class=\"wp-image-47478\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-53.jpeg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-53.jpeg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-53.jpeg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2022\/05\/image-53.jpeg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p class=\"wp-block-paragraph\">O <a href=\"https:\/\/www.udacity.com\/course\/web-accessibility--ud891\" target=\"_blank\" rel=\"noopener\"><strong>curso de Acessibilidade Web do Google<\/strong><\/a> (em ingl&ecirc;s), dispon&iacute;vel no portal Udacity, oferece aulas mais t&eacute;cnicas sobre a constru&ccedil;&atilde;o de p&aacute;ginas que funcionem bem com recursos de tecnologia assistiva. Eles tamb&eacute;m t&ecirc;m aulas sobre o gerenciamento de focos de entrada.<\/p><p class=\"wp-block-paragraph\">Al&eacute;m disso, voc&ecirc; vai aprender mais sobre linguagens de marca&ccedil;&atilde;o. De todo modo, este curso exige certos n&iacute;veis de <a href=\"\/br\/tutoriais\/11-sites-aprender-como-programar-de-graca\/\"><strong>conhecimento em programa&ccedil;&atilde;o<\/strong><\/a>, incluindo HTML, CSS e JavaScript.&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>Pr&oacute;s:<\/strong><\/p><ul class=\"wp-block-list\">\n<li>Gratuito.<\/li>\n\n\n\n<li>Bom para pr&aacute;ticas mais t&eacute;cnicas.<\/li>\n\n\n\n<li>O curso mais aprofundado <a href=\"https:\/\/www.udacity.com\/course\/full-stack-web-developer-nanodegree--nd0044\" target=\"_blank\" rel=\"noopener\"><strong>Full-Stack Web Developer Nanodegree Program<\/strong><\/a> tamb&eacute;m est&aacute; dispon&iacute;vel.<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>Contras<\/strong>:<\/p><ul class=\"wp-block-list\">\n<li>Apenas para usu&aacute;rios avan&ccedil;ados.<\/li>\n\n\n\n<li>Idioma apenas em ingl&ecirc;s.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">O pr&oacute;prio <a href=\"https:\/\/www.google.com\/intl\/pt-BR\/accessibility\/\" target=\"_blank\" rel=\"noopener\"><strong>Google<\/strong><\/a> conta com uma p&aacute;gina completa sobre acessibilidade web, que inclui diversos materiais, como <a href=\"https:\/\/www.google.com\/intl\/pt-BR\/accessibility\/initiatives-research\/\" target=\"_blank\" rel=\"noopener\"><strong>Iniciativas e pesquisa<\/strong><\/a> sobre o tema.&nbsp;<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/br\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-32927\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2023\/02\/BR-Web-hosting_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusao\"><strong>Conclus&atilde;o<\/strong><\/h2><p class=\"wp-block-paragraph\">A acessibilidade web melhora a experi&ecirc;ncia do usu&aacute;rio no seu site. Muitas empresas e organiza&ccedil;&otilde;es j&aacute; implementaram pr&aacute;ticas de acessibilidade web devido a diversos benef&iacute;cios, que v&atilde;o al&eacute;m da inclusividade.<\/p><p class=\"wp-block-paragraph\">Afinal, sites acess&iacute;veis t&ecirc;m uma maior audi&ecirc;ncia e ranqueiam melhor nas p&aacute;ginas de resultados dos mecanismos de pesquisa (SERPs).<\/p><p class=\"wp-block-paragraph\">Lembrando tamb&eacute;m que a acessibilidade web &eacute; uma obriga&ccedil;&atilde;o legal.&nbsp;<\/p><p class=\"wp-block-paragraph\">Al&eacute;m de seguir as diretrizes oficiais do WCAG, &eacute; essencial avaliar e testar seu site para evitar problemas complexos. Voc&ecirc; pode utilizar ferramentas de an&aacute;lise de acessibilidade, como <strong>WAVE <\/strong>e <strong>WebAim<\/strong>, mas tamb&eacute;m pode fazer a verifica&ccedil;&atilde;o manual do seu site para saber se ele &eacute; acess&iacute;vel.&nbsp;<\/p><p class=\"wp-block-paragraph\">Para fazer isso, preste aten&ccedil;&atilde;o aos seguintes elementos:<\/p><ul class=\"wp-block-list\">\n<li><strong>Alt text <\/strong>&ndash; lembre-se de sempre incluir textos alternativos nas suas imagens.<\/li>\n\n\n\n<li><strong>Alternativas de &Aacute;udio e V&iacute;deo<\/strong> &ndash; inclua transcri&ccedil;&otilde;es textuais ou transcri&ccedil;&otilde;es de &aacute;udio em v&iacute;deos.&nbsp;<\/li>\n\n\n\n<li><strong>Navega&ccedil;&atilde;o<\/strong> &ndash; garanta que sua navega&ccedil;&atilde;o &eacute; simples e intuitiva.<\/li>\n\n\n\n<li><strong>Contraste de Cores <\/strong>&ndash; ofere&ccedil;a aos usu&aacute;rios algumas op&ccedil;&otilde;es para altera&ccedil;&atilde;o da combina&ccedil;&atilde;o de cores.&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>Formul&aacute;rios Acess&iacute;veis<\/strong> &ndash; insira instru&ccedil;&otilde;es claras e diretas em formul&aacute;rios de contato, al&eacute;m de incluir etiquetas em cada campo.<\/li>\n\n\n\n<li><strong>Conte&uacute;dos Amig&aacute;veis<\/strong> &ndash; evite conte&uacute;dos que se movam em alta velocidade, que contenham flashes ou fa&ccedil;am a tela piscar muito.&nbsp;<\/li>\n\n\n\n<li><strong>Texto<\/strong> &ndash; utilize fontes grandes no t&iacute;tulo das p&aacute;ginas, identifique os cabe&ccedil;alhos e habilite a op&ccedil;&atilde;o de dar zoom no texto.&nbsp;<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Adicionalmente, voc&ecirc; pode fazer algum curso online para aprender mais sobre acessibilidade web. Confira os conte&uacute;dos oficiais nacionais, al&eacute;m de verificar as op&ccedil;&otilde;es de cursos nas plataformas <strong>EdX<\/strong>, <strong>Coursera<\/strong>, <strong>Udemy<\/strong> e at&eacute; no <strong>Google<\/strong>.&nbsp;<\/p><p class=\"wp-block-paragraph\">Se voc&ecirc; tiver quest&otilde;es ou dicas, n&atilde;o hesite em comentar na sess&atilde;o de discuss&atilde;o abaixo. E n&atilde;o se esque&ccedil;a de utilizar uma <a href=\"https:\/\/www.hostinger.com\/br\/\"><strong>hospedagem de sites<\/strong><\/a> de qualidade para garantir o melhor desempenho poss&iacute;vel para seu site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A acessibilidade web ajuda pessoas com defici&ecirc;ncia a navegarem por um site e a acessarem conte&uacute;dos atrav&eacute;s de ferramentas espec&iacute;ficas, como um leitor de tela. Ao tornar seu site acess&iacute;vel, voc&ecirc; permite que mais pessoas possam interagir com ele e ter uma boa experi&ecirc;ncia, al&eacute;m de gerar mais tr&aacute;fego para as suas p&aacute;ginas. Infelizmente, apesar [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/acessibilidade-web\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":305,"featured_media":32031,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"","rank_math_description":"A acessibilidade web \u00e9 um fator cada dia mais importante. Ter um design inclusivo \u00e9 um requisito legal e uma alavanca para seu tr\u00e1fego!","rank_math_focus_keyword":"","footnotes":""},"categories":[8076,8026],"tags":[7388],"class_list":["post-27604","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-de-sites","category-sites","tag-acessibilidade"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/web-accessibility\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/acessibilidade-web\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/accesibilidad-web\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/web-accessibility\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/web-accessibility\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/web-accessibility\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/web-accessibility\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/web-accessibility\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/web-accessibility\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/web-accessibility\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/accesibilidad-web\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/accesibilidad-web\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/accesibilidad-web\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/acessibilidade-web\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/27604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/305"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=27604"}],"version-history":[{"count":6,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/27604\/revisions"}],"predecessor-version":[{"id":47479,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/27604\/revisions\/47479"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media\/32031"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=27604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=27604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=27604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}