Melhorando a usabilidade, acessibilidade e conformidade com ARIA com navegação de teclado de grade

(Last updated: April 13, 2023)

À medida que as expectativas do usuário evoluem, os aplicativos da Web modernos se tornam cada vez mais complexos. Eles definem padrões de interface do usuário, como rolagem virtualizada de conteúdo, tabelas de dados complexas com células editáveis e diferentes componentes de sobreposição, apenas para citar alguns.

Isso não é um problema para os usuários que utilizam um mouse ou touchpad, pois eles podem navegar facilmente pelos elementos da página e interagir com eles. Mas para aqueles que usam um teclado, isso pode afetar drasticamente a experiência do usuário. O número de controles e itens na maioria das páginas da Web aumentou significativamente, o que significa que uma página da Web moderna pode conter centenas de paradas de tabulação.

A questão então é: como melhorar a UX e a acessibilidade da web ao mesmo tempo para seu aplicativo Angular?

O que é acessibilidade do site?

A Internet é para todos e a acessibilidade do site é fundamental. Basicamente, a acessibilidade na web (ou eAccessibility) é uma prática que, se bem estabelecida, tornará qualquer site utilizável para todos os tipos de visitantes e em qualquer tipo de dispositivo, independentemente de coisas como:

• Know-how de tecnologia do usuário ou experiência anterior com a World Wide Web.
• Pessoas que usam tecnologias assistivas.
• Velocidade e largura de banda.
• Uso/Não uso do mouse.

Este é um objetivo extremamente importante a ser alcançado por qualquer aplicativo da web/site, pois quando são projetados e desenvolvidos da melhor maneira possível, mais usuários têm o mesmo acesso ao seu conteúdo e funcionalidades.

Por que a acessibilidade do site é importante?

Na Infragistics, queremos garantir uma experiência de usuário ideal, independentemente de você estar usando um mouse, um touchpad ou apenas um teclado. É por isso que criamos um novo padrão de interface do usuário para navegação por teclado em uma página, chamado Navegação de elemento ativo em nosso Ignite UI for Angular Grid. Esse padrão reduz o número de paradas de tabulação na interface projetada para o igxGrid para apenas cinco e expõe muitos novos atalhos de teclado para eficiência.

Cada elemento de parada de tabulação tem um ponto de entrada único e, a partir daí, os usuários podem navegar facilmente para diferentes itens no contêiner de elemento de grade Angular correspondente simplesmente usando as teclas de seta. Assim, simplificando a navegação e melhorando a usabilidade do site.

Um dos maiores diferenciais da nossa caixa de ferramentas Ignite UI é que, ao contrário de outras grades no mercado, colocamos os usuários finais e sua experiência na vanguarda de tudo. É por isso que garantimos a paridade de componentes e recursos em todas as principais tecnologias. O que significa que tudo o que você faz no Angular Grid, pode ser feito e facilmente transferido para Ignite UI for Blazor ou Web Components também. Não haverá nenhuma diferença. Portanto, se você se preocupa com seus usuários, Ignite UI é a solução.

O que é o suporte ARIA?

Resumindo, ARIA significaAccessible Rich Internet Applicatione é um conjunto deatributosque é adicionado aos seuselementos HTML,​disponibilizando ​aplicativos da web econteúdo da webparatodos osusuários. O suporte ao ARIA, portanto, são os recursos de tecnologias, navegadores, leitores de tela e kits de ferramentas parasuportar pelo menos algumas das​propriedadesdo ARIA.

Sequência de guias de página e Aria

Conforme descrito na seção Convenções Fundamentais de Navegação de Teclado das Práticas de Autoria WAI-ARIA 1.1 do W3C, a sequência de guias deve incluir apenas um elemento focalizável de um Componente de Interface do Usuário Composto. Temos cinco desses​componentesC omposite UIC, portanto, cinco paradas de tabulação:

• Barra de ferramentas/Agrupar por área, se existente.
• Contêiner de linha de cabeçalho – A primeira célula da linha de cabeçalho ficará ativa.
• Tbody – O primeiro igxCell (0,0) do contêiner do corpo ficará ativo.
• Rodapé – A primeira célula do Resumo da coluna ficará ativa (se os resumos estiverem ativados).
• Interface do usuário do pager – o menu suspenso de itens por página ficará ativo.

Pressionar a tecla Tab moverá o foco do contêiner atual para o próximo elemento na sequência de tabulações. Isso é ilustrado com a imagem abaixo com a sequência de guias "Barra de ferramentas de grade" -> "Cabeçalhos de grade" -> "Contêiner de corpo de grade" -> "Resumos" -> "Rodapé – Paginador de grade".

