Acessibilidade no HTML: escrevendo códigos semânticos para inclusão

Primeiros passos na acessibilidade com HTML - Apresentação

Boas-vindas ao curso de HTML com foco em acessibilidade! Meu nome é Luan Alves e serei o instrutor que vai acompanhar você durante este curso.

Audiodescrição: Luan se descreve como um homem de pele branca, com cabelos, barba e olhos castanho-escuros. Ele veste uma blusa de cor preta e, atrás dele, há um sofá cinza, duas prateleiras nas paredes com alguns livros e uma iluminação que varia do azul ao rosa.

O que vamos aprender?

Feitas as apresentações, como vamos aprender sobre HTML e acessibilidade?

Aprenderemos refatorando todo o código do projeto Calmaria Spa. Todos os elementos da página já estão presentes, como imagens, textos e cores.

Entretanto, quando testarmos este projeto profissionalmente, com leitores de tela e navegação pelo teclado, vamos encontrar muitos pontos de melhoria no código desse projeto para torná-lo verdadeiramente acessível.

Você já parou para pensar por que é tão crucial tornar um projeto acessível, principalmente focando no HTML? Vamos mostrar o motivo. Para isso, estamos com uma matéria na página do governo aberta.

Uma pesquisa realizada pelo IBGE em 2022 informa que, no Brasil, há pelo menos 18 milhões de pessoas com alguma deficiência a partir dos dois anos. Por que isso é importante para nós? Porque estas pessoas vão acessar páginas, sites e aplicativos que nós vamos construir.

Por isso, é de extrema importância que nós, como pessoas desenvolvedoras front-end, criemos aplicações acessíveis.

Focando no projeto Calmaria Spa, vamos refatorar todo o código com ênfase no HTML, já que o HTML é a estrutura principal para tornar um projeto acessível.

Temos muito a fazer neste projeto, então, nos encontramos no próximo vídeo!

Primeiros passos na acessibilidade com HTML - Conhecendo e testando leitor de tela

No projeto Calmaria Spa, vamos aplicar várias melhorias de acessibilidade com foco no HTML. O HTML é a estrutura principal quando falamos sobre acessibilidade web. Vamos começar analisando a página?

Estamos com a página da Calmaria Spa aberta no navegador. Podemos visualizar que tem todas as logos e todas as imagens. Este projeto, inclusive, é bastante responsivo; você pode testar a responsividade dele caso queira. Visualmente, o projeto está perfeito.

Para aplicar melhorias de acessibilidade no projeto Calmaria Spa, precisamos utilizar ferramentas que pessoas com deficiência utilizam de fato quando acessam uma página web, como um leitor de tela.

Neste projeto, vamos iniciar fazendo um teste com um leitor de tela muito conhecido: o NVDA. O link para baixá-lo está na atividade Preparando o ambiente.

Conhecendo e testando leitor de tela

Vamos abrir o NVDA para começar a testar o projeto. Ao abrir a ferramenta, ela vai tocar uma música e começará a narrar tudo. Nós já temos o NVDA baixado e podemos conferir o ícone na barra de ferramentas, com um "N" branco e em volta uma cor lilás. Vamos clicar nele para abrir o leitor de tela.

Após tocar a música inicial, o leitor de tela fala "Bem-vindo ao NVDA!". Normalmente, ele leria todo o texto do pop-up que aparece na tela, mas não precisamos ouvir tudo. Vamos apenas clicar em "OK".

Em um novo pop-up, o leitor pergunta se permitimos que ele colete dados para melhorias na aplicação. Vamos clicar em "Lembre-me depois", mas você pode colocar "Sim" ou "Não", fica à sua escolha.

Agora, você perceberá que ele já começa a ler tudo, a página inteira. Podemos conferir como é a leitura do NVDA padrão. A leitura padrão é feita a partir da tecla "Tab" para selecionar apenas os elementos clicáveis na tela.

Também é possível configurar para o NVDA começar a ler tudo o que tem na tela de cima para baixo, mas fica a sua escolha. Nesse caso, vamos trabalhar da forma padrão que o NVDA oferece para nós.

