이 컨트롤은 더 이상 사용되지 않고 그리드 구성 요소로 대체되었으므로 해당 컨트롤로 마이그레이션하는 것이 좋습니다. 새로운 기능은 제공되지 않으며 버그 수정은 우선순위에서 제외됩니다. 코드베이스를 Data Grid로 마이그레이션하는 데 도움이 필요하거나 질문이 있으면 지원팀에 문의하세요.

Web Components Grid 접근성 규정 준수

Ignite UI for Web Components Data Table / Data Grid는 그리드의 셀과 열을 통해 키보드 탐색 상호 작용을 해석하는 액세스 가능성 및 화면 판독기를 지원합니다.

이는 useAccessibility 그리드의 속성을 참.

Web Components 그리드 접근 가능한 예

EXAMPLE

TS

HTML

CSS

import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids';
import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-data-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids';
import { IgcImageColumnComponent } from 'igniteui-webcomponents-data-grids';
import { IgcTextColumnComponent } from 'igniteui-webcomponents-data-grids';
import { IgcNumericColumnComponent } from 'igniteui-webcomponents-data-grids';
import { IgcDateTimeColumnComponent } from 'igniteui-webcomponents-data-grids';
import { IgcColumnGroupDescription } from 'igniteui-webcomponents-data-grids';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcDataGridModule,
    IgcGridColumnOptionsModule
);

export class DataGridAccessibility {

    private grid: IgcDataGridComponent;
    private data: any[] = [];

    constructor() {

        this.initData();

        this.grid = document.getElementById('grid') as IgcDataGridComponent;
        this.grid.dataSource = this.data;

        const grouping = new IgcColumnGroupDescription();
        grouping.field = 'Status';
        grouping.displayName = 'Status';
        this.grid.groupDescriptions.add(grouping);
    }

    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.getFlagImage(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;
    }

    // gets path to image file with specified country name (without file extension)
    public getFlagImage(countryName: string): string {
        return 'https://static.infragistics.com/xplatform/images/flags/' + countryName + '.png';
    }

    // gets path to image file with specified gender type  (without file extension)
    public getGenderImage(gender: string): string {
        return 'https://static.infragistics.com/xplatform/images/genders/' + gender.toLowerCase() + '.png';
    }

