Problemas na navegação com setas utilizando o NVDA

Fala ai Leonardo, tudo bem? Vamos lá:

O NVDA está em português e a palavra "No" do botão é incompreensível na leitura feita, existe alguma boa prática em relação a texto para leitores de tela?

Nesse caso seria legal a gente envolver o No com um span e setar o atributo lang de acordo com a linguagem do mesmo.

O NVDA apresenta a possibilidade de, apertando as teclas insert + espaço, de focarmos nos elementos, inclusive radio buttons, para se obter a leitura através do foco sem selecioná-lo. Com a nossa lógica esse comportamento não funciona, isso é um problema na nossa implementação de acessibilidade? Se sim, existe uma forma de resolvê-lo?

Acho que talvez possa envolver o atalho do NVDA, não conheço esse atalho insert + espaço, normalmente elementos de ação são focáveis via tab.

Espero ter ajudado.

Se sua aplicação esta em inglês, como você viu, não faz sentido usar um leitor em português. O que geralmente se faz é: o usuário escolhe a lingua dele no sistema, tudo é traduzido para esta língua. (um curso de i18n daria umas 20 horas no mínimo). Mas como o screen reader saberá qual idioma ele deve utilizar? Na inicialização da sua aplicação, você precisa ler de algum lugar qual é o idioma escolhido pelo usuário e adicionar o atributo lang na tag HTML. Isso informará para o screen reader qual idioma utilizar durante a leitura (assumindo que o seu screen reader suporta esse idioma).

Segue exemplo de um serviço que alterar a tag HTML e adiciona o idioma que você passar como parâmetro:

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';

import { isPlatformBrowser} from '@angular/common';

@Injectable({ providedIn: 'root'})
export class PlatFormDetectorService {
    private inBrowser: boolean = false;

    constructor(@Inject(PLATFORM_ID) platformId: string) {
        this.inBrowser = isPlatformBrowser(platformId);
    }

    public isPlatFormBrowser(): boolean {
        return this.inBrowser;
    }
}

import { Injectable } from '@angular/core';

import { PlatFormDetectorService } from '../platform-detector/platform-detector.service';

@Injectable({ providedIn: 'root'})
export class AcessibilityService {

    constructor(private platFormDetectorService: PlatFormDetectorService) {}

    public setPageLanguage(language: string): void {
        if (!this.platFormDetectorService.isPlatFormBrowser()) {
            return;
        }

        document.documentElement.lang = language;
    }
}

Veja que isso não resolve o problema da tradução, que faz parte do escopo do i18n. Se você quiser ter uma idea como o angular lida com i18n dá uma olhadinha em https://angular.io/guide/i18n

Sobre o comportamento do NVDA, cada screen reader tem particularidades. Se você já usou o JAWS ou voice over verá que há outros atalhos que não fazem parte da WCAG. Nada o impede de tentar suportar o recurso do NVDA, mas pode ser que isso não faça sentido para outro screen reader. No final, o mais importante é implementar as regras da WCAG e depois adicionar layers para cada screen readers.

Eu desenvolvo com MAC, e não há versão do NVDA disponível para essa plataforma.

Opa, Obrigado Matheus, essa solução funcionou como paliativo, ainda assim eu notei que algumas siglas, como acrônimos terminados em x ou s, apresentam dificuldade de compreensão pelo leitor, pesquisei um pouco a respeito e parece que essa tem sido uma preocupação também de outros desenvolvedores, mas ainda não temos uma solução definitiva para isso.

Meu instrutor favorito, muito obrigado por compartilhar essa solução, ajudou muito e achei muito fácil de implementar e manter.

Mais uma vez, obrigado! As respostas agregaram bastante aos meus estudos :D

Magina Leonardo, sempre que precisar não deixe de criar suas duvidas.

Abraços e bons estudos.