Vamos clicar na tecla "Tab" e conferir juntos o que ele vai ler no projeto. Inicialmente, ele vai para o link "Espaço" na barra de menu superior, ou seja, o padrão dele é iniciar do primeiro elemento clicável da esquerda para a direita e de cima para baixo.

Agora vamos teclar "Tab" mais algumas vezes. Na sequência, o leitor lê "Serviços" e "Contato". A partir disso, já conseguimos identificar alguns pontos de melhoria desse projeto.

Por exemplo: quando o leitor de tela lê um conjunto de elementos clicáveis, ele deveria informar logo a princípio que é um conjunto de elementos clicáveis e que são três elementos.

Se fosse um menu com 10 elementos, ele deveria falar "conjunto de 10 elementos", ou "conjunto de 5 elementos", e assim por diante. Informar quantos elementos clicáveis existem em um grupo de elementos é muito importante para uma pessoa que acessa a página por leitor de tela.

Agora vamos testar o "Tab" para chegar até o final da página e entendermos como está a acessibilidade. Clicando em "Tab" novamente, vamos para o botão "Quero relaxar", mas ao apertar novamente, percebemos que não nos informou para qual lugar foi.

Clicando mais uma vez, continua a mesma coisa. Na próxima vez que clicarmos, ele já vai para o próximo elemento clicável ou de interação com a pessoa usuária, que é o campo de texto da área "Inscreva-se para ganhar descontos!". Ao clicar em "Tab" novamente, ele lê "'Inscrever' botão".

Agora vamos para a parte do formulário. Repare que ele fala apenas "Edição em branco" no formulário, sendo que deveria informar que um campo é para digitar o nome, outro para inserir o e-mail, inserir o telefone e também dar exemplos de como inserir esse formulário.

Isso é muito importante para a acessibilidade. Indo mais adiante no formulário, ele lê "Botão de edição não marcado", mas não informa que é um botão escrito "Ligação" na área "Prefere contato por:", que contém três opções: "Ligação", "WhatsApp" ou "Email". Ao apertar "Tab" de novo, o leitor vai para "Edição multilinha em branco" e não informa para que é essa edição.

Com "Tab" novamente, chegamos ao botão "Enviar" e finalizamos o formulário. Agora, vamos para a próxima parte do projeto: o rodapé. Começaremos clicando em "Tab".

Perceba que o leitor de tela lê "Index visitado link" em todos os ícones de redes sociais. Era para informar quais redes sociais são essas, que ícones são esses, e para onde eles levam. Precisamos fazer esse ajuste no código HTML para acessibilidade de leitores de tela.

De volta à parte inicial do projeto, perceba que se passarmos o mouse por cima de algum elemento da página, o leitor lê automaticamente. Para interromper o NVDA, a dica é apertar a tecla "Ctrl", que fica na parte de baixo e no extremo esquerdo do teclado.

Refatorando o cabeçalho

Agora que identificamos vários pontos de melhoria, vamos começar a refatoração do cabeçalho. Conforme mencionado anteriormente, precisamos informar que isso é um conjunto de elementos navegáveis.

O primeiro passo é fechar o NVDA para ele não permanecer lendo a tela durante o processo. Para isso, vamos clicar no ícone da barra de tarefas, depois clicar com o botão direito no ícone do NVDA e selecionar "Sair". Aparecerá um pop-up escrito "Encerrar o NVDA. O que deseja fazer?". Após clicar em "OK", toca a música de finalização do NVDA e agora podemos colocar a mão na massa de fato.

Vamos abrir o VS Code e reparar o seguinte: logo na linha 24 do arquivo index.html, temos a tag <body>. Em seguida, na linha 26, temos uma <div> com a classe cabecalho.

Podemos substituir essa <div> por uma tag chamada <header>, ideal para cabeçalho de um projeto. Feito isso, na linha 38, onde fechávamos com </div>, vamos fechar a tag </header> e salvar.

index.html:

<header class="cabecalho">
    <!-- código omitido -->
</header>

O conjunto de elementos formado por "Espaço", "Serviços" e "Contato", é representado pelas <div> que vão da linha 33 até a linha 35. Isso é uma lista de elementos. Então, podemos utilizar tags do HTML ideais para isso.

