Grid Keyboard Navigation을 통한 사용성, 접근성 및 ARIA 규정 준수 개선

(Last updated: April 13, 2023)

사용자 기대치가 진화함에 따라 최신 웹 애플리케이션은 점점 더 복잡해지고 있습니다. 콘텐츠의 가상화된 스크롤, 편집 가능한 셀이 있는 복잡한 데이터 테이블, 다양한 오버레이 구성 요소와 같은 사용자 인터페이스 패턴을 정의합니다.

마우스나 터치패드를 사용하는 사용자에게는 페이지 요소를 쉽게 탐색하고 상호 작용할 수 있으므로 문제가 되지 않습니다. 그러나 키보드를 사용하는 사람들에게는 사용자 경험에 큰 영향을 미칠 수 있습니다. 대부분의 웹 페이지에서 컨트롤과 항목의 수가 크게 증가했으며, 이는 최신 웹 페이지에 수백 개의 탭 정지가 포함될 수 있음을 의미합니다.

그렇다면 문제는 Angular 앱의 UX와 웹 접근성을 동시에 개선하는 방법입니다.

웹사이트 접근성이란 무엇입니까?

인터넷은 모두를 위한 것이며 웹사이트 접근성이 핵심입니다. 기본적으로 웹 접근성(또는 eAccessibility)은 잘 구축되어 있으면 다음과 같은 사항에 관계없이 모든 유형의 방문자와 모든 유형의 장치에서 모든 웹사이트를 사용할 수 있는 관행입니다.

• 사용자, 기술 노하우 또는 월드 와이드 웹에 대한 이전 경험.
• 보조 기술을 사용하는 사람들.
• 속도와 대역폭.
• 마우스 사용/사용 안 함.

이것은 가능한 최상의 방식으로 설계되고 개발될 때 더 많은 사용자가 콘텐츠와 기능에 동일한 액세스 권한을 갖기 때문에 모든 웹 앱/웹사이트가 달성해야 하는 매우 중요한 목표입니다.

웹사이트 접근성이 중요한 이유는 무엇인가요?

Infragistics 에서는 마우스, 터치패드 또는 키보드 중 어느 것을 사용하든 관계없이 최적의 사용자 경험을 보장하고자 합니다. 그렇기 때문에 페이지 내에서 키보드 탐색을 위한 새로운 사용자 인터페이스 패턴을 만들었는데, 이를 Ignite UI for Angular Grid 내에서 Active element navigation 이라고 합니다. 이 패턴은 igxGrid용으로 설계된 인터페이스 내의 탭 중단 수를 5개로 줄이고 효율성을 위해 많은 새로운 키보드 단축키를 노출합니다.

각 탭 정지 요소에는 단일 진입점이 있으며, 여기에서 사용자는 화살표 키를 사용하여 해당 Angular 그리드 요소 컨테이너의 다른 항목으로 쉽게 이동할 수 있습니다. 따라서 탐색을 단순화하고 웹 사이트 사용성을 향상시킵니다.

​Ignite UI 도구 상자의 가장 큰 차별화 요소 중 하나는 시장에 나와 있는 다른 그리드와 달리 최종 사용자와 그들의 경험을 모든 것의 최전선에 두었다는 것입니다. 그렇기 때문에 우리는 모든 주요 기술에 걸쳐 구성 요소 및 기능 동등성을 보장합니다. 즉, Grid에서 수행하는 모든 작업을 수행할 수 있으며 Ignite UI for Blazor 또는 Web Components로 쉽게 전환할 수 Angular.​ 차이는 없습니다. 따라서 사용자를 중요하게 생각한다면 Ignite UI 해결책이 될 것입니다.

ARIA 지원이란 무엇입니까?

요컨대, ARIA는 Accessible Rich Internet Application의 약자로 HTML 요소에추가되는​ 속성집합으로,​​ 모든사용자가사용할 수 있는 웹 앱 및웹 콘텐츠를만듭니다. 따라서 ARIA 지원은 기술, 브라우저, 화면 판독기 및 툴킷의 기능을 통해​최소한 일부 ARIA속성을지원합니다.

