Acessibilidade Web: manipulando WAI-ARIA e elementos interativos com Javascript

Implementando dropdown - Apresentação

Olá! Boas-vindas a mais esse curso! Meu nome é Patricia Silva e serei sua instrutora.

Audiodescrição: Patricia se descreve como uma mulher branca, de cabelos cacheados, que usa óculos de aro preto e veste uma blusa rosa. Atrás dela, há uma porta fechada e uma estante com objetos de decoração diversos, o fundo é iluminado por uma luz azulada.

Nesta jornada, temos como objetivo principal evoluir uma aplicação existente, focando em acessibilidade com JavaScript.

O que vamos aprender

Temos um exemplo da nossa aplicação, Calmaria SPA, em execução no navegador. Ela é estática, e o HTML e CSS já estão implementados. Nosso trabalho, agora, é implementar os elementos interativos utilizando JavaScript e assegurando a acessibilidade.

Por exemplo, no header, temos o menu de navegação, onde implementaremos um submenu interativo. Assim, a pessoa usuária poderá expandir esse submenu e navegar com acessibilidade.

Além disso, vamos implementar funcionalidades interativas, como os modais. Teremos o modal de inscrição e um modal para a pessoa usuária entrar em contato. Esse modal tem uma funcionalidade muito interessante: vamos garantir que suporte a acessibilidade, evitando que a pessoa usuária se perca na navegação, enquanto o modal estiver aberto.

Por último, mas não menos importante, temos os acordeões interativos. A pessoa usuária poderá expandi-los, ter acesso ao seu conteúdo e depois colapsá-los.

Também vamos implementar o suporte para foco visível, para gerenciamento de navegação e manipular o WAI-ARIA, para que a acessibilidade seja feita da forma como deve ser.

Requisitos para acompanhar o curso

Para fazer tudo isso, é necessário ter conhecimento prévio em HTML, CSS e JavaScript, além de entender os conceitos básicos de acessibilidade. Vamos lá!

Implementando dropdown - Criando o script do submenu

Já temos o projeto clonado no computador e estamos rodando no localhost. Nosso problema a resolver é o menu de itens de navegação no topo da página, com os itens:

• Início
• Nosso espaço (com submenu)
• Serviços
• Contato

Quando a pessoa usuária posicionar o mouse ou clicar em cima de "Nosso Espaço", precisamos expandir o submenu.

Criando o arquivo main.js

No HTML, já temos a marcação e toda a estilização pronta, mas ainda não temos o JavaScript que precisamos importar ou criar. Vamos criar um arquivo JavaScript chamado main.js, que vai ficar vazio por enquanto. No entanto, precisamos importar esse main.js no HTML.

Para isso, ao fim do código de index.html, antes de fechar a tag </html>, acrescentaremos o seguinte:

<script type="text/javascript" src="main.js"></script>

Agora, temos o main.js importado corretamente. Precisamos expandir esse submenu quando a pessoa usuária posicionar o mouse ou clicar em cima de "Nosso Espaço".

Criando um ouvinte de evento

Primeiro, precisamos procurar o seletor que vamos manipular com o JavaScript. Dentro da tag header, por volta da linha 26, temos a tag nav, que comporta o menu de navegação. Na linha 31, temos um ul com diversas tags li que corresponde ao menu dropdown em que vamos implementar o gerenciamento de visibilidade do submenu.

O item Nosso Espaço deve possuir o submenu. Este submenu está na linha 41, como um ul contendo várias li. Este trecho se refere ao item que precisamos mostrar e esconder.

Na linha 35, temos uma classe CSS que vamos copiar, a cabecalho__lista-item. É essa classe que vamos usar para manipular esse menu dropdown (menu suspenso).

Então, no main.js, precisamos selecionar todos os itens de cabecalho__lista-item. Para isso, usamos document.querySelectorAll(".cabecalho__lista-item") e iteramos com .forEach(item). Em seguida, incluímos uma arrow function.