Por exemplo: na linha 32, vamos tirar a tag <div> e colocar uma <ul>. Depois, na linha 36, vamos fechar essa tag com </ul>. Da linha 33 até a linha 35, vamos substituir <div> por <li>.

Para isso, podemos selecionar a primeira <div> da linha 33, utilizar o atalho "Ctrl + D" para selecionar também as outras <div> das linhas 34 e 35, e substituir por <li> e </li>.

<ul class="cabecalho__nav--lista">
    <li class="cabecalho__lista-item"><a href="#">Espaço</a></li>
    <li class="cabecalho__lista-item"><a href="#">Serviços</a></li>
    <li class="cabecalho__lista-item"><a href="#">Contato</a></li>
</ul>

Feito isso, vamos salvar o código com o atalho "Ctrl + S". Há mais uma melhoria que podemos aplicar. Na linha 27, perceba que temos outra <div> que podemos substituir por uma tag muito melhor e mais semântica: a tag <nav>, que vem de navegação.

Faremos a substituição tanto na tag de abertura da linha 27, quanto na tag de fechamento (</nav>) da linha 37. O que é a tag <nav>? Ela representa navegação. Como temos alguns elementos dentro de <header> que são para navegar para outras páginas do site, devemos circular com a tag <nav>.

<nav class="cabecalho__nav">
    <!-- código omitido -->
</nav>

Ainda há mais um ponto de melhoria que podemos inserir no projeto: repare que, na linha 28, temos a tag de âncora (<a>), e dentro dessa tag, temos a tag <img>, que é a imagem da logo do projeto.

