Nas páginas da web que estamos desenvolvendo, temos tabelas onde os cabeçalhos das colunas (marcados como ths com scope="col") incluem um botão de classificação, que, ao navegar pela linha de cabeçalhos, é lido por um leitor de tela (estou usando o NVDA e o Chrome no Windows, pelo que vale a pena) como algo como "classificar", "classificado em ordem crescente", "classificado em ordem decrescente". (Esses são rótulos de ária nos respectivos ícones classificáveis, classificados em ordem crescente e classificados em ordem decrescente que estamos exibindo.) Então, por exemplo, o leitor de tela pode ler "linha 1 coluna 1 ID do cabeçalho botão classificado em ordem crescente coluna 2 nome do cabeçalho botão classificar ".
No entanto, ao navegar pelas linhas de dados sob a linha de cabeçalho, seria bom ouvir apenas "linha 2 coluna 1 ID '472' coluna 2 nome 'Kasey Snodgrass' ...", sem repetir a sobrecarga sobre os botões e a classificação. Existe uma maneira de conseguir isso?
Eu resolvi. O que eu estava fazendo, sem ter dito, era adicionar um span com
class="visually-hidden"(isso é com Bootstrap) nele com os detalhes. Eu o movi para os botõesaria-descriptione funcionou bem. Os detalhes de classificação foram falados durante a navegação na linha do cabeçalho, mas não incluídos na identificação da coluna durante a navegação nas linhas de dados.