[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Conformidade com a acessibilidade da rede Blazor

    A Tabela de Dados/Grade de Dados do Ignite UI for Blazor oferece suporte à acessibilidade e a leitores de tela que interpretam as interações de navegação do teclado por meio das células e colunas da grade.

    Isso é ativado definindo--use-accessibility a propriedade como true explicitamente em CSS, de preferência usando uma tag div ao redor da grade.

    Blazor Grid Accessible Example

    ##Conformidade com a Seção 508 A Seção 508 do Rehabilitation Act foi alterada em 1998 pelo Congresso para exigir que todas as agências federais tornem sua tecnologia eletrônica e de informação acessível a pessoas com deficiência. Desde então, a conformidade com a Seção 508 não tem sido apenas um requisito em agências governamentais, mas também é importante ao fornecer soluções de software e projetar páginas da Web.

    A Seção 1194.22 da lei da Seção 508 tem como alvo específico sistemas e informações de intranet e internet baseados na Web, e contém um conjunto de 16 regras a serem seguidas. Para permitir que você mantenha seus aplicativos e sites da Web compatíveis com essas regras com o mínimo de esforço de sua parte, Infragistics tomou medidas para garantir que os controles e componentes do Ignite UI for Angular sejam compatíveis com as regras de acessibilidade relevantes.

    ##Suporte WAI-ARIA Em 2014, o W3C finalizou sua especificação WAI-ARIA, que definiu como projetar conteúdo e aplicativos da Web para serem mais acessíveis a usuários com deficiências.

    Esta seção mostra o suporte de acessibilidade (ARIA) da estrutura, bem como a facilidade de gerenciamento da direcionalidade dos componentes.

    Atributos ARIA Para dar aos leitores de tela as informações contextuais que eles precisam para interpretar e interagir com a grade, atributos ARIA são adicionados aos elementos DOM da grade. Esses atributos são particularmente úteis quando elementos HTML simples como div e span são usados para criar estruturas DOM complexas, o que é o caso do ag-Grid.

    Ao inspecionar os elementos DOM da grade, as seguintes funções e propriedades são suportadas e anunciadas pelo leitor de tela:

    • Célula de grade - elemento que contém uma célula de grade.
    • Contagem de linhas - anuncia o número de linhas.
    • Contagem de colunas - anuncia o número de linhas.
    • Linha - uma linha de cabeçalhos de coluna ou células de grade.
    • Índice de linha - anuncia o índice visível da linha.
    • Linha selecionada - presente somente se a linha for selecionável; anuncia o estado da seleção.
    • Grupo Expandido - presente somente em grupos de linhas, anuncia o estado de expansão.
    • Cabeçalho de coluna - elemento que contém um cabeçalho de coluna.
    • Índice de célula - anuncia o índice visível da coluna.
    • Colspan - presente somente se a coluna abranger várias colunas, ajuda a orientar os leitores de tela.
    • Classificar - presente somente em colunas classificáveis, anuncia o estado da classificação.
    • Índice da coluna - anuncia o índice visível da célula.
    • Selecionado - presente somente se a célula for selecionável; anuncia o estado de seleção.
    • Expandido - presente somente em uma célula de grupo, anuncia o estado de expansão.

    Keyboard Navigation

    Após definir a propriedade useAccessibility como true, isso habilitará uma gama de opções de navegação de teclado na grade de dados que os leitores de tela podem reconhecer. Abaixo está uma descrição de cada um dos pressionamentos de tecla/combinações e o efeito que eles terão em relação à célula atualmente ativada:

    Navegando na grade

    • Ctrl + Alt + →: Navegar uma célula para cima.
    • Ctrl + Alt + ←: Navigate one cell left.
    • Ctrl + Alt + ↓: Navigate one cell below.
    • Ctrl + Alt + ↑: Navegar uma célula acima.
    • Ctrl + Alt + Home: Navigate to first column header.
    • Ctrl + Alt + End: Navega até a última célula visível.
    • Ctrl + Alt + Shift + ↑ Navigate to current column header.
    • Ctrl + Alt + Shift + ↓ Navegar até a última célula na coluna atual.
    • Ctrl + Alt + Shift + ← Navega para a primeira célula na linha atual.
    • Ctrl + Alt + Shift + → Navegar até a última célula na linha atual.

    Comandos do leitor de tela

    • Ctrl OU Alt + Teclado Numérico 5: Ler célula atual.
    • Inserir + Shift + ↑: Ler linha atual.
    • Inserir + Shift + Home: Ler a partir do início da linha.
    • Inserir + Shift + Page Up: Ler até o final da linha a partir da célula atual.
    • Insert + Shift + Num Pad 5: Read current column.
    • Inserir + Shift + End: Ler do topo da coluna.
    • Inserir + Shift + Page Down: Ler até o final da coluna.

    Code Snippet

    O seguinte demonstra como implementar a acessibilidade da célula na grade de dados Blazor:

    <div style="--use-accessibility:true;">

        @if (DataSource != null)
        {
            <IgbDataGrid Height="100%" Width="100%" />
        }
</div>

    API References