페이지 탭 시퀀스 및 Aria

W3C의 WAI-ARIA Authoring Practices 1.1의 기본 키보드 탐색 규칙 섹션에 설명된 대로 탭 시퀀스에는 복합 UI 구성 요소의 포커스 가능한 요소가 하나만 포함되어야 합니다. 우리는 5 개의Composite UIComponents를 가지고 있으므로 5 개의 탭 정지가 있습니다.

• 도구 모음/영역별 그룹화(있는 경우).
• 머리글 행 컨테이너 – 머리글 행의 첫 번째 셀이 활성화됩니다.
• Tbody – 본체 컨테이너의 첫 번째 igxCell(0,0)이 활성화됩니다.
• 바닥글 – Column Summary의 첫 번째 셀이 활성화됩니다(요약이 활성화된 경우).
• 호출기 UI – 페이지당 항목 드롭다운이 활성화됩니다.

Tab 키를 누르면 포커스가 현재 컨테이너에서 탭 순서의 다음 요소로 이동합니다.이는 탭 순서 "Grid Toolbar" -> "Grid Headers" -> "Grid Body Container" -> "Summaries" -> "Footer – Grid Paginator"를 사용하여 아래 이미지와 함께 설명되어 있습니다.

5개의 탭 정지 컨테이너 각각은 별도의 그룹화 엔터티로 간주되어 페이지의 탭 정지 수를 줄일 수 있습니다. Grid는 풍부한 DOM 구조와 함께 많은 가상화된 컨테이너를 가지고 있어 성능을 높일 수 있습니다. 따라서 페이지 탭 시퀀스의 포커스를 받을 수 있는 그리드 요소 부분이 두 개 이상 있습니다. 이를 통해 모든 탭 정지 컨테이너에서 별도의 풍부한 탐색을 가질 수 있습니다.

참고: default-browser-focusable 작업은 지속된다는 점에 유의하세요. 우리는 ng-templates의 HTML 요소 부분 또는 그리드에 별도로 추가 된 다른 요소의 초점을 막지 않습니다. 브라우저는 기본적으로 포커스 작업을 처리합니다. 포커스를 받을 수  있는 추가 지시문을 적용할 필요가 없습니다.

Active Element Navigation

W3c의 기본 키보드 탐색 규칙을 다시 참조하면 모든 대화형 UI 구성 요소는 키보드를 통해 액세스할 수 있어야 합니다. 이 작업은 탭 순서에 포함하거나 탭 순서에 있는 구성 요소에서 연결할 수 있도록 하는 것이 가장 좋습니다. 그리드의 경우 탐색에서는 탐색 키(화살표 키, home/end, ctrl + '작업 키')를 사용하여 이러한 포커스 가능한 각 컨테이너를 이동할 수 있습니다. 여기에서 Active element 탐색 개념이 시작됩니다

여기서 활성 요소는 포커스가 있는 컨테이너에서 표시되는 첫 번째 요소입니다. 그러나이 요소는 초점이 맞춰지지 않습니다. 초점은 실제 컨테이너에 남아 있습니다. 활성 요소는 대부분의 그리드 요소를 탐색하고 초점이 맞춰진 복합 구성 요소를 기반으로 기능을 활성화할 수 있는 기능을 제공합니다.

집중된 요소는 선택한 요소와 활성 요소와 어떻게 다릅니까?

​우리는 초점이 맞춰진 요소를 포인터로 간주합니다 – 탐색 경로(페이지 탭 순서)를 추적합니다. 우리가 이미 알고 있듯이 우리는 5 개의 복합 요소를 가지고 있습니다. Active 요소는 이러한 포커스 가능한 컨테이너를 탐색하는 데 사용됩니다. 아래 이미지에서 볼 수 있듯이 회색 셀 배경의 두꺼운 주황색 테두리는 시각적 사용자를 위한 현재 활성 요소를 나타냅니다.

