Acessibilidade no Angular: aprimorando formulários, modais e rotas

Acessibilidade no roteamento - Apresentação

Olá! Eu sou a Nayanne Lopes, instrutora da Escola de Front-end, e quero te dar as boas-vindas ao curso de acessibilidade com Angular!

Autodescrição: Nay se descreve como uma mulher de pele morena, com cabelos longos e lisos na cor castanho escuro. Está vestindo uma blusa laranja e, ao fundo, há uma estante branca repleta de livros sob uma luz azul. À esquerda, uma janela coberta por uma persiana preta.

Neste curso, vamos utilizar como base o Projeto Buscante, que é um buscador de livros que utiliza a API Google Books. Através desse projeto, vamos adicionar melhorias e aprender como aprimorar a acessibilidade das rotas da aplicação e dos formulários, gerenciar o foco do modal, fornecer feedback auditivo às pessoas usuárias e diversas outras estratégias.

Para fazer este curso, é recomendado que você já tenha conhecimento sobre Angular, além de conhecimentos básicos sobre acessibilidade em HTML, CSS e JavaScript, porque o foco deste curso será a acessibilidade em conjunto com as ferramentas do Angular.

Você aceita esse desafio? Então, vamos nessa!

Acessibilidade no roteamento - Títulos de páginas exclusivos

O desafio deste curso é implementar melhorias no quesito acessibilidade em uma aplicação Angular. A aplicação que servirá como projeto base é o Buscante, um buscador de livros que utiliza a API Google Books.

Na página inicial tem um campo de busca e você pode pesquisar por um assunto, autoria ou nome, por exemplo. Ao buscar "Loiane", nos são retornados 10 resultados. Note que são cards com os livros e algumas informações sobre a obra.

Em cada card, tem um botão na parte inferior direita escrito "Mais detalhes". Quando clicamos neste botão, é aberto um modal que traz mais informações sobre o livro e sua sinopse. Para fechar o modal, basta clicar em "x", no canto superior direito do modal.

Além disso, no cabeçalho, temos duas abas: "Sobre", onde temos mais informações sobre a aplicação, e "Contato", onde temos um formulário com vários campos para serem preenchidos. Já que estamos falando em links e abas, que tal começar a melhorar a acessibilidade desse projeto justamente na parte de roteamento?

Clicando com o botão direito do mouse sobre a aba "Sobre", é aberta uma pequena janela com várias opções. Vamos clicar em "Abrir link em uma nova guia". Em seguida, faremos a mesma coisa para a aba "Contato".

Note que tanto a página inicial quanto as páginas "Sobre" e "Contato", têm o mesmo título. Para pessoas que utilizam tecnologias assistivas, isso pode ser um pouco confuso, já que o leitor de tela falará o mesmo título para todas as páginas, dificultando que a pessoa se localize.

Para resolver esse problema, teríamos que identificar a rota que está ativa e extrair a informação do título de cada rota. Porém, o Angular possui uma fórmula muito prática e simples para fazer isso.

Vamos acessar o VS Code e abrir o projeto. Em seguida, acessamos o arquivo app.routes.ts. Se você ainda não trabalhou com um projeto Angular na nova versão 17, pode estranhar um pouco essa nomenclatura. Isso, porque, anteriormente, esse arquivo se chamava app.routing.ts. Mas, apesar da nomenclatura ter mudado, a estrutura do arquivo continua a mesma.

Esse arquivo possui a constante routes com os objetos que são as rotas da nossa aplicação. Então, tem a página inicial, que é lista-livros, a página sobre e a página contato, além do caminho vazio, na linha 21, e da rota coringa, na linha 26.

export const routes: Routes = [
  {
    path: 'lista-livros',
    component: ListaLivrosComponent
  },
  {
    path: 'sobre',
    component: SobreComponent
  },
  {
    path: 'contato',
    component: ContatoComponent
  },
  {
    path: '',
    redirectTo: 'lista-livros',
    pathMatch: 'full'
  },
  {
    path: '**',
    component: ListaLivrosComponent
  }
];

