Acessibilidade em HTML, CSS e JavaScript: avaliando e melhorando um projeto com o NVDA

Avaliando o projeto com Tab - Apresentação

Boas-vindas a mais um curso sobre acessibilidade!

Meu nome é Antônio Evaldo e serei seu instrutor neste curso.

Audiodescrição: Antônio Evaldo se identifica como um homem branco. Usa óculos, possui bigode e cavanhaque, e cabelos cacheados que estão soltos e na altura dos meus ombros. Veste uma camisa da Alura na cor azul escura. Ao fundo, há uma parede iluminada por cores azuis que gradativamente se transformam em rosa.

Apresentando o projeto

Neste curso, vamos explorar o projeto VidFlow, que é um clone do YouTube. Caso você ainda não tenha se familiarizado com este projeto em outros cursos da Alura, vamos analisá-lo rapidamente.

O projeto possui um cabeçalho, um banner e um campo de busca, que pode ser utilizado para pesquisar por nomes de vídeos. Por exemplo, se pesquisarmos por "React", aparecerão todos os vídeos que contêm esse nome. Existem também alguns links na parte superior, mas vale ressaltar que esses links não levam a nenhum outro lugar, pois o VidFlow está implementado apenas nesta página.

Há ainda um botão para alternar para o modo escuro no canto superior direito, que, sem maiores explicações, resulta em um modo escuro muito elegante. Importante destacar que não vamos implementar o modo escuro neste curso. Ele já vem implementado no projeto,. Vamos nos concentrar em alguns outros aspectos do projeto.

Existem também alguns links na parte parte lateral esquerda. Vamos analisar a acessibilidade desses links também. Há um botão para mostrar mais canais na parte inferior esquerda e é possível recolher esses canais clicando em "Mostrar menos".

No centro da página, existem alguns botões de categorias que filtram os vídeos de acordo com a categoria, como "Debates", "Ao vivo" e "Podcasts". A funcionalidade de filtragem também já está implementada.

Como mencionado, vamos nos concentrar apenas na acessibilidade destes botões. Vamos utilizar o leitor de tela NVDA, o leitor de tela mais utilizado do mundo por pessoas usuárias de leitores de tela.

Quais conteúdos vamos abordar neste curso?

O que vamos aprender?

• Avaliar o projeto com Tab
• Acessibilidade em links
• Botões, sections e formulários
• Implementar o padrão de guias

Começaremos avaliando o projeto de maneira prática, utilizando apenas a tecla "Tab", a tecla "Espaço" e "Enter" para algumas interações, como os botões. Inicialmente, não utilizaremos o NVDA.

Após essa etapa, empregaremos o leitor de tela para realizar verificações e avaliações mais profundas em relação à acessibilidade de links, botões, sessões, formulários e da estrutura da página.

Exploraremos um padrão interessante relacionado aos botões de categorias, que é o padrão de guias, proposto pela própria W3 e que podemos implementar no projeto para torná-lo mais intuitivo.

Ao término deste curso, você estará apto a realizar verificações abrangentes de acessibilidade em projetos, abrangendo desde análises rápidas até avaliações mais complexas.

Pré-requisitos

Para participar, é necessário possuir conhecimento básico em HTML, CSS e JavaScript, pois essas habilidades serão aplicadas na implementação de aprimoramentos no VidFlow.

Está animado para começar este curso? Então, nos vemos lá.

Avaliando o projeto com Tab - Avaliando o projeto com Tab

Nós já temos o VidFlow aberto no computador e preparamos uma atividade para configurar o ambiente. Inclusive, a API falsa que está rodando precisa do JSON Server. Se formos até o VS Code, essa API já está rodando no terminal integrado de lá.

127.0.0.1:5500/index.html

Voltando ao VidFlow no navegador, caso não esteja familiarizado com este projeto, trata-se de uma replicação do YouTube que permite a visualização de diversos vídeos no centro da tela. À esquerda, encontram-se vários links complementares, enquanto na parte superior há uma barra de pesquisa, ícones e alguns links adicionais. Inclusive, há um modo Dark (Escuro) que altera a aparência da tela quando ativado.

Além disso, há uma seção com diversos botões de categorias. Notavelmente, o botão "Tudo" no canto superior esquerdo já aparece selecionado inicialmente, destacado por cores para indicar isso. Ao clicarmos em outra categoria, como "Debates", por exemplo, a tela automaticamente se transforma, exibindo todos os vídeos relacionados à categoria de debates. É possível também clicar na categoria "Ao Vivo" na parte superior para obter uma atualização instantânea.