선택한 요소는 aria-selected="true"가 있는 요소입니다. igxGrid의 경우 aria-selected는 셀, 행 및 열 선택(WAI-ARIA)의 세 가지 유형의 선택 요소 모두에 적용할 수 있습니다.

위 섹션의 주요 내용:

• 초점이 맞춰진 요소 – 페이지 탭 시퀀스의 경로 추적 – 그리드의 도구 모음, 머리글, 본문, 바닥글 및 호출기.
• 활성 요소 – 화살표 키(및 home/end와 같은 특수 키)를 사용하여 포커스를 받을 수 있는 5개의 컨테이너 내에서 이동합니다.
• 선택된 요소 –aria-selected="true"와 그리드 선택 스타일이 적용되었습니다(셀, 행 또는 열 선택).

키 및 동작 매핑에 대한 구체적인 권장 사항에 대해서는 WAI-ARIA Authoring Practices Guide의 지침을 따릅니다. 따라서 ARIA Grid가 제공하는 역할은 Ignite UI for Angular Grid에서도 인식할 수 있습니다(그리드, 행, 그리드 셀, 행 헤더 및 열 헤더).

Tab Navigation

그리드는 기본 그리드를 따릅니다. 키보드 탐색 규칙 그 탭 그리고 Shift + Tab 키 키를 누르면 포커스가 한 UI 구성요소에서 다른 UI 구성요소로 이동합니다. 화살표 키는 여러 요소를 포함하는 구성 요소 내부의 활성 상태를 변경합니다.

이전 탭 상호 작용 동작과 비교하여 다음 사항이 변경되었습니다.

• ​탭 키를 사용하여 IgxGrid의 셀 사이를 이동할 수 없습니다. 이제 화살표 키로만 탐색이 수행됩니다.
• ​Tab 키를 사용하면 편집 가능한 다음 셀로만 이동할 수 있습니다(셀이 편집 모드에 있는 경우에만). (행의) 마지막 편집 가능한 셀에 도달하면 탐색이 다음 행의 편집 가능한 셀로 계속됩니다. 편집 가능한 마지막 셀에 도달하면 탭 탐색이 포커스를 받을 수 있는 다음 탭 정지 요소로 계속됩니다.

성능 개선 및 코드 개선

새로운 키보드 탐색 개념의 결과로 코드를 최적화하고 Ignite UI for Angular Grid에서 성능 향상을 구현할 수 있었습니다. 여기에는 다음이 포함됩니다.

• 셀 포커스 및 흐림 처리 처리기를 제거했습니다.
• 휠 및 뷰 분리 처리기도 제거되었습니다.
• 내비게이션 서비스 축소. 이전에는 Grid, HierarchicalGrid, TreeGrid 및 MRL 기능에 대한 네 가지 탐색 서비스가 있었습니다. 이제 우리는 세 명만 남았습니다. 이전 구현에서는 가상화된 콘텐츠로 스크롤할 때 셀 컨텍스트를 변경했습니다(실제 셸은 동일하게 유지됨). 그러나 브라우저에서는 이미 초점이 맞춰진 요소에 집중할 수 없는 문제가 있었습니다. 우리는 셀 초점을 흐리게 하고, 셀 컨텍스트를 변경하고, 다시 초점을 맞춰야 했습니다. 이제 더 이상 문제가되지 않습니다.
• 터치 장치 개선 사항. 이제 스크롤에 집중된 셀이 있으면 휠 핸들러를 분리하기 전에 셀을 흐리게 처리합니다.
• '이벤트 스태킹'을 통한 애플리케이션 수준 성능 향상. 'ngZoneEventColescing: true'를 사용합니다.

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

Keyboard Navigation Features Integration

키보드 탐색 기능 통합에 초점을 맞추겠습니다. Angular Grid에는 많은 기능이 있으며 새로운 변경 사항에서 제대로 작동하는지 확인하기 위해 모든 기능을 신중하게 고려했습니다.