Cada um dos cinco contêineres de parada de guia pode ser considerado como uma entidade de agrupamento separada, reduzindo o número de paradas de guia na página. O Grid tem uma estrutura DOM rica, juntamente com muitos contêineres virtualizados, o que permite maior desempenho. Portanto, temos mais de um elemento Grid focalizável parte da sequência de guias da página. Isso nos permite ter uma navegação separada e rica em todos os contêineres de parada de guia.

Observação: lembre-se de que as ações focalizáveis no navegador padrão são mantidas. Não estamos impedindo o foco da parte do elemento HTML de ng-templates ou outros elementos adicionados separadamente no Grid. O navegador manipulará suas ações de foco por padrão. Não há necessidade de aplicar diretivas focalizáveis  adicionais.

Active Element Navigation

Referindo-se às Convenções Fundamentais de Navegação de Teclado do W3c, todos os componentes interativos da interface do usuário devem ser acessíveis por meio de um teclado. Isso é melhor obtido incluindo-os na sequência de guias ou tornando-os acessíveis a partir de um componente que está na sequência de guias. Na navegação de casos do Grid, é possível percorrer cada um desses contêineres focalizáveis com as teclas de navegação (teclas de seta, home/end, ctrl + 'tecla de ação'). É aqui que o conceito de navegação de elemento ativo entra em ação

Aqui, o elemento ativo é o primeiro elemento visível do contêiner focado. MAS esse elemento não se torna focado. O foco permanece no contêiner real. O elemento ativo oferece a capacidade de navegar pela maioria dos elementos de grade e ativar recursos com base no componente composto focado.

Como os elementos focados diferem dos elementos selecionados e ativos?

Consideramos o elemento focado como um ponteiro – ele rastreia o caminho da navegação (sequência de guias da página). Como já sabemos, temos cinco desses elementos compostos. O elemento Active é usado para navegar por esses contêineres focalizáveis. Como você pode ver na imagem abaixo, a borda laranja grossa com o fundo da célula cinza indica o elemento ativo atual para usuários visuais.

Elementos selecionados são elementos que têm aria-selected="true". No caso igxGrid, aria-selected é aplicável a todos os três tipos de elementos de seleção – seleção de célula, linha e coluna (WAI-ARIA).​

Principais conclusões das seções acima:

• Elemento focalizado – rastreando o caminho da sequência de guias da página – barra de ferramentas, cabeçalho, corpo, rodapé e pager da grade.
• Elemento ativo – navega dentro dos cinco contêineres focalizáveis com as teclas de seta (e teclas especiais como home/end).
• Elemento selecionado – tendo aria-selected="true" junto com os estilos de seleção de grade aplicados (seleção de célula, linha ou coluna).

Seguimos as diretrizes do Guia de Práticas de Autoria da WAI-ARIA para obter recomendações específicas sobre mapeamento de chave e comportamento. Portanto, as funções que o ARIA Grid fornece também são reconhecíveis no Ignite UI for Angular Grid: grade, linha, célula de grade, cabeçalho de linha e cabeçalho de coluna.

Tab Navigation

A grade segue a convenção de navegação do teclado principal de que as teclas tab e shift + tab movem o foco de um componente da interface do usuário para outro. As teclas de seta alteram o estado ativo dentro de componentes que incluem vários elementos.

Em comparação com o comportamento de interação da guia anterior, alteramos o seguinte:

• Você não pode usar a tecla tab para navegar entre as células no IgxGrid. A navegação agora é realizada apenas com as teclas de seta.
• Com a tecla tab, você só pode navegar para a próxima célula editável (somente quando a célula estiver no modo de edição). Quando a última célula editável (da linha) for alcançada, a navegação continuará para a célula editável da próxima linha. Se a última célula editável for alcançada, a navegação por tabulação continuará para o próximo elemento de parada de tabulação focalizável.

As melhorias de desempenho e aprimoramentos de código que fizemos

Como resultado do novo conceito de navegação por teclado, conseguimos otimizar nosso código e implementar melhorias de desempenho no Ignite UI for Angular Grid. Eles incluem:

