Acessibilidade no HTML \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto**
Termina em Tempo restante da oferta: 02 Horas
27 Min
44 Seg
Tempo restante da oferta: 02 27 44
[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 no HTML [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux)
# Acessibilidade no HTML
Nesse artigo, veremos algumas formas, de desenvolver nosso site pensando em todos, tornando assim, uma página com HTML acessível.
[ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 4 anos atrás
No artigo de hoje, vamos aprender mais sobre um assunto que, muitas vezes, é deixado de lado. Ter um HTML acessível, certamente, é um dos assuntos mais importantes. Principalmente, para que todos tenham uma boa experiência ao acessar uma página.
Funcionalidades e boas práticas são fundamentais para inclusão de pessoas com deficiência na internet. Pequenas alterações podem ser o diferencial para uma experiência boa ou ruim dentro de uma página web.
[  ](https://www.treinaweb.com.br/ebook/guia-HTML/)
## Por que devemos nos preocupar com acessibilidade?
Há vários motivos para deixar o HTML acessível, primeiramente, e mais importante, serve para que todos consigam entender e navegar por nossa página. No artigo aqui da TreinaWeb, [Acessibilidade em projetos web: como pensar desde o início](https://www.treinaweb.com.br/blog/acessibilidade-em-projetos-web-como-pensar-desde-o-inicio "Acessibilidade em projetos web"), aborda muito bem a proporção, em dados reais, o tamanho dessa necessidade.
Além do que foi dito, um dos critérios para ranquear páginas é a sua acessibilidade. Eles reconhecem a adaptação do HTML através de atributos que adicionamos juntamente das `tags`, ou, até mesmo, de um HTML semântico.
Vale ressaltar, que, existe um [decreto federal de 2004 n° 5.296](http://www.planalto.gov.br/ccivil_03/_ato2004-2006/2004/decreto/d5296.htm "decreto federal de 2004 n° 5.296") que obriga sites no Brasil a serem acessíveis. Esse decreto foi sancionado no dia 6 de julho de 2015 a [Lei Brasileira de Inclusão da Pessoa com Deficiência](http://www.planalto.gov.br/ccivil_03/_ato2015-2018/2015/lei/l13146.htm "Lei Brasileira de Inclusão da Pessoa com Deficiência").
## Como podemos ter um HTML acessível?
Existem inúmeras formas de efetuar essa adaptação. Primeiramente, para conseguir criar essa funcionalidade, temos que entender quais ferramentas pessoas com deficiência utilizam para navegar na internet.
Algumas pessoas, usam leitores de tela para conseguir entender os sites, outras usam a página através de tradutores em Libras (Língua Brasileira de Sinais), outras, por outro lado, que possuem algum tipo de deficiência motora e não consegue utilizar o mouse, navegam através do teclado.
Portanto, agora temos ciência da necessidade, vamos ver então o que podemos fazer para deixar nosso código HTML acessível a todos.
[  ](https://www.treinaweb.com.br/lp/aula-gratis/)
### Descrição das imagens
Para que uma pessoa com deficiência visual possa entender uma imagem, é necessário um texto explicativo. Ele serve para que leitores de tela possam descrever a imagem, de tal forma que o usuário entenda o sentido da imagem com clareza. O recomendado, é que, esse texto alternativo seja o mais esclarecedor possível. De uma maneira que, qualquer pessoa que leia, ou escute aquela descrição, consiga compreender a imagem com clareza.
Esse texto alternativo, é um atributo adicionado junto da tag `img`, ele tem o nome de `alt=" "`. Dentro das aspas é o local que temos para descrição. Vamos ver um exemplo:
Para essa imagem, seguindo os padrões corretos de descrição, podemos fazer da seguinte forma: `alt=" Dois homens sentados próximos, de frente para uma mesa com computador, homem do lado direito tem cabelos curtos e lisos e está usando uma camisa de manga curta e calça, o outro rapaz, da esquerda, tem cabelos encaracolados curtos, camisa e bermuda"`
### Hierarquia de cabeçalhos
Essa parte dos `headers` também é, certamente, muito importante. Pois, há a possibilidade de o usuário navegar pelos cabeçalhos da página. De forma com que ele saia de um título principal, um `h1`, e vá para o próximo título hierárquico, ou até mesmo, ir acessando os subtítulos dele. Certamente, isso só é possível, se seu site estiver corretamente estruturado.
Outro ponto, é que um site bem estruturado com seus títulos, são melhores ranqueados pelos mecanismos de busca, e ajudam com a navegação pelos leitores de tela.
### Links e atalhos de navegação
Os links de uma página precisam ser utilizados de forma lógica, ou seja, que façam sentido à página. Pessoas que, por exemplo, não utilizam o mouse devido à mobilidade reduzida ou com alguma deficiência visual, utilizam softwares auxiliares ou atalhos do teclado, sendo assim, utilizam o TAB para percorrer pelos links de uma página.
O `tabindex` é um atributo que ao ser adicionado as tags HTML, serve para criar uma sequência específica dos elementos HTML. A maioria dos navegadores já possui esse atalho integrado, como o Google Chrome, Firefox, Microsoft Edge entre outros.
### Estrutura de formulários
Formulários possuem dados do usuário, por muitas vezes, que podem ser sensíveis. Dessa forma, se torna algo que precisa de atenção redobrada.
Já é algo comum o uso de tag semântica na criação de um formulário. Normalmente, segue um padrão bem conhecido:
- `form`: é a tag que envolve os campos de um formulário.
- `input`: são os campos para preenchimento, podendo ser de vários tipos como, `text`, `submit`, `radio`, `checkbox`, `number` entre outros.
- `textarea`: essa tag é utilizada para que o usuário escreva textos maiores, utilizada normalmente para comentários de um post, ou até mesmo da página.
- `select`: é usado para criação de uma lista de itens predefinidas pelo desenvolvedor, como um menu de seleção.
- `button`: o uso mais comum é usado a enviar os dados preenchidos.
Além dessas tags mais usadas, quando pensamos na parte da acessibilidade, é importante o uso de outras tags complementares, que deixam nosso HTML mais semântico e acessível.
- `label`: tag semântica para definir um nome para algum `input`.
- `fieldset`: usada para a separar as informações dos formulários em grupos. Por exemplo, dados pessoais e de endereço.
- `legend`: nela podemos, semanticamente, dar um rótulo para um, `fieldset`, por exemplo.
- `optgroup`: essa tag trabalha em conjunto com a tag `select`, é onde criamos grupos de opções.
### Idioma da página
O idioma da página é algo que, pode passar despercebido por alguns desenvolvedores, principalmente para os iniciantes.
Ao se iniciar um novo projeto, é necessário dizer aos navegadores qual é o idioma de origem daquela página. Além de ajudá-los a identificar se a página, ao ser aberta, precisa, ou não, de tradução. Ainda ajuda o usuário que utiliza a tradução para Libras.
### Atributos ARIA
ARIA significa, Aplicações para a Internet Ricas em Acessibilidade. Esse atributo pode ser usado em qualquer tag dentro do site. Ele ajuda quando se é necessário passar mais informações do que realmente um elemento faz na nossa página.
Existem inúmeras variações para esse atributo. Para utilizá-lo, escreve-se da seguinte maneira, primeiro seu nome e depois o que queremos descrever separado por um `-` (hífen), `aria-...`. Vamos ver alguns exemplos.
- `aria-required`: nele indicamos para leitores de tela, informar para o usuário a necessidade de preenchimento do campo.
- `aria-haspopup`: informa ao usuário que um botão, abrirá uma janela de pop-up.
- `aria-checked`: esse atributo informa que o input, `checkbox` ou `radio button` já está marcado.
- `aria-disabled`: ele avisa ao usuário que o campo está desabilitado.
- `aria-label`: informa que esse campo é o rótulo de algum outro elemento, ou seja, ele associa um elemento ao outro.
- `aria-multiline`: normalmente usado junto da tag `textarea`, ele pode receber o valor de `true` ou `false`, indicando se o campo pode, ou não, ter mais de uma linha para escrever.
- `aria-labelledby`: ao contraio do `aria-label`, esse atributo, indica que um elemento esta sendo rotulado pelo elemento indicado dentro do `aria-labelledby=" "`.
Além dos exemplos citados a cima, existem outros muitos atributos ARIA que não só podemos, como decerto, devemos utilizar. Na [documentação oficial no site do Mozilla](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles "oficial do site do Mozilla"), tem uma lista de todos os atributos disponíveis e suas definições.
## Conclusão
Saber, não só como criar, mas sim estruturar de forma completa uma página é fundamental. Desenvolver essa mentalidade, principalmente no começo, quando estamos aprendendo, é o que nos dá uma base sólida de conhecimento.
Por fim, é importante pensar no quão bem nossa página ficará ranqueada ao se utilizar um HTML acessível e semântico. Entretanto, o que realmente importante, é que consigamos dar aos usuários de nossa página uma ótima experiência, seja ela uma pessoa com deficiência ou não.
- [ #acessibilidade ](https://www.treinaweb.com.br/blog/tag/acessibilidade)
- [ #HTML ](https://www.treinaweb.com.br/blog/tag/html)
Autor
## Amauri Blanco Corrêa
Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia.
[Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri)
## 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
-  [ 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
-  [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux)
6 anos atrás
## [ Acessibilidade em projetos web: como pensar desde o início ](https://www.treinaweb.com.br/blog/acessibilidade-em-projetos-web-como-pensar-desde-o-inicio)
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.
Ler artigo
-  [ 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
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
4 anos atrás
## [ Entendendo os atributos HTML ](https://www.treinaweb.com.br/blog/entendendo-os-atributos-html)
No artigo de hoje, veremos algo que está muito presente no mundo da programação, atributos. Por que são tão importantes para o Front-End?
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
4 anos atrás
## [ O que é HTML? ](https://www.treinaweb.com.br/blog/o-que-e-html)
No artigo de hoje, será abordado o tema HTML, nele irá conter desde sua história, quem o criou e como deve ser montada sua estrutura.
Ler artigo
-  [ 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
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
4 anos atrás
## [ Criando componentes com Tailwind CSS ](https://www.treinaweb.com.br/blog/criando-componentes-com-tailwind-css)
Neste artigo veremos por que os componentes nos ajudam durante o desenvolvimento do nosso projeto e como conseguimos criá-los com Tailwind CSS
Ler artigo
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
4 anos atrás
## [ Trabalhando com a tag âncora no HTML ](https://www.treinaweb.com.br/blog/trabalhando-com-a-tag-ancora-no-html)
Nesse artigo veremos como a tag âncora (link) e seus atributos são utilizados no desenvolvimento de sites, e como ela pode nos ajudar.
Ler artigo
-  [ 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
-  [ 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
-  [ 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
-  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end)
6 anos atrás
## [ Storybook - A melhor maneira de criar componentes ](https://www.treinaweb.com.br/blog/storybook-a-melhor-maneira-de-criar-componentes)
Conheça o Storybook e como ele pode te ajudar a criar componentes da melhor maneira possível, com incríveis benefícios para o seu projeto!
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 **02h 27min 44s**
- 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