React Grid アクセシビリティの遵守

Ignite UI for React データテーブル / データグリッドは、グリッドのセルと列を介したキーボードナビゲーションのインタラクションを解釈するアクセシビリティとスクリーンリーダーをサポートしています。

これは、グリッドの useAccessibility プロパティを true に設定することによってアクティブになります。

React Grid アクセシビリティの例

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrDataGridModule } from "@infragistics/igniteui-react-grids";
import { IgrDataGrid } from "@infragistics/igniteui-react-grids";
import { IgrImageColumn } from "@infragistics/igniteui-react-grids";
import { IgrTextColumn } from "@infragistics/igniteui-react-grids";
import { IgrNumericColumn } from "@infragistics/igniteui-react-grids";
import { IgrDateTimeColumn } from "@infragistics/igniteui-react-grids";
import { IgrColumnGroupDescription } from "@infragistics/igniteui-react-grids";
import { IgrGridColumnOptionsModule } from "@infragistics/igniteui-react-grids";

IgrDataGridModule.register();
IgrGridColumnOptionsModule.register();

export default class DataGridAccessibility extends React.Component<any, any> {

    public data: any[];
    public grid: IgrDataGrid;

    constructor(props: any) {
        super(props);

        this.state = { componentVisible: true }
        this.initData();
    }