Essa tag de âncora serve para direcionar a pessoa para algum link, como, por exemplo, as tags de âncora da linha 33 até a linha 35, que recebem o hashtag (#) em href. Como não temos um link exato para essas páginas, são páginas fictícias, colocamos a hashtag para redirecionar para index.html, ou seja, para o próprio caminho do arquivo HTML.

Na linha 28, faremos o seguinte: vamos inserir o atributo href seguido de igual e, entre aspas duplas, vamos colocar o sinal de jogo da velha (#). Assim, vamos redirecionar a pessoa para a própria página ao clicar no logo da Calmaria Spa.

<a href="#">

Resultado do código do cabeçalho no arquivo index.html até o momento:

<header class="cabecalho">
    <nav class="cabecalho__nav">
        <a href="#">
            <img class="cabecalho__nav--logo" src="./assets/logo.png">
        </a>
        <span class="cabecalho__nav--line"></span>
        <ul class="cabecalho__nav--lista">
            <li class="cabecalho__lista-item"><a href="#">Espaço</a></li>
            <li class="cabecalho__lista-item"><a href="#">Serviços</a></li>
            <li class="cabecalho__lista-item"><a href="#">Contato</a></li>
        </ul>
    </nav>
</header>

Salvamos o projeto com "Ctrl + S" e agora podemos testar novamente com o leitor de tela. De volta ao projeto no navegador, vamos abrir o NVDA. Ao iniciar, já sabemos que ele toca uma música, dá boas-vindas e abre um pop-up onde vamos apenas clicar em "OK".

O leitor começa a ler a página, e a partir disso, vamos clicar em "Tab". Perceba que o NVDA agora lê que existem três elementos no conjunto e que esse é um campo de navegação com vários links, o que vai ajudar bastante a pessoa usuária. Nesse caso, o leitor foi direto para os campos da navbar, mas podemos voltar para a logo, que também é um elemento clicável, com o atalho "Shift + Tab".

Conclusão

Na logo, o NVDA não leu bem a imagem. Por quê? A tag <img> na linha 29 falta um atributo. Você conhece esse atributo? Este é o problema que vamos resolver a seguir, sobre acessibilidade em imagens!

Primeiros passos na acessibilidade com HTML - Revisando o código com Axe

Até esse momento, utilizamos o leitor de tela NVDA para testar a acessibilidade do projeto Calmaria Spa. No entanto, existem outras ferramentas que podemos utilizar para auxiliar na revisão do código e de todo o projeto com foco na acessibilidade.

Revisando o código com axe DevTools

Uma ferramenta muito conhecida é o axe DevTools. O link para baixar a ferramenta está disponível na atividade Preparando o ambiente. O axe DevTools é uma extensão de navegadores, funcionando tanto para o Chrome quanto para o Firefox e para o Edge.

Nós já instalamos essa extensão no Chrome, navegador que utilizamos, e vamos abri-la para testar no projeto Calmaria Spa. Para abrir essa extensão, clicamos em "F12" no teclado. Depois, no ícone de duas tags para a direita da aba "Inspecionar", selecionamos "axe DevTools".

Feito isso, na tela que será aberta, escolheremos "Scan ALL of my page". O axe DevTools faz a leitura em inglês e também tem opções de idioma para francês e para um idioma oriental. Acreditamos que o inglês seja mais adequado para nós.

Escaneamos o projeto Calmaria Spa, que visualmente é muito bonito. No entanto, foram encontrados 30 erros no código HTML. Vamos analisar quais são esses erros?

A ferramenta informa que 6 erros são sérios e 24 erros são críticos, totalizando 30 erros. Notamos que existem 16 erros iguais, que se referem à falta de texto alternativo em imagens. O axe DevTools indica também as linhas do código HTML que possuem esses erros.

Todas as imagens precisam ter um texto alternativo, isto é, o atributo alt. Porém, nem todas necessitam de uma descrição da imagem. Por exemplo: analisando a página, temos imagens na área de serviços, nos cards "Massagens", "Tratamentos" e "Day Spa", e logo acima dos títulos. Entretanto, são apenas imagens figurativas, apenas para enfeitar a nossa página.

Essas imagens não descrevem como é o produto. Esse tipo de imagem não precisa de descrição. Diferente de imagens de fotos, que descrevem exatamente qual é o serviço ou passam alguma informação.

Inserindo descrições de imagens

A descrição da imagem pode ser feita de várias formas. Em um projeto real, pode ser feita pela pessoa desenvolvedora do site, pela pessoa designer do projeto, ou até pelo profissional de copywriting.

No projeto, já temos os textos alternativos no Figma feitos pela equipe de designers.

Vamos começar inserindo o texto alternativo da logo. Abrindo o VS Code, na linha 29 do arquivo index.html, temos a tag <img>, que está sem o atributo alt. Vamos inserir o alt igual a "Logo da Calmaria Spa" e salvar.

index.html:

<img class="cabecalho__nav--logo" src="./assets/logo.png" alt="Logo da Calmaria Spa">

A próxima imagem é a da linha 47. Para isso, vamos pegar a descrição no Figma. Trata-se da imagem em que uma mulher recebe uma massagem. Para copiar esse texto, clicamos sobre ele e, no menu lateral direito, na seção "Content", clicamos em "Copy" logo à direita. Assim, copiamos o texto. Feito isso, vamos colar no código HTML, na linha 47, inserindo o alt igual ao texto copiado.

<img class="container__primeiro--imagem" src="./assets/home-image.png" alt="Mulher recebendo massagem deitada de bruços com a cabeça de lado sobre os braços cruzados e expressão de tranquilidade.">

Podemos seguir para a próxima imagem, que fica logo abaixo no Figma, cuja descrição é "Piscina coberta com uma claraboia redonda, grande e rodeada com jardinagem". A descrição é muito detalhada, o que é ótimo para a pessoa que acessa com leitor de tela ter uma ideia exata de como é a Calmaria Spa. Vamos copiar essa descrição e levar para o VS Code, na linha 52.

<img class="container__secao--conteudo--img1" src="./assets/espaco-1.png" alt="Piscina coberta com uma claraboia redonda, grande e rodeada com jardinagem.">

Na sequência, temos as tags <img> das imagens espaco-2.png e espaco-3.png. A primeira é a imagem de uma moça segurando uma taça. Vamos copiar toda a descrição do Figma e inserir o alt na linha 68.

A próxima imagem é a de um sofá em frente à piscina, no ambiente da Calmaria Spa. Vamos copiar do Figma a descrição e inserir no HTML na linha 69. No atributo alt, adicionamos a descrição copiada.

<img class="container__secao--conteudo--img2" src="./assets/espaco-2.png" alt="Busto de uma mulher de costas em uma banheira de espumas segurando uma taça e de frente a uma porta de vidro com grandes pedras atrás.">
<img class="container__secao--conteudo--img2" src="./assets/espaco-3.png" alt="Ambiente da Calmaria Spa com poltrona, plantas e uma piscina.">

Temos também as imagens de ícones, que são apenas decorativas. Essas imagens não precisam de uma descrição. No entanto, a tag <img> precisa sempre ter o atributo alt, caso contrário, será um erro de sintaxe. Até mesmo a ferramenta axe DevTools vai acusar um erro no projeto.

Porém, como essas são imagens decorativas e não precisam de descrição, podemos apenas deixar o alt vazio. Isso é realmente indicado nesses casos. Vamos fazer isso nas linhas 76, 78, 83, 85, 90 e 92 o alt vazio.

<img src="./assets/icon-massagem.png" alt="">

<img src="./assets/soft-star.png" alt="">

<img src="./assets/icon-tratamentos.png" alt="">

<img src="./assets/soft-star.png" alt="">

<img src="./assets/icon-dias-especiais.png" alt="">

<img src="./assets/soft-star.png" alt="">

Temos mais algumas tags <img> abaixo para configurar. Na linha 99, temos uma imagem SVG que é apenas decorativa. No projeto, são as duas imagens que ficam nas extremidades da parte "Inscreva-se para ganhar descontos!". Quando a tela está configurada para celulares, essas imagens são substituídas por outras duas imagens parecidas, que ficam acima e abaixo dos textos.

Portanto, essa área tem um total de quatro imagens que não precisam de descrição. Vamos inserir o atributo alt vazio nas linhas 99, 100, 110 e 111.

<img class="container__incricao--mobile" src="./assets/mandala-superior-mobile.svg" alt="">
<img class="container__incricao--tablet" src="./assets/mandala-esquerda-tablet.svg" alt="">

<img class="container__incricao--mobile" src="./assets/mandala-inferior-mobile.svg" alt="">
<img class="container__incricao--tablet" src="./assets/mandala-direita-tablet.svg" alt="">

As últimas três imagens precisam ter descrição. A primeira imagem é de um rapaz na banheira da Calmaria Spa. Vamos copiar o alt dessa imagem no Figma ("Homem em uma banheira com produtos de spa no rosto") e colar na linha 116 do código HTML.

A próxima imagem, analisando no Figma, tem a descrição "Mulher em uma banheira olhando horizonte na janela". Vamos copiar essa descrição e colar no VS Code na linha 117, dentro do atributo alt.

Na linha 118, vamos deixar o atributo alt e pegar a descrição também no Figma. A descrição é "Mulher em uma banheira com pétalas de rosa, com apenas mãos e pernas aparentes, segurando um livro e com uma bandeja com uvas e chá". Vamos copiar e colar no HTML, também no atributo alt.

<img src="./assets/contato-img-1.png" alt="Homem em uma banheira com produtos de spa no rosto.">
<img src="./assets/contato-img-2.png" alt="Mulher em uma banheira olhando horizonte na janela.">
<img src="./assets/contato-img-3.png" alt="Mulher em uma banheira com pétalas de rosa, com apenas mãos e pernas aparentes, segurando um livro e com uma bandeja com uvas e chá.">

Conclusão

Já inserimos todos os elementos da página que precisam do atributo alt. No rodapé, existem os ícones de redes sociais, mas eles estão inseridos através do CSS. Portanto, eles não precisam ter o atributo alt, porque já foram inseridos através do content.

Após salvar o código com "Ctrl + S" e voltar ao navegador no projeto Calmaria Spa, podemos abrir novamente o axe DevTools e escanear de novo a página. Antes, tínhamos 30 erros, agora temos 13 erros, uma quantidade muito menor. Assim, avançamos na acessibilidade do projeto!

Sobre o curso Acessibilidade no HTML: escrevendo códigos semânticos para inclusão

O curso Acessibilidade no HTML: escrevendo códigos semânticos para inclusão possui 100 minutos de vídeos, em um total de 33 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Primeiros passos na acessibilidade com HTML
• Navegação com teclado
• Estruturando HTML semântico
• Formulários acessíveis no HTML
• Atributos ARIA