{"id":52684,"date":"2019-12-12T07:00:00","date_gmt":"2019-12-12T15:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=52684"},"modified":"2025-05-26T13:12:10","modified_gmt":"2025-05-26T20:12:10","slug":"melhore-a-acessibilidade-do-blog-no-wordpress","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/melhore-a-acessibilidade-do-blog-no-wordpress\/","title":{"rendered":"Como melhorar a acessibilidade do seu blog WordPress (E por que isso \u00e9 importante)"},"content":{"rendered":"\n<p>Voc\u00ea pode ter ouvido falar sobre <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/torne-seu-site-acessivel\/\">acessibilidade na web<\/a><\/span>, mas entender e implementar as diretrizes pode parecer algo distante. Encontrar recursos para ajud\u00e1-lo a abordar quest\u00f5es de acessibilidade tamb\u00e9m pode ser uma barreira para seus projetos na web.<\/p>\n\n\n\n<p>Felizmente, <span style=\"text-decoration: underline;\"><a href=\"https:\/\/make.wordpress.org\/accessibility\/\">o WordPress tem avan\u00e7ado<\/a><\/span>&nbsp;na disponibiliza\u00e7\u00e3o de ferramentas para ajudar a tornar os sites mais acess\u00edveis. Al\u00e9m disso, existem <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.w3.org\/WAI\/\">muitos recursos<\/a><\/span>&nbsp;dispon\u00edveis online que podem orient\u00e1-lo. Tornar seu site WordPress acess\u00edvel n\u00e3o \u00e9 apenas uma boa pr\u00e1tica de design, mas tamb\u00e9m garante que todos tenham acesso igual ao conte\u00fado da web e \u00e0s aplica\u00e7\u00f5es.<\/p>\n\n\n\n<p>Neste artigo, vamos examinar <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/otimos-exemplos-de-acessibilidade-na-web\/\">o que significa acessibilidade na internet<\/a>. Tamb\u00e9m exploraremos algumas das novas adi\u00e7\u00f5es do WordPress que <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/guia-de-acessibilidade-na-web-para-designers\/\">facilitam o design acess\u00edvel<\/a>. H\u00e1 muito para cobrir, ent\u00e3o vamos come\u00e7ar!<\/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      Crie um Site para Todos\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      N\u00f3s garantimos que seu site seja r\u00e1pido e seguro para que voc\u00ea possa se concentrar no que \u00e9 importante.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pt\/hosting\/compartilhado\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Escolha Seu Plano                    <\/a>\n\n  <\/div>\n<\/div>\n\n\n<h2 id=\"h-what-web-accessibility-is-and-why-it-matters\" class=\"wp-block-heading\"><span style=\"font-weight: bold;\">O que \u00e9 Acessibilidade na Web e Por Que \u00e9 Importante<\/span><\/h2>\n\n\n\n<p>Neste contexto, &#8220;acessibilidade&#8221; significa projetar sites e aplica\u00e7\u00f5es web de uma maneira que n\u00e3o pro\u00edba ningu\u00e9m de us\u00e1-los. Isso significa que qualquer visitante, independentemente de defici\u00eancia ou impedimento, deve ser capaz de acessar e usar seu site.<\/p>\n\n\n\n<p>Isso \u00e9 importante quando voc\u00ea considera o fato de que <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.cdc.gov\/ncbddd\/disabilityandhealth\/infographic-disability-impacts-all.html\">um em cada quatro adultos nos Estados Unidos<\/a><\/span>&nbsp;possui algum tipo de defici\u00eancia. Em outras palavras, se voc\u00ea n\u00e3o est\u00e1 construindo com acessibilidade em mente, at\u00e9 um quarto dos visitantes do seu site podem ter dificuldades para acessar seu conte\u00fado.<\/p>\n\n\n\n<p>Felizmente, existe um conjunto de diretrizes que voc\u00ea pode usar para revisar o design e a funcionalidade do seu site. &nbsp;Os <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.w3.org\/WAI\/fundamentals\/accessibility-intro\/\">padr\u00f5es W3C<\/a><\/span>&nbsp;definem v\u00e1rios n\u00edveis de acessibilidade. Isso inclui um limiar m\u00ednimo que \u00e9 considerado aceit\u00e1vel. Claro, voc\u00ea tamb\u00e9m vai querer <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.w3.org\/WAI\/policies\/\">levar em conta as leis e regulamentos<\/a><\/span>, j\u00e1 que acessibilidade tamb\u00e9m \u00e9 uma quest\u00e3o legal.<\/p>\n\n\n\n<p>Construir com acessibilidade em mente n\u00e3o \u00e9 muito diferente de seguir as melhores pr\u00e1ticas padr\u00e3o para design e otimiza\u00e7\u00e3o de web. Na verdade, muitos dos princ\u00edpios e t\u00e9cnicas s\u00e3o os mesmos. Em termos espec\u00edficos, isso significa que o design acess\u00edvel n\u00e3o est\u00e1 fora de alcance para ningu\u00e9m \u2014 especialmente se voc\u00ea estiver usando WordPress.<\/p>\n\n\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tHow To Design An Accessible Website (A Complete Guide)\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/make-your-website-accessible\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n\n<h2 id=\"h-exploring-the-block-editor-s-accessibility-features\" class=\"wp-block-heading\"><span style=\"font-weight: bold;\">Explorando as Funcionalidades de Acessibilidade do Editor de Blocos<\/span><\/h2>\n\n\n\n<p>WordPress tem se esfor\u00e7ado para <span style=\"text-decoration: underline;\"><a href=\"https:\/\/make.wordpress.org\/accessibility\/\">melhorar a acessibilidade na web<\/a><\/span>&nbsp;na base de c\u00f3digo de seu sistema de gest\u00e3o de conte\u00fado (CMS) sempre em evolu\u00e7\u00e3o. De fato, <span style=\"text-decoration: underline;\"><a href=\"https:\/\/make.wordpress.org\/core\/handbook\/best-practices\/coding-standards\/accessibility-coding-standards\/\">padr\u00f5es foram institu\u00eddos<\/a><\/span>&nbsp;para atender a um padr\u00e3o m\u00ednimo de acessibilidade em todo c\u00f3digo novo ou atualizado que \u00e9 lan\u00e7ado.<\/p>\n\n\n\n<p>Al\u00e9m disso, os desenvolvedores do WordPress criaram um <span style=\"text-decoration: underline;\"><a href=\"https:\/\/make.wordpress.org\/accessibility\/handbook\/best-practices\/\">manual de acessibilidade<\/a><\/span>&nbsp;que descreve como os programadores devem criar produtos para o CMS. Por exemplo, todo o c\u00f3digo do WordPress deve atender \u00e0s <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\">Diretrizes de Acessibilidade para Conte\u00fado Web (WCAG)<\/a><\/span>&nbsp;2.0 no n\u00edvel AA. Isso \u00e9 considerado o padr\u00e3o mundial e tamb\u00e9m \u00e9 usado para sites de governo e servi\u00e7os p\u00fablicos.<\/p>\n\n\n\n<p>Se voc\u00ea der uma olhada no <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.dreamhost.com\/blog\/most-exciting-features-gutenberg-wordpress-editor\/\">Editor de Blocos<\/a><\/span>, em particular, existem algumas funcionalidades integradas \u00fateis que ajudam na cria\u00e7\u00e3o de conte\u00fado acess\u00edvel. Por exemplo, simplesmente aumentar o tamanho da fonte e coloc\u00e1-la em negrito n\u00e3o informa a um leitor de tela que isso representa o cabe\u00e7alho de uma se\u00e7\u00e3o. O Editor de Blocos facilita o uso de marca\u00e7\u00e3o de cabe\u00e7alho apropriada, fornecendo um bloco <span style=\"font-style: italic;\">Cabe\u00e7alho<\/span>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/4ed0be75-28f3-43c3-ad38-82eee56d737e_DreamHost-how-to-improve-accessibility-2.jpg\" alt=\"O Bloco de Cabe\u00e7alho.\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure><\/div>\n\n\n<p>Isso significa que seu conte\u00fado ser\u00e1 automaticamente estruturado usando os cabe\u00e7alhos adequados. N\u00e3o apenas isso ajuda os leitores de tela a navegar pelo seu conte\u00fado de forma apropriada, mas tamb\u00e9m <span style=\"text-decoration: underline;\"><a href=\"https:\/\/yoast.com\/how-to-use-headings-on-your-site\/#headings-seo\">fornece melhores informa\u00e7\u00f5es para os motores de busca<\/a><\/span>&nbsp;igualmente.<\/p>\n\n\n\n<p>O Editor de Blocos tamb\u00e9m inclui um recurso integrado de <span style=\"font-style: italic;\">\u00cdndice<\/span>&nbsp;que permite verificar rapidamente seus cabe\u00e7alhos para garantir que seu conte\u00fado siga uma hierarquia l\u00f3gica.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/8c2e4293-23fb-4693-ac86-d4ff038fbd17_DreamHost-how-to-improve-accessibility-1.jpg\" alt=\"\u201cO esbo\u00e7o do documento no WordPress.\u201d\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure><\/div>\n\n\n<p>Claro, essas n\u00e3o s\u00e3o as \u00fanicas op\u00e7\u00f5es para projetar conte\u00fado acess\u00edvel. Como se verifica, o WordPress oferece v\u00e1rias maneiras de garantir que todos os visitantes possam acessar e apreciar seu conte\u00fado.<\/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<h2 id=\"h-5-ways-to-make-your-wordpress-blog-more-accessible\" class=\"wp-block-heading\"><span style=\"font-weight: bold;\">5 Maneiras de Tornar o Seu Blog WordPress Mais Acess\u00edvel<\/span><\/h2>\n\n\n\n<p>Como mencionamos anteriormente, atender aos padr\u00f5es de acessibilidade pode beneficiar o design geral do seu site e os esfor\u00e7os de Otimiza\u00e7\u00e3o de Mecanismos de Busca (SEO). Al\u00e9m disso, ajuda voc\u00ea a aumentar seu p\u00fablico e a permanecer em conformidade com regulamenta\u00e7\u00f5es cr\u00edticas. Com isso em mente, aqui est\u00e3o cinco maneiras f\u00e1ceis de melhorar a acessibilidade do seu site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-add-alt-tags-to-images\">1. Adicione Tags Alt \u00e0s Imagens<\/h3>\n\n\n\n<p>Adicionar &#8220;alt tags&#8221; \u00e0s suas imagens \u00e9 uma das maneiras mais f\u00e1ceis de tornar parte do seu conte\u00fado acess\u00edvel. Uma alt tag permite que softwares leitores de tela &#8220;leiam&#8221; a imagem \u00e0 qual est\u00e1 conectada e informem ao usu\u00e1rio o que ela \u00e9 e como se encaixa no contexto da p\u00e1gina.<\/p>\n\n\n\n<p>Voc\u00ea pode facilmente adicionar texto alternativo \u00e0s suas imagens no WordPress. Uma vez que voc\u00ea adicione uma imagem ao seu post ou p\u00e1gina, insira uma frase curta ou uma senten\u00e7a que a descreva no campo <span style=\"font-style: italic;\">Alt Text<\/span>&nbsp;no lado direito do editor.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/7e7b4b80-e046-43a2-b954-2e4de5f904ea_DreamHost-how-to-improve-accessibility-4.jpg\" alt=\"\u201cConfigura\u00e7\u00f5es da imagem.\u201d\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure><\/div>\n\n\n<p>Abaixo deste campo, voc\u00ea tamb\u00e9m pode clicar para visualizar <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/decision-tree\/\">diretrizes \u00fateis para imagens alternativas<\/a><\/span>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-use-accessible-color-palettes\">2. Utilize Paletas de Cores Acess\u00edveis<\/h3>\n\n\n\n<p>Outro padr\u00e3o de acessibilidade WCAG envolve as <span style=\"text-decoration: underline;\"><a href=\"https:\/\/webaim.org\/articles\/contrast\/\">paletas de cores que voc\u00ea usa<\/a><\/span>. Algumas paletas de cores podem causar problemas para visitantes com daltonismo, vis\u00e3o fraca e problemas semelhantes. De modo geral, voc\u00ea vai querer usar cores com bastante contraste, para que seu texto possa ser facilmente visto.<\/p>\n\n\n\n<p>Para ajud\u00e1-lo a come\u00e7ar, o WordPress possui um <span style=\"text-decoration: underline;\"><a href=\"https:\/\/make.wordpress.org\/accessibility\/handbook\/design\/use-of-color\/\">recurso \u00fatil<\/a><\/span>&nbsp;no seu Manual do Desenvolvedor Web sobre o uso apropriado de cores. Al\u00e9m disso, quando voc\u00ea estiver trabalhando no WordPress e decidir mudar a cor de algum texto, receber\u00e1 um aviso no menu de edi\u00e7\u00e3o \u00e0 direita se a sua escolha de cor puder criar problemas.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/125d81d1-32af-4a37-b5ae-1625a28d21be_DreamHost-how-to-improve-accessibility-3.jpg\" alt=\"\u201cAs configura\u00e7\u00f5es de cor.\u201d\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure><\/div>\n\n\n<p>Seguir esses padr\u00f5es simples para escolha de cores significa que os usu\u00e1rios do seu site dever\u00e3o ter mais facilidade para ler seus textos, independentemente de terem defici\u00eancias visuais.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-organize-headings-hierarchically\">3. Organize os T\u00edtulos Hierarquicamente<\/h3>\n\n\n\n<p>Como mencionamos anteriormente, o Editor de Blocos facilita o uso de t\u00edtulos apropriados e tags de cabe\u00e7alho. Sempre que voc\u00ea quiser usar um novo n\u00edvel de t\u00edtulo, voc\u00ea pode selecionar o bloco <span style=\"font-style: italic;\">T\u00edtulo<\/span>&nbsp;do <span style=\"font-style: italic;\">Menu de Blocos<\/span>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/6607f6c6-b97e-47b0-9a68-ddb2d1ede927_DreamHost-how-to-improve-accessibility-7.jpg\" alt=\"\u201cOs n\u00edveis de cabe\u00e7alho.\u201d\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure><\/div>\n\n\n<p>Voc\u00ea ter\u00e1 v\u00e1rios n\u00edveis de cabe\u00e7alho para escolher. Voc\u00ea pode notar que <span style=\"font-style: italic;\">H1<\/span>&nbsp;n\u00e3o est\u00e1 listado nas op\u00e7\u00f5es do bloco, no entanto. Isso ocorre porque n\u00e3o \u00e9 recomend\u00e1vel usar H1s dentro do conte\u00fado do seu post ou p\u00e1gina, j\u00e1 que isso tende a confundir os leitores de tela. Os H1s devem ser reservados para o t\u00edtulo principal de cada p\u00e1gina ou post, enquanto voc\u00ea pode usar H2s e inferiores para estruturar o restante do conte\u00fado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-make-sure-your-forms-are-accessible\">4. Certifique-se de que seus formul\u00e1rios s\u00e3o acess\u00edveis<\/h3>\n\n\n\n<p>Formul\u00e1rios s\u00e3o elementos amplamente utilizados em muitos sites. Eles podem criar interatividade e ajudar os propriet\u00e1rios de empresas a coletar informa\u00e7\u00f5es sobre seus clientes. No entanto, tamb\u00e9m podem representar um desafio para qualquer pessoa que utilize tecnologia assistiva.<\/p>\n\n\n\n<p>Felizmente, voc\u00ea pode criar formul\u00e1rios que t\u00eam <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/forms\/\">maior acessibilidade<\/a><\/span>&nbsp;incorporada desde o in\u00edcio. Uma op\u00e7\u00e3o \u00e9 usar um plugin como <span style=\"text-decoration: underline;\"><a href=\"https:\/\/wordpress.org\/plugins\/formidable\/\">Formidable Forms<\/a><\/span>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/f632ff3b-8c05-454d-8cee-ab3ffb490010_DreamHost-how-to-improve-accessibility-5.jpg\" alt=\"&quot;O banner do plugin Formidable Forms.\u201d\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure><\/div>\n\n\n<p>Esta ferramenta oferece um construtor de formul\u00e1rios com conformidade com o padr\u00e3o WCAG 2.0 <span style=\"text-decoration: underline;\"><a href=\"https:\/\/formidableforms.com\/features\/wcag-accessible-forms\/\">como uma caracter\u00edstica chave<\/a><\/span>. Isso pode ser excepcionalmente \u00fatil, especialmente considerando o quanto \u00e9 necess\u00e1rio para <span style=\"text-decoration: underline;\"><a href=\"https:\/\/make.wordpress.org\/accessibility\/handbook\/markup\/web-forms\/\">tornar os formul\u00e1rios acess\u00edveis<\/a><\/span>.<\/p>\n\n\n\n<p>Por exemplo, rotular os campos do seu formul\u00e1rio ajuda os usu\u00e1rios a navegarem neles com e sem tecnologia assistiva. Outra pr\u00e1tica comum para designers de formul\u00e1rios \u00e9 usar placeholders \u2014 texto que aparece no campo do formul\u00e1rio como um exemplo. Ambos s\u00e3o \u00fateis para acessibilidade, pois os r\u00f3tulos dizem aos usu\u00e1rios <span style=\"font-style: italic;\">o que<\/span>&nbsp;preencher enquanto os placeholders explicam <span style=\"font-style: italic;\">como<\/span>&nbsp;preench\u00ea-lo.<\/p>\n\n\n\n<p>\u00c9 inteligente tamb\u00e9m incluir instru\u00e7\u00f5es claras para ajudar os usu\u00e1rios a preencher formul\u00e1rios. Muitos usu\u00e1rios da web possuem o que s\u00e3o chamadas de defici\u00eancias \u201cinvis\u00edveis\u201d. Isso significa que eles podem n\u00e3o usar tecnologias assistivas, como um leitor de tela. Em vez disso, eles podem ter defici\u00eancias cognitivas, as quais instru\u00e7\u00f5es claras e outras pr\u00e1ticas de design de formul\u00e1rios acess\u00edveis podem ajudar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-5-make-your-site-keyboard-friendly\">5. Torne Seu Site Amig\u00e1vel ao Teclado<\/h3>\n\n\n\n<p>Para que um site WordPress seja genuinamente acess\u00edvel a todos, ele deve ser projetado para navega\u00e7\u00e3o <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/keyboard-operation-keyboard-operable.html\">apenas com um teclado<\/a><\/span>. Isso garante que usu\u00e1rios cegos e com baixa vis\u00e3o, bem como qualquer pessoa que necessite de um teclado alternativo ou emulador de teclado, possam usar seu site.<\/p>\n\n\n\n<p>Normalmente, a navega\u00e7\u00e3o por teclado em um site envolve o uso da tecla <span style=\"font-style: italic;\">Tab<\/span>. Isso permite ao usu\u00e1rio saltar de um item de conte\u00fado vinculado para outro. Essas \u00e1reas possuem indicadores de foco programados, que podem ser ativados com o teclado. Um usu\u00e1rio com vis\u00e3o poder\u00e1 ver uma mudan\u00e7a visual (como um contorno, borda ou cor de fundo) quando o teclado ativar uma \u00e1rea espec\u00edfica.<\/p>\n\n\n\n<p>Voc\u00ea pode ver esta funcionalidade em a\u00e7\u00e3o no exemplo a seguir, onde &#8220;acessibilidade na web&#8221;&nbsp;tem um indicador visual ao redor, significando que o usu\u00e1rio navegou at\u00e9 ele com o teclado.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/65ba34d6-99fd-41d5-9755-a5f945128f12_DreamHost-how-to-improve-accessibility-6.jpg\" alt=\"\u201cUm exemplo de foco no teclado.\u201d\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure><\/div>\n\n\n<p>Plugins como <span style=\"text-decoration: underline;\"><a href=\"https:\/\/wordpress.org\/plugins\/wp-accessibility\/\">WP Accessibility<\/a><\/span>&nbsp;podem ajud\u00e1-lo a desenvolver um melhor foco no teclado para o seu site WordPress, entre outras melhorias.<\/p>\n\n\n\n<p>Em termos de navega\u00e7\u00e3o na tela, um leitor de tela interpretar\u00e1 o conte\u00fado do seu site com base no seu c\u00f3digo-fonte. Portanto, seu c\u00f3digo deve ser escrito tendo em mente uma navega\u00e7\u00e3o l\u00f3gica da p\u00e1gina. H\u00e1 muito a entender sobre o design de um site amig\u00e1vel para teclado. Felizmente, existem muitos <span style=\"text-decoration: underline;\"><a href=\"https:\/\/webaim.org\/techniques\/keyboard\/\">recursos dispon\u00edveis<\/a><\/span>&nbsp;para orient\u00e1-lo!<\/p>\n\n\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tYour Complete Introduction to WordPress Plugins\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/intro-to-wordpress-plugins\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n\n<h2 id=\"h-empower-all-wordpress-users\" class=\"wp-block-heading\"><span style=\"font-weight: bold;\">Capacitar Todos os Usu\u00e1rios do WordPress<\/span><\/h2>\n\n\n\n<p>Navegar pelo mundo dos padr\u00f5es de acessibilidade pode ser confuso. Felizmente, o WordPress oferece recursos que voc\u00ea pode usar para <span style=\"text-decoration: underline;\"><a href=\"https:\/\/make.wordpress.org\/accessibility\/handbook\/test-for-web-accessibility\/\">testar seu site para problemas de acessibilidade<\/a><\/span>, e ent\u00e3o fazer melhorias.<\/p>\n\n\n\n<p>Garantir que voc\u00ea tenha as ferramentas certas pode ajud\u00e1-lo a criar conte\u00fado mais inclusivo. Aqui na DreamHost, acreditamos na abertura e disponibilidade de recursos online para todos. Al\u00e9m disso, oferecemos suporte de primeira linha para sites acess\u00edveis em nossos <span style=\"text-decoration: underline;\"><a href=\"https:\/\/www.dreamhost.com\/pt\/wordpress\/\">planos de hospedagem compartilhada de baixo custo<\/a><\/span>!<\/p>\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea pode ter ouvido falar sobre acessibilidade na web, mas entender e implementar as diretrizes pode parecer algo distante. Encontrar recursos para ajud\u00e1-lo a enfrentar problemas de acessibilidade tamb\u00e9m pode ser uma barreira para seus projetos na web. Felizmente, o WordPress tem avan\u00e7ado na disponibiliza\u00e7\u00e3o de ferramentas para ajudar a tornar os sites mais acess\u00edveis. Al\u00e9m disso, h\u00e1 muitos recursos dispon\u00edveis [\u2026]<\/p>\n","protected":false},"author":1062,"featured_media":24000,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-what-web-accessibility-is-and-why-it-matters\",\"O que \u00e9 Acessibilidade na Web e Por Que \u00e9 Importante\"],[\"h-exploring-the-block-editor-s-accessibility-features\",\"Explorando as Funcionalidades de Acessibilidade do Editor de Blocos\"],[\"h-5-ways-to-make-your-wordpress-blog-more-accessible\",\"5 Maneiras de Tornar o Seu Blog WordPress Mais Acess\u00edvel\"],[\"h-empower-all-wordpress-users\",\"Capacitar Todos os Usu\u00e1rios do WordPress\"]]","hide_toc":false,"footnotes":""},"categories":[14391,14409],"tags":[],"class_list":["post-52684","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriais-pt","category-wordpress-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 melhorar a acessibilidade do seu blog WordPress (E por que isso \u00e9 importante) - 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\/melhore-a-acessibilidade-do-blog-no-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como melhorar a acessibilidade do seu blog WordPress (E por que isso \u00e9 importante)\" \/>\n<meta property=\"og:description\" content=\"Voc\u00ea pode ter ouvido falar sobre acessibilidade na web, mas entender e implementar as diretrizes pode parecer algo distante. Encontrar recursos para ajud\u00e1-lo a enfrentar problemas de acessibilidade tamb\u00e9m pode ser uma barreira para seus projetos na web. Felizmente, o WordPress tem avan\u00e7ado na disponibiliza\u00e7\u00e3o de ferramentas para ajudar a tornar os sites mais acess\u00edveis. Al\u00e9m disso, h\u00e1 muitos recursos dispon\u00edveis [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/melhore-a-acessibilidade-do-blog-no-wordpress\/\" \/>\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=\"2019-12-12T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T20:12:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/1b529965-ec6a-4569-836c-b720d6b0d069_Accesibility20opt.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"598\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\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=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Como melhorar a acessibilidade do seu blog WordPress (E por que isso \u00e9 importante) - 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\/melhore-a-acessibilidade-do-blog-no-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Como melhorar a acessibilidade do seu blog WordPress (E por que isso \u00e9 importante)","og_description":"Voc\u00ea pode ter ouvido falar sobre acessibilidade na web, mas entender e implementar as diretrizes pode parecer algo distante. Encontrar recursos para ajud\u00e1-lo a enfrentar problemas de acessibilidade tamb\u00e9m pode ser uma barreira para seus projetos na web. Felizmente, o WordPress tem avan\u00e7ado na disponibiliza\u00e7\u00e3o de ferramentas para ajudar a tornar os sites mais acess\u00edveis. Al\u00e9m disso, h\u00e1 muitos recursos dispon\u00edveis [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/melhore-a-acessibilidade-do-blog-no-wordpress\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2019-12-12T15:00:00+00:00","article_modified_time":"2025-05-26T20:12:10+00:00","og_image":[{"width":900,"height":598,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/1b529965-ec6a-4569-836c-b720d6b0d069_Accesibility20opt.jpg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/melhore-a-acessibilidade-do-blog-no-wordpress\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/melhore-a-acessibilidade-do-blog-no-wordpress\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"Como melhorar a acessibilidade do seu blog WordPress (E por que isso \u00e9 importante)","datePublished":"2019-12-12T15:00:00+00:00","dateModified":"2025-05-26T20:12:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/melhore-a-acessibilidade-do-blog-no-wordpress\/"},"wordCount":1801,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/melhore-a-acessibilidade-do-blog-no-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/1b529965-ec6a-4569-836c-b720d6b0d069_Accesibility20opt.jpg","articleSection":["Tutoriais","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/melhore-a-acessibilidade-do-blog-no-wordpress\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/melhore-a-acessibilidade-do-blog-no-wordpress\/","name":"Como melhorar a acessibilidade do seu blog WordPress (E por que isso \u00e9 importante) - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/melhore-a-acessibilidade-do-blog-no-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/melhore-a-acessibilidade-do-blog-no-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/1b529965-ec6a-4569-836c-b720d6b0d069_Accesibility20opt.jpg","datePublished":"2019-12-12T15:00:00+00:00","dateModified":"2025-05-26T20:12:10+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/melhore-a-acessibilidade-do-blog-no-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/melhore-a-acessibilidade-do-blog-no-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/melhore-a-acessibilidade-do-blog-no-wordpress\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/1b529965-ec6a-4569-836c-b720d6b0d069_Accesibility20opt.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2019\/12\/1b529965-ec6a-4569-836c-b720d6b0d069_Accesibility20opt.jpg","width":900,"height":598},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/melhore-a-acessibilidade-do-blog-no-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Como melhorar a acessibilidade do seu blog WordPress (E por que isso \u00e9 importante)"}]},{"@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\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"pt","translations":{"pt":52684,"es":28991,"en":23992,"de":52688,"pl":53807,"ru":53810,"uk":53888,"it":68870,"fr":71329,"nl":71359},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52684","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\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=52684"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52684\/revisions"}],"predecessor-version":[{"id":62406,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52684\/revisions\/62406"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/24000"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=52684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=52684"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=52684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}