HTML/CSS 과제를 진행하면서 받았던 요구사항 중에 다음과 같은 요구사항이 있었다.
- 스크린리더 사용자도 해당 배경 이미지에 따라 평점 점수를 이해할 수 있도록 구현해주세요.
- 텍스트 “|”로 삽입하고 해당 문자가 화면에는 보이지만 스크린리더에서는 읽을 수 없도록 마크업해주세요.
이전까지 강의에서도 그렇고 책에서도 해당 부분에 대한 내용은 "웹 표준/접근성 부분에서 스크린리더 사용자도 이용할 수 있도록 구현해야 한다"라는 얘기만 들었지 어떻게 구현해야 한다라는 방법은 들어본 적 없는 것 같았다. 그리고 따로 이 부분을 신경써서 구현하려고 하지는 않았던 것 같다.
그래서 이번 과제 요구사항을 보면서 아.. 이런 것도 신경써줘야 할 필요성이 있구나!라는 생각이 들었다.
과제에서 WAI-ARIA를 사용하여 스크린리더에서는 읽지 않도록 구현할 수 있습니다.라고 설명이 되어있어서 어떻게 구현할지는 쉽게 알 수 있었다. 그렇다면 WAI-ARIA는 과연 무엇일까?
WAI-ARIA
Web Accessibility Initiative – Accessible Rich Internet Applications
WAI는 W3C에서 웹 접근성을 담당하는 기관으로 ARIA는 RIA 환경의 웹 접근성에 대한 표준 기술 규격을 의미한다. 여기서 RIA 환경이란 정적인 HTML, 단순한 자바스크립트 환경의 웹이 아닌 동적인 자바스크립트와 Ajax와 같은 기술을 사용한 환경에서 수준 높은 UX를 제공하는 웹 애플리케이션을 의미한다.
즉, WAI-ARIA를 이용해서 개발자가 의도한 유저 인터페이스 행동이나 구조적인 정보를 스크린 리더와 같은 보조 기술에 전달하여 시각/인지 장애인들에게 일반 사용자들과 동일하게 정보를 제공하고 행동을 유도함으로써 웹페이지 탐색을 돕는 사용자 경험을 제공할 수 있게 된다.
구조
역할(Role) : 컴포넌트, 요소 내 역할 정의
어떤 역할을 하는 요소인지 명시해 스크린 리더 사용자에게 더 정확한 정보를 제공한다. 부여한 역할은 동적 변경이 불가능하다. 일반적으로는 HTML native 요소만으로 이를 처리하는게 가장 이상적입니다.
Document Structure Role 문서구조 역할
Abstract Role 추상 역할
Landmark Role 랜드마크 역할
Widget Role 위젯 역할
속성(Property) : 컴포넌트의 특징이나 상황 정의
요소가 기본적으로 가지고 있는 특징 또는 상황을 의미한다.
aria-label : 요소에 대한 정보가 없을 때 정보를 부여해주는 속성
aria-required : 폼 요소 작성 시 사용, 해당 필드가 기재되었을 시에만 폼을 전송하도록 하는 속성
aria-live : 실시간으로 업데이트/갱신된 정보를 알려주는 속성.
상태(State) : 컴포넌트 상태 정보를 정의
요소의 현재 상태를 의미하며, 상황의 변화에 따른 값을 가진다.
aria-expanded : 아코디언 메뉴에서 메뉴의 확장과 축소 상태
aria-selected : 선택 상태인 요소를 표시하는 속성
aria-invalid : 입력된 값이 유효한지 아닌지 판단
aria-hidden : 숨김 상태의 컨텐츠로, 사용 시 시각적으로만 숨겨지는 것이 아니라 의미적으로도 숨겨지기 때문에 시각적으로만 보이지 않게 할 때는 사용해서는 안 됨
참고 자료