Identificando os problemas de acessibilidade

Para iniciar a identificação dos primeiros problemas de acessibilidade, podemos realizar um teste simples: tentar navegar por todo o site utilizando apenas a tecla "Tab". Essa prática está alinhada com os princípios de acessibilidade, que visam tornar o site operável e identificável, possibilitando realizar todas as ações comumente feitas com o mouse.

Vamos começar esse teste agora. Ao clicarmos no canto superior esquerdo para mudar o foco para o início da página, pressionamos a tecla "Tab". O campo de busca é realçado, e já identificamos uma anomalia: o logotipo, que ao passar o cursor indica ser um link (o curso se transforma em um ícone de mão), não está focado, contrariando a expectativa de que os links deveriam receber foco. Essa questão será examinada com mais detalhes em um vídeo futuro.

Prosseguindo com a tecla "Tab", conseguimos focalizar o campo de busca (podemos pesquisar por "mobile" e verificamos que está funcionando) e o botão de pesquisa. Ao pressionar mais vezes, os links no canto superior direito são destacados. Contudo, identificamos um problema evidente, pois o botão para alternar para o modo escuro não recebe destaque visual. Mesmo que seja possível ativá-lo com a barra de espaço ou "Enter", não há um destaque visual indicando o foco.

Avançando com mais algumas teclas "Tab", observamos que o primeiro link denominado "Início" no lado esquerdo está visualmente focado, permitindo a navegação por todos os links subsequentes. Em seguida, chegamos ao botão "Mostrar Mais 2", destinado a exibir mais dois canais aos quais estamos inscritos.

Ao pressionar "Enter", ele funciona conforme esperado. No entanto, ao pressionar "Enter" novamente, ou até mesmo a barra de espaço, o botão recolhe os canais de volta, apresentando um comportamento inesperado. Após teclarmos mais "Tabs", chegamos em categorias.

Na seção de categorias, como mencionado anteriormente, a categoria "Tudo" está atualmente selecionada. É possível navegar entre as categorias e, ao pressionar a tecla de espaço, podemos selecionar a categoria desejada.

Neste momento, estamos verificando se podemos operar efetivamente o site utilizando as teclas "Tab", espaço e "Enter". Ainda não estamos abordando as considerações relacionadas ao leitor de tela, pois isso será tratado posteriormente.

Continuando, ao pressionar a tecla "Tab", navegamos pelas categorias. Ao realizar um scroll, podemos observar que a última categoria focalizada foi "Inovação". Ao pressionar "Tab" novamente, alcançamos o primeiro vídeo, que está filtrado de acordo com a categoria de podcasts. Vale notar que esta parte específica do YouTube não requer testes neste momento, pois já é consideravelmente acessível.

Ao utilizar a tecla "Tab", o foco é direcionado para o link do canal da Alura, presente na imagem. Ao pressionar "Tab" mais uma vez, alcançamos o título do vídeo, "Reencontrando a paixão por programar: Beatriz Ramerindo". Importante notar que ambos são links. Entretanto, ao pressionar "Enter", não há redirecionamento, pois o VidFlow não implementou múltiplas páginas; apenas a primeira página está disponível.

Ao pressionar "Tab" novamente, o foco finalmente sai da página do navegador e se desloca para um botão interno do próprio navegador.

Conclusão

Este teste de acessibilidade fornece uma rápida avaliação, e quaisquer problemas identificados serão abordados nas correções subsequentes.

Avaliando o projeto com Tab - Transformando o logo em link

Já analisamos o projeto do VidFlow utilizando a tecla "Tab" e alguns outros botões, como "Espaço" e "Enter". Verificamos que a maioria dos recursos está funcionando corretamente, incluindo o modo Dark, vários recursos interessantes e botões de categorias. No entanto, identificamos alguns problemas e questões estranhas.

Vamos abordar o primeiro problema agora, que está relacionado à logo do VidFlow.

Desafios na Interatividade da Logo

Ao tentarmos focalizar a logo na parte superior esquerda com a tecla "Tab", percebemos que, mesmo ao clicar no início da página e tentar navegar com "Tab" ou "Shift + Tab", a logo não recebe foco. Isso é intrigante, pois ao passarmos o cursor sobre a logo, observamos que ele se transforma em uma mão.

Esse comportamento é um padrão amplamente utilizado na web, indicando interatividade quando o cursor está sobre um elemento como uma logo ou botão, como os botões de categorias. No entanto, ao passarmos sobre o VidFlow, mesmo clicando, não observamos nenhuma resposta ou ação associada.

