{"id":10927,"date":"2025-03-12T17:32:01","date_gmt":"2025-03-12T20:32:01","guid":{"rendered":"https:\/\/www.handtalk.me\/br\/?p=10927"},"modified":"2025-03-26T14:43:50","modified_gmt":"2025-03-26T17:43:50","slug":"nbr-17225-acessibilidade-site","status":"publish","type":"post","link":"https:\/\/www.handtalk.me\/br\/blog\/nbr-17225-acessibilidade-site\/","title":{"rendered":"ABNT NBR 17225: entenda a nova diretriz e garanta a acessibilidade do seu site"},"content":{"rendered":"\n

A ABNT <\/strong>(Associa\u00e7\u00e3o Brasileira de Normas T\u00e9cnicas), respons\u00e1vel pela normaliza\u00e7\u00e3o t\u00e9cnica no Brasil publicou, no dia 11 de mar\u00e7o de 2025, a primeira edi\u00e7\u00e3o da NBR (Norma Brasileira) 17225 <\/strong>que fala sobre acessibilidade digital.<\/strong><\/p>\n\n\n\n

A Lei Brasileira de Inclus\u00e3o da Pessoa com Defici\u00eancia, (LBI <\/strong>– Lei n\u00ba 13.146, de 6 de julho de 2015), visa assegurar e promover, em condi\u00e7\u00f5es de igualdade, o exerc\u00edcio dos direitos e das liberdades fundamentais por pessoa com defici\u00eancia<\/strong>. Em  seu artigo 63, ela determina: <\/p>\n\n\n\n

\u201c\u00c9 obrigat\u00f3ria a acessibilidade nos s\u00edtios da internet mantidos por empresas com sede ou representa\u00e7\u00e3o comercial no Pa\u00eds ou por \u00f3rg\u00e3os de governo, para uso da pessoa com defici\u00eancia, garantindo-lhe acesso \u00e0s informa\u00e7\u00f5es dispon\u00edveis, conforme as melhores pr\u00e1ticas e diretrizes de acessibilidade adotadas internacionalmente\u201d.<\/em><\/strong><\/p>\n\n\n\n

Ou seja, a acessibilidade nos sites brasileiros n\u00e3o \u00e9 apenas uma obriga\u00e7\u00e3o crescente<\/strong>, mas tamb\u00e9m temos agora, com o lan\u00e7amento dessa norma, diretrizes claras para tornar isso uma realidade. Esta \u00e9 uma grande conquista para a acessibilidade digital<\/strong> em todo o pa\u00eds!<\/p>\n\n\n\n

Ser\u00e1 que o site da sua empresa est\u00e1 alinhado com essas diretrizes? <\/strong>Se voc\u00ea est\u00e1 procurando sobre os principais pontos da nova NBR, o impacto em suas p\u00e1ginas e solu\u00e7\u00f5es para adequ\u00e1-las, chegou ao artigo certo! Acompanhe: <\/p>\n\n\n\n

ABNT NBR 17225: conhe\u00e7a os principais pontos<\/h2>\n\n\n\n

A primeira edi\u00e7\u00e3o da NBR  17225, lan\u00e7ada pela ABNT em 11 de mar\u00e7o de 2025, segue os crit\u00e9rios do documento Diretrizes de Acessibilidade para Conte\u00fado Web (WCAG) 2.2<\/a>, principal conte\u00fado com orienta\u00e7\u00f5es e boas pr\u00e1ticas internacionais de acessibilidade na web.<\/strong><\/p>\n\n\n\n

Ela estabelece requisitos e recomenda\u00e7\u00f5es para facilitar e otimizar o acesso de todas as pessoas aos ambientes virtuais<\/strong>, eliminando barreiras de acessibilidade <\/a>important\u00edssimas para a inclus\u00e3o digital no pa\u00eds!<\/p>\n\n\n\n

\u201cUm marco na Acessibilidade Digital no Brasil! (…) Ela [a ABNT NBR 17225] fortalece o artigo 63 da Lei Brasileira de Inclus\u00e3o (LBI), oferecendo mais direcionamentos para que a web seja ainda mais acess\u00edvel. \u00c9 um grande elo entre a LBI e a WCAG (Web Content Accessibility Guidelines), um conjunto de diretrizes internacionais que define padr\u00f5es para tornar websites e aplicativos mais acess\u00edveis para pessoas com defici\u00eancia.\u201d – Ronaldo Ten\u00f3rio, CEO e Co-Fundador da Hand Talk, em post no seu LinkedIn.<\/a> <\/em><\/strong><\/p>\n\n\n\n

Confira os principais pontos dela abaixo. E aproveite para conhecer tamb\u00e9m um mecanismo que pode revolucionar o seu site: o Hand Talk Plugin<\/strong><\/a>! Com tradutor virtual de Libras (L\u00edngua Brasileira de Sinais) e ASL (L\u00edngua de Sinais Americana), al\u00e9m de outras dezenas de recursos assistivos, a nossa solu\u00e7\u00e3o alcan\u00e7a diversas recomenda\u00e7\u00f5es para o seu site ser mais acess\u00edvel. <\/strong><\/p>\n\n\n\n

\n
Fale com especialistas<\/strong><\/a><\/div>\n<\/div>\n\n\n\n

Espa\u00e7amentos<\/strong><\/h3>\n\n\n\n

A NBR 17225 divulga exig\u00eancias importantes para os espa\u00e7amentos de textos, par\u00e1grafos, letras e linhas <\/strong>em ambientes digitais, <\/strong>tornando a leitura mais confort\u00e1vel para todas as pessoas \u2014 inclusive para pessoas com baixa vis\u00e3o e outras defici\u00eancias visuais.<\/strong><\/p>\n\n\n\n

Espa\u00e7amento entre as linhas (entrelinhas)<\/strong><\/h4>\n\n\n\n

\u00c9 um requisito <\/strong>que elas tenham pelo menos 1,5x o tamanho da fonte;<\/strong><\/p>\n\n\n\n

Espa\u00e7amento entre par\u00e1grafos<\/strong><\/h4>\n\n\n\n

Em rela\u00e7\u00e3o aos par\u00e1grafos<\/strong>, eles precisam <\/strong>ter espa\u00e7amento entre si de pelo menos 2x o tamanho da fonte<\/strong>;<\/p>\n\n\n\n

Espa\u00e7amento entre letras<\/strong><\/h4>\n\n\n\n

Precisam <\/strong>ter pelo menos 0,12x o tamanho da fonte.<\/strong><\/p>\n\n\n\n

Espa\u00e7amento entre palavras<\/strong><\/h4>\n\n\n\n

Todos os blocos de texto devem <\/strong>t\u00ea-lo com pelo menos 0,16x o tamanho da fonte<\/strong>.<\/p>\n\n\n\n

Segundo a NBR 17225, todos esses espa\u00e7amentos tamb\u00e9m podem ser feitos com um mecanismo que adeque essas obriga\u00e7\u00f5es. <\/strong>O Hand Talk Plugin <\/strong>oferece recursos assistivos que podem aumentar ou diminuir os Espa\u00e7os entre Letras <\/strong>e Espa\u00e7o entre Linhas. <\/strong>Conhe\u00e7a clicando aqui!<\/a><\/p>\n\n\n\n

Contrastes <\/strong><\/h3>\n\n\n\n

A altera\u00e7\u00e3o de contraste<\/strong> melhora a legibilidade, e promove a inclus\u00e3o de pessoas com defici\u00eancia visual. Dentro desse tema, existem recomenda\u00e7\u00f5es e requisitos:<\/p>\n\n\n\n

Contraste para texto (aprimorado)<\/strong><\/h4>\n\n\n\n

\u00c9 recomendado <\/strong>que todo conte\u00fado de texto, incluindo imagens de texto, tenha rela\u00e7\u00e3o de contraste de pelo menos 7:1 com o fundo; <\/strong>ou que o conte\u00fado de texto esteja em tamanho grande e tenha rela\u00e7\u00e3o de contraste de pelo menos 4,5:1 com o fundo<\/strong>; ou at\u00e9 que o texto fa\u00e7a parte de um logotipo ou esteja em plano secund\u00e1rio.<\/p>\n\n\n\n

Contraste para texto (m\u00ednimo)<\/strong><\/h4>\n\n\n\n

\u00c9 uma necessidade <\/strong>que todo conte\u00fado de texto, incluindo imagens de texto, tenham rela\u00e7\u00e3o de contraste de pelo menos 4,5:1<\/strong> com o fundo; ou que o texto em tamanho grande tenha rela\u00e7\u00e3o de contraste de pelo menos 3:1 com o fundo<\/strong>; ou que o texto fa\u00e7a parte de um logotipo ou esteja em plano secund\u00e1rio.<\/p>\n\n\n\n

Contraste para componentes<\/strong><\/h4>\n\n\n\n

\u00c9 necess\u00e1rio <\/strong>que todos os componentes de interface tenham rela\u00e7\u00e3o de contraste de pelo menos 3:1 com o fundo <\/strong>e entre seus estados; ou que o componente esteja em estado inativo.<\/p>\n\n\n\n

Contraste para objetos gr\u00e1ficos <\/strong><\/h4>\n\n\n\n

\u00c9 uma exig\u00eancia <\/strong>que todas as partes de objetos gr\u00e1ficos necess\u00e1rias para compreender o conte\u00fado tenham rela\u00e7\u00e3o de contraste de pelo menos 3:1 com o fundo e entre si.<\/strong><\/p>\n\n\n\n

Contraste para indicador de foco vis\u00edvel <\/strong><\/h4>\n\n\n\n

\u00c9 um requisito <\/strong>que o indicador de foco vis\u00edvel dos elementos que podem ser destacados tenha rela\u00e7\u00e3o de contraste de pelo menos 3:1 com o fundo,<\/strong> e entre os estados em foco e sem foco.<\/p>\n\n\n\n

O Hand Talk Plugin<\/a> tamb\u00e9m pode ajudar a melhorar a experi\u00eancia do contraste no seu site! O recurso de Contraste de Cores <\/strong>permite que as pessoas usu\u00e1rias escolham entre cores invertidas ou contrastes escuros e claros, conforme suas prefer\u00eancias.<\/p>\n\n\n\n

\u00bb Leia tamb\u00e9m: Como incluir milh\u00f5es de pessoas na audi\u00eancia da sua empresa e ainda promover impacto social positivo?<\/a><\/em><\/strong><\/p>\n\n\n\n

Cabe\u00e7alhos<\/strong><\/h3>\n\n\n\n

Os cabe\u00e7alhos t\u00eam o objetivo de organizar a estrutura, a ordem de import\u00e2ncia e a subordina\u00e7\u00e3o dos conte\u00fados da p\u00e1gina, <\/strong>facilitando a leitura e a compreens\u00e3o do conte\u00fado. Al\u00e9m disso, funcionam como ferramentas de navega\u00e7\u00e3o para as pessoas usu\u00e1rias de tecnologias assistivas. <\/strong><\/p>\n\n\n\n

\u00c9 uma obriga\u00e7\u00e3o <\/strong>que todos tenham a sem\u00e2ntica determinada programaticamente, <\/strong>que identifiquem as se\u00e7\u00f5es dos conte\u00fados<\/strong> e que sigam uma estrutura hier\u00e1rquica, l\u00f3gica e sem\u00e2ntica. <\/strong><\/p>\n\n\n\n

\u00c9 uma recomenda\u00e7\u00e3o <\/strong>que as p\u00e1ginas tenham somente um cabe\u00e7alho N\u00edvel 1<\/strong> (que identifica a p\u00e1gina) e que todas as se\u00e7\u00f5es tenham um cabe\u00e7alho<\/strong> que as identifica;<\/p>\n\n\n\n

O Hand Talk Plugin<\/a> oferece dois recursos \u00fateis para essa diretriz da NBR 17225: Destacar Cabe\u00e7alhos <\/strong>e Estrutura de P\u00e1gina, <\/strong>que ajudam os usu\u00e1rios a identificar e navegar de forma mais eficiente pelos conte\u00fados.<\/p>\n\n\n\n

Links<\/strong><\/h3>\n\n\n\n

Os links permitem que a pessoa usu\u00e1ria navegue entre p\u00e1ginas do site.<\/p>\n\n\n\n

S\u00e3o exig\u00eancias <\/strong>que eles tenham uma sem\u00e2ntica determinada programaticamente<\/strong>, que sejam utilizados para navega\u00e7\u00e3o<\/strong>, e que possuam textos, texto alternativo ou nome acess\u00edvel <\/strong>que, em conjunto com o contexto do link, informa sua fun\u00e7\u00e3o ou destino.<\/p>\n\n\n\n

O Destaque de Links<\/strong> do Hand Talk Plugin<\/a> \u00e9 um recurso assistivo que facilita a identifica\u00e7\u00e3o dos links da p\u00e1gina, melhorando a navega\u00e7\u00e3o de pessoas com baixa vis\u00e3o e outras defici\u00eancias. <\/p>\n\n\n\n

Anima\u00e7\u00f5es<\/strong><\/h3>\n\n\n\n

Imagens, v\u00eddeos ou outros elementos que transmitam a sensa\u00e7\u00e3o de movimento podem gerar barreiras ou distra\u00e7\u00f5es. <\/p>\n\n\n\n

Por isso, \u00e9 uma obriga\u00e7\u00e3o <\/strong>que a anima\u00e7\u00e3o n\u00e3o inicie automaticamente<\/strong>, dure mais que 5 segundos <\/strong>e seja apresentada em paralelo com outro conte\u00fado. <\/strong><\/p>\n\n\n\n

A NBR 17225 tamb\u00e9m diz que pode ser usado um mecanismo para adapta\u00e7\u00e3o – e o Hand Talk Plugin <\/strong>faz exatamente isso! O recurso assistivo Pausar Anima\u00e7\u00f5es<\/strong> permite que a pessoa usu\u00e1ria interrompa anima\u00e7\u00f5es simples criadas com CSS com um clique, promovendo uma navega\u00e7\u00e3o mais tranquila e focada. <\/p>\n\n\n\n

Int\u00e9rprete de Libras <\/strong><\/h3>\n\n\n\n

A NBR recomenda a inser\u00e7\u00e3o de janela em Libras em todo o conte\u00fado de \u00e1udio pr\u00e9-gravado em m\u00eddia sincronizada.<\/strong><\/p>\n\n\n\n

Como complemento ao trabalho dos int\u00e9rpretes de L\u00ednguas de Sinais, o Hand Talk Plugin oferece tradu\u00e7\u00e3o em Libras ou ASL para todos os conte\u00fados est\u00e1ticos do seu site com nossos personagens virtuais Hugo e Maya<\/a>, promovendo maior inclus\u00e3o para pessoas surdas!<\/strong><\/p>\n\n\n\n

\u00bb Consulte a NBR na \u00edntegra clicando aqui.<\/em><\/strong><\/a><\/p>\n\n\n\n

O seu site est\u00e1 pronto para essas mudan\u00e7as? <\/strong><\/h2>\n\n\n\n

Acessibilidade digital n\u00e3o \u00e9 apenas uma exig\u00eancia legal, mas tamb\u00e9m uma grande oportunidade para ampliar seu p\u00fablico e promover impacto social positivo. O Hand Talk Plugin<\/strong> pode te ajudar nisso.<\/p>\n\n\n\n

Somos refer\u00eancia em acessibilidade digital<\/strong> e pioneiros no uso da Intelig\u00eancia Artificial<\/strong> para tradu\u00e7\u00e3o autom\u00e1tica de Libras e dezenas de recursos assistivos. Oferecemos:<\/p>\n\n\n\n

\ud83d\udd38F\u00e1cil instala\u00e7\u00e3o sem desconfigura\u00e7\u00e3o do site;<\/p>\n\n\n\n

\ud83d\udd38Suporte especializado em acessibilidade;<\/p>\n\n\n\n

\ud83d\udd38Dashboard inteligente acompanhar o uso do plugin;<\/p>\n\n\n\n

\ud83d\udd38Equipe de lingu\u00edstica composta por surdos, CODAs e int\u00e9rpretes, garantindo tradu\u00e7\u00e3o de qualidade para Libras e ASL.<\/p>\n\n\n\n

E isso tudo em uma s\u00f3 solu\u00e7\u00e3o: O Hand Talk Plugin.<\/a><\/strong><\/p>\n\n\n\n

Somos o in\u00edcio da jornada de acessibilidade de v\u00e1rias empresas no Brasil, gerando impacto dentro e fora do ambiente digital – e podemos fazer parte da sua trilha de inclus\u00e3o tamb\u00e9m.<\/strong><\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Fundo<\/a><\/figure>\n\n\n\n
<\/div>\n","protected":false},"excerpt":{"rendered":"

Confira os principais pontos da nova NBR, o impacto em suas p\u00e1ginas e assolu\u00e7\u00f5es para adequ\u00e1-las!<\/p>\n","protected":false},"author":27,"featured_media":10930,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[876,449,874,875],"class_list":["post-10927","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sem-categoria","tag-876","tag-abnt","tag-associacao-brasileira-de-normas-tecnicas","tag-nbr-17225"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/posts\/10927","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/comments?post=10927"}],"version-history":[{"count":12,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/posts\/10927\/revisions"}],"predecessor-version":[{"id":10970,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/posts\/10927\/revisions\/10970"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/media\/10930"}],"wp:attachment":[{"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/media?parent=10927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/categories?post=10927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/tags?post=10927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}