프론트 개발자로 HTML 이론을 배웠다면 모두 한 번씩은 들어봤을 ‘시맨틱’ 마크업.
이는 역할과 목적에 따라 의미를 잘 전달하도록 마크업 하는 것을 말한다.
그리고 시맨틱 마크업과 떼어 놓을 수 없는 개념으로 '웹 접근성' 이 있다.
우리나라에서는 웹 접근성이 잘 지켜진 사이트를 찾아보기 힘들지만, 외국 사이트에서는 이를 엄격하게 규제하고 있기 때문에 꽤나 자주 찾아볼 수 있다.
(가깝게 애플만 봐도 굉장히 잘 지켜지고 있다.)
그럼 웹 접근성 이란 무엇일까.
웹 접근성은 단순하게 페이지를 구현하는 것에 그치지 않고,
사용자 모두가 장애나 환경에 구애받지 않고 컨텐츠에 원활하게 접근할 수 있도록 도와준다.
마우스로 접근을 못 한다면 키보드로,
이미지와 동작을 볼 수 없다면 보이스로,
소리를 들을 수 없다면 텍스트로 등
우회하여 접근하는 방법을 계속하여 제공해준다.
사실 ‘보편적’ 인 서비스는 접근성이 잘 갖춰진 서비스이다.
‘장애를 가진 사람들도 사용할 수 있는’ 이라고 하여 나와 먼 이야기가 아니다.
내가 당장 트랙패드가 망가졌을 때, 이어폰을 가져오지 않아 소리를 들을 수 없을 때,
과연 나는 이 서비스를 원활하게 사용할 수 있는가? 의 관점에서 생각해보면 답이 나올 것이다.
WAI-ARIA
이러한 관점에서 WAI-ARIA 는 웹 접근성 향상을 돕는 방법 중 하나이다.
역할(Role), 속성(Property), 상태(State) 정보를 추가하여 스크린리더 등에서 페이지 접근성을 높이고 보다 나은 UX를 제공하도록 도와준다.
역할
태그에 역할을 부여하여 정보를 제공해준다.
<div class=“checkbox” role=“checkbox”>와 같이 스크린리더는 화면을 탐색하는 사용자가 위의 역할이 체크박스임을 알 수 있도록 해준다.
속성
aria-*형태를 가지며, 속성이 바뀌는 경우는 드물다.<div class=“checkbox” role=“checkbox” aria-required=“true”>
aria-required를 이용하여 필수 항목 속성인지 유무를 결정할 수 있다.
상태
역시
aria-*형태를 가지며, 속성과 달리 인터렉션에 의해 자주 바뀔 수 있다.<div class=“checkbox” role=“checkbox” aria-required=“true” checked aria-checked=“true”>
aria-checked를 이용하여 해당 박스의 체크 상태를 명시할 수 있다.
WAI-ARIA 사용 시 주의사항
1. 태그의 역할과 의미에 맞게 작성해야 한다.
버튼을 예시로 들어보자.
<div role=“button”>버튼</div>위와 같이 사용하는 것이 틀린 것은 아니지만 적합하지 않다.
div안의 버튼이 ‘버튼’의 역할을 가지고 있다는 사실을 알려주고 있지만,
div 가 마치 button 태그처럼 마우스와 키보드 포커싱에 적합한 기능을 가지고 있지는 않기 때문이다.
따라서 이는 알맞은 시맨틱 태그를 사용하여
<button>버튼</button> 으로 작성하는 것이 접근성 향상에 도움을 준다.
비슷한 맥락으로
2. 시맨틱 태그와 함께 중복되거나 잘못된 ARIA를 사용하지 않아야 한다.
<button role=“button”>버튼</button>
<button role=“heading”>버튼</button>위와 같은 방법은 올바른 사용법이 아니다.
각각의 태그는 암묵적으로 가질 수 있는 role 이 정해져 있다.
이와 관련해서는 아래 링크를 통해 확인할 수 있다.
W3C recommendation
추가적으로 시맨틱 태그를 사용하여 마크업 할 시 웹 접근성뿐만 아닌, SEO(검색엔진 최적화) 에도 영향을 미친다. 내가 만든 사이트가 검색엔진에서 상단에 나타나길 바란다면, 그럼 우선 태그부터 갈아엎어 보자..
