{"id":57349,"date":"2024-02-14T07:00:30","date_gmt":"2024-02-14T15:00:30","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=57349"},"modified":"2025-05-26T12:46:37","modified_gmt":"2025-05-26T19:46:37","slug":"torne-seu-site-acessivel","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/","title":{"rendered":"Como Projetar um Site Acess\u00edvel (Um Guia Completo)"},"content":{"rendered":"\n<p>Se voc\u00ea administra <a href=\"https:\/\/www.dreamhost.com\/blog\/solutions-to-create-scalable-ecommerce-site\/\" target=\"_blank\" rel=\"noopener\">um site de e-commerce<\/a> ou um neg\u00f3cio de desenvolvimento web, voc\u00ea quer atrair o m\u00e1ximo de visitantes poss\u00edvel para o seu site. E isso significa garantir que o maior n\u00famero poss\u00edvel de pessoas possa usar seu site\u2013priorizando a acessibilidade do site.<\/p>\n\n\n\n<p>A acessibilidade do site envolve garantir que seu site seja utiliz\u00e1vel por todos, incluindo pessoas com defici\u00eancias e impedimentos. Existem uma variedade de recursos, ferramentas e dicas que voc\u00ea pode aproveitar para tornar a cria\u00e7\u00e3o de um <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-design-lgbtq-inclusive-website\/\" target=\"_blank\" rel=\"noopener\">site inclusivo<\/a> muito mais f\u00e1cil.<\/p>\n\n\n\n<p>Neste post, vamos cobrir tudo o que voc\u00ea precisa saber sobre acessibilidade de sites: por que \u00e9 t\u00e3o importante, como voc\u00ea pode verificar os n\u00edveis de acessibilidade atuais do seu site (e as barreiras) e um guia completo para projetar p\u00e1ginas web altamente acess\u00edveis. Vamos come\u00e7ar!<\/p>\n\n\n\n<h2 id=\"definition\" class=\"wp-block-heading\">O Que \u00e9 Acessibilidade de Sites?<\/h2>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Acessibilidade<\/h3>\n    <p>Acessibilidade \u00e9 a pr\u00e1tica de tornar um site acess\u00edvel para o maior n\u00famero poss\u00edvel de usu\u00e1rios. Sites acess\u00edveis podem ser visualizados por qualquer pessoa em qualquer dispositivo.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/accessibility\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>A acessibilidade do site refere-se ao grau em que um site pode ser utilizado por indiv\u00edduos com defici\u00eancias. Isso pode incluir pessoas que s\u00e3o cegas ou t\u00eam baixa vis\u00e3o, aquelas que s\u00e3o surdas ou t\u00eam dificuldade de audi\u00e7\u00e3o, pessoas com defici\u00eancias de mobilidade, defici\u00eancias cognitivas e outras defici\u00eancias. Envolve projetar seu site de modo que seu conte\u00fado esteja dispon\u00edvel e funcional para todos, incluindo aqueles que possam usar tecnologias assistivas como leitores de tela, software de reconhecimento de voz ou dispositivos de entrada especializados.<\/p>\n\n\n\n<p>Esta ideia vai al\u00e9m de apenas ajudar indiv\u00edduos. Trata-se de abra\u00e7ar a diversidade dos usu\u00e1rios da web e reconhecer a import\u00e2ncia do acesso igualit\u00e1rio na internet. Ao priorizar a acessibilidade, voc\u00ea n\u00e3o est\u00e1 apenas expandindo seu p\u00fablico, mas tamb\u00e9m promovendo a inclus\u00e3o e a responsabilidade social.<\/p>\n\n\n\n<p>A acessibilidade do site tamb\u00e9m est\u00e1 alinhada com v\u00e1rias normas legais, como a <a href=\"https:\/\/www.ada.gov\/\" target=\"_blank\" rel=\"noopener\">Lei dos Americanos com Defici\u00eancias (ADA)<\/a> nos Estados Unidos e legisla\u00e7\u00f5es semelhantes globalmente. Essas leis exigem que certos sites, especialmente os de institui\u00e7\u00f5es p\u00fablicas e empresas, sejam acess\u00edveis a pessoas com defici\u00eancias para evitar discrimina\u00e7\u00e3o.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Quem Gerencia e Aplica as Regras e Leis de Acessibilidade de Sites?<\/h3>\n\n\n\n<p>A responsabilidade por gerenciar e aplicar as regras e leis de acessibilidade de sites \u00e9 compartilhada por v\u00e1rias organiza\u00e7\u00f5es governamentais e n\u00e3o governamentais, cada uma desempenhando um papel importante na defini\u00e7\u00e3o e manuten\u00e7\u00e3o dos padr\u00f5es de acessibilidade que abordaremos mais adiante neste artigo.<b><\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Governos e ag\u00eancias governamentais. <\/b>Nos Estados Unidos, o Departamento de Justi\u00e7a (DOJ) \u00e9 principalmente respons\u00e1vel por fazer cumprir a ADA, que inclui regras para acessibilidade de sites. Outros pa\u00edses t\u00eam seus pr\u00f3prios \u00f3rg\u00e3os governamentais que supervisionam leis e regulamentos semelhantes.<\/li>\n\n\n\n<li><b>Organiza\u00e7\u00f5es internacionais de padr\u00f5es. <\/b>O Cons\u00f3rcio World Wide Web (W3C) desenvolveu as Diretrizes de Acessibilidade ao Conte\u00fado na Web (WCAG), um conjunto de padr\u00f5es internacionalmente reconhecidos que descrevem como tornar o conte\u00fado da web mais acess\u00edvel para pessoas com defici\u00eancia. Essas diretrizes s\u00e3o amplamente aceitas como o padr\u00e3o de refer\u00eancia para acessibilidade na web e s\u00e3o frequentemente citadas em requisitos legais.<\/li>\n\n\n\n<li><b>Grupos de advocacia e ONGs. <\/b>Organiza\u00e7\u00f5es sem fins lucrativos e grupos de advocacia promovem ativamente a acessibilidade de sites, muitas vezes oferecendo recursos, realizando auditorias e, \u00e0s vezes, impulsionando a\u00e7\u00f5es legais contra sites que n\u00e3o est\u00e3o em conformidade.<\/li>\n\n\n\n<li><b>Sistema jur\u00eddico. <\/b>O sistema jur\u00eddico muitas vezes se envolve em casos de n\u00e3o conformidade com as leis de acessibilidade na web. A\u00e7\u00f5es judiciais e processos legais podem ser movidos contra organiza\u00e7\u00f5es que n\u00e3o atendem aos padr\u00f5es exigidos, especialmente sob a ADA. Os processos judiciais podem estabelecer precedentes importantes que criam futuros padr\u00f5es para a aplica\u00e7\u00e3o das regras de acessibilidade.<\/li>\n\n\n<\/ul>\n\n\n\n<p>\u00c9 importante notar que a paisagem da acessibilidade na web est\u00e1 em constante evolu\u00e7\u00e3o. Todos temos uma responsabilidade compartilhada de nos mantermos atualizados com as \u00faltimas not\u00edcias, desenvolvimentos legais e outras mudan\u00e7as que impactam os administradores de sites.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h3 class=\"wp-block-heading\">Quais s\u00e3o os Padr\u00f5es de Acessibilidade na Web?<\/h3>\n\n\n\n<p>De acordo com a WCAG, existem quatro princ\u00edpios que voc\u00ea deve seguir ao criar um site acess\u00edvel. Eles dizem que seu site deve ser:<b><\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Percept\u00edvel. <\/b>Os visitantes devem ser capazes de perceber ou entender e estar cientes do conte\u00fado e das informa\u00e7\u00f5es em seu site. Como, por exemplo, ter acesso a textos alternativos.<\/li>\n\n\n\n<li><b>Oper\u00e1vel. <\/b>Os visitantes devem ser capazes de usar todas as partes do seu site sem interrup\u00e7\u00f5es. Um menu de navega\u00e7\u00e3o bem mapeado e organizado pode alcan\u00e7ar isso.<\/li>\n\n\n\n<li><b>Compreens\u00edvel. <\/b>Todo o conte\u00fado do seu site, seja ele escrito ou apresentado de outra forma, deve ser f\u00e1cil de entender. Linguagem clara e concisa e p\u00e1ginas limpas e desobstru\u00eddas podem ser usadas para comunicar informa\u00e7\u00f5es.<\/li>\n\n\n\n<li><b>Robusto. <\/b>A base do seu site, como seu c\u00f3digo HTML, deve ser facilmente lida e interpretada por todos os visitantes, incluindo tecnologias assistivas como leitores de tela. Outro exemplo disso \u00e9 otimizar seu site para v\u00e1rios dispositivos, como telefones e tablets.<\/li>\n\n\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1700\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WCAG-Standards-For-Website-Accessibility.jpg\" alt=\"Exemplos mostrando percept\u00edvel (uma imagem com texto alternativo), oper\u00e1vel (um menu suspenso detalhado), compreens\u00edvel (uma inten\u00e7\u00e3o e prop\u00f3sito claros em uma defini\u00e7\u00e3o) e robusto (uma visualiza\u00e7\u00e3o m\u00f3vel mostrando acessibilidade multi-dispositivo)\" class=\"wp-image-43177 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WCAG-Standards-For-Website-Accessibility.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WCAG-Standards-For-Website-Accessibility-282x300.jpg 282w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WCAG-Standards-For-Website-Accessibility-964x1024.jpg 964w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WCAG-Standards-For-Website-Accessibility-768x816.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WCAG-Standards-For-Website-Accessibility-1446x1536.jpg 1446w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WCAG-Standards-For-Website-Accessibility-600x638.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WCAG-Standards-For-Website-Accessibility-1200x1275.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WCAG-Standards-For-Website-Accessibility-730x776.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WCAG-Standards-For-Website-Accessibility-1460x1551.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WCAG-Standards-For-Website-Accessibility-784x833.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WCAG-Standards-For-Website-Accessibility-1568x1666.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WCAG-Standards-For-Website-Accessibility-877x932.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1700;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Exemplos de Barreiras de Acessibilidade Online<\/h3>\n\n\n\n<p>Estas barreiras comuns podem impedir que usu\u00e1rios com defici\u00eancias acessem ou interajam com um site. Aqui est\u00e3o alguns exemplos de barreiras e como elas impactam os usu\u00e1rios.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Falta de texto alternativo para imagens.<\/b> Quando imagens em um site n\u00e3o possuem texto alternativo (alt text), leitores de tela usados por usu\u00e1rios com defici\u00eancia visual n\u00e3o conseguem interpretar sobre o que \u00e9 a imagem. Isso pode levar a uma falta de compreens\u00e3o ou a perda de informa\u00e7\u00f5es cruciais.<\/li>\n\n\n\n<li><b>Navega\u00e7\u00e3o inadequada por teclado.<\/b> Muitos usu\u00e1rios com defici\u00eancias motoras dependem da navega\u00e7\u00e3o por teclado em vez de um mouse. Sites que n\u00e3o suportam navega\u00e7\u00e3o por teclado ou possuem layouts complexos podem ser inacess\u00edveis para esses usu\u00e1rios.<\/li>\n\n\n\n<li><b>Contraste de cores pobre.<\/b> O contraste insuficiente entre as cores do texto e do fundo pode tornar o conte\u00fado dif\u00edcil de ler para usu\u00e1rios com defici\u00eancias visuais, incluindo daltonismo. Isso pode tornar os textos praticamente invis\u00edveis para alguns usu\u00e1rios.<\/li>\n\n\n\n<li><b>Texto de link n\u00e3o descritivo.<\/b> Usar frases vagas como &#8220;clique aqui&#8221; para o texto do link n\u00e3o fornece informa\u00e7\u00f5es suficientes sobre o destino do link, especialmente para usu\u00e1rios de leitores de tela que podem navegar pelos links fora de contexto.<\/li>\n\n\n\n<li><b>Falta de legendas ou transcri\u00e7\u00f5es para conte\u00fado de \u00e1udio e v\u00eddeo.<\/b> Usu\u00e1rios surdos ou com defici\u00eancia auditiva dependem de legendas ou transcri\u00e7\u00f5es para conte\u00fados de \u00e1udio e v\u00eddeo. Sem esses recursos, eles podem perder informa\u00e7\u00f5es cruciais.<\/li>\n\n\n\n<li><b>Navega\u00e7\u00e3o complexa e inconsistente.<\/b> Uma navega\u00e7\u00e3o de site inconsistente ou excessivamente complexa pode ser confusa, especialmente para usu\u00e1rios com defici\u00eancias cognitivas. Uma navega\u00e7\u00e3o simples, previs\u00edvel e consistente ajuda na melhor compreens\u00e3o e facilidade de uso.<\/li>\n\n\n\n<li><b>Conte\u00fado e intera\u00e7\u00f5es com limite de tempo.<\/b> Conte\u00fado que desaparece ap\u00f3s um determinado tempo ou que requer intera\u00e7\u00e3o r\u00e1pida pode ser uma barreira para usu\u00e1rios com defici\u00eancias cognitivas ou motoras que podem precisar de mais tempo para ler ou interagir com o conte\u00fado.<\/li>\n\n\n\n<li><b>Uso de jarg\u00e3o ou linguagem complexa.<\/b> Linguagem excessivamente complexa ou jarg\u00e3o do setor pode ser uma barreira significativa para usu\u00e1rios com defici\u00eancias cognitivas ou aqueles que n\u00e3o s\u00e3o falantes nativos da l\u00edngua do site.<\/li>\n\n\n<\/ul>\n\n\n\n<h2 id=\"why\" class=\"wp-block-heading\">Por que voc\u00ea deve priorizar a acessibilidade do site<\/h2>\n\n\n\n<p>A Organiza\u00e7\u00e3o Mundial da Sa\u00fade (OMS) <a href=\"https:\/\/monsido.com\/web-accessibility\" target=\"_blank\" rel=\"noopener\">estima<\/a> que 15% da popula\u00e7\u00e3o mundial \u2014 aproximadamente um bilh\u00e3o de pessoas \u2014 vivem com alguma defici\u00eancia. As taxas de defici\u00eancia est\u00e3o aumentando \u00e0 medida que a expectativa de vida cresce, fazendo com que as condi\u00e7\u00f5es cr\u00f4nicas de sa\u00fade tamb\u00e9m aumentem. Pessoas com defici\u00eancia merecem poder acessar as mesmas informa\u00e7\u00f5es que aqueles sem defici\u00eancia, e \u00e9 por isso que \u00e9 t\u00e3o importante que todos n\u00f3s trabalhemos juntos para tornar o conte\u00fado digital acess\u00edvel e trabalhar para remover barreiras \u00e0 acessibilidade online.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1185\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Removing-Accessibility-Barriers.jpg\" alt=\"Removendo barreiras de acessibilidade usando: zoom, cor, fonte, leitores, legendas e texto alternativo \" class=\"wp-image-43178 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Removing-Accessibility-Barriers.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Removing-Accessibility-Barriers-300x222.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Removing-Accessibility-Barriers-1024x758.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Removing-Accessibility-Barriers-768x569.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Removing-Accessibility-Barriers-1536x1138.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Removing-Accessibility-Barriers-600x444.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Removing-Accessibility-Barriers-1200x889.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Removing-Accessibility-Barriers-730x541.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Removing-Accessibility-Barriers-1460x1081.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Removing-Accessibility-Barriers-784x581.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Removing-Accessibility-Barriers-1568x1161.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Removing-Accessibility-Barriers-877x650.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1185;\" \/><\/figure>\n\n\n\n<p>Como propriet\u00e1rio de um site, \u00e9 importante garantir que voc\u00ea n\u00e3o esteja excluindo pessoas com defici\u00eancia \u2014 mesmo que inadvertidamente. A ADA \u00e9 uma lei de direitos civis que pro\u00edbe empresas e organiza\u00e7\u00f5es de discriminar com base em defici\u00eancia, ent\u00e3o se o seu site n\u00e3o for acess\u00edvel para todos, isso pode coloc\u00e1-lo em uma situa\u00e7\u00e3o legal complicada! Mas a conformidade legal n\u00e3o \u00e9 a \u00fanica raz\u00e3o pela qual a acessibilidade deve ser uma prioridade m\u00e1xima ao projetar seu site.<\/p>\n\n\n\n<p>Tornar seu site acess\u00edvel envia uma mensagem de que sua empresa possui valores inclusivos, e estudos mostraram que empresas mais diversas e inclusivas t\u00eam at\u00e9 35% mais chances de ter retornos financeiros acima da m\u00e9dia do seu setor.<\/p>\n\n\n\n<p>E enquanto o design acess\u00edvel do site permite que pessoas com defici\u00eancias naveguem facilmente pelo seu site, ele inclui princ\u00edpios de design que podem realmente melhorar a experi\u00eancia do usu\u00e1rio para <i>todos<\/i> os visitantes do seu site.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Experi\u00eancia do Usu\u00e1rio (UX)<\/h3>\n    <p>Experi\u00eancia do Usu\u00e1rio (UX) refere-se a como os visitantes online interagem com um site. Os usu\u00e1rios frequentemente avaliam sua experi\u00eancia virtual com base na usabilidade e no design do site, bem como na impress\u00e3o geral do seu conte\u00fado.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/seo\/user-experience-ux\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Criar um site acess\u00edvel n\u00e3o precisa ser dif\u00edcil ou demorado. Ao seguir apenas alguns passos simples, voc\u00ea pode melhorar significativamente a acessibilidade do seu site. Desta forma, voc\u00ea pode ampliar seu p\u00fablico enquanto tamb\u00e9m contribui para os esfor\u00e7os de acessibilidade online. Voc\u00ea at\u00e9 pode inspirar outros a fazer o mesmo!<\/p>\n\n\n\n<h2 id=\"check\" class=\"wp-block-heading\">Como Verificar a Acessibilidade Web do Seu Site<\/h2>\n\n\n\n<p>Antes de entrarmos em dicas e etapas para projetar um site acess\u00edvel, \u00e9 uma boa ideia come\u00e7ar sabendo onde seu site est\u00e1 atualmente\u2013como ele se compara aos padr\u00f5es de acessibilidade e melhores pr\u00e1ticas, e quais barreiras de acessibilidade voc\u00ea pode precisar superar com mudan\u00e7as ou redesigns.<\/p>\n\n\n\n<p>Existem muitas maneiras diferentes de verificar a acessibilidade do seu site. Vamos explorar algumas das op\u00e7\u00f5es mais f\u00e1ceis e populares.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilize um Verificador de Acessibilidade Online<\/h3>\n\n\n\n<p>Uma das maneiras mais r\u00e1pidas e f\u00e1ceis de verificar a acessibilidade do seu site \u00e9 usando um verificador de acessibilidade online, como o <a href=\"https:\/\/wave.webaim.org\/\" target=\"_blank\" rel=\"noopener\">WAVE Web Accessibility Evaluation Tools<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1089\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools.jpg\" alt=\"captura de tela da p\u00e1gina inicial do WAVE mostrando v\u00e1rias ferramentas de avalia\u00e7\u00e3o de acessibilidade web WAVE que podem ser acessadas\" class=\"wp-image-43179 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-300x204.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-1024x697.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-768x523.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-1536x1045.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-600x408.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-1200x817.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-730x497.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-1460x994.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-784x534.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-1568x1067.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/WAVE-Web-Accessibility-Evaluation-Tools-877x597.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1089;\" \/><\/figure>\n\n\n\n<p>WAVE \u00e9 um conjunto de ferramentas de avalia\u00e7\u00e3o que voc\u00ea pode usar para avaliar suas p\u00e1ginas web e conte\u00fado e torn\u00e1-los mais acess\u00edveis para indiv\u00edduos com defici\u00eancias. As ferramentas WAVE verificam a conformidade com padr\u00f5es de acessibilidade, como o WCAG, mas tamb\u00e9m podem facilitar revis\u00f5es manuais humanas do seu conte\u00fado, se voc\u00ea desejar ir al\u00e9m.<\/p>\n\n\n\n<p>Para usar o WAVE, basta inserir o URL da p\u00e1gina web que deseja avaliar no campo &#8220;Endere\u00e7o da p\u00e1gina web&#8221; e clicar no bot\u00e3o de seta. O WAVE ir\u00e1 ent\u00e3o gerar um relat\u00f3rio que mostra quaisquer erros ou potenciais problemas de acessibilidade nessa p\u00e1gina. Voc\u00ea tamb\u00e9m pode instalar as extens\u00f5es de navegador do WAVE para Chrome, Firefox e Edge para testar a acessibilidade diretamente dentro do seu navegador web.<\/p>\n\n\n\n<p>Al\u00e9m do relat\u00f3rio de erro, o WAVE fornece feedback sobre como voc\u00ea pode melhorar suas p\u00e1ginas para aumentar a acessibilidade delas. Por exemplo, ele pode indicar imagens que est\u00e3o faltando texto alternativo ou elementos estruturais que est\u00e3o organizados de uma forma que pode confundir os visitantes do site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Instale uma Extens\u00e3o de Navegador para Acessibilidade<\/h3>\n\n\n\n<p>WAVE n\u00e3o \u00e9 o \u00fanico plugin de navegador que verifica automaticamente os sites quanto a problemas de acessibilidade \u2014 existem muitos outros que voc\u00ea pode baixar e usar. Uma escolha popular para Chrome e Firefox \u00e9 a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\" target=\"_blank\" rel=\"noopener\">extens\u00e3o de Aplica\u00e7\u00f5es Ricas de Internet Acess\u00edveis (ARIA)<\/a>.<\/p>\n\n\n\n<p>A extens\u00e3o ARIA DevTools \u00e9 um recurso de acessibilidade gratuito e de c\u00f3digo aberto que permite aos usu\u00e1rios personalizar a maneira como interagem com o conte\u00fado da web. A ARIA \u00e9 projetada para melhorar a usabilidade de p\u00e1ginas da web para pessoas com defici\u00eancias e torn\u00e1-las mais acess\u00edveis a tecnologias assistivas, como leitores de tela.<\/p>\n\n\n\n<p>ARIA faz isso fornecendo um conjunto de atributos que voc\u00ea pode usar para melhorar a acessibilidade dos elementos HTML do seu site. Por exemplo, o atributo \u201caria-label\u201d pode servir como um marcador para um elemento que n\u00e3o \u00e9 acess\u00edvel de outra forma, enquanto o atributo \u2018aria-describedby\u2019 pode ser usado para fornecer uma explica\u00e7\u00e3o.<\/p>\n\n\n\n<p>Para usar a extens\u00e3o ARIA, instale-a a partir do mercado de extens\u00f5es do seu navegador. Voc\u00ea pode ter que ativ\u00e1-la antes que comece a funcionar.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"710\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-chrome-aria-dev-tools.jpg\" alt=\"screenshot da extens\u00e3o AIRA DevTools que pode ser adicionada ao Chrome\" class=\"wp-image-43180 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-chrome-aria-dev-tools.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-chrome-aria-dev-tools-300x133.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-chrome-aria-dev-tools-1024x454.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-chrome-aria-dev-tools-768x341.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-chrome-aria-dev-tools-1536x682.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-chrome-aria-dev-tools-600x266.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-chrome-aria-dev-tools-1200x533.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-chrome-aria-dev-tools-730x324.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-chrome-aria-dev-tools-1460x648.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-chrome-aria-dev-tools-784x348.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-chrome-aria-dev-tools-1568x696.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-chrome-aria-dev-tools-877x389.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/710;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Verificar Manualmente os Problemas Comuns de Acessibilidade<\/h3>\n\n\n\n<p>Outra op\u00e7\u00e3o para verificar problemas de acessibilidade \u00e9 usar uma abordagem manual. Claro, isso pode ser mais demorado do que usar ferramentas e extens\u00f5es online.<\/p>\n\n\n\n<p>Contudo, se voc\u00ea realizar uma verifica\u00e7\u00e3o manual, ela pode ser mais completa do que algumas ferramentas digitais. Al\u00e9m disso, este m\u00e9todo \u00e9 gratuito e dispon\u00edvel para todos os propriet\u00e1rios de sites.<\/p>\n\n\n\n<p>Se voc\u00ea decidir procurar problemas de acessibilidade manualmente, pode querer usar uma lista de verifica\u00e7\u00e3o para come\u00e7ar e ajudar a garantir que seja o mais completo poss\u00edvel. A WebAIM oferece uma <a href=\"https:\/\/webaim.org\/standards\/wcag\/checklist\" target=\"_blank\" rel=\"noopener\">lista de verifica\u00e7\u00e3o completa da WCAG 2<\/a> com itens como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Todos os conte\u00fados s\u00e3o acess\u00edveis a todos, incluindo pessoas com defici\u00eancia.<\/li>\n\n\n\n<li>Todas as imagens est\u00e3o devidamente etiquetadas com texto alternativo.<\/li>\n\n\n\n<li>O website \u00e9 naveg\u00e1vel utilizando apenas um teclado.<\/li>\n\n\n\n<li>Todos os conte\u00fados de v\u00eddeo ou \u00e1udio no site incluem transcri\u00e7\u00f5es ou legendas.<\/li>\n\n\n\n<li>O website est\u00e1 livre de contrastes de cores que poderiam dificultar a leitura.<\/li>\n\n\n\n<li>O conte\u00fado pode ser interpretado por uma grande variedade de agentes de usu\u00e1rio, incluindo tecnologias assistivas.<\/li>\n\n\n\n<li>O conte\u00fado n\u00e3o requer um tipo de entrada espec\u00edfico, como apenas toque ou apenas teclado, mas suporta alternativas (como usar um teclado em um dispositivo m\u00f3vel).<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Contrate um Especialista em Acessibilidade Web para Auditar seu Site<\/h3>\n\n\n\n<p>Se voc\u00ea possui os recursos, uma quarta op\u00e7\u00e3o \u00e9 contratar um especialista para auditar seu site. Esta \u00e9 frequentemente a melhor maneira de obter a revis\u00e3o mais abrangente da acessibilidade do seu site, tornando-a uma escolha especialmente boa para quem deseja fazer da acessibilidade um valor central do seu <a href=\"https:\/\/www.dreamhost.com\/blog\/google-workspace-business-benefits\/\" target=\"_blank\" rel=\"noopener\">neg\u00f3cio online<\/a>.<\/p>\n\n\n\n<p>Na DreamHost, n\u00f3s oferecemos <a href=\"https:\/\/www.dreamhost.com\/pt\/servicos-profissionais\/\" target=\"_blank\" rel=\"noopener\">Pro Services<\/a> que incluem <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/tendencias-de-design-web-do-wordpress\/\" target=\"_blank\" rel=\"noopener\">web design<\/a>, gerenciamento de sites e mais, podendo incluir a identifica\u00e7\u00e3o e corre\u00e7\u00e3o de quaisquer problemas de acessibilidade no seu site.<\/p>\n\n\n\n<p>Nossa equipe de especialistas avaliar\u00e1 cuidadosamente suas p\u00e1ginas da web e fornecer\u00e1 solu\u00e7\u00f5es de acessibilidade para quaisquer barreiras identificadas. Entre em contato conosco hoje para saber mais sobre os Servi\u00e7os Pro ou para <a href=\"https:\/\/calendly.com\/dh-pro-services\/pro-service-consultation?utm_medium=web&amp;utm_campaign=overview&amp;utm_content=cta-body\" target=\"_blank\" rel=\"noopener\">agendar uma consulta gratuita<\/a>.<\/p>\n\n\n\n<h2 id=\"design\" class=\"wp-block-heading\">Como Projetar um Site Acess\u00edvel (Um Guia Completo)<\/h2>\n\n\n\n<p>Agora \u00e9 hora da parte divertida: projetar e construir seu site para que todos possam us\u00e1-lo e navegar com facilidade. Come\u00e7ar a jornada de acessibilidade do seu site \u00e9 empolgante, e os passos abaixo ir\u00e3o gui\u00e1-lo pelo processo de design e ajudar a garantir que seu site atenda aos requisitos legais e padr\u00f5es t\u00e9cnicos para ser acess\u00edvel a todos os usu\u00e1rios. Vamos mergulhar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Certifique-se de que seu site permite navega\u00e7\u00e3o por teclado<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1700\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website.jpg\" alt=\"Uma lista dos atalhos de teclado mais comuns como enter para seguir um link, esc para parar uma a\u00e7\u00e3o e as setas para navegar entre itens em um formul\u00e1rio\" class=\"wp-image-43181 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-282x300.jpg 282w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-964x1024.jpg 964w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-768x816.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-1446x1536.jpg 1446w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-600x638.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-1200x1275.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-730x776.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-1460x1551.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-784x833.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-1568x1666.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Most-Common-Keyboard-Shortcuts-On-A-Website-877x932.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1700;\" \/><\/figure>\n\n\n\n<p>A navega\u00e7\u00e3o por teclado \u00e9 um pilar fundamental da acessibilidade de sites. Muitos usu\u00e1rios, especialmente aqueles com defici\u00eancias motoras, dependem de um teclado em vez de um mouse para navegar pelos sites. Garantir que seu site suporte navega\u00e7\u00e3o por teclado torna-o acess\u00edvel a uma gama mais ampla de usu\u00e1rios, incluindo aqueles que dependem de tecnologias assistivas.<\/p>\n\n\n\n<p><b>Melhores pr\u00e1ticas:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Certifique-se de que a ordem das abas em seu site seja l\u00f3gica. Isso significa que, \u00e0 medida que os usu\u00e1rios pressionam a tecla Tab, o foco deve mover-se pelos elementos interativos em uma ordem que fa\u00e7a sentido, seguindo tipicamente o layout visual da p\u00e1gina.<\/li>\n\n\n\n<li>Quando os usu\u00e1rios navegam usando um teclado, tenha indicadores visuais claros mostrando qual elemento est\u00e1 atualmente focado. Isso pode ser uma borda, uma mudan\u00e7a de cor ou outra mudan\u00e7a de estilo not\u00e1vel.<\/li>\n\n\n\n<li>Inclua um link &#8220;Pular para o Conte\u00fado Principal&#8221; no topo de cada p\u00e1gina. Isso permite que usu\u00e1rios que dependem de teclados ignorem links de navega\u00e7\u00e3o repetitivos e acessem diretamente o conte\u00fado principal.<\/li>\n\n\n\n<li>Se o seu site usa menus suspensos, certifique-se de que eles possam ser navegados e ativados usando comandos de teclado. Isso inclui ser capaz de expandir e contrair os menus e selecionar itens dentro deles.<\/li>\n\n\n\n<li>Implementar atalhos de teclado personalizados pode melhorar a usabilidade, mas tenha cuidado para n\u00e3o conflitar com atalhos existentes do navegador ou leitor de tela. Documente claramente os atalhos personalizados para os usu\u00e1rios.<\/li>\n\n\n\n<li>Certifique-se de que os usu\u00e1rios de teclado n\u00e3o fiquem presos em qualquer parte do seu site. Eles devem ser capazes de navegar para e de todos os elementos usando apenas o teclado.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Torne o Conte\u00fado F\u00e1cil de Ver e Ouvir<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1089\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-contrast-checker.jpg\" alt=\"captura de tela da ferramenta Contrast Checker mostrando as op\u00e7\u00f5es de menu suspenso para verificar cor sobre cor\" class=\"wp-image-43182 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-contrast-checker.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-contrast-checker-300x204.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-contrast-checker-1024x697.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-contrast-checker-768x523.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/accessible-website-contrast-checker-1536x1045.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-contrast-checker-600x408.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-contrast-checker-1200x817.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-contrast-checker-730x497.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-contrast-checker-1460x994.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-contrast-checker-784x534.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-contrast-checker-1568x1067.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/accessible-website-contrast-checker-877x597.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1089;\" \/><\/figure>\n\n\n\n<p>Garantir que o conte\u00fado do seu site seja f\u00e1cil de ver e ouvir \u00e9 essencial para torn\u00e1-lo acess\u00edvel a usu\u00e1rios com defici\u00eancias visuais e auditivas. Isso inclui indiv\u00edduos que s\u00e3o cegos, t\u00eam baixa vis\u00e3o, s\u00e3o dalt\u00f4nicos ou s\u00e3o surdos ou t\u00eam dificuldade de audi\u00e7\u00e3o.<\/p>\n\n\n\n<p><b>Melhores pr\u00e1ticas:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilize combina\u00e7\u00f5es de cores de alto contraste entre texto e fundos para garantir que o texto seja facilmente leg\u00edvel. Evite usar cores que entrem em conflito ou que se misturem demais. Al\u00e9m disso, use tamanhos e estilos de fonte leg\u00edveis.<\/li>\n\n\n\n<li>Utilize uma ferramenta online como <a href=\"https:\/\/contrastchecker.com\/\" target=\"_blank\" rel=\"noopener\">Contrast Checker<\/a> para ajud\u00e1-lo a escolher uma paleta de cores de alto contraste para uma boa acessibilidade visual.<\/li>\n\n\n\n<li>Certifique-se de que as informa\u00e7\u00f5es transmitidas com cores tamb\u00e9m estejam dispon\u00edveis sem cores, como por meio de etiquetas de texto ou padr\u00f5es. Isso \u00e9 particularmente importante para usu\u00e1rios que s\u00e3o dalt\u00f4nicos.<\/li>\n\n\n\n<li>Permita que os usu\u00e1rios ajustem os tamanhos de texto sem comprometer o layout do seu site.<\/li>\n\n\n\n<li>Para usu\u00e1rios com defici\u00eancia visual, garanta que qualquer conte\u00fado de \u00e1udio seja claro, bem ritmado e descritivo o suficiente para transmitir todas as informa\u00e7\u00f5es necess\u00e1rias.<\/li>\n\n\n\n<li>Utilize pap\u00e9is e pontos de refer\u00eancia ARIA (Aplica\u00e7\u00f5es de Internet Rica Acess\u00edveis). Eles podem ajudar usu\u00e1rios de leitores de tela a entender o layout e navegar pelo conte\u00fado de forma mais eficaz, especialmente em aplica\u00e7\u00f5es web complexas.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Forne\u00e7a Alternativas Textuais<\/h3>\n\n\n\n<p>Alternativas de texto tornam o conte\u00fado n\u00e3o textual do seu site acess\u00edvel para pessoas com defici\u00eancias visuais e auditivas. Essas alternativas fornecem um equivalente textual das informa\u00e7\u00f5es transmitidas por imagens, v\u00eddeos e arquivos de \u00e1udio, garantindo que todos os usu\u00e1rios, incluindo aqueles que usam leitores de tela ou outras tecnologias assistivas, tenham acesso \u00e0s mesmas informa\u00e7\u00f5es.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1185\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Text-Alternatives.jpg\" alt=\"Forne\u00e7a alternativas de texto para ajudar leitores de tela, motores de busca e imagens quebradas a terem clareza\" class=\"wp-image-43183 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Text-Alternatives.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Text-Alternatives-300x222.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Text-Alternatives-1024x758.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Text-Alternatives-768x569.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Text-Alternatives-1536x1138.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Text-Alternatives-600x444.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Text-Alternatives-1200x889.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Text-Alternatives-730x541.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Text-Alternatives-1460x1081.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Text-Alternatives-784x581.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Text-Alternatives-1568x1161.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Text-Alternatives-877x650.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1185;\" \/><\/figure>\n\n\n\n<p>Outro benef\u00edcio \u00e9 que o texto alternativo pode ajudar a otimizar seu site para ser mais vis\u00edvel nos <a href=\"https:\/\/www.dreamhost.com\/blog\/seo-tools-to-optimize-website-success\/\" target=\"_blank\" rel=\"noopener\">motores de busca<\/a>. Voc\u00ea pode us\u00e1-lo para incorporar termos-chave frequentemente pesquisados que s\u00e3o relevantes para suas imagens.<\/p>\n\n\n\n<p><b>Melhores pr\u00e1ticas:&nbsp;<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cada imagem em seu site deve ter um texto alt correspondente que descreva de forma precisa e sucinta o conte\u00fado ou fun\u00e7\u00e3o da imagem. Esta descri\u00e7\u00e3o deve transmitir a mesma mensagem ou prop\u00f3sito que a imagem transmite para usu\u00e1rios que enxergam.<\/li>\n\n\n\n<li><a href=\"https:\/\/make.wordpress.org\/accessibility\/handbook\/content\/alternative-text-for-images\/\" target=\"_blank\" rel=\"noopener\">Adicione texto alt \u00e0s imagens no WordPress<\/a> atrav\u00e9s de sua Biblioteca de M\u00eddia.<\/li>\n\n\n\n<li>Forne\u00e7a legendas para v\u00eddeos, que descrevem n\u00e3o apenas o conte\u00fado falado, mas tamb\u00e9m outros sons relevantes e informa\u00e7\u00f5es n\u00e3o verbais. Transcri\u00e7\u00f5es tamb\u00e9m s\u00e3o importantes, oferecendo uma vers\u00e3o baseada em texto de todo o conte\u00fado de \u00e1udio, incluindo palavras faladas e outros sons relevantes.<\/li>\n\n\n\n<li>Para v\u00eddeos, inclua descri\u00e7\u00f5es em \u00e1udio que narrem as informa\u00e7\u00f5es visuais. Isso \u00e9 particularmente importante para conte\u00fados onde os visuais carregam informa\u00e7\u00f5es significativas n\u00e3o transmitidas apenas pelo \u00e1udio.<\/li>\n\n\n\n<li>Certifique-se de que todos os links e bot\u00f5es sejam baseados em texto ou tenham alternativas em texto, de modo que sua fun\u00e7\u00e3o seja clara para os usu\u00e1rios de leitores de tela. Evite usar imagens como \u00fanico meio para transmitir a\u00e7\u00f5es importantes ou links.<\/li>\n\n\n\n<li>Para conte\u00fados visuais complexos, como gr\u00e1ficos e tabelas, forne\u00e7a um resumo ou descri\u00e7\u00e3o baseados em texto que explique os dados ou informa\u00e7\u00f5es apresentados.<\/li>\n\n\n\n<li>Elementos interativos como formul\u00e1rios devem ter r\u00f3tulos claros e descritivos. Isso ajuda os usu\u00e1rios a entender para que serve cada campo do formul\u00e1rio e como interagir com ele.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Organize e Estruture o Conte\u00fado de uma Forma Adapt\u00e1vel<\/h3>\n\n\n\n<p>Organizar e estruturar o conte\u00fado de maneira adapt\u00e1vel ajuda a garantir que todos os usu\u00e1rios, independentemente de como acessam seu site, recebam as informa\u00e7\u00f5es de forma coerente e l\u00f3gica. Essa abordagem beneficia usu\u00e1rios que dependem de tecnologias assistivas, como leitores de tela, e aqueles com defici\u00eancias cognitivas que podem achar layouts complexos ou estruturas inconsistentes confusas.<\/p>\n\n\n\n<p><b>Melhores pr\u00e1ticas:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Empregue elementos sem\u00e2nticos do HTML5 como <code>&lt;header&gt;<\/code>, <code>&lt;footer&gt;<\/code>, <code>&lt;nav&gt;<\/code>, <code>&lt;article&gt;<\/code>, e <code>&lt;section&gt;<\/code> para estruturar claramente o seu conte\u00fado. Estes elementos fornecem contexto \u00e0s tecnologias assistivas, permitindo que comuniquem a estrutura e o layout da sua p\u00e1gina web aos usu\u00e1rios.<\/li>\n\n\n\n<li>Utilize cabe\u00e7alhos (H1, H2, H3, etc.) para estruturar o conte\u00fado de forma hier\u00e1rquica e l\u00f3gica. Garanta que os cabe\u00e7alhos s\u00e3o descritivos e d\u00e3o uma indica\u00e7\u00e3o clara do conte\u00fado que segue.<\/li>\n\n\n\n<li>Projete o layout do seu site para ser flex\u00edvel. Isto significa que deve adaptar-se a diferentes tamanhos e orienta\u00e7\u00f5es de tela sem perder informa\u00e7\u00f5es ou funcionalidades. Isso \u00e9 particularmente importante para usu\u00e1rios com vis\u00e3o reduzida que podem precisar aumentar o zoom ou para aqueles que acessam seu site em dispositivos m\u00f3veis.<\/li>\n\n\n\n<li>Caso use tabelas para dados, certifique-se de que est\u00e3o corretamente marcadas com cabe\u00e7alhos de linhas e colunas. Evite usar tabelas para fins de layout, pois isso pode confundir os usu\u00e1rios de leitores de tela.<\/li>\n\n\n\n<li>Utilize listas ordenadas (numeradas) e n\u00e3o ordenadas (com marcadores) para agrupar itens relacionados. Isso ajuda os leitores de tela a transmitir a estrutura e organiza\u00e7\u00e3o do conte\u00fado.<\/li>\n\n\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1089\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Use-Headings.jpg\" alt=\"Hierarquia H1, H2, H3 mostrando cada cabe\u00e7alho subsequente ficando menor\" class=\"wp-image-43184 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Use-Headings.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Use-Headings-300x204.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Use-Headings-1024x697.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Use-Headings-768x523.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Use-Headings-1536x1045.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Use-Headings-600x408.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Use-Headings-1200x817.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Use-Headings-730x497.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Use-Headings-1460x994.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Use-Headings-784x534.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Use-Headings-1568x1067.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Use-Headings-877x597.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1089;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">5. Ofere\u00e7a Maneiras Alternativas de Consumir M\u00eddia Baseada em Tempo<\/h3>\n\n\n\n<p>Os meios de comunica\u00e7\u00e3o baseados em tempo incluem conte\u00fado de \u00e1udio e v\u00eddeo. Pessoas surdas ou com dificuldade de audi\u00e7\u00e3o, bem como aquelas que s\u00e3o cegas ou t\u00eam baixa vis\u00e3o, precisar\u00e3o de maneiras alternativas para consumir meios de comunica\u00e7\u00e3o baseados em tempo.<\/p>\n\n\n\n<p><b>Melhores pr\u00e1ticas:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Forne\u00e7a legendas fechadas para todo o conte\u00fado de v\u00eddeo. As legendas devem refletir com precis\u00e3o o di\u00e1logo falado e descrever pistas de \u00e1udio n\u00e3o-verbais relevantes, como m\u00fasica ou efeitos sonoros, que s\u00e3o importantes para entender o conte\u00fado.<\/li>\n\n\n\n<li>Crie transcri\u00e7\u00f5es para conte\u00fados de \u00e1udio e v\u00eddeo.<\/li>\n\n\n\n<li>Inclua descri\u00e7\u00f5es de \u00e1udio nos v\u00eddeos, que narrem os aspectos visuais do v\u00eddeo.<\/li>\n\n\n\n<li>Garanta que os reprodutores de m\u00eddia usados em seu site sejam acess\u00edveis. Eles devem ser naveg\u00e1veis e oper\u00e1veis usando um teclado, e suas fun\u00e7\u00f5es (como reproduzir, pausar e ajustar o volume) devem ser claramente rotuladas e compreens\u00edveis para usu\u00e1rios de leitores de tela.<\/li>\n\n\n\n<li>Para conte\u00fados de v\u00eddeo chave, considere oferecer uma interpreta\u00e7\u00e3o em l\u00edngua de sinais. Isso pode ser uma faixa de v\u00eddeo separada ou uma exibi\u00e7\u00e3o de imagem em imagem dentro do v\u00eddeo, oferecendo uma tradu\u00e7\u00e3o em l\u00edngua de sinais do conte\u00fado falado.<\/li>\n\n\n\n<li>Inclua op\u00e7\u00f5es para controlar a velocidade de reprodu\u00e7\u00e3o e para pausar, rebobinar ou avan\u00e7ar rapidamente o conte\u00fado. Essa flexibilidade pode ser particularmente ben\u00e9fica para usu\u00e1rios com defici\u00eancias cognitivas, defici\u00eancias de aprendizagem ou aqueles que precisam de mais tempo para processar informa\u00e7\u00f5es audiovisuais.<\/li>\n\n\n\n<li>A partir do WordPress 5.6, voc\u00ea pode adicionar legendas e subt\u00edtulos a v\u00eddeos do WordPress usando o recurso de <a href=\"https:\/\/wordpress.org\/support\/article\/video-block\/\" target=\"_blank\" rel=\"noopener\">Formato de Faixas de Texto de V\u00eddeo Web (WebVTT)<\/a>. Para acess\u00e1-lo, basta inserir um bloco de V\u00eddeo na sua p\u00e1gina, depois selecionar o bot\u00e3o de faixas de texto no seu menu de navega\u00e7\u00e3o horizontal.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">6. Projete Formul\u00e1rios com Cuidado<\/h3>\n\n\n\n<p>Os formul\u00e1rios s\u00e3o necess\u00e1rios para muitos sites e s\u00e3o usados para tudo, desde informa\u00e7\u00f5es de contato at\u00e9 compras online. Formul\u00e1rios bem projetados garantem que todos os usu\u00e1rios possam inserir suas informa\u00e7\u00f5es, fazer sele\u00e7\u00f5es e entender quaisquer erros que possam ocorrer durante o envio.<\/p>\n\n\n\n<p><b>Melhores pr\u00e1ticas:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cada campo do formul\u00e1rio deve ter uma etiqueta clara e descritiva que esteja programaticamente ligada ao campo. Isso ajuda os usu\u00e1rios de leitores de tela a entender que tipo de informa\u00e7\u00e3o \u00e9 esperada.<\/li>\n\n\n\n<li>Quando os usu\u00e1rios cometem um erro, como omitir um campo obrigat\u00f3rio ou inserir dados inv\u00e1lidos, o erro deve ser claramente identificado e descrito em texto. Isso ajuda os usu\u00e1rios a entender o que precisa ser corrigido.<\/li>\n\n\n\n<li>Certifique-se de que a ordem das abas do formul\u00e1rio siga uma sequ\u00eancia l\u00f3gica, permitindo que os usu\u00e1rios naveguem pelos campos do formul\u00e1rio usando o teclado de maneira previs\u00edvel.<\/li>\n\n\n\n<li>\u00c0 medida que os usu\u00e1rios navegam pelo formul\u00e1rio, deve haver uma indica\u00e7\u00e3o vis\u00edvel de qual campo est\u00e1 atualmente focado, como uma mudan\u00e7a de cor da borda ou do fundo.<\/li>\n\n\n\n<li>Use conjuntos de campos e legendas para agrupar campos relacionados. Isso \u00e9 particularmente \u00fatil para usu\u00e1rios de leitores de tela, pois fornece contexto e ajuda a entender como os diferentes campos est\u00e3o relacionados.<\/li>\n\n\n\n<li>Se o seu formul\u00e1rio incluir menus suspensos, caixas de sele\u00e7\u00e3o ou controles personalizados, certifique-se de que eles sejam totalmente acess\u00edveis e possam ser navegados e selecionados usando um teclado.<\/li>\n\n\n\n<li>Onde necess\u00e1rio, forne\u00e7a instru\u00e7\u00f5es ou exemplos para campos, especialmente para aqueles que requerem dados em um formato espec\u00edfico, como datas ou n\u00fameros de telefone.<\/li>\n\n\n\n<li>Se o seu formul\u00e1rio tiver um limite de tempo para conclus\u00e3o, forne\u00e7a uma maneira de os usu\u00e1rios estenderem o tempo, se necess\u00e1rio, pois alguns usu\u00e1rios podem precisar de mais tempo para ler e preencher o formul\u00e1rio.<\/li>\n\n\n\n<li>Certifique-se de que o formul\u00e1rio seja utiliz\u00e1vel em diferentes dispositivos e tamanhos de tela, especialmente para usu\u00e1rios que possam estar ampliando ou usando um dispositivo m\u00f3vel.<\/li>\n\n\n\n<li>Plugins como <a href=\"https:\/\/formidableforms.com\/\" target=\"_blank\" rel=\"noopener\">Formidable Forms<\/a> v\u00eam com ferramentas de acessibilidade \u00fateis integradas.<\/li>\n\n\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"940\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Best-Practices.jpg\" alt=\"fonte de deque.com mostrando como tornar campos din\u00e2micos mais acess\u00edveis\" class=\"wp-image-43185 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Best-Practices.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Best-Practices-300x176.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Best-Practices-1024x602.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Best-Practices-768x451.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Best-Practices-1536x902.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Best-Practices-600x353.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Best-Practices-1200x705.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Best-Practices-730x429.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Best-Practices-1460x858.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Best-Practices-784x461.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Best-Practices-1568x921.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Best-Practices-877x515.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/940;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">7. D\u00ea aos Visitantes Tempo Suficiente para Interagir com Seu Site<\/h3>\n\n\n\n<p>Alguns visitantes do site podem ler devagar, ter defici\u00eancias cognitivas ou de aprendizagem, ou usar tecnologias assistivas que exigem tempo adicional para navegar e interpretar o conte\u00fado. Certifique-se de dar a eles tempo suficiente para ler, assistir e usar tudo em seu site.<\/p>\n\n\n\n<p><b>Melhores pr\u00e1ticas:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Se o seu site possui funcionalidades ou conte\u00fado com limites de tempo (como question\u00e1rios cronometrados, formul\u00e1rios com tempo de sess\u00e3o limitado ou carross\u00e9is rotativos), forne\u00e7a uma maneira para que os usu\u00e1rios ajustem, prolonguem ou desativem-nos.<\/li>\n\n\n\n<li>Para qualquer conte\u00fado que se mova, pisque ou role, e para informa\u00e7\u00f5es que se atualizam automaticamente (como barras de not\u00edcias), forne\u00e7a controles que permitam aos usu\u00e1rios pausar, parar ou ocult\u00e1-los.<\/li>\n\n\n\n<li>Evite atualizar automaticamente o conte\u00fado sem a inicia\u00e7\u00e3o do usu\u00e1rio, pois isso pode desorientar os usu\u00e1rios de leitores de tela.<\/li>\n\n\n\n<li>Se um tempo de espera for necess\u00e1rio (como por raz\u00f5es de seguran\u00e7a em um site banc\u00e1rio), avise os usu\u00e1rios antes que o tempo expire. Isso lhes d\u00e1 uma chance de prolongar a sess\u00e3o sem perder dados.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">8. Evite Conte\u00fado que Pisca ou Alterna<\/h3>\n\n\n\n<p>Evitar conte\u00fados que piscam ou que t\u00eam flashes pode tornar seu site mais acess\u00edvel para usu\u00e1rios suscet\u00edveis a convuls\u00f5es causadas por luzes piscantes ou padr\u00f5es, uma condi\u00e7\u00e3o conhecida como epilepsia fotosens\u00edvel. Al\u00e9m disso, conte\u00fados que piscam ou que t\u00eam flashes r\u00e1pidos podem ser distra\u00e7\u00f5es, ou at\u00e9 mesmo dolorosos para os usu\u00e1rios, contribuindo para uma experi\u00eancia web desagrad\u00e1vel ou inacess\u00edvel.<\/p>\n\n\n\n<p><b>Melhores pr\u00e1ticas:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Como regra, evite conte\u00fados que piscam mais de tr\u00eas vezes em um per\u00edodo de um segundo. Esta diretriz, parte das Diretrizes de Acessibilidade de Conte\u00fado Web (WCAG), ajuda a reduzir o risco de convuls\u00f5es.<\/li>\n\n\n\n<li>Se o seu site precisar incluir conte\u00fado que pisca ou pisca (por raz\u00f5es art\u00edsticas ou informativas), forne\u00e7a um aviso claro antes de o conte\u00fado ser exibido. Isso permite que usu\u00e1rios com fotosensibilidade evitem ou se preparem para a exposi\u00e7\u00e3o a tal conte\u00fado.<\/li>\n\n\n\n<li>Tenha aten\u00e7\u00e3o com anima\u00e7\u00f5es e transi\u00e7\u00f5es no seu design web. Garanta que sejam sutis e n\u00e3o envolvam piscar ou movimentos r\u00e1pidos. Forne\u00e7a op\u00e7\u00f5es para reduzir ou desativar anima\u00e7\u00f5es, se poss\u00edvel.<\/li>\n\n\n\n<li>Em vez de usar conte\u00fado piscante para chamar aten\u00e7\u00e3o, considere m\u00e9todos alternativos como usar cores vivas, padr\u00f5es ou gr\u00e1ficos est\u00e1ticos que s\u00e3o igualmente eficazes, mas n\u00e3o representam um risco para os usu\u00e1rios.<\/li>\n\n\n\n<li>Em caso de d\u00favida, consulte especialistas em acessibilidade na web que podem revisar seu site em busca de conte\u00fado potencialmente problem\u00e1tico e sugerir alternativas mais seguras.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">9. Forne\u00e7a uma Navega\u00e7\u00e3o Clara<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"1089\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Clear-Navigation.jpg\" alt=\"exemplo de um menu suspenso que oferece uma navega\u00e7\u00e3o clara, fornecendo categorias adicionais e tamb\u00e9m conte\u00fado \u00fatil ao qual se pode acessar para aprender mais sobre Dom\u00ednios\" class=\"wp-image-43186 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Clear-Navigation.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Clear-Navigation-300x204.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Clear-Navigation-1024x697.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Clear-Navigation-768x523.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Provide-Clear-Navigation-1536x1045.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Clear-Navigation-600x408.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Clear-Navigation-1200x817.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Clear-Navigation-730x497.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Clear-Navigation-1460x994.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Clear-Navigation-784x534.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Clear-Navigation-1568x1067.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Provide-Clear-Navigation-877x597.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1089;\" \/><\/figure>\n\n\n\n<p>Uma navega\u00e7\u00e3o clara \u00e9 um pilar fundamental da acessibilidade na web. Ela permite que todos os usu\u00e1rios, incluindo aqueles com defici\u00eancias, encontrem seu caminho pelo seu site com facilidade. Uma boa navega\u00e7\u00e3o \u00e9 especialmente ben\u00e9fica para usu\u00e1rios com defici\u00eancias e aqueles que dependem de tecnologias assistivas. Estruturas de navega\u00e7\u00e3o claras e previs\u00edveis ajudam os usu\u00e1rios a entender onde eles est\u00e3o no seu site, como chegar ao seu destino desejado e como retornar a p\u00e1ginas anteriormente visitadas.<\/p>\n\n\n\n<p><b>Melhores pr\u00e1ticas:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mantenha o layout de navega\u00e7\u00e3o consistente em todo o site. A consist\u00eancia ajuda os usu\u00e1rios a aprenderem e lembrarem como navegar no seu site, reduzindo confus\u00e3o e frustra\u00e7\u00e3o.<\/li>\n\n\n\n<li>Agrupe itens de navega\u00e7\u00e3o relacionados. Isso pode ser alcan\u00e7ado por meio de menus bem organizados, cabe\u00e7alhos claros de se\u00e7\u00e3o ou um mapa do site que fornece uma vis\u00e3o geral da estrutura do seu website.<\/li>\n\n\n\n<li>Certifique-se de que todos os menus sejam acess\u00edveis com navega\u00e7\u00e3o por teclado e leitores de tela. Isso inclui menus suspensos e outros conte\u00fados din\u00e2micos.<\/li>\n\n\n\n<li>Para sites com m\u00faltiplas camadas de conte\u00fado, utilize trilhas de navega\u00e7\u00e3o. Elas fornecem aos usu\u00e1rios um caminho claro de sua jornada desde a p\u00e1gina inicial at\u00e9 o local atual e ajudam na f\u00e1cil navega\u00e7\u00e3o de volta para se\u00e7\u00f5es anteriores.<\/li>\n\n\n\n<li>Implemente uma funcionalidade de pesquisa robusta, especialmente para sites maiores. Isso permite que os usu\u00e1rios encontrem rapidamente informa\u00e7\u00f5es sem navegar por m\u00faltiplas p\u00e1ginas.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">10. Torne o Conte\u00fado Claro e F\u00e1cil de Compreender<\/h3>\n\n\n\n<p>Tornar o conte\u00fado do seu site claro e f\u00e1cil de entender pode ajudar visitantes com defici\u00eancias, dificuldades de aprendizagem ou aqueles que n\u00e3o s\u00e3o falantes nativos da l\u00edngua do site. Conte\u00fado claro e direto garante que as informa\u00e7\u00f5es sejam acess\u00edveis a um p\u00fablico mais amplo e ajuda todos os usu\u00e1rios a compreenderem rapidamente a mensagem ou a\u00e7\u00e3o pretendida.<\/p>\n\n\n\n<p><b>Melhores pr\u00e1ticas:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Escreva conte\u00fado em linguagem simples. Evite frases complexas, jarg\u00f5es e termos t\u00e9cnicos. Quando termos t\u00e9cnicos s\u00e3o necess\u00e1rios, forne\u00e7a explica\u00e7\u00f5es simples ou um gloss\u00e1rio.<\/li>\n\n\n\n<li>Utilize t\u00edtulos e subt\u00edtulos para estruturar seu conte\u00fado de forma l\u00f3gica. Isso ajuda os usu\u00e1rios, especialmente aqueles que usam leitores de tela, a entender o layout e encontrar informa\u00e7\u00f5es mais facilmente.<\/li>\n\n\n\n<li>Mantenha par\u00e1grafos e frases curtas e diretas. Essa estrutura torna o conte\u00fado mais f\u00e1cil de ler e compreender.<\/li>\n\n\n\n<li>Utilize pontos ou listas numeradas para dividir informa\u00e7\u00f5es em partes gerenci\u00e1veis e f\u00e1ceis de digerir. Isso \u00e9 especialmente \u00fatil para instru\u00e7\u00f5es ou informa\u00e7\u00f5es complexas.<\/li>\n\n\n\n<li>Mantenha um layout e design consistentes em todo o seu site. A consist\u00eancia em fontes, cores e estilos ajuda os usu\u00e1rios a entender melhor e navegar pelo seu conte\u00fado.<\/li>\n\n\n\n<li>Onde apropriado, use imagens, \u00edcones ou diagramas para apoiar o texto. Aux\u00edlios visuais podem ajudar a transmitir informa\u00e7\u00f5es complexas de forma mais clara e podem beneficiar usu\u00e1rios que processam informa\u00e7\u00f5es visuais mais efetivamente do que texto.<\/li>\n\n\n\n<li>Torne os bot\u00f5es ou links de chamada para a\u00e7\u00e3o claros e descritivos. Os usu\u00e1rios devem ser capazes de entender o que acontecer\u00e1 quando clicarem neles.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">11. Escreva Mensagens de Erro \u00dateis<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"1600\" height=\"940\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Write-Useful-Error-Messages.jpg\" alt=\"anatomia de formul\u00e1rios acess\u00edveis mostrando mensagens de erro para declarar claramente aos leitores e leitores de tela o que precisa ser feito para corrigi-lo\" class=\"wp-image-43187 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Write-Useful-Error-Messages.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Write-Useful-Error-Messages-300x176.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Write-Useful-Error-Messages-1024x602.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Write-Useful-Error-Messages-768x451.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Write-Useful-Error-Messages-1536x902.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Write-Useful-Error-Messages-600x353.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Write-Useful-Error-Messages-1200x705.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Write-Useful-Error-Messages-730x429.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Write-Useful-Error-Messages-1460x858.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Write-Useful-Error-Messages-784x461.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Write-Useful-Error-Messages-1568x921.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/06\/Write-Useful-Error-Messages-877x515.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/940;\" \/><\/figure>\n\n\n\n<p>Mensagens de erro eficazes orientam os usu\u00e1rios na resolu\u00e7\u00e3o de problemas que encontram, o que \u00e9 particularmente importante para usu\u00e1rios com defici\u00eancias, que podem achar mais desafiador entender e corrigir erros. Mensagens de erro claras e informativas ajudam a prevenir frustra\u00e7\u00f5es, garantindo que todos os usu\u00e1rios possam interagir com sucesso com seu site e completar suas a\u00e7\u00f5es pretendidas.<\/p>\n\n\n\n<p><b>Melhores pr\u00e1ticas:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As mensagens de erro devem indicar claramente qual \u00e9 o problema. Evite linguagem vaga ou t\u00e9cnica que possa confundir os usu\u00e1rios. Por exemplo, em vez de dizer &#8220;Entrada inv\u00e1lida&#8221;, especifique o que est\u00e1 errado, como &#8220;Formato de endere\u00e7o de e-mail incorreto.&#8221;<\/li>\n\n\n\n<li>Sempre que poss\u00edvel, acompanhe a mensagem de erro com uma solu\u00e7\u00e3o sugerida ou pr\u00f3ximos passos. Por exemplo, se um campo obrigat\u00f3rio estiver vazio, a mensagem de erro deve solicitar ao usu\u00e1rio que preencha esse campo.<\/li>\n\n\n\n<li>Destaque visualmente o campo ou \u00e1rea onde ocorreu o erro. Isso pode ser feito alterando a cor da borda, adicionando um \u00edcone ou usando estilos de texto. Isso \u00e9 particularmente \u00fatil para usu\u00e1rios com defici\u00eancias visuais.<\/li>\n\n\n\n<li>Use um tom amig\u00e1vel e n\u00e3o t\u00e9cnico em suas mensagens de erro. Essa abordagem reduz a frustra\u00e7\u00e3o e a ansiedade, especialmente para usu\u00e1rios que j\u00e1 podem estar com dificuldades para navegar no seu site.<\/li>\n\n\n\n<li>Posicione as mensagens de erro perto do ponto de erro, idealmente acima ou ao lado do campo de formul\u00e1rio em quest\u00e3o. Isso facilita para os usu\u00e1rios, incluindo aqueles que usam leitores de tela, localizar e entender o erro.<\/li>\n\n\n\n<li>Garanta que as mensagens de erro e indicadores sejam acess\u00edveis para usu\u00e1rios de leitores de tela. Use pap\u00e9is e propriedades ARIA para comunicar a presen\u00e7a e a natureza dos erros.<\/li>\n\n\n\n<li>Use um m\u00e9todo consistente para identificar e apresentar erros em todo o seu site. A consist\u00eancia ajuda os usu\u00e1rios a entender e prever como os erros podem ser comunicados.<\/li>\n\n\n\n<li>Em casos de erros complexos ou repetidos, forne\u00e7a uma op\u00e7\u00e3o para assist\u00eancia adicional, como informa\u00e7\u00f5es de contato do suporte ao cliente.<\/li>\n\n\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">12. Escreva HTML que possa ser analisado<\/h3>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>HTML<\/h3>\n    <p>HTML significa HyperText Markup Language. \u00c9 o bloco de constru\u00e7\u00e3o mais fundamental da web e a linguagem de marca\u00e7\u00e3o padr\u00e3o para criar p\u00e1ginas e aplicativos web.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/html\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leia Mais                    <\/a>\n\n<\/div>\n\n\n\n<p>Finalmente, escreva HTML que possa ser analisado ou processado corretamente pelos navegadores web e tecnologias assistivas. Um c\u00f3digo HTML bem estruturado e v\u00e1lido permite que leitores de tela e outras ferramentas assistivas interpretem e transmitam o conte\u00fado para os usu\u00e1rios de forma precisa. Esta pr\u00e1tica \u00e9 fundamental para criar um ambiente web que seja inclusivo e naveg\u00e1vel para todos.<\/p>\n\n\n\n<p><b>Melhores pr\u00e1ticas:<\/b><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Siga os padr\u00f5es de tags HTML e evite tags ou atributos propriet\u00e1rios. Isso garante que seu c\u00f3digo HTML seja universalmente compreendido por todos os navegadores e tecnologias assistivas.<\/li>\n\n\n\n<li>Estruture seu documento HTML corretamente. Use uma ordem l\u00f3gica para os elementos HTML e certifique-se de que elementos como cabe\u00e7alhos (<code>&lt;h1&gt;<\/code> at\u00e9 <code>&lt;h6&gt;<\/code>), par\u00e1grafos (<code>&lt;p&gt;<\/code>), listas (<code>&lt;ul&gt;<\/code>, <code>&lt;ol&gt;<\/code>, <code>&lt;li&gt;<\/code>) e outros elementos padr\u00e3o sejam usados apropriadamente.<\/li>\n\n\n\n<li>Utilize elementos sem\u00e2nticos do HTML5 como <code>&lt;header&gt;<\/code>, <code>&lt;footer&gt;<\/code>, <code>&lt;article&gt;<\/code>, <code>&lt;section&gt;<\/code> e <code>&lt;nav&gt;<\/code> para definir a estrutura da sua p\u00e1gina web.<\/li>\n\n\n\n<li>Use validadores de HTML para verificar seu c\u00f3digo quanto a erros ou inconsist\u00eancias. Um HTML v\u00e1lido tem mais chances de ser interpretado corretamente pelos navegadores e tecnologias assistivas.<\/li>\n\n\n\n<li>Mantenha conte\u00fado, estilo e comportamento separados. Use CSS externo para estiliza\u00e7\u00e3o e arquivos JavaScript externos para comportamentos, em vez de estilos ou scripts inline. Essa separa\u00e7\u00e3o ajuda a manter um HTML limpo, leg\u00edvel e acess\u00edvel.<\/li>\n\n\n\n<li>Use tags de t\u00edtulo significativas e meta descri\u00e7\u00f5es para transmitir o prop\u00f3sito da p\u00e1gina.<\/li>\n\n\n\n<li>Declare o idioma da p\u00e1gina usando o atributo lang na tag <code>&lt;html&gt;<\/code>. Isso ajuda os leitores de tela a pronunciar o conte\u00fado corretamente.<\/li>\n\n\n<\/ul>\n\n\n\n<h2 id=\"easy\" class=\"wp-block-heading\">Torne f\u00e1cil para todos acessarem seu site<\/h2>\n\n\n\n<p>Melhorias cont\u00ednuas na acessibilidade da web s\u00e3o um motivo para celebrar. Afinal, se voc\u00ea gerencia um site WordPress, voc\u00ea deseja alcan\u00e7ar o maior n\u00famero de pessoas poss\u00edvel, incluindo pessoas com defici\u00eancia. Felizmente, projetar um site acess\u00edvel est\u00e1 bem ao seu alcance.<\/p>\n\n\n\n<p>Neste post, discutimos v\u00e1rias estrat\u00e9gias que voc\u00ea pode usar para projetar um site que seja mais f\u00e1cil para todos os seus visitantes navegar e usar. Por exemplo, voc\u00ea pode garantir que seu site seja compat\u00edvel com a navega\u00e7\u00e3o por teclado para ser compat\u00edvel com tecnologias assistivas. Voc\u00ea tamb\u00e9m pode usar texto alternativo e transcri\u00e7\u00f5es de v\u00eddeo para toda a sua m\u00eddia visual. Mais importante ainda, ao seguir nosso guia, voc\u00ea apoia uma experi\u00eancia web mais equitativa, garantindo que seu site esteja dispon\u00edvel para o maior n\u00famero de pessoas poss\u00edvel.<\/p>\n\n\n\n<p>Quer <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/como-contratar-um-desenvolvedor-web\/\" target=\"_blank\" rel=\"noopener\">contratar um desenvolvedor<\/a> que possa maximizar a acessibilidade web para seus projetos WordPress em evolu\u00e7\u00e3o? Se preferir deixar essa tarefa importante para os profissionais, confira nossos <a href=\"https:\/\/www.dreamhost.com\/pt\/servicos-profissionais\/\" target=\"_blank\" rel=\"noopener\">Servi\u00e7os Pro de Desenvolvimento da DreamHost<\/a>!<\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Voc\u00ea Sonha, N\u00f3s Programamos\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Aproveite mais de 20 anos de experi\u00eancia em programa\u00e7\u00e3o quando optar pelo nosso servi\u00e7o de Desenvolvimento Web. Apenas nos diga o que voc\u00ea deseja para o seu site \u2014 cuidamos do resto.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pt\/servicos-profissionais\/desenvolvimento\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Saiba Mais                    <\/a>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea administra um site de e-commerce ou um neg\u00f3cio de desenvolvimento web, voc\u00ea quer atrair o m\u00e1ximo de visitantes poss\u00edvel para o seu site. E isso significa garantir que o maior n\u00famero poss\u00edvel de pessoas possa usar seu site\u2013priorizando a acessibilidade do site. A acessibilidade do site envolve garantir que seu site seja utiliz\u00e1vel por todos, incluindo aqueles com [\u2026]<\/p>\n","protected":false},"author":1075,"featured_media":43175,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"definition\",\"O Que \u00e9 Acessibilidade de Sites?\"],[\"why\",\"Por que voc\u00ea deve priorizar a acessibilidade do site\"],[\"check\",\"Como Verificar a Acessibilidade Web do Seu Site\"],[\"design\",\"Como Projetar um Site Acess\u00edvel (Um Guia Completo)\"],[\"easy\",\"Torne f\u00e1cil para todos acessarem seu site\"]]","hide_toc":false,"footnotes":""},"categories":[14407,14391],"tags":[],"class_list":["post-57349","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-de-sites-pt","category-tutoriais-pt"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Como Projetar um Site Acess\u00edvel (Um Guia Completo) - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Projetar um Site Acess\u00edvel (Um Guia Completo)\" \/>\n<meta property=\"og:description\" content=\"Se voc\u00ea administra um site de e-commerce ou um neg\u00f3cio de desenvolvimento web, voc\u00ea quer atrair o m\u00e1ximo de visitantes poss\u00edvel para o seu site. E isso significa garantir que o maior n\u00famero poss\u00edvel de pessoas possa usar seu site\u2013priorizando a acessibilidade do site. A acessibilidade do site envolve garantir que seu site seja utiliz\u00e1vel por todos, incluindo aqueles com [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-14T15:00:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T19:46:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Designing-An-Accessible-Website-HERO.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jennifer Le\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jennifer Le\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"32 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como Projetar um Site Acess\u00edvel (Um Guia Completo) - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/","og_locale":"en_US","og_type":"article","og_title":"Como Projetar um Site Acess\u00edvel (Um Guia Completo)","og_description":"Se voc\u00ea administra um site de e-commerce ou um neg\u00f3cio de desenvolvimento web, voc\u00ea quer atrair o m\u00e1ximo de visitantes poss\u00edvel para o seu site. E isso significa garantir que o maior n\u00famero poss\u00edvel de pessoas possa usar seu site\u2013priorizando a acessibilidade do site. A acessibilidade do site envolve garantir que seu site seja utiliz\u00e1vel por todos, incluindo aqueles com [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-02-14T15:00:30+00:00","article_modified_time":"2025-05-26T19:46:37+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Designing-An-Accessible-Website-HERO.jpg","type":"image\/jpeg"}],"author":"Jennifer Le","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jennifer Le","Est. reading time":"32 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/"},"author":{"name":"Jennifer Le","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/6e0e15f083b219af1ab8d25dcd595ddf"},"headline":"Como Projetar um Site Acess\u00edvel (Um Guia Completo)","datePublished":"2024-02-14T15:00:30+00:00","dateModified":"2025-05-26T19:46:37+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/"},"wordCount":6387,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Designing-An-Accessible-Website-HERO.jpg","articleSection":["Design de Sites","Tutoriais"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/","name":"Como Projetar um Site Acess\u00edvel (Um Guia Completo) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Designing-An-Accessible-Website-HERO.jpg","datePublished":"2024-02-14T15:00:30+00:00","dateModified":"2025-05-26T19:46:37+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Designing-An-Accessible-Website-HERO.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/06\/Designing-An-Accessible-Website-HERO.jpg","width":1460,"height":1095,"caption":"A man seemingly in the middle of speaking and gesturing to a laptop with an accessibility logo in the corner and an alt text tag block"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Como Projetar um Site Acess\u00edvel (Um Guia Completo)"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/6e0e15f083b219af1ab8d25dcd595ddf","name":"Jennifer Le","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","caption":"Jennifer Le"},"description":"Jennifer is Designer II at DreamHost and is responsible for branding, design, and UX\/UI. In her free time, she enjoys crafting, cooking, and camping. Follow Jennifer on LinkedIn: https:\/\/www.linkedin.com\/in\/nhijenniferle\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jenniferle\/"}]}},"lang":"pt","translations":{"pt":57349,"es":26741,"en":13080,"de":52221,"pl":57322,"ru":57325,"uk":57358,"it":68316,"fr":70215,"nl":70244},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/57349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1075"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=57349"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/57349\/revisions"}],"predecessor-version":[{"id":62208,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/57349\/revisions\/62208"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/43175"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=57349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=57349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=57349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}