🚩 글의 주제 : 보조기기를 위해 비시각적인 정보를 제공하는 스피너를 만들어보자.
❓ 간혹 보이던 스피너가 없는 페이지들을 생각해보니 나의 요청이 작동 중인지 아닌지 알 수가 없어 매우 답답했었다. 그렇다면 시각적인 정보를 전달받을 수 없는 보조기기 사용자들은 어떻게 스피너를 인지할까? 개발자들은 어떻게 정보를 제공해야 할까?
Spinner란?
👉 스피너는 사용자의 요청(Request)가 진행되고 있음을 시각적으로 알려주는 역할을 한다. 이를 통해 사용자는 스피너가 멈출 때 까지 기다리고, 스피너가 사라짐과 동시에 다른 액션을 취할 것이다.
웹접근성을 위해 비시각적인 요소로도 이 기능을 제공하자.
일반적인 스피너의 동작 흐름 그대로 비시각적인 요소를 제공해주면 된다.
- 시각적 알림 : 로딩중인 상태 → 스피너 출현 → 로딩이 끝난 상태 → 스피너 사라짐
- 비시각적 알림 : 로딩 중인 상태 → 보조기기에 알림 띄우기 → 로딩 중이라는 메세지 전달 → 로딩이 끝난 상태 → 로딩 중 메세지를 삭제 → 로딩 완료 메세지 전달 → 특정 시간 후 완료 메세지 삭제
리액트로 만들어보기
👉 비시각적인 정보를 제공하는 스피너를 반환하는 리액트 함수 컴퍼넌트 Spinner 를 만들어보자 !
figure태그 내에img가 있는 리액트 요소를 반환한다.renderAsset함수를 사용하여 타입에 따른 스피너 이미지를 반환한다.- 부모 컨테이너 컨퍼넌트에서
isLoading이라는 상태를 관리하고, 이 상태가 true 인 경우에만 스피너를 호출하여 사용한다. - 접근성 준수
- aria-live 속성을 이용한다.
- 이 속성을 위해서는 비시각적 메세지를 띄워줄 요소들이 HTML 문서 내에 정적 요소(시작노드, 종료 노드)로 존재해야 한다.
- 로딩 시작과 완료 메세지는 보조기기에는 인식되지만 시각적으로는 보이지 않도록 한다. (A11yHidden 클래스 스타일로 구현)
- 시작 :
- 시작 노드에 속성 추가
role="alert" - 로딩 시작 메세지 삽입
- 시작 노드에 속성 추가
- 종료 :
- 시작 노드의 role 속성 지우기
- 로딩 시작 메세지 삭제
- 로딩 완료 메세지 삽입 및 1000ms 후 메세지 삭제
- aria-live 속성을 이용한다.
aria-live
개발자는 aria-live를 사용해 페이지 중 어떤 부분을 '라이브'로 표시할 수 있다. 즉, 사용자가 페이지를 탐색하다가 그저 우연히 그런 '라이브' 부분을 발견하는 것이 아니라, 페이지의 어느 위치에 있든 상관없이 새롭게 업데이트된 정보를 사용자에게 즉시 알릴 수 있다. aria-live 속성을 가진 요소가 있는 경우 페이지에서 이런 요소와 그 하위 항목을 포함한 부분을 라이브 영역이라고 한다.
✅ aria-live 속성을 사용하기 위해서는 index.html 파일에 정적으로 해당 속성을 가진 요소가 존재해야 한다.
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
**<div id="loading-start" aria-live="assertive"></div>
<div id="loading-end" aria-live="assertive"></div>**
</body>💡 알게된 점
- aria-live 속성은 동적 요소에 줄 수 없다!
- role=”alert”
📌 참고 링크
무럭무럭 자라는 주니어 프론트엔드 개발자입니다.