• Removemos o foco da célula e os manipuladores de desfoque.
• Os manipuladores de desanexação de roda e exibição também foram removidos.
• Serviços de navegação reduzidos. Anteriormente, tínhamos quatro serviços de navegação para a funcionalidade Grid, HierarchicalGrid, TreeGrid e MRL. Agora temos apenas três. Com a implementação antiga, na rolagem com conteúdo virtualizado, estávamos alterando o contexto da célula (o shell real permaneceu o mesmo). Mas houve um problema com o navegador que não nos permitia focar em um elemento já focado. Tivemos que desfocar o foco da célula, mudar o contexto da célula e focá-lo novamente. Agora isso não é mais um problema.
• Aprimoramentos do dispositivo de toque. Agora, se tivermos uma célula focada na rolagem, desfocamos a célula antes de desconectar o manipulador de rodas.
• Aumento de desempenho no nível do aplicativo com 'empilhamento de eventos'. Use 'ngZoneEventColescing: true.

Const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule, { ngZoneEnetCoalescing: true }); 

Keyboard Navigation Features Integration

Vamos nos concentrar na integração dos recursos de navegação do teclado. Nosso Angular Grid tem muitos recursos e consideramos todos eles cuidadosamente para garantir que funcionem corretamente com as novas mudanças.

• Header navigation
  • Agora temos um cabeçalho de coluna suave e navegação de grupo de colunas. Confira esta lista de interações de cabeçalho, que explica como ativar um determinado recurso com uma combinação de teclas. Demonstração ao vivo.
• Filtro de estilo Excel e linha de filtragem padrão
  • Ctrl + Shift + L abrirá o filtro de estilo Excel/filtro padrão (linha).
• Filtragem avançada
  • Alt + L opens the advanced filter dialog.
• Sorting
  • Ctrl + Seta para cima classifica o cabeçalho da coluna ativa na ordem ASC. Se a coluna já estiver classificada no ASC, ela removerá a classificação (três estados nenhum).
  • Ctrl + Seta para baixo classifica o cabeçalho da coluna ativa na ordem DSC. Se a coluna já estiver classificada no DSC, ela removerá a classificação (nenhum de três estados).
• Agrupar por
  • Shift + Alt + Seta para a direita para agrupar pela coluna ativa.
  • Shift + Alt + Seta para a esquerda desagrupar a coluna ativa (removê-la do grupo por critérios).
• Multi-column headers 
  • Alt + left/up arrow key – collapse.
  • Alt + right/down arrow key – expand.
• Column Selection
  • Space key press – select a column.

Observação: se você estiver usando um leitor de tela, lembre-se de que, em um clique inicial no cabeçalho, focamos todo o contêiner do cabeçalho e o leitor de tela lerá todas as legendas do cabeçalho. Após um clique no cabeçalho, a legenda do cabeçalho + estado de seleção será lida. Exemplo –Nome da empresa, cabeçalho da coluna selecionado.

• Edição de células– agora a navegação por guias funciona apenas para células editáveis (no modo de edição). Na edição de células com navegação por guias, se chegarmos ao final da grade, a última célula será enviada. Em seguida, a navegação continuará para o próximo elemento de parada de tabulação disponível.
• Filtragem (filtragem de chips)– A navegação por guias para chips é removida, portanto, a navegação só é possível usando as teclas de seta. Também:
  • As fichas fazem parte do cabeçalho da coluna agora.
  • Os chips não são mais elementos focalizáveis.

• Paginação– acessibilidade mais rica do site. Adicionadas dicas de ferramentas, rótulos de ária e funções.
• Default Key combination updates:
  • Ctrl + qualquer outra tecla funciona apenas em células reais, não em uma área de linha agrupada. Isso é diferente em comparação com o comportamento antigo. GroupBy e Master-Detail não funcionam com as teclas de seta Ctrl+.
  • Ctrl + Seta para a direita/esquerda funciona apenas nas células comuns, na linha de resumo e nos cabeçalhos.
  • Home e End (e Ctrl Home/End) funcionam conforme o esperado; não há mudanças aqui.
  • Agora fornecemos um estilo visual mais rico para as paradas de tabulação/elemento de cabeçalho/células do corpo/resumos/paginação/agrupar por/master-detail/MRL/edição de célula.

Para concluir...

Entendemos a necessidade de inovação contínua e que ótimos recursos são resultado de uma verdadeira colaboração.Graças aos esforços combinados de nossos desenvolvedores, ​conseguimos reduzir significativamente a complexidade da navegação do tecladoao usar o Ignite UI for Angular Grid (mas também em todas as outras grades nas principais tecnologias, mantendoem mente a paridade de recursos ecomponentes). A interação geral do teclado agora é aprimorada, intuitiva de usar, oferecendo melhor usabilidade do sitee garantindo o siteacessibilidade.