Aprimorando a Acessibilidade em Aplicações Angular

A acessibilidade é uma parte essencial do desenvolvimento de aplicações web modernas. Garantir que todos os usuários, independentemente de suas habilidades físicas ou cognitivas, possam interagir e utilizar uma aplicação é fundamental para criar uma web inclusiva.

O Angular oferece várias ferramentas e práticas recomendadas para melhorar a acessibilidade em suas aplicações. Neste artigo, discutiremos algumas estratégias e dicas para aprimorar a acessibilidade em aplicações Angular.

Compreendendo a Acessibilidade

Antes de começarmos a melhorar a acessibilidade em aplicações Angular, é importante entender mais sobre este tema. A acessibilidade na web se refere à capacidade de um aplicativo ou site ser utilizado por todas as pessoas, independentemente de suas habilidades físicas, sensoriais ou cognitivas. Isso inclui pessoas com deficiências visuais, auditivas, motoras, cognitivas e outras.

Tornar o conteúdo acessível beneficia também outros grupos de usuários, que podem não ter deficiência mas utilizam a aplicação em diferentes cenários. Por exemplo, garantir que a experiência de uma pessoa que esteja acessando um site por um dispositivo móvel na rua, sob incidência do sol, tenha menos dificuldade em ler as informações na tela do celular.

ARIA (Accessible Rich Internet Applications)

A WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications) é uma especificação que fornece atributos e propriedades adicionais para elementos HTML, permitindo uma melhor comunicação com leitores de tela e outros dispositivos assistivos. No Angular, você pode usar diretivas como [attr.aria-label] e [attr.role] para melhorar a acessibilidade de seus componentes personalizados.

Vale mencionar que esta sintaxe só é necessária para o binding de atributos . Atributos ARIA estáticos não requerem sintaxe extra.

<!-- Usando attr. para fazer o binding em um atributo ARIA -->
<button [attr.aria-label]="myActionLabel">Meu botão</button>

<!-- Usando o atributo ARIA estático -->
<button aria-label="Save document">…</button>

Prefira o uso de elementos nativos do HTML

Os elementos HTML nativos capturam vários padrões de interação padrão que são importantes para a acessibilidade. Ao criar componentes Angular, você deve reutilizar esses elementos nativos diretamente quando possível, em vez de reimplementar comportamentos que já são bem suportados.

Abaixo veremos um exemplo ruim de componente de botão que reimplementa os comportamentos padrão:

@Component({
  selector: 'app-button',
  templateUrl: './button-component.component.html',
  styleUrls: ['./button-component.component.css']
})
export class ButtonComponent {
  @Input() text: string = 'Clique em mim';
  @Input() class: string = 'custom-button';
  @Input() disabled: boolean;
  @Input() type: string = 'button';
}

Nesta prática precisamos definir vários comportamentos via Input que já são nativos do elemento button. E o pior, se precisar adicionar mais atributos, teremos que sempre dar manutenção nele, criando mais e mais Inputs.

Para evitar isso, podemos criar um componente em que seu seletor é declarado como atributo. Desta forma, o elemento button é preservado. É como se fosse criar um componente em formato de diretiva.

@Component({
  selector: 'button[ui-button]',
  template: `<ng-content></ng-content>`,
})
export class ButtonComponent {}

Agora podemos chamar nosso componente de botão e utilizar normalmente todos os atributos nativos dele:

<button ui-button class="any-class" aria-label="any-label">Meu Botão</button>

Se você já utilizou a biblioteca de componentes Angular Material, então já deve estar familiarizado. Essa prática é utilizada em muitos de seus componentes. Vale a pena olhar o código deles, pois são componentes desenvolvidos já pensando em acessibilidade.

Gerencie o foco dos elementos quando necessário

Ter o controle de foco dos elementos após mudanças de rota no Angular é muito importante para acessibilidade. O elemento em foco deve colocar os usuários em posição de passar imediatamente para o conteúdo principal que acabou de ser exibido. Você deve evitar situações em que o foco retorne ao elemento body após uma alteração de rota.