//selecionar todos os cabecalho__lista-item
document.querySelectorAll(".cabecalho__lista-item").forEach(item => {

});

Para cada item deste menu, vamos adicionar ouvintes de evento. Por exemplo, se a pessoa usuária colocar o mouse em cima de algum item, queremos disparar uma função. Primeiro, vamos adicionar um evento de mouseover, assim o submenu será mostrado quando o mouse passa por cima do item. Se o mouse sair do foco, o submenu também desaparece. Da mesma forma, se houver um clique, o submenu será aberto; se houver outro clique, será fechado.

Para cada item da lista, vamos adicionar um evento addEventListener(), passando qual é o evento que queremos ("mouseover"). Para esse ouvinte, vamos associar uma função chamada alternarSubMenu(), que ainda vamos criar.

//selecionar todos os cabecalho__lista-item
document.querySelectorAll(".cabecalho__lista-item").forEach(item => {
    //adicionar um ouvinte mouseover
    item.addEventListener("mouseover", () => alternarSubMenu())

});

A função alternarSubMenu() receberá dois argumento: item, que será manipulado, e um booleano true que indicará se deve abrir ou fechar o submenu.

//selecionar todos os cabecalho__lista-item
document.querySelectorAll(".cabecalho__lista-item").forEach(item => {
    //adicionar um ouvinte mouseover
    item.addEventListener("mouseover", () => alternarSubMenu(item, true))

});

Também precisamos adicionar outro listener, mouseout, para quando a pessoa usuária tirar o mouse de cima do item. O código é basicamente o mesmo, apenas substituindo mouseover por mouseout, e o booelano de true para false.

//selecionar todos os cabecalho__lista-item
document.querySelectorAll(".cabecalho__lista-item").forEach(item => {
    //adicionar um ouvinte mouseover
    item.addEventListener("mouseover", () => alternarSubMenu(item, true));
    
    //adicionar um ouvinte mouseout
    item.addEventListener("mouseout", () => alternarSubMenu(item, false));
});

Então, pegamos a classe de cada item do menu, que gera um array de elementos, e cada elemento pode ou não ter um submenu. Em seguida, para cada elemento, adicionamos dois ouvintes: um de mouseover e um de mouseout.

Ao salvar e voltar ao navegador, vemos que nada acontece ao passar o mouse sobre "Nosso Espaço". Isso, porque, ainda não criamos a função alternarSubMenu().

Mas, antes de criá-la, precisamos adicionar o evento de clique para os dispositivos sensíveis ao toque. É o que faremos na sequência!

Implementando dropdown - Adicionando os ouvintes de mouse e clique para abrir submenu

Temos os dois ouvintes de mouseover e mouseout configurados corretamente. No entanto, precisamos dar suporte aos dispositivos sensíveis ao toque, então precisamos adicionar um ouvinte para o evento de clique.

Para isso, ainda no arquivo main.js, vamos adicionar o evento de clique utilizando item.addEventListener("click", () => {}) e passando uma callback que será chamada quando este evento acontecer.

//selecionar todos os cabecalho__lista-item
document.querySelectorAll(".cabecalho__lista-item").forEach(item => {
    //adicionar um ouvinte mouseover
    item.addEventListener("mouseover", () => alternarSubMenu(item, true));
    
    //adicionar um ouvinte mouseout
    item.addEventListener("mouseout", () => alternarSubMenu(item, false));
    
    //adicionar um ouvinte click
    item.addEventListener("click", () => {
        
    })
});

Dentro do corpo da callback, criaremos uma constante chamada submenu. Isso, porque, precisamos criar um seletor para pegar o submenu. Para isso, usamos item.querySelector() e passamos a classe CSS do submenu, que é submenu, da ul na linha 41 do HTML.

