Acessibilidade em projetos web: como pensar desde o início \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 18 Horas 16 Min 48 Seg Tempo restante da oferta: 18 16 48 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Acessibilidade em projetos web: como pensar desde o início [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) # Acessibilidade em projetos web: como pensar desde o início Vamos falar sobre a importância e o impacto de iniciar um projeto web pensando em acessibilidade desde o início e as boas práticas que podem ser utilizadas. [ João Paulo Soares ](https://www.treinaweb.com.br/blog/autor/joao-paulo-soares) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/acessibilidade-em-projetos-web-como-pensar-desde-o-inicio.png) Não há como negar a necessidade de se pensar em [acessibilidade](https://www.treinaweb.com.br/blog/acessibilidade-web-por-que-deixar-seu-site-acessivel/ "acessibilidade") em projetos web desde o início e em formas de incluir todos os tipos de pessoas na sociedade. As organizações estão cada vez mais cientes que precisam se adaptar à diversidade do seu público e, boa parte delas, já começou a pensar em *acessibilidade* desde o começo do planejamento de um determinado projeto. Diante disso, é de suma importância criar um [ambiente digital inclusivo](https://www.treinaweb.com.br/blog/importancia-de-pensar-em-design-inclusivo "ambiente digital inclusivo"), permitindo que todas as pessoas, seja ela portadora de alguma deficiência momentânea ou crônica, tenham autonomia para realizar suas tarefas diárias. [ ![Acessibilidade - Introdução](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/acessibilidade-web.svg) Curso Acessibilidade - Introdução Conhecer o curso ](https://www.treinaweb.com.br/curso/acessibilidade-introducao) ## Impacto da acessibilidade em projetos web De acordo com diversos estudos relacionados à elaboração de projetos, pensar em acessibilidade no início do desenvolvimento pode impactar, quando muito, em apenas 5% no custo previsto. No entanto, caso seja necessário implementar recursos de acessibilidade mais adiante ou readequá-lo após o projeto ser finalizado, esse custo pode variar entre 20 e 40%, pois, mudanças em um ambiente web, o trabalho de análise da acessibilidade de cada página, do código gerado, da acessibilidade dos elementos visuais, entre outras questões, gera um custo muito maior do que incorporá-las na base do projeto proposto. Isto demonstra que, se a acessibilidade for considerada um requisito do projeto, e se ela estiver presente durante todo o desenvolvimento, muito pouco será afetado. Ao ser pensada desde o começo, por toda a equipe envolvida no projeto, o impacto no trabalho e nos custos serão bem pequenos. Por outro lado, o impacto positivo em relação à experiência do usuário será alto, fato que, comercialmente falando, justificará o investimento. ## Quantidade de pessoas beneficiadas pelo uso da acessibilidade em projetos web Outro ponto bastante importante a se considerar é que boa parte da população brasileira e mundial possuem algum tipo de deficiência. Segundo a *OMS - Organização Mundial da Saúde*, com dados de 2011, cerca de 1 bilhão de pessoas vivem com alguma deficiência – ou seja, uma em cada sete pessoas no mundo. Por outro lado, no Brasil, de acordo com o *IBGE - Instituto Brasileiro de Geografia e Estatística*, cerca de 24% da população brasileira tem algum tipo de deficiência de longo prazo, de natureza física, mental, intelectual ou sensorial. ## Criação de um ambiente acessível Considerando estas questões, ao se pensar em acessibilidade num projeto, há algumas boas práticas que auxiliam em sua elaboração. A seguir vamos comentar brevemente sobre cada uma delas, tendo como base um manual do portal de acessibilidade do governo do Reino Unido. Alguns pontos a serem pensados são de acordo com cada pessoa: - Transtorno do espectro autista, é recomendável utilizar cores simples, escrever frases de forma clara e simples, criar botões descritivos (como, por exemplo, “anexar arquivos” ao invés de “clique aqui”), e construir layouts simples e consistentes; - Portadores de deficiência auditiva, é recomendável escrever de forma clara e simples, usar texto literal (evitar gírias, metáforas e palavras estrangeiras), usar legendas, fornecer transcrições para vídeos, dividir o conteúdo com subtítulo e permitir que o usuário escolha a melhor forma de consumir o conteúdo; - Portadores de dislexia, é recomendável usar imagens e outros elementos visuais para acompanhar o texto, alinhá-lo à esquerda e manter a consistência do layout. Outra boa prática é produzir materiais em outros formatos - como áudio e vídeo -, manter o conteúdo curto e direto, e permitir que os usuários alterem o contraste entre plano de fundo e texto; - Baixa visão, é recomendável permitir a variação de contrastes, ter um tamanho de fonte legível com possibilidade de alteração, utilizar fontes sem serifas, publicar todas as informações diretamente em páginas HTML, usar combinação de cores, formas e texto, construir um layout linear e lógico para garantir uma boa leitura, colocar botões e notificações no contexto, e não bloquear o zoom; - Portadores de deficiência física, é recomendável criar grandes áreas clicáveis, ter um espaçamento maior entre campos de formulários, projetar para que o recurso possa ser utilizado por teclado ou voz, fornecer atalhos, e outros recursos que reduza o esforço físico; - Ao projetar para usuários de leitores de tela, é recomendável descrever imagens, fornecer transcrições para vídeo, construir um layout linear e lógico, criar uma estrutura de código baseado em HTML5, construir para uso apenas do teclado, e escrever links e títulos autodescritivos. Geralmente, este tipo de demanda surge de duas maneiras: com foco em atingir um público maior, por questões comerciais ou não, ou para a empresa estar dentro do [Decreto-Lei nº 5.296](http://www.planalto.gov.br/ccivil_03/_Ato2004-2006/2004/Decreto/D5296.htm "Decreto-Lei nº 5.296"), no qual o capítulo IV, sobre o acesso à informação e à comunicação, reitera que “será obrigatória a acessibilidade nos portais e sítios eletrônicos da administração pública na rede mundial de computadores (internet)”. Hoje o governo é obrigado a pensar em acessibilidade em projetos web. [ ![Kotlin - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/kotlin.svg) Curso Kotlin - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/kotlin-fundamentos) ## Considerações Finais É bom lembrar que acessibilidade não é apenas permitir visualizar ou ter acesso a determinado conteúdo, mas sim possibilitar que o usuário o compreenda. Esses pontos descritos acima também valem para pessoas com deficiências temporárias ou circunstanciais. Elaborar um projeto, pensando em acessibilidade desde o seu início, deveria ser algo tão natural quanto pensar na qualidade e usabilidade. Pensar no amplo acesso como requisito ou desejo, independente da atividade do negócio, é uma questão fundamental que deve ser considerada desde o princípio. Para que a falta de sensibilidade e empatia dos envolvidos não seja um problema, deve existir um alinhamento no projeto. É de suma importância que as pessoas entendam quem farão uso dos recursos acessíveis, que se sintam parte da mudança positiva que irá ocorrer, e percebam como pequenos recursos podem ser de grande ajuda para o usuário. - [ #TreinaWeb ](https://www.treinaweb.com.br/blog/tag/treinaweb) - [ #Projeto ](https://www.treinaweb.com.br/blog/tag/projeto) - [ #acessibilidade ](https://www.treinaweb.com.br/blog/tag/acessibilidade) - [ #planejamento ](https://www.treinaweb.com.br/blog/tag/planejamento) - [ #design inclusivo ](https://www.treinaweb.com.br/blog/tag/design-inclusivo) Autor ![João Paulo Soares](//secure.gravatar.com/avatar/4d84f1c245ccf1005dbc221c3b28547d?d=mm) ## João Paulo Soares Possui MBA em Arquitetura e Engenharia de Software e bacharelado em Jornalismo pela Universidade Municipal de São Caetano do Sul - USCS. Realizou intercâmbio acadêmico em Jornalismo pela Facultad de Letras y Comunicación da Universidad de Colima, no México. Atuou como redator de entretenimento e tecnologia na rádio Metropolitana FM e atualmente trabalha como Analista de Qualidade de Software. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/joao-paulo-soares) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/08/13213607/acessibilidade-web-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 7 anos atrás ## [ Acessibilidade web: por que deixar seu site acessível? ](https://www.treinaweb.com.br/blog/acessibilidade-web-por-que-deixar-seu-site-acessivel) Confira neste artigo a importância da acessibilidade em seu site. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/acessibilidade_no_HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Acessibilidade no HTML ](https://www.treinaweb.com.br/blog/acessibilidade-no-html) Nesse artigo, veremos algumas formas, de desenvolver nosso site pensando em todos, tornando assim, uma página com HTML acessível. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/04/27171327/reinaldo-ferraz-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 8 anos atrás ## [ TW Entrevista 09: Reinaldo Ferraz ](https://www.treinaweb.com.br/blog/tw-entrevista-09-reinaldo-ferraz) Fizemos uma série de entrevistas chamada "TW Entrevista". O entrevistado de hoje é o Reinaldo Ferraz, especialista em Acessibilidade para a Web e que trabalha na W3C Brasil. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/importancia-de-pensar-em-design-inclusivo-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Importância de pensar em Design Inclusivo ](https://www.treinaweb.com.br/blog/importancia-de-pensar-em-design-inclusivo) Conheça o que é design inclusivo, seus princípios e a importância de pensar em acessibilidade em seus produtos desde o início do projeto. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/GUIA-HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Guia da linguagem HTML ](https://www.treinaweb.com.br/blog/guia-da-linguagem-html) Esse guia é perfeito pra você que está começando ou quer entender melhor como podemos trabalhar com a linguagem HTML . Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/técnicas-acessibilidade-web-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 6 anos atrás ## [ Técnicas de acessibilidade para deixar o seu site mais inclusivo ](https://www.treinaweb.com.br/blog/tecnicas-de-acessibilidade-para-deixar-o-seu-site-mais-inclusivo) Conheça as principais ferramentas e técnicas de acessibilidade para web. Veja também tipos de dificuldades e deficiências atendidas por elas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/08/capa-acessibilidade-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 2 anos atrás ## [ UX Inclusivo: A importância da acessibilidade no design ](https://www.treinaweb.com.br/blog/ux-inclusivo-a-importancia-da-acessibilidade-no-design) Confira a importância de tornar suas aplicações móveis acessíveis para todos, garantindo inclusão social, maior alcance e conformidade legal. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/07/29063746/0-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 7 anos atrás ## [ Como funciona uma empresa de desenvolvimento de software? ](https://www.treinaweb.com.br/blog/como-funciona-uma-empresa-de-desenvolvimento-de-software) Veja de forma resumida como é trabalhar em uma empresa de desenvolvimento de software. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/ANGULAR-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ O que é o Angular e para que serve? ](https://www.treinaweb.com.br/blog/o-que-e-o-angular-e-para-que-serve) Frameworks SPA atualmente são um padrão de mercado quando falamos sobre desenvolvimento front-end. Neste artigo, vamos abordar o Angular, um dos mais populares. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/07/checklist-de-seguranca-para-autenticacao-400x280.png) [ Segurança da Informação ](https://www.treinaweb.com.br/blog/categoria/seguranca-da-informacao) 10 anos atrás ## [ Checklist de segurança para autenticação ](https://www.treinaweb.com.br/blog/checklist-de-seguranca-para-autenticacao) Cuidar da segurança é um dos pilares para a sustentação de qualquer aplicação na web. Sem o mínimo não é possível nem mesmo garantir uma razoável disponibilidade. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/29143726/TW-ENTREVISTAS-TALITA-PAGANI-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 9 anos atrás ## [ TW Entrevista 07: Talita Pagani ](https://www.treinaweb.com.br/blog/tw-entrevista-07-talita-pagani) Fizemos uma série de entrevistas chamada "TW Entrevista". A entrevistada de hoje é a Talita Pagani, desenvolvedora, empreendedora e membro da W3C's Web Accessibility Working Group do Brasil. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/semantica-html-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Semântica HTML: O que é e por que é importante ](https://www.treinaweb.com.br/blog/semantica-html-o-que-e-e-por-que-e-importante) Neste artigo, veremos a importância do uso da Semântica HTML e como utilizamos as tags em nossos projetos, mantendo assim o código semântico. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **18h 16min 48s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58