{"id":6254,"date":"2023-06-08T08:50:00","date_gmt":"2023-06-08T11:50:00","guid":{"rendered":"https:\/\/www.handtalk.me\/br\/?p=6254"},"modified":"2024-02-06T14:46:02","modified_gmt":"2024-02-06T17:46:02","slug":"uxui-design-acessivel-tudo-o-que-voce-precisa-saber","status":"publish","type":"post","link":"https:\/\/www.handtalk.me\/br\/blog\/uxui-design-acessivel-tudo-o-que-voce-precisa-saber\/","title":{"rendered":"Acessibilidade e UX: o que \u00e9, import\u00e2ncia e a quem beneficia?"},"content":{"rendered":"\n<p>A internet \u00e9 uma ferramenta revolucion\u00e1ria, que mudou a vida da sociedade desde que nasceu! Por\u00e9m, infelizmente, <a href=\"https:\/\/www.handtalk.me\/br\/blog\/acessibilidade-na-web\/\" target=\"_blank\" rel=\"noopener\" title=\"\">mais de 99% de seus dom\u00ednios n\u00e3o est\u00e3o acess\u00edveis<\/a> para todas as pessoas no Brasil. Isso mesmo! Ela tem facilitado o dia a dia de muitas pessoas, mas, por outro lado, <strong>ainda possui in\u00fameras barreiras de acesso e de comunica\u00e7\u00e3o, principalmente para as pessoas com defici\u00eancia<\/strong>. Para reduzir estas desigualdades, existe uma \u00e1rea da tecnologia que agrega <a href=\"https:\/\/www.handtalk.me\/br\/blog\/acessibilidade-na-web\/\" target=\"_blank\" rel=\"noopener\" title=\"\">acessibilidade e UX<\/a>, que j\u00e1 est\u00e1 diminuindo os obst\u00e1culos digitais. Ent\u00e3o, se voc\u00ea quer saber mais sobre o assunto, \u00e9 s\u00f3 continuar aqui com a gente!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O que \u00e9 acessibilidade em UX?<\/h2>\n\n\n\n<p>Para come\u00e7ar a falar sobre isso, precisamos entender o que \u00e9 UX design. O <a href=\"https:\/\/www.handtalk.me\/br\/blog\/experiencia-do-usuario-e-acessibilidade\/\" target=\"_blank\" rel=\"noopener\" title=\"\">\u201cUX design\u201d se refere \u00e0 experi\u00eancia do usu\u00e1rio<\/a>, est\u00e1 ligado ao n\u00edvel de satisfa\u00e7\u00e3o de uma pessoa ao utilizar uma plataforma digital, um servi\u00e7o ou produto. Aqui estamos falando sobre a emo\u00e7\u00e3o, o que o visitante sente ao entrar em contato com uma p\u00e1gina, por exemplo.<\/p>\n\n\n\n<p>Mas o que isso tem a ver com <strong>acessibilidade<\/strong>? Bom, de acordo com uma <a href=\"https:\/\/agenciadenoticias.ibge.gov.br\/agencia-sala-de-imprensa\/2013-agencia-de-noticias\/releases\/31445-pns-2019-pais-tem-17-3-milhoes-de-pessoas-com-algum-tipo-de-deficiencia\" target=\"_blank\" rel=\"noopener\" title=\"\">pesquisa do IBGE realizada em 2019<\/a>, cerca de 17,3 milh\u00f5es de pessoas possuem algum tipo de defici\u00eancia no Brasil. Mesmo com a <a href=\"https:\/\/www.handtalk.me\/br\/blog\/guia-da-acessibilidade-lbi\/?utm_source=Blog&amp;utm_medium=TudoSobreAcessibilidadeNaWeb_Link\"><strong>LBI (Lei Brasileira de Inclus\u00e3o)<\/strong><\/a>, que garante o direito delas ao acesso \u00e0 informa\u00e7\u00e3o e <strong>exige que todos os sites, p\u00fablicos e privados, estejam acess\u00edveis, a acessibilidade ainda assim \u00e9 negligenciada pela grande maioria das pessoas respons\u00e1veis por ambientes virtuais.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Qual a import\u00e2ncia da acessibilidade em UX?<\/h2>\n\n\n\n<p><strong>A falta de acessibilidade digital impacta diretamente na experi\u00eancia do usu\u00e1rio (UX design)<\/strong>, pois sites e apps desenhados para as pessoas sem defici\u00eancia, possuem muitas barreiras de comunica\u00e7\u00e3o e de acessos no geral, que <strong>est\u00e3o excluindo uma grande parcela da popula\u00e7\u00e3o<\/strong>.&nbsp;<\/p>\n\n\n\n<p><strong>\u00c9 a\u00ed que <\/strong><a href=\"https:\/\/www.youtube.com\/watch?v=GcgqQr4zlhI\" target=\"_blank\" rel=\"noopener\" title=\"\"><strong>acessibilidade e UX trabalham juntos<\/strong><\/a>! Quando pensamos na <strong>experi\u00eancia e na interface do usu\u00e1rio de forma completa e inclusiva, permitimos que todas as pessoas possam navegar com autonomia e conforto.<\/strong><\/p>\n\n\n\n<p>Al\u00e9m disso, confira algumas outras raz\u00f5es super importantes para adotar um UX acess\u00edvel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Respeitar as leis<\/h3>\n\n\n\n<p>De acordo com a LBI, que j\u00e1 comentamos acima, toda pessoa com defici\u00eancia deve ter direito \u00e0 igualdade de oportunidades. <strong>Isso se aplica ao ambiente virtual tamb\u00e9m<\/strong>! N\u00e3o contar com a acessibilidade digital no seu site pode at\u00e9 resultar em multas, sabia?<\/p>\n\n\n\n<p>Ainda, os <a href=\"https:\/\/www.handtalk.me\/br\/blog\/ods-e-acessibilidade-digital\/\" target=\"_blank\" rel=\"noopener\" title=\"\"><strong>Objetivos de Desenvolvimento Sustent\u00e1vel da ONU<\/strong><\/a><strong> <\/strong>t\u00eam ganhado bastante relev\u00e2ncia no mercado ultimamente, e um deles inclusive advoga pela redu\u00e7\u00e3o das desigualdades ao redor do mundo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Garantir uma boa reputa\u00e7\u00e3o<\/h3>\n\n\n\n<p>Ainda mais nos dias atuais, a <strong>sociedade est\u00e1 bastante engajada com marcas que apoiem as mesmas causas pelas quais elas lutam<\/strong>. Sendo assim, ter iniciativas pr\u00e1ticas em prol da acessibilidade e inclus\u00e3o digital \u00e9 uma \u00f3tima maneira de se conectar com uma comunidade que apoiar\u00e1 sua movimenta\u00e7\u00e3o.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Aumentar a aquisi\u00e7\u00e3o de novos usu\u00e1rios<\/h3>\n\n\n\n<p>Essa quest\u00e3o est\u00e1 bastante em linha com o que falamos no t\u00f3pico anterior. Al\u00e9m de tornar a sua marca mais atrativa para pessoas que compartilham dos seus valores, voc\u00ea tamb\u00e9m a estar\u00e1 deixando mais acess\u00edvel, f\u00edsica e virtualmente, <strong>podendo atentar a uma diversidade maior de clientes.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quem a acessibilidade em UX beneficia?<\/h2>\n\n\n\n<p>Talvez voc\u00ea ainda esteja um pouco na d\u00favida de quem \u00e9 o p\u00fablico que \u00e9 beneficiado com a acessibilidade. Muitas pessoas acreditam que ela favorece apenas \u00e0s pessoas com defici\u00eancia, mas isso \u00e9 um grande equ\u00edvoco!<\/p>\n\n\n\n<p>Como falamos anteriormente, investir em um bom e acess\u00edvel UX design com certeza <strong>trar\u00e1 resultados muito positivos, pois impacta na usabilidade de todas as pessoas<\/strong>. Crian\u00e7as, pessoas jovens, pessoas com e sem defici\u00eancia, e tamb\u00e9m idosos. Mas n\u00e3o para por a\u00ed! As marcas tamb\u00e9m ganham com isso, <strong>pois websites que possuem design acess\u00edvel, abrem suas portas para um p\u00fablico que antes n\u00e3o era visto e ainda garante um melhor posicionamento no Google Search.&nbsp;<\/strong><\/p>\n\n\n\n<p>Ent\u00e3o que tal agora nos aprofundarmos em quem s\u00e3o as pessoas mais beneficiadas por um UX acess\u00edvel?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dificuldades visuais<\/h3>\n\n\n\n<p>Pessoas cegas e com defici\u00eancia visual muitas vezes navegam com o aux\u00edlio de leitores de tela, <a href=\"https:\/\/www.handtalk.me\/br\/blog\/conheca-quais-sao-as-principais-ferramentas-de-acessibilidade-na-web-e-sua-relevancia\/\" target=\"_blank\" rel=\"noopener\" title=\"\">ferramentas de acessibilidade<\/a> que realizam a leitura de todo o conte\u00fado online. \u00c9 necess\u00e1rio que as imagens possuam boas descri\u00e7\u00f5es alternativas (ALT), do contr\u00e1rio, <strong>elas tamb\u00e9m n\u00e3o ter\u00e3o uma boa experi\u00eancia, pois n\u00e3o compreender\u00e3o as informa\u00e7\u00f5es visuais que est\u00e3o sendo transmitidas ali.&nbsp;<\/strong><\/p>\n\n\n\n<p>Pessoas com miopia, daltonismo e epilepsia tamb\u00e9m podem ter dificuldades com baixos contrastes, informa\u00e7\u00f5es ocultas em links e com cores sendo a \u00fanica identifica\u00e7\u00e3o de um conte\u00fado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dificuldades motoras<\/h3>\n\n\n\n<p>Algumas das principais dificuldades de pessoas com defici\u00eancias f\u00edsicas ou mobilidade reduzida s\u00e3o pop-ups muito r\u00e1pidos, ou digita\u00e7\u00e3o e rolagem excessivas. Indiv\u00edduos com falta de for\u00e7a, convuls\u00f5es e espasmos tamb\u00e9m enfrentam essas barreiras.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dificuldades auditivas<\/h3>\n\n\n\n<p>Quando uma <a href=\"https:\/\/www.handtalk.me\/br\/blog\/desafios-pessoa-surda-mundo-digital\/\" target=\"_blank\" rel=\"noopener\" title=\"pessoa surda\">pessoa surda<\/a>, que se comunica por meio da Libras (L\u00edngua Brasileira de Sinais), tenta navegar em uma p\u00e1gina que n\u00e3o possui tradu\u00e7\u00e3o em sua l\u00edngua natural, ela vai encontrar grande dificuldade em compreender o conte\u00fado escrito em Portugu\u00eas.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Dificuldades cognitivas<\/h3>\n\n\n\n<p>As pessoas mais afetadas nesse cen\u00e1rio s\u00e3o aquelas com dislexia e autismo, ou at\u00e9 dificuldade de aprendizado. Elas enfrentam diversas barreiras ao precisar memorizar informa\u00e7\u00f5es de p\u00e1ginas anteriores, muitas figuras de linguagem e contrastes brilhantes, por exemplo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Limita\u00e7\u00f5es socioambientais e incidentais<\/h3>\n\n\n\n<p><strong>Voc\u00ea sabia que uma defici\u00eancia tamb\u00e9m pode ser situacional?<\/strong> Por exemplo, segurar uma crian\u00e7a no colo pode te impedir de realizar atividades como abrir uma porta, ou descarregar compras do carro.&nbsp;<\/p>\n\n\n\n<p>No ambiente online isso tamb\u00e9m se aplica, com usu\u00e1rios em zonas rurais que n\u00e3o possuem bom acesso a internet, pessoas com limita\u00e7\u00f5es de uso de dados para a internet que contam com um carregamento leve das p\u00e1ginas, e at\u00e9 pessoas com limita\u00e7\u00f5es de tempo que precisam conseguir realizar a\u00e7\u00f5es r\u00e1pidas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dicas de UX|UI design acess\u00edvel<\/h2>\n\n\n\n<p>Agora, que voc\u00ea j\u00e1 sabe sobre o que \u00e9 e a import\u00e2ncia da acessibilidade para o UX design, vamos aprender algumas formas de constru\u00ed-lo na pr\u00e1tica:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Instalar tradutores de Libras para realizar a tradu\u00e7\u00e3o do texto para a L\u00edngua de Sinais<\/strong>, contribuindo para maior inclus\u00e3o das pessoas que se comunicam atrav\u00e9s desta l\u00edngua.<\/li><li><a href=\"https:\/\/www.boia.org\/blog\/inclusive-design-vs.-accessible-design-understanding-the-differences\" target=\"_blank\" rel=\"noopener\" title=\"\"><strong>Incluir legenda e audiodescri\u00e7\u00e3o<\/strong><\/a> nos v\u00eddeos da sua p\u00e1gina. Essa pr\u00e1tica \u00e9 acess\u00edvel para todas as pessoas e n\u00e3o apenas para as pessoas com defici\u00eancia auditiva, por exemplo.\u00a0<\/li><li><strong>Garantir que todas as imagens contem com uma boa descri\u00e7\u00e3o alternativa<\/strong>. Assim as pessoas cegas e com baixa vis\u00e3o, que usam leitores de tela, conseguir\u00e3o absorver as informa\u00e7\u00f5es que est\u00e3o sendo transmitidas via imagem.<\/li><li>Evitar passar informa\u00e7\u00f5es por meio de imagens e emojis. Esse h\u00e1bito n\u00e3o \u00e9 acess\u00edvel para as pessoas cegas.<\/li><li><strong>Desenvolver c\u00f3digos acess\u00edveis na programa\u00e7\u00e3o do site<\/strong>. Isso tamb\u00e9m facilita o entendimento das pessoas cegas e com baixa vis\u00e3o que utilizam softwares de leitura de tela.<\/li><li><strong>Incluir fontes com boa legibilidade<\/strong>. Textos com as fontes e tamanhos adequados permitem que todas as pessoas possam ler com conforto.<\/li><li>Possibilitar que o usu\u00e1rio altere o tamanho da fonte na interface do seu site.<\/li><li><strong>Alto contraste<\/strong>. Pensar bem nas cores e averiguar se o <a href=\"https:\/\/www.handtalk.me\/br\/blog\/contraste-de-cores-e-acessibilidade\/\" target=\"_blank\" rel=\"noopener\" title=\"contraste\">contraste<\/a> est\u00e1 adequado, n\u00e3o apenas beneficia as pessoas com defici\u00eancia visual, como tamb\u00e9m melhora o design para todas as pessoas.<\/li><li>Disponibilizar a <strong>personaliza\u00e7\u00e3o de contraste e luminosidade da interface<\/strong>.<\/li><li>Tomar cuidado com cores muito saturadas! Elas podem incomodar pessoas com autismo, por exemplo.\u00a0<\/li><li>N\u00e3o exagerar nas anima\u00e7\u00f5es. Elas podem distrair qualquer pessoa, especialmente as com dificuldade de aten\u00e7\u00e3o.<\/li><li>Criar uma \u00e1rea de toque (como bot\u00f5es clic\u00e1veis) de pelo menos 44 pixels. Isso auxilia pessoas com defici\u00eancia motora ou idosas.<\/li><li>Seguir as <a href=\"https:\/\/www.handtalk.me\/br\/blog\/wcag-2-2\/\" target=\"_blank\" rel=\"noopener\" title=\"\"><strong>Diretrizes de Acessibilidade de Conte\u00fado da Web (WCAG)<\/strong><\/a>. Essas diretrizes garantem mais acessibilidade para todas as pessoas, n\u00e3o apenas para as com defici\u00eancia.<\/li><li>Conferir se a sua solu\u00e7\u00e3o \u00e9 <strong>compat\u00edvel com todos os tipos de tela<\/strong>.<\/li><li><a href=\"https:\/\/brasil.uxdesign.cc\/design-digital-e-acessibilidade-70-dicas-pr%C3%A1ticas-99e0324a5b2e\" target=\"_blank\" rel=\"noopener\" title=\"\">Disponibilizar busca por comando de voz<\/a>. Isso facilita a navega\u00e7\u00e3o para as pessoas cegas e tamb\u00e9m pessoas com paralisia cerebral, entre outras defici\u00eancias, al\u00e9m de tamb\u00e9m ser \u00fatil para qualquer pessoa que possa.<\/li><li>Garantir que seu layout siga uma sequ\u00eancia l\u00f3gica e descomplicada.<\/li><li>Pensar na hierarquia de fontes e conte\u00fados tamb\u00e9m \u00e9 uma boa pr\u00e1tica para facilitar a navega\u00e7\u00e3o de todas as pessoas.<\/li><li><strong>Evitar frases e textos complexos<\/strong>. Fa\u00e7a o exerc\u00edcio de pensar se pessoas semi-analfabetas conseguiriam entender a mensagem, ou se quando o conte\u00fado for traduzido para Libras, ele ainda far\u00e1 sentido?<\/li><\/ul>\n\n\n\n<p>Um <strong>UX design acess\u00edvel \u00e9 uma <\/strong><a href=\"https:\/\/www.handtalk.me\/br\/blog\/acessibilidade-web-responsabilidade-time\/\" target=\"_blank\" rel=\"noopener\" title=\"\"><strong>responsabilidade n\u00e3o apenas do time<\/strong><\/a> envolvido na programa\u00e7\u00e3o, mas tamb\u00e9m de toda a empresa. \u00c9 recomendado que pense em acessibilidade <strong>desde o in\u00edcio do projeto<\/strong>, pois \u00e9 mais f\u00e1cil de implementar as solu\u00e7\u00f5es mais adequadas do que quando ele j\u00e1 est\u00e1 finalizado.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p>Promover uma boa experi\u00eancia e interface do usu\u00e1rio envolve v\u00e1rias etapas. E se voc\u00ea quer saber por onde come\u00e7ar, <a href=\"https:\/\/www.handtalk.me\/br\/blog\/hand-talk-plugin-5-0\/\" target=\"_blank\" rel=\"noopener\" title=\"\">conhe\u00e7a o Hand Talk Plugin<\/a>!&nbsp;<\/p>\n\n\n\n<p><strong>Uma solu\u00e7\u00e3o de tradu\u00e7\u00e3o em Libras que est\u00e1 quebrando barreiras de comunica\u00e7\u00e3o entre as pessoas surdas e ouvintes em centenas de p\u00e1ginas da internet<\/strong>. Ele conta com a ajuda do Hugo e da Maya, os simp\u00e1ticos tradutores virtuais da Hand Talk! Incluir essa ferramenta de acessibilidade <strong>\u00e9 um grande passo que contribui para a acessibilidade UX design do seu site<\/strong>. Clique no banner para falar com a gente e saber mais!<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.handtalk.me?utm_source=blog&amp;utm_medium=organic&amp;utm_term=&amp;utm_content=blog-post-ux-ui-design-acessivel&amp;utm_campaign=content-marketing\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"160\" src=\"https:\/\/www.handtalk.me\/br\/wp-content\/uploads\/sites\/8\/2017\/05\/banner-blog-plugin-750x160-1.png\" alt=\"Banner com fundo verde \u00e1gua\" class=\"wp-image-5682\" srcset=\"https:\/\/www.handtalk.me\/br\/wp-content\/uploads\/sites\/8\/2017\/05\/banner-blog-plugin-750x160-1.png 750w, https:\/\/www.handtalk.me\/br\/wp-content\/uploads\/sites\/8\/2017\/05\/banner-blog-plugin-750x160-1-300x64.png 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/a><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A internet \u00e9 uma ferramenta revolucion\u00e1ria, que mudou a vida da sociedade desde que nasceu! Por\u00e9m, infelizmente, mais de 99% de seus dom\u00ednios n\u00e3o est\u00e3o acess\u00edveis para todas as pessoas no Brasil. Isso mesmo! Ela tem facilitado o dia a dia de muitas pessoas, mas, por outro lado, ainda possui in\u00fameras barreiras de acesso e [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":7990,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,14,15,596],"tags":[52,91,662],"class_list":["post-6254","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-acessibilidade","category-acessibilidade-digital","category-investimento-em-acessibilidade","category-plugin","tag-acessibilidade","tag-acessibilidade-digital","tag-uxui-design"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/posts\/6254","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\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/comments?post=6254"}],"version-history":[{"count":0,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/posts\/6254\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/media\/7990"}],"wp:attachment":[{"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/media?parent=6254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/categories?post=6254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/tags?post=6254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}