    // gets path to image file with specified person ID (without file extension)
    public getPersonImage(personID: string): string {
        return 'https://static.infragistics.com/xplatform/people/' + personID + '.png';
    }

    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 {
    //     return require('./flags/' + country + '.png');
    // }
}

new DataGridAccessibility();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>DataGridAccessibility</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <igc-data-grid
    id="grid"
    height="100%"
    width="100%"
    auto-generate-columns="false"
    is-column-options-enabled="true"
    use-accessibility="true">
        <igc-text-column field="ProductID" header-text="ID" width="*>95"></igc-text-column>
        <igc-text-column field="ProductName" header-text="Product" width="*>160"></igc-text-column>
        <igc-image-column field="CountryFlag" header-text="Country" width="*>120" contentOpacity="1"
                          padding-top="5" padding-bottom="5"></igc-image-column>
        <igc-numeric-column field="ProductPrice" header-text="Price" width="*>95" positive-prefix="$" show-grouping-separator="true" min-fraction-digits="2"></igc-numeric-column>
        <igc-numeric-column field="OrderItems" header-text="Orders" width="*>105"></igc-numeric-column>
        <igc-numeric-column field="OrderValue" header-text="Order Value" width="*>140" positive-prefix="$" show-grouping-separator="true"></igc-numeric-column>
        <igc-date-time-column field="OrderDate" header-text="Order Date" width="*>135" dateTimeFormat="DateShort" ></igc-date-time-column>
        <igc-numeric-column field="Margin" header-text="Margin" width="*>115" positive-suffix="%"></igc-numeric-column>
        <igc-numeric-column field="Profit" header-text="Profit" width="*>105" positive-prefix="$" show-grouping-separator="true"></igc-numeric-column>
        <igc-text-column field="Status" header-text="Status" width="*>100"></igc-text-column>
    </igc-data-grid>
</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

##섹션 508 준수 재활법 섹션 508은 1998년 의회에서 개정되어 모든 연방 기관이 장애인이 전자 및 정보 기술에 접근할 수 있도록 해야 합니다. 그 이후로 섹션 508 준수는 정부 기관의 요구 사항일 뿐만 아니라 소프트웨어 솔루션을 제공하고 웹 페이지를 디자인할 때도 중요합니다.

섹션 508 법의 섹션 1194.22는 특히 웹 기반 인트라넷 및 인터넷 정보와 시스템을 대상으로 하며, 따라야 할 16가지 규칙이 포함되어 있습니다. 최소한의 노력으로 웹 애플리케이션과 웹 사이트를 이러한 규칙과 호환되도록 유지할 수 있도록 Infragistics Ignite UI for Angular 컨트롤 및 구성 요소가 관련 접근성 규칙을 준수하도록 조치를 취했습니다.

##WAI-ARIA 지원 2014년 W3C는 장애가 있는 사용자가 더 쉽게 접근할 수 있도록 웹 콘텐츠와 웹 애플리케이션을 디자인하는 방법을 정의하는 WAI-ARIA 사양을 마무리했습니다.

이 섹션에서는 프레임워크의 접근성(ARIA) 지원과 구성 요소의 방향성을 얼마나 쉽게 관리할 수 있는지 보여줍니다.

ARIA 속성 화면 판독기에 그리드를 해석하고 상호 작용하는 데 필요한 상황별 정보를 제공하기 위해 ARIA 속성이 그리드 DOM 요소에 추가됩니다. 이러한 속성은 특히 ag-Grid의 경우처럼 div 및span과 같은 일반 HTML 요소를 사용하여 복잡한 DOM 구조를 생성할 때 유용합니다.

그리드의 DOM 요소를 검사할 때 스크린 리더는 다음 역할과 속성을 지원하고 알려줍니다.

• 그리드 셀 - 그리드 셀을 포함하는 요소입니다.
• 행 개수 - 행 수를 알려줍니다.
• 열 개수 - 행 개수를 알려줍니다.
• 행 - 열 머리글 또는 그리드 셀의 행입니다.
• 행 인덱스 - 행의 표시되는 인덱스를 알립니다.
• 행 선택됨 - 행을 선택할 수 있는 경우에만 존재하며 선택 상태를 알립니다.
• 그룹 확장됨 - 행 그룹에만 존재하며 확장 상태를 알립니다.
• 열 헤더 - 열 헤더를 포함하는 요소입니다.
• 셀 인덱스 - 열의 표시 인덱스를 알립니다.
• Colspan - 열이 여러 열에 걸쳐 있는 경우에만 존재하며 화면 판독기를 안내하는 데 도움이 됩니다.
• 정렬 - 정렬 가능한 열에만 존재하며 정렬 상태를 알려줍니다.
• 열 인덱스 - 셀의 표시되는 인덱스를 알립니다.
• 선택됨 - 셀을 선택할 수 있는 경우에만 존재하며 선택 상태를 알려줍니다.
• 확장됨 - 그룹 셀에만 존재하며 확장 상태를 알립니다.

키보드 탐색

설정 후 useAccessibility 속성을 참을 사용하면 화면 판독기가 인식할 수 있는 데이터 그리드에서 다양한 키보드 탐색 옵션을 사용할 수 있습니다. 다음은 각 키 누름/조합에 대한 설명과 현재 활성화된 셀과 관련하여 미치는 영향입니다.

그리드 내 탐색

• Ctrl + Alt + →: 한 셀 위로 이동합니다.
• Ctrl + Alt + ←: Navigate one cell left.
• Ctrl + Alt + ↓: Navigate one cell below.
• Ctrl + Alt + ↑: 위의 한 셀을 탐색합니다.
• Ctrl + Alt + Home: Navigate to first column header.
• Ctrl + Alt + End: 마지막으로 표시된 셀로 이동합니다.
• Ctrl + Alt + Shift + ↑ Navigate to current column header.
• Ctrl + Alt + Shift + ↓ 현재 열의 마지막 셀로 이동합니다.
• Ctrl + Alt + Shift + ← 현재 행의 첫 번째 셀로 이동합니다.
• Ctrl + Alt + Shift + → 현재 행의 마지막 셀로 이동합니다.

화면 판독기 명령

• Ctrl OR Alt + Num Pad 5: 현재 셀을 읽습니다.
• Insert + Shift + ↑: 현재 행을 읽습니다.
• Insert + Shift + Home: 행의 처음부터 읽습니다.
• Insert + Shift + Page Up: 현재 셀부터 행 끝까지 읽습니다.
• Insert + Shift + Num Pad 5: Read current column.
• Insert + Shift + End: 열의 위에서부터 읽습니다.
• Insert + Shift + Page Down: 열의 맨 아래까지 읽습니다.

코드 조각

다음은 Web Components 데이터 그리드에서 셀 액세스 가능성을 구현하는 방법을 보여줍니다.

<igc-data-grid id="grid"
     height="100%"
     width="100%"
     use-accessibility="true">
</igc-data-grid>
html

API 참조

• IgcDataGridComponent
• useAccessibility