{
  "$type": "site.standard.document",
  "canonicalUrl": "https://brunopulis.com/blog/2023/2023-02-13-acessibilidade-web-como-comecar-do-jeito-certo",
  "path": "/blog/2023/2023-02-13-acessibilidade-web-como-comecar-do-jeito-certo",
  "publishedAt": "2023-02-13T00:00:00.000Z",
  "site": "at://did:plc:jtwk3253wycggbzl3sr7b6gi/site.standard.publication/3mpu4cswflk2h",
  "tags": [
    "a11y"
  ],
  "textContent": "A acessibilidade web é um assunto cada vez mais importante para as pessoas interessadas em tornar a internet mais inclusiva. É essencial compreender como criar conteúdo acessível para que todos possam contar com a mesma experiência de navegação.\n\nNeste artigo, vamos discutir sobre o que é acessibilidade na web e como você pode tornar seu conteúdo disponível para todos.\n\nVamos começar?\n\nO propósito da web\n\nDesde sua fundação, a web tem como propósito ser universal e acessível para todos. Tim Berns-Lee possuí uma frase que exemplifica isso:\n\n> _O poder da Web está em sua universalidade.\n> O acesso por todos, independentemente da deficiência, é um aspecto essencial._\n>\n> <cite>Tim Berns-Lee, fundador da web.</cite>\n\nO fato curioso é que as especificações e princípios adotados pela W3C, eram e são extremamente passíveis de serem usados\n\nUm deles é o princípio da interoperabilidade, que nada mais é do que sua aplicação conseguir funcionar para todas as pessoas independente do seu hardware, software, idioma, localização ou capacidade.\n\nQuando isso acontece conseguimos incluir pessoas que foram excluídas ao longo de sua vida.\n\nDessa forma, as pessoas com deficiência são beneficiadas com o acesso, promovendo inclusão digital e autonomia para realizarem tomadas de decisões.\n\nMas para isso ocorrer necessitamos da acessibilidade, ela é essencial para desenvolvedores e organizações que desejam criar sites e ferramentas da web de alta qualidade e não excluir as pessoas de usar seus produtos e serviços.\n\nAfinal, o que é acessibilidade na web?\n\nAcessibilidade na web significa que nossos sites e aplicativos estejam preparados para serem acessados por qualquer pessoal, independente de sua necessidade específica.\n\nEsses usuários devem poder perceber, compreender, navegar e interagir com o conteúdo sem restrição.\n\nEla abrange todas as deficiências que afetam o acesso, incluíndo:\n\n- auditivo;\n- cognitivo;\n- neurológico;\n- físico;\n- discurso;\n- visual.\n\nAcessibilidade então é somente para pessoas com deficiência?\n\nEsse é um mito extremamente comum quando somos leigos no assunto. Em uma explicação bem resumida é: NÃO.\n\nEu escrevi um artigo sobre 5 mitos de acessibilidade: conceitos incorretos e como corrigí-los, que reforça essa ideia que acessibilidade é para todos.\n\nA acessibilidade traz muitos benefícios para pessoas que não possuem alguma deficiência também, por exemplo:\n\n- usuários de _smartphones_, _smartwatch_, outros dispositivos inteligentes como assistentes virtuais;\n- pessoas idosas que necessitam de uma nova forma de aprendizado devido a idade;\n- pessoas com deficiência temporárias, por exemplo, alguém que quebrou o braço;\n- pessoas que necessitam ver um vídeo e não conseguem habilitar o aúdio;\n- pessoas com “limitações situacionais”, como enxergar o conteúdo da tela do smartphone contra a luz solar;\n- pessoas que utilizam uma internet com conexão lenta.\n\nTécnicas para deixar nossos produtos e serviços mais acessíveis\n\nDiversos aspectos da acessibilidade são extremamente simples de serem implementados, outras são mais complexas.\n\nPor isso a acessibilidade deve ser pensando no início do projeto para evitar retrabalho.\n\nDescreve suas imagens\n\nImagens são um dos elementos mais utilizados para transmitir informação na web. Dessa forma, devemos permitir que pessoas com deficiência visual possam compreender a informação da mesma maneira que nós.\n\nPara deixarmos as imagens acessíveis devemos utilizar o atributo alt nas imagens. Ele permite que a imagem forneça um texto alternativo equivalente a sua representação visual.\n\nAssim, os não-visuais conseguem compreender o conteúdo da mesma forma.\n\nVocê pode conferir o Guia Definitivo de texto alternativo que traduzi, nele contém dicas e informações valiosas sobre descrição de imagens.\n\nNavegação do conteúdo\n\nFoto de Clay Banks na Unsplash\n\nQuando projetamos conteúdo para web, devemos pensar que as pessoas tem diversos tipos de entrada, como, por exemplo:\n\n- navegação através da fala;\n- navegação através do mouse;\n- navegação através do teclado;\n- navegação com leitores de telas.\n\nTodos esses tipos de navegação conseguimos contemplar quando projetamos pensando em várias entradas.\n\nO que devemos ter em mente: todos os recursos disponíveis via teclado devem estar disponíveis para o teclado.\n\nEvite o baixo contraste\n\nContraste é o campeão quando se trata de problemas de acessibilidade. Para garantir um bom contraste podemos utilizar ferramentas como o Color Contrast Analyzer.\n\nEsssa ferramenta analisa o contraste e traz o resultado se possuí um baixo contraste ou não.\n\nPessoas que possuem daltonismo e baixa visão são extremamente prejudicadas quando não cumprimos isso.\n\nNesse sentido, gravei um vídeo usando o Accesible Colors. Ele é uma alternativa para o Color Contrast Analyzer.\n\n<iframe\n  loading=\"lazy\"\n  title=\"Como validar contraste com o Accessible Colors\"\n  width=\"600\"\n  height=\"338\"\n  src=\"https://www.youtube.com/embed/sGwijH-rVHo?feature=oembed\"\n  frameborder=\"0\"\n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n  referrerpolicy=\"strict-origin-when-cross-origin\"\n  allowfullscreen=\"\"\n></iframe>\n\nDefina rótulos para os formulários\n\nFoto de TutorialBrain\n\nUm leitor de telas necessita que os _inputs_ de um forrmulário estejam atrelados a um rótulo.\n\nEsse rótulo deve representar o propósito do input.\n\nPara resolver esse problema é extremamente simples, confira o trecho de código abaixo:\n\nCom o uso do atributo for, criamos um vínculo entre a label e o input. Dessa forma, quando o leitor de telas navegar pelo campo irá identificar corretamente qual é o seu objetivo de preenchimento.\n\nPode parecer extremamente trivial, entretanto, é bem comum vermos formulários sem esse atributo.\n\nMinha dica é adota hoje mesmo o uso dos atributos corretos para uma melhor navegação nos seus formulários.\n\nDefina o idioma da sua página\n\nTalvez esse seja o defeito mais ignorado de acessibilidade. O atributo lang, é um aliado extremamente poderoso, contudo poucas pessoas utilizam ele da maneira correta.\n\nJá escrevi sobre o uso correto do atributo lang. Basicamente, precisamos definir o idioma padrão do documento, para que, os leitores de tela e outras tecnologias assistivas possam ler da maneira correta.\n\nConclusão\n\nAcessibilidade é um direto de todas as pessoas para promover autonomia e facilidade no assim. Nesse sentido, devemos trabalhar para que os ambientes digitais sejam cada vez mais democráticos e inclusivos.\n\nDesenvolver um produto ou serviço sem pensar em acessibilidade e dar um tiro no pé.\n\nReferências\n\n_Algumas informações neste artigo são do documento Web Accessibility Initiative (WAI): Introduction to Web Accessibility. Shawn Lawton Henry. Copyright © 2010 W3C® (MIT, ERCIM, Keio). Status: Atualizado em 31 Março de 2022. <https://www.w3.org/WAI/fundamentals/accessibility-intro/>_",
  "title": "Acessibilidade Web: como começar do jeito certo"
}