    public onGridRef = (grid: IgrDataGrid) => {
        if (!grid) { return; }

        this.grid = grid;
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrDataGrid
                ref={this.onGridRef}
                height="100%"
                width="100%"
                autoGenerateColumns="false"
                isColumnOptionsEnabled="true"
                dataSource={this.data}>
                    <IgrTextColumn field="ProductID" headerText="ID" width="*>110" horizontalAlignment="center"/>
                    <IgrTextColumn field="ProductName" headerText="Product"  width="*>120" />
                    <IgrImageColumn field="CountryFlag" headerText="Country" width="*>130"
                    contentOpacity="1" horizontalAlignment="center" paddingTop="5" paddingBottom="5"/>
                    <IgrNumericColumn field="ProductPrice" headerText="Price" width="*>110"
                    positivePrefix="$" showGroupingSeparator="true" minFractionDigits={2}/>
                    <IgrNumericColumn field="OrderItems" headerText="Orders" width="*>140"/>
                    <IgrNumericColumn field="OrderValue" headerText="Order Value" width="*>160"
                    positivePrefix="$" showGroupingSeparator="true" />
                    <IgrDateTimeColumn field="OrderDate" headerText="Order Date" width="*>150"
                    horizontalAlignment="right" dateTimeFormat="DateShort" />
                    <IgrNumericColumn field="Margin" headerText="Margin" width="*>140"
                    positiveSuffix="%" horizontalAlignment="center" />
                    <IgrNumericColumn field="Profit" headerText="Profit" width="*>140"
                    positivePrefix="$" showGroupingSeparator="true" />
                    <IgrTextColumn field="Status" headerText="Status" width="*>140"
                    horizontalAlignment="center"   />

                </IgrDataGrid>
            </div>
        );
    }

    public getRandomDate(): Date {
        const today: Date = new Date();
        const year: number = today.getFullYear();
        const month: number = this.getRandomNumber(0, 8);
        const day: number = this.getRandomNumber(10, 27);
        return new Date(year, month, day);
    }

    public getRandomNumber(min: number, max: number): number {
        return Math.round(min + Math.random() * (max - min));
    }

    public getRandomItem(array: any[]): any {
        const index = Math.round(this.getRandomNumber(0, array.length - 1));
        return array[index];
    }

    public getCountryFlag(country: string): string {

        const flag = 'https://static.infragistics.com/xplatform/images/flags/' + country + '.png'
        return flag;
    }

    public initData() {

        const names: string[] = [
            "Intel CPU", "AMD CPU",
            "Intel Motherboard", "AMD Motherboard", "Nvidia Motherboard",
            "Nvidia GPU", "Gigabyte GPU", "Asus GPU", "AMD GPU", "MSI GPU",
            "Corsair Memory", "Patriot Memory", "Skill Memory",
            "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD", "Asus HDD",
            "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD", "Asus SSD",
            "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ];

        const countries: string[] = ["USA", "UK", "France", "Canada", "Poland",
            "Denmark", "Croatia", "Australia", "Seychelles",
            "Sweden", "Germany", "Japan", "Ireland",
            "Barbados", "Jamaica", "Cuba", "Spain",];
        const status: string[] = [ "Packing", "Shipped", "Delivered"]
        const sales: any[] = [];

        for (let i = 0; i < 200; i++) {
            const price = this.getRandomNumber(10000, 90000) / 100;
            const items = this.getRandomNumber(4, 30);
            const value = Math.round(price * items);
            const margin = this.getRandomNumber(2, 5);
            const profit = Math.round((price * margin / 100) * items);
            const country = this.getRandomItem(countries);
            sales.push({
                Country: country,
                CountryFlag: this.getCountryFlag(country),
                Margin: margin,
                OrderDate: this.getRandomDate(),
                OrderItems: items,
                OrderValue: value,
                ProductID: 1001 + i,
                ProductName: this.getRandomItem(names),
                ProductPrice: price,
                Profit: Math.round(profit),
                Status: this.getRandomItem(status),
            });
        }

        this.data = sales;
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DataGridAccessibility/>);
tsx

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

第 508 条の遵守

リハビリテーション法第 508 条は、連邦議会によって 1998 年に改正され、すべての連邦政府機関は障害を持つ人が電子情報技術にアクセスできるようにすることを義務付けました。それ以降、第 508 条の準拠は連邦政府機関の要件であるだけでなく、ソフトウェアソリューションを提供し、Web ページを設計する際にも重要となります。

第 508 条の第 1194 部 22 条は、特に Web ベースのイントラネットおよびインターネット情報およびシステムを対象としており、遵守すべき 16 の規則が含まれています。お客様の最小限の努力でお客様の Web アプリケーションおよび Web サイトがこれらの規則に整合できるようにするために、インフラジスティックスは、Ignite UI for Angular のコントロールおよびコンポーネントが該当するアクセシビリティ規則に準拠することを保証するための取り組みを続けてきました。

WAI-ARIA サポート

2014 年に W3C は WAI-ARIA 仕様を完成しました。障害を持つユーザーに Web コンテンツおよび Web アプリケーションへのアクセシビリティを提供するためのデザイン方法を定義したものです。

このセクションでは、フレームワークのアクセシビリティ (ARIA) サポートと、コンポーネントの文字表記の方向の簡単な管理を示します。

ARIA 属性スクリーンリーダーに、グリッドの解釈とインタラクションに必要なコンテキスト情報を提供するために、ARIA 属性がグリッドの DOM 要素に追加されます。これらの属性は、div や span などのプレーンな HTML 要素を使用して複雑な DOM 構造を作成する場合に特に役立ちます。これは、ag-Grid の場合です。

グリッドの DOM 要素を検査する場合、次の役割とプロパティがサポートされ、スクリーンリーダーによって通知されます。

グリッドセル - グリッドセルを含む要素。
行数 - 行数を通知します。
列数 - 列数を通知します。
行 - 列ヘッダーまたはグリッドセルの行。
行インデックス - 行の表示インデックスを通知します。
選択された行 - 行が選択可能な場合にのみ存在し、選択状態を通知します。
展開されたグループ - 行グループにのみ存在し、展開状態を通知します。
列ヘッダー - 列ヘッダーを含む要素。
セルインデックス - 列の表示インデックスを通知します。
Colspan - 列が複数の列にまたがる場合にのみ存在し、スクリーンリーダーのガイドに役立ちます。
ソート - ソート可能な列にのみ存在し、ソートの状態を通知します。
列インデックス - セルの表示インデックスを通知します。
選択済み - セルが選択可能である場合にのみ存在し、選択状態を通知します。
展開済み - グループセルにのみ存在し、展開状態を通知します。

キーボードナビゲーション

useAccessibility プロパティを true に設定すると、スクリーンリーダーが認識できるデータグリッド内のさまざまなキーボードナビゲーションオプションが有効になります。以下は、現在押下されているセルに対する各キーの押下 / 組み合わせとそれらが持つ効果についての説明です。

グリッド内の移動

Ctrl + Alt + →: 1 つ上のセルに移動します。
Ctrl + Alt + ←: 左のセルに移動します。
Ctrl + Alt + ↓: 1 つ下のセルに移動します。
Ctrl + Alt + ↑: 1 つ上のセルに移動します。
Ctrl + Alt + Home: 最初の列ヘッダーに移動します。
Ctrl + Alt + End: 最後に表示されているセルに移動します。
Ctrl + Alt + Shift + ↑ 現在の列ヘッダーに移動します。
Ctrl + Alt + Shift + ↓ 現在の列の最後のセルに移動します。
Ctrl + Alt + Shift + ← 現在の行の最初のセルに移動します。
Ctrl + Alt + Shift + → 現在の行の最後のセルに移動します。

スクリーンリーダーコマンド

Ctrl または Alt + Num Pad 5: 現在のセルを読み上げます。
Insert + Shift + ↑: 現在の行を読み上げます。
Insert + Shift + Home: 行の始まりから読み上げます。
Insert + Shift + Page Up: 現在のセルから行の終わりまで読み上げます。
Insert + Shift + Num Pad 5: 現在の列を読み上げます。
Insert + Shift + End: 列の先頭から読み上げます。
Insert + Shift + Page Down: 列の下部まで読み上げます。

コードスニペット

以下は、React データグリッドにセルのアクセシビリティを実装する方法を示しています。

<IgrDataGrid
    height="100%"
    width="100%"
    dataSource={this.data}
    useAccessibility="true" />
tsx

API リファレンス

IgrGrid
UseAccessibility