Mas como nós podemos adicionar um título, mais uma informação, a cada um desses objetos? Vamos adicionar uma vírgula ao final da linha 10 e, na linha 11, adicionaremos uma propriedade chamada title, que serve justamente para o que nós estamos querendo, que é adicionar um título a essa rota. Para essa propriedade vamos passar uma string com o título que queremos que apareça quando essa rota for acessada, ou seja, quando a página estiver aberta. Na página inicial, lista-livros, vamos passar 'Busque um livro - Buscante'.

export const routes: Routes = [
  {
    path: 'lista-livros',
    component: ListaLivrosComponent,
    title: 'Busque um livro - Buscante'
  },

Ao salvar e voltar ao navegador, o título já está presente. Note que ele aparece no nome da aba da página inicial.

De volta ao VS Code, faremos a mesma coisa para os outros objetos. Portanto, devemos adicionar a propriedade title em cada objeto. Na sequência, vamos definir os títulos de cada um. Perceba que esse título não precisa necessariamente ser o mesmo do caminho, o path. Na verdade, é recomendado que seja um título mais descritivo.

Para a aba sobre, vamos definir o título de 'Mais informações - Buscante'. Já para a aba contato, o título será 'Entre em contato - Buscante'.

export const routes: Routes = [
  {
    path: 'lista-livros',
    component: ListaLivrosComponent,
    title: 'Busque um livro - Buscante'
  },
  {
    path: 'sobre',
    component: SobreComponent,
    title: 'Mais informações - Buscante'
  },
  {
    path: 'contato',
    component: ContatoComponent,
    title: 'Entre em contato - Buscante'
  },

Vamos salvar, voltar ao navegador e fechar as outras abas, porque já podemos perceber a mudança em uma só aba. Quando clicamos em "Sobre", o título da aba aparece como "Mais informações - Buscante". Quando clicamos em "Contato", o título da página muda para "Entre em contato - Buscante". Essa simples alteração ocasiona uma melhoria na acessibilidade!

No próximo vídeo, vamos continuar explorando estratégias de acessibilidade, ainda focando no roteamento.

Acessibilidade no roteamento - Identificando a rota ativa

Continuando com nosso compromisso de melhorar a acessibilidade deste projeto, ainda focando na parte de roteamento, adicionamos um título exclusivo para cada página. No entanto, ao acessar cada uma das abas, como "Contato" ou a página inicial, nada na aplicação indica que estamos nessa aba, não existe nenhum destaque.

Para melhorar essa experiência, vamos acessar a nova documentação do Angular, lançada junto com a versão 17, e clicar em "Docs", no menu lateral esquerdo. Existem várias sessões e, dentro da sessão de "Best Practices", temos o tópico "Accessibility", sobre acessibilidade. Nela, existem vários tópicos com algumas estratégias de acessibilidade que podem ser adicionadas ao projeto, conforme a necessidade.

Vamos clicar no tópico de identificação de links ativos, "Active links identification", que é o que vamos implementar agora. Nele, tem um passo a passo para conseguir adicionar algumas diretivas e ferramentas do Angular para identificar qual é o link que está ativo no momento.

De volta ao VS Code, vamos acessar app > componentes > cabecalho e abrir os arquivos cabecalho.component.html e cabecalho.component.ts.

A primeira coisa que precisamos fazer é adicionar uma diretiva chamada RouterLinkActive. Neste projeto, não estamos utilizando módulos, mas sim a abordagem de componentes standalone, como podemos ver na linha 7. Por isso, não temos um módulo, ou seja, esse componente não está declarado dentro de um módulo. Logo, tudo o que ele precisa para funcionar deve ser importado e adicionado no próprio componente.

No arquivo cabecalho.component.ts, na linha 8, onde temos a propriedade imports, vamos adicionar uma vírgula após RouterOutlet e passar a diretiva RouterLinkActive.

@Component({
  selector: 'app-cabecalho',
  standalone: true,
  imports: [CommonModule, RouterLink, RouterOutlet, RouterLinkActive],
  templateUrl: './cabecalho.component.html',
  styleUrl: './cabecalho.component.css'
})

Feito isso, vamos salvar.

Agora, no arquivo cabecalho.component.html, vamos adicionar uma propriedade para cada link. Então, na linha 4, abaixo do routerLink, que está redirecionando para lista-livros, vamos adicionar routerLinkActive e passar uma string. Essa string vai ser uma classe onde vamos adicionar alguns estilos que serão aplicados quando essa rota estiver ativa. Vamos chamar essa classe de active-page.

<header>
  <a class="logo"
    routerLink="/lista-livros"
    routerLinkActive="active-page"

Vamos passar a mesma coisa para os outros links, nas linhas 13 e 17.

<header>
  <a class="logo"
    routerLink="/lista-livros"
    routerLinkActive="active-page"
    <img
      src="assets/imagens/logo.png"
      alt="Logo da aplicação Buscante">
  </a>
  <nav>
    <a
      routerLink="/sobre"
      routerLinkActive="active-page">Sobre
    </a>
    <a
      routerLink="/contato"
      routerLinkActive="active-page">Contato
    </a>
  </nav>
</header>

Agora, vamos salvar e voltar ao navegador. Ao clicar na aba "Contato", nada acontece ainda. Isso porque precisamos adicionar os estilos da classe. Então, vamos acessar o CSS desse componente, no arquivo cabecalho.component.css.

Nele, chamamos header .active-page{} e passamos um background-color diferente para podermos visualizar quando esse link estiver ativo. A cor será #6C63FF.

header .active-page{
    background-color: #6C63FF;
}

Ao salvar e voltar para o navegador, percebemos que o link de "Contato", que é o que está ativo no momento, já está destacado. Quando clicamos na aba "Sobre", o mesmo ocorre. Quando clicamos em "Buscante", o link em questão é que passa a ser destacado, mas a cor não favoreceu o visual da logo, impedindo sua visualização.

Pensando nisso, vamos voltar ao arquivo CSS e adicionar uma estilização para a classe específica da logo, que já está no HTML. Então, chamamos header .active-page.logo{} e passamos o background-color como #F5F5F5.

header .active-page{
    background-color: #6C63FF;
}

header .active-page.logo{
    background-color: #F5F5F5;
}

Ao salvar e verificar o navegador, notamos que conseguimos ter um contraste melhor no destaque da logo. Então, já conseguimos dar esse destaque visual para saber quando o link está ativo. Mas, para as pessoas que possuem algum tipo de deficiência visual, isso não é muito útil.

Então, voltando na documentação do Angular, ela mostra que após adicionar a diretiva RouterLinkActive, também temos que conseguir informar para a pessoa que utiliza as tecnologias assistivas que aquele link está ativo e o que isso significa.

Para fazer isso, vamos ao arquivo cabecalho.component.html, no VS Code. Nele, vamos adicionar uma propriedade chamada ariaCurrentWhenActive. Essa propriedade deve ser utilizada junto com RouterLinkActive para melhorar a acessibilidade. Para essa propriedade, vamos passar o valor de page.

Quando temos um grupo de elementos relacionados, como, por exemplo, vários links em um menu de navegação, e um deles é destacado, usamos o ariaCurrent para informar as tecnologias assistivas sobre o que isso significa. Esse valor page significa que o link que está ativo representa a página atual.

<header>
  <a class="logo"
    routerLink="/lista-livros"
    routerLinkActive="active-page"
    ariaCurrentWhenActive="page"
    >

Voltando na documentação do Angular, temos, inclusive, o link para o MDN falando sobre a propriedade aria-current. Ao clicar neste link e rolar para o final da página, temos acesso a diversos valores que podem ser passados, como o page, que foi o que utilizamos.

Neste vídeo, vimos como destacar visualmente e também utilizar o atributo aria para destacar o link ativo. A seguir, vamos adicionar um foco automático no campo de busca.

Sobre o curso Acessibilidade no Angular: aprimorando formulários, modais e rotas

O curso Acessibilidade no Angular: aprimorando formulários, modais e rotas possui 81 minutos de vídeos, em um total de 41 atividades. Gostou? Conheça nossos outros cursos de Angular 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:

• Acessibilidade no roteamento
• Explorando Atributos ARIA
• Acessibilidade em formulários
• Acessibilidade em modais
• Fornecendo feedback auditivo