웹 접근성 고찰 5 - role

role은 크게 아래의 범주로 나뉘어진다.

• Widget roles
• Composite roles
• Document structure roles
• Landmark roles
• Live Region roles
• Window roles

하지만, 위의 범주 아래에 있는 모든 role을 사용하는 것은 아니기 때문에, 자주 사용하는 것을 위주로 정리를…

제일 중요한 것은 aria를 사용하기 전에 html 태그 자체를 잘 써야한다. 예를 들어, 아래와 같이 div 태그에 role=button으로 설정하는 것 보다는 <button> 태그를 사용하는 것이 옳다.

기능적으로도, button의 경우에는 스페이스바를 눌러도 엔터가 눌러지는 반면, div에 role을 달아도 이런 동작은 프로그래밍해주어야한다. 그리고 form 태그내에서, <button type="submit"을 작성하는 경우에는 implicit submission이 동작하는 반면에, <div role="button"> 으로 작성한다고 하여도 이는 동작하지 않는다.

따라서, aria-role 을 사용을 우선 고려하기 보다는, html을 충분히 semantic하게 정해야한다.

<div onClick={handleClick} role="button">버튼</div>
<button>버튼</button>

탐색 / 탭 목록

Navigation : 내비게이션 메뉴들은 탭과 달리 의미상 확연히 다른 페이지로 이동할 것이라 예측. 메뉴 간 연속성이 있으면 오히려 혼란의 가능성 야기. 아이콘 형태의 경우 관습성을 이용하는 것을 권장.

Tab : 서로 관련 있는 것들끼리의 논리적 묶음. 유저는 관습상 탭 내 다른 메뉴를 클릭하면 페이지는 전환되지만 의미상 유사한 페이지로 이동할 것이라 예측. 탭에서는 메뉴 간 연속성이 중요하기 때문에 만들어낸 신조어로 탭명을 사용하는 것은 지양.

탐색

The aria-labelledby attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion.

<nav>