• Header navigation
  • 이제 부드러운 열 머리글 및 열 그룹 탐색이 있습니다. 키 조합으로 특정 기능을 활성화하는 방법을 설명하는이 헤더 상호 작용 목록을 확인하십시오. 라이브 데모.
• Excel 스타일 필터 및 기본 필터링 행
  • Ctrl + Shift + L은 Excel 스타일 필터/기본(행) 필터를 엽니다.
• 고급 필터링
  • Alt + L opens the advanced filter dialog.
• Sorting
  • Ctrl + 위쪽 화살표를 누르면 활성 열 헤더가 ASC 순서로 정렬됩니다. 열이 이미 ASC에서 정렬되어 있으면 정렬이 제거됩니다(tri state none).
  • Ctrl + 아래쪽 화살표를 누르면 활성 열 헤더가 DSC 순서로 정렬됩니다. 열이 DSC에서 이미 정렬된 경우 정렬을 제거합니다(tri state none).
• 그룹화 기준
  • Shift + Alt + 오른쪽 화살표를 눌러 활성 열을 기준으로 그룹화합니다.
  • Shift + Alt + 화살표 왼쪽 화살표 활성 열의 그룹을 해제합니다(기준별 그룹화에서 제거).
• Multi-column headers 
  • Alt + left/up arrow key – collapse.
  • Alt + right/down arrow key – expand.
• Column Selection
  • Space key press – select a column.

참고: 스크린 리더를 사용하는 경우 초기 헤더 클릭 시 전체 헤더 컨테이너에 포커스가 맞춰지고 스크린 리더가 모든 헤더 캡션을 읽는다는 점에 유의하세요. 머리글을 클릭하면 머리글 캡션 + 선택 상태를 읽습니다. 예 –회사 이름, 열 머리글 선택.

• 셀 편집– 이제 탭 탐색은 편집 가능한 셀에 대해서만 작동합니다(편집 모드에서). 탭 탐색을 사용한 셀 편집에서 그리드 끝에 도달하면 마지막 셀이 제출됩니다. 그런 다음 탐색은 사용 가능한 다음 탭 정지 요소로 계속됩니다.
• 필터링(칩 필터링)– 칩에 대한 탭 탐색이 제거되어 화살표 키를 사용해야만 탐색이 가능합니다. 또한:
  • 칩은 이제 열 헤더의 일부입니다.
  • 칩은 더 이상 초점을 맞출 수 있는 요소가 아닙니다.

• 페이징– 더 풍부한 웹 사이트 접근성. 도구 설명, aria-labels 및 역할이 추가되었습니다.
• Default Key combination updates:
  • Ctrl + 다른 모든 키는 그룹화된 행 영역이 아닌 실제 셀에서만 작동합니다. 이것은 이전 동작과 다릅니다. GroupBy 및 Master-Detail은 Ctrl+ 화살표 키에서 작동하지 않습니다.
  • Ctrl + 오른쪽/왼쪽 화살표는 일반 셀, 요약 행 및 머리글에서만 작동합니다.
  • Home 및 End (및 Ctrl Home/End)가 예상대로 작동합니다. 여기에는 변경 사항이 없습니다.
  • 이제 탭 정지/헤더 요소/본문 셀/요약/페이징/그룹화 기준/마스터 세부 정보/MRL/셀 편집에 대해 보다 풍부한 시각적 스타일을 제공합니다.

결론적으로...

우리는 지속적인 혁신의 필요성과 훌륭한 기능이 진정한 협업의 결과라는 것을 이해합니다.개발자들의 노력 덕분에,  Ignite UI for Angular Grid를 사용할 때 키보드 탐색의 복잡성을 크게 줄일 수있었습니다(또한 주요 기술의 다른 모든 그리드에서도구성 요소 패리티를 염두에 두고 있음).이제 전반적인 키보드 상호 작용이 개선되고 직관적으로 사용할 수 있으며,웹 사이트를​​​보장하는 동시에 더 나은 웹 사이트 사용성을 제공합니다접근성.