Na realidade, nos deparamos com uma situação enganadora, pois esperávamos que houvesse uma resposta ao interagir com a logo, o que não ocorreu. Esse comportamento não é intuitivo.

Se a logo não possui funcionalidade interativa, o cursor não deveria se transformar em uma mão ao passar sobre ela. Por outro lado, se é uma logo, deveria ter alguma ação associada quando clicada. Além de abordar a questão da intuição, é importante considerar a acessibilidade.

Para resolver esse problema, vamos acessar o VS Code, onde já temos o arquivo index.html aberto. Na linha 18, identificamos a presença da logo com uma imagem que possui um atributo alt, o que é positivo, indicando que se trata da página inicial do VidFlow.

index.html

<!-- código omitido -->

<body>
    <header>
        <div class="cabecalho_container">
            <div class="logo__item">
                <img src="./img/modo_claro/vidflow-logo-light-mode.png" alt="Página inicial do VidFlow">
            </div>

<!-- código omitido -->

No entanto, há também uma div com a classe logo__item. Ao selecionar esta classe e utilizar "Ctrl + Shift + F", podemos localizar rapidamente os estilos associados a ela, utilizando uma técnica eficiente para encontrar as classes CSS.

Ao pressionarmos "Ctrl + Shift + F", o VS Code nos indicou a localização em que a classe logo__item está sendo utilizada no projeto. Ao clicarmos no arquivo estilos.css nessa referida localização, notamos que a classe possui dois estilos associados a ela: um relacionado ao espaçamento (padding) e outro que define o cursor como Pointer.

estilos.css

/* código omitido */

.logo__item {
    cursor: pointer;
    padding: 15px 0px;
}

/* código omitido */

E o Cursor Pointer que está transformando o cursor em uma mão quando passamos sobre a logo,. No entanto, isso não é desejável, então vamos eliminá-lo.

estilos.css

/* código omitido */

.logo__item {
    padding: 15px 0px;
}

/* código omitido */

Após a remoção e salvamento do arquivo, ao retornarmos ao navegador, notem que o Cursor Pointer desapareceu. Ao passarmos o mouse sobre a logo "VidFlow" no canto superior esquerdo, não temos mais o cursor se transformando em um ícone de mão.

Como mencionamos, não é apropriado ter esse indicador se não for realmente um link. No entanto, se desejarmos transformá-lo em um link, precisaremos ajustar o HTML. Podemos considerar fazer isso, pois é uma prática interessante. Converter a logo do site em um link para a página inicial.

Convertendo a logo em um link

Vamos retornar ao VS Code mais uma vez, acessar o index.html e transformar a div em uma tag âncora. Para isso, utilizamos a. Além disso, é necessário adicionar um atributo href, e podemos definir o valor desse href como uma barra (a href="/"), já que seremos redirecionados para a página inicial, que é a página atual.

index.html

<!-- código omitido -->

<body>
    <header>
        <div class="cabecalho_container">
            <a href="/" class="logo__item">
                <img src="./img/modo_claro/vidflow-logo-light-mode.png" alt="Página inicial do VidFlow">
            </a>

<!-- código omitido -->

Após salvar o arquivo, retornamos ao navegador e observamos que a mão voltou a aparecer, pois esse é o comportamento padrão para links. Ao clicarmos em VidFlow no canto superior esquerdo, a página é recarregada, indicando que a logo do VidFlow agora funciona como um link.

Isso torna a experiência mais intuitiva, pois a mudança de cursor ao passar sobre a logo indica que podemos ser redirecionados para um link. Alguns podem considerar isso um detalhe insignificante, mas é um aspecto que melhora a usabilidade.

É importante considerar também aquelas pessoas que não estão familiarizadas com o uso de tecnologias digitais em geral, incluindo aquelas com deficiência cognitiva. Para esse público, a acessibilidade do nosso site aumenta quanto mais intuitivo ele for.

Dessa forma, é fundamental adotar boas práticas, mesmo nos detalhes aparentemente pequenos. Isso contribui significativamente para tornar o site mais inclusivo.

Conclusão

No próximo vídeo, abordaremos a próxima etapa de melhorias de acessibilidade.

Sobre o curso Acessibilidade em HTML, CSS e JavaScript: avaliando e melhorando um projeto com o NVDA

O curso Acessibilidade em HTML, CSS e JavaScript: avaliando e melhorando um projeto com o NVDA possui 123 minutos de vídeos, em um total de 46 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:

• Avaliando o projeto com Tab
• Acessibilidade em links, botões e sections
• Melhorando botão de expansão e estrutura da página
• Implementando o padrão de guias
• Refinando o projeto