Mas vale um adendo: Focar automaticamente um controle de formulário pode confundir pessoas com deficiência visual que usam leitores de tela e pessoas com deficiências cognitivas. Portanto, utilize com cautela e em locais que façam sentido para sua aplicação.

Você pode utilizar o atributo nativo do HTML autofocus mas dependendo do momento de renderização de seus componentes, ele pode não funcionar. Para resolver esse problema, podemos criar uma diretiva que irá focar em um elemento somente quando o mesmo for renderizado:

@Directive({
  selector: '[appAutofocus]'
})
export class AutofocusDirective {
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    this.el.nativeElement.focus();
  }
}

Identificação de links ativos

As classes CSS aplicadas a elementos nativos com routerLink ativos, como RouterLinkActive, fornecem uma dica visual para identificar qual o link que está ativo no momento. Infelizmente, uma dica visual não ajuda usuários com deficiência visual. Para resolver esse problema, podemos aplicar o atributo aria-current ao elemento para ajudar a identificar o link ativo.

A diretiva RouterLinkActive fornece o input ariaCurrentWhenActive que define o valor de aria-current quando o link se torna ativo.

O exemplo a seguir mostra como definir o atributo aria-current para pagequando o mesmo estiver ativo:

<nav>
  <a routerLink="home"
     routerLinkActive="active-page"
     ariaCurrentWhenActive="page">
    Home
  </a>
  <a routerLink="about"
     routerLinkActive="active-page"
     ariaCurrentWhenActive="page">
    About
  </a>
</nav>

Altere os títulos de suas páginas

A primeira informação que é carregada no navegador para usuários de tecnologia assistiva é o título da página, contido no elemento title.

Porém, não é uma boa prática utilizar o mesmo título para todas as páginas, pois não transmite a informação precisa de qual a página em que o usuário acabou de entrar.

A partir da versão 14, o Angular lançou uma funcionalidade para facilitar a atribuição de títulos para cada rota configurada. No RouterModule, temos a possibilidade de criar um array de rotas, atribuindo propriedades como o path, o componente e também o nome da página.

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    title: 'Meu App | Home'
  },
  {
    path: 'about',
    component: AboutComponent,
    title: 'Meu App | Sobre'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

No exemplo acima estamos definindo primeiramente o nome da nossa aplicação, seguida pelo título da página. Entretanto é uma boa prática colocar o nome da página antes do nome do site/app.

'Home | Meu App'

Isso facilita o acesso por usuários que não conseguem enxergar a página inteira e possibilita que eles saibam o significado da página com base na primeira informação transmitida pelo software leitor de tela.

Esta técnica também aprimora o SEO (Search Engine Optimization), ajudando na localização de um conteúdo por ferramentas de busca. Fica muito mais fácil ler as primeiras informações do resultado do que procurar em cada link essa informação.

Para aprimorar o código no Angular e seguir as melhores práticas, podemos criar uma classe que herda de TitleStrategy.

@Injectable()
export class PageTitleStrategy extends TitleStrategy {
  constructor(private readonly title: Title) {
    super();
  }

  override updateTitle(routerState: RouterStateSnapshot) {
    const title = this.buildTitle(routerState);
    if (title) {
      this.title.setTitle(`${title} | Meu App`);
    }
  }
}

Com a classe criada, agora basta sobrescrever a estratégia padrão de atribuição de títulos das páginas:

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [
    {
      provide: TitleStrategy,
      useClass: PageTitleStrategy
    }
  ]
})
export class AppRoutingModule {}

Agora, cada rota fornece apenas o título da página e o sufixo de toda a aplicação é usado apenas em um local.

Conclusão

Melhorar a acessibilidade em aplicações Angular é uma responsabilidade fundamental para os desenvolvedores de aplicações web. Ao adotar práticas recomendadas, como o uso de HTML semântico, atributos ARIA, rótulos significativos e testes regulares com dispositivos assistivos, você pode garantir que sua aplicação seja acessível a todos os usuários.

Lembre-se de que a acessibilidade não é apenas uma obrigação ética, mas também pode melhorar a usabilidade geral do seu aplicativo, atingindo um público mais amplo e diversificado. Portanto, faça da acessibilidade uma parte integral do seu processo de desenvolvimento com Angular.