Semantic UI + React 모달 다이얼로그 접근성 개선

React 앱 개발 시, 외부 UI 프레임워크(또는 컴포넌트 라이브러리)를 사용할 경우 놓치기 쉬운 접근성 개선에 대해 살펴봅니다. 모달 다이얼로그 컴포넌트의 접근성 문제를 살펴보고, 접근성을 개선합니다. (⬇ 목차 살펴보기)

※ 접근성 개선이 주제인 영상 강의이므로, React Hook 사용법에 대해 별도로 설명하지 않음에 유의하세요.

00:22 오늘 살펴 볼 주제 - Dialog (Modal)
00:58 Semantic UI, Modal 컴포넌트의 접근성 문제
01:04 WAI-ARIA Authoring Practices 1.1 다이얼로그(모달)
01:16 React + Semantic UI Modal 실습 주소 안내
01:25 dialog 역할 설정 (Modal 의미 부여)
01:30 aria-labelledby 속성 설정 (Modal 레이블 연결)
01:42 설정된 ARIA Attributes 개발도구에서 확인
01:59 키보드 탐색 접근성 문제
02:07 tabIndex 속성 설정 (키보드 접근성 설정, 1단계)
02:20 키보드 접근 시, 포커스가 이동하지 않음 확인
02:30 ref 속성, useRef() 훅 설정 (키보드 접근성 설정, 2단계)
02:45 handleOpen 핸들러 수정 (키보드 접근성 설정, 3단계)
03:05 Semantic UI의 close 버튼은 모양만 버튼일 뿐!
03:28 Semnatic UI, Button 컴포넌트 추가 (키보드 접근성 설정, 4단계)
03:55 onClick 이벤트 핸들러로 handleClose 연결 (키보드 접근성 설정, 5단계)
04:10 Modal을 닫은 후, 포커스 이동 문제
04:22 Modal 트리거 버튼에 ref, focus() 설정 (키보드 접근성 설정, 6단계)
04:50 Modal이 표시된 후, 키보드 탐색이 순환하지 않는 문제
05:01 닫기 버튼에 onKeyDown 이벤트 핸들러 연결 (키보드 접근성 설정, 7-1단계)
05:48 Shift + Tab 키의 경우, 여전히 순환 문제 발생
05:55 Modal 안의 첫번째 포커스 요소에 onKeyDown 이벤트 핸들러 연결 (키보드 접근성 설정, 7-2단계)
06:53 마무리


[ 영상 강의에서 빠트린 WAI-ARIA 속성 ]

aria-modal

딤(dim) 처리가 표시되어 활성화 된 Modal만 조작 가능한 경우 Modal 요소에 aria-modal="true" 속성을 설정해야 합니다.

aria-label

영상 강의에서는 닫기 버튼의 레이블을 설정하지 않았는데 aria-label="이전 메시지 보관 모달 닫기" 속성을 설정해 스크린 리더에서 읽히도록 설정해야 합니다.

※ 빠트린 속성 적용은 아래 "완성" 링크에서 확인할 수 있습니다.


- 실습

시작: https://bit.ly/a11y-modal-begin
완성: https://bit.ly/a11y-modal-finish


- 참고

Semantic UI React 문서
https://react.semantic-ui.com/modules/modal/#variations-close-icon

WAI-ARIA Authoring Practices 1.1 다이얼로그(모달)
https://www.w3.org/TR/wai-aria-practices/#dialog_modal


#React #SemanticUI #접근성 #모달