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

    Blazor Grid 접근성 준수

    Ignite UI for Blazor 그리드의 셀과 열을 통한 키보드 탐색 상호 작용을 해석하는 접근성 및 화면 판독기를 지원합니다.

    이는 CSS에서--use-accessibility 속성을 명시적으로 true로 설정하여 활성화됩니다. 그리드 주위에 div 태그를 사용하는 것이 좋습니다.

    Blazor Grid 접근 가능한 예

    EXAMPLE
    MODULES
    RAZOR
    CSS

    이 샘플이 마음에 드시나요? Ignite UI for Blazor에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    ##섹션 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 속성을 true로 설정하면 화면 판독기가 인식할 수 있는 데이터 그리드의 다양한 키보드 탐색 옵션이 활성화됩니다. 다음은 각 키 누르기/조합에 대한 설명과 현재 활성화된 셀과 관련된 효과입니다.

    그리드 내 탐색

    • 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: 열의 맨 아래까지 읽습니다.

    코드 조각

    다음은 Blazor 데이터 그리드에서 셀 접근성을 구현하는 방법을 보여줍니다.

    <div style="--use-accessibility:true;">
    
            @if (DataSource != null)
            {
                <IgbDataGrid Height="100%" Width="100%" />
            }
    </div>
    razor

    API 참조