//selecionar todos os cabecalho__lista-item
document.querySelectorAll(".cabecalho__lista-item").forEach(item => {
    //adicionar um ouvinte mouseover
    item.addEventListener("mouseover", () => alternarSubMenu(item, true));
    
    //adicionar um ouvinte mouseout
    item.addEventListener("mouseout", () => alternarSubMenu(item, false));
    
    //adicionar um ouvinte click
    item.addEventListener("click", () => {
        const submenu = item.querySelector(".submenu");
    })
});

Agora, criaremos outra constante, isDisplayed, que será booleana. Ou seja, recebe valor de true (verdadeiro) ou false (falso). Porém, este valor será dinâmico e, para isso, acessaremos a propriedade display. Com isso, faremos uma comparação para saber se o submenu está definido como nome ou block.

O display pode ser none quando não está sendo mostrado, ou seja, não foi renderizado no DOM (Document Object Model), e block quando está sendo mostrado, isto é, foi renderizado no DOM.

Para acessar essa propriedade, usaremos submenu.style.display === "block".

//selecionar todos os cabecalho__lista-item
document.querySelectorAll(".cabecalho__lista-item").forEach(item => {
    //adicionar um ouvinte mouseover
    item.addEventListener("mouseover", () => alternarSubMenu(item, true));
    
    //adicionar um ouvinte mouseout
    item.addEventListener("mouseout", () => alternarSubMenu(item, false));
    
    //adicionar um ouvinte click
    item.addEventListener("click", () => {
        const submenu = item.querySelector(".submenu");
                
            const isDisplayed = submenu.style.display === "block";
    })
});

Dessa forma, se o display de submenu for block, isDisplayed é true. Caso contrário, é false.

Na sequência, vamos chamar a função alternanSubmenu(), que implementaremos em outro momento. Ela receberá dois parâmetros: item e isDisplayed.

//selecionar todos os cabecalho__lista-item
document.querySelectorAll(".cabecalho__lista-item").forEach(item => {
    //adicionar um ouvinte mouseover
    item.addEventListener("mouseover", () => alternarSubMenu(item, true));
    
    //adicionar um ouvinte mouseout
    item.addEventListener("mouseout", () => alternarSubMenu(item, false));
    
    //adicionar um ouvinte click
    item.addEventListener("click", () => {
        const submenu = item.querySelector(".submenu");
                
            const isDisplayed = submenu.style.display === "block";
            
            alternanSubmenu(item, isDisplayed)
    })
});

Se houver o clique e o isDisplayed for block, ele será true; se for nome, será false. Então, se tiver fechado, ao clicar deve ser aberto. Pensando nisso, vamos negar isDisplayed utilizando um ponto de exclamação ! antes dele. Isso significa que quando a pessoa clicar novamente, o sinal de negação fará ele virar false, fechando o submenu.

//selecionar todos os cabecalho__lista-item
document.querySelectorAll(".cabecalho__lista-item").forEach(item => {
    //adicionar um ouvinte mouseover
    item.addEventListener("mouseover", () => alternarSubMenu(item, true));
    
    //adicionar um ouvinte mouseout
    item.addEventListener("mouseout", () => alternarSubMenu(item, false));
    
    //adicionar um ouvinte click
    item.addEventListener("click", () => {
        const submenu = item.querySelector(".submenu");
                
            const isDisplayed = submenu.style.display === "block";
            
            alternanSubmenu(item, !isDisplayed)
    })
});

Vamos salvar e voltar ao navegador.

Ao clicar no item "Nosso Espaço", nada acontece porque ainda não implementamos a função alternanSubmenu(). Faremos isso na sequência!

Sobre o curso Acessibilidade Web: manipulando WAI-ARIA e elementos interativos com Javascript

O curso Acessibilidade Web: manipulando WAI-ARIA e elementos interativos com Javascript possui 131 minutos de vídeos, em um total de 42 atividades. Gostou? Conheça nossos outros cursos de JavaScript 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:

• Inserindo dropdown
• Abrindo e fechando o modal inscrição
• Abrindo e fechando o acordeão
• Abrindo e fechando o modal “entrar em contato”
• Voltando o foco para o último elemento