[웹접근성] Role, State, Properties 란?

wai-aria를 찾아보던 중 어떤 점이 궁금할까 싶어 몇 가지 적어 보았다.

 

- 어디에 어떤 'role'을 써야 할지

- 'aria-~'로 끝나는 속성들을 어떻게 줘야 할지

- 'aria-labelledby', 'aria- label'의 차이점

 

 

추리면 3가지로 압축될 것 같다.

아무래도 접근성 작업을 진행할 때,

wai-aria보다 html tag본연의 의미를 살려서 마크업을 하거나,

tab-index를 주로 사용하다 보니 wai-aria를 잘 사용하지 않았었다.

 

 

wai-aria가 주는 세심한 편리함 때문에라도,

더 잘 많이 사용해 보기 위해, 오늘도 정리해 보겠다.

---

 

 

 

# Role, State, Properties란?

+ 역할(role)

• 태그의 역할을 알려주는 속성(attribute)
• role은 말 그대로 역할을 부여하는 것이다.(정해진 값이 있음)
• 태그 자체에 적절한 의미를 이미 가지고 있는 경우 role을 부여하지 않도록 주의한다.
• (만약 role을 부여한다면 중복내용으로 인지할 수 있기 때문.)

 

가장 많이 보였던 'role'은?

- button

- checkbox

- radio

- link

- tab/ tablist/ tabpanel

- list/ listitem

 

 

 

+ 상태(state)와 속성(property)

W3C에서 제공하는 내용을 보면, 상태(state)와 속성(property)은 유사한 기능이 많고,

이를 모두 단순히 속성으로 지칭하기도 한다.

mdn에서 조차 상태와 속성을 같이 설명하고 있다.

---

상태(state)는 말 그대로 현재 상태를 의미하며,

현재 이 요소가 가려져있는지(hidden) 있는지, 비활성(disabled) 처리되어 있는지, 선택(selected, current)되어 있는지 등 많은 현재의 상태를 표현하는 것이라 볼 수 있겠다.

 

가장 많이 보였던 'state'는?

- aria-hidden

- aria-disabled

- aria-selected

- aria-current

 

 

속성(properties)은 요소의 속성으로,

현재 이 요소의 특징이나 상황을 얘기한다.

예를 들어 현재 이 요소가 모달 창이라면 aria-modal="true"를 작성해 준다.

적다 보니, role과도 헷갈릴 수도 있겠다 싶다.

어떤 차이가 있는지 자세히 알아봐야겠다.

 

가장 많이 보였던 ' properties '는?

- aria-label

- aria-modal

 

 

 

 

 

각 카테고리 별로 수많은 역할과 상태, 속성을 담고 있다.

그러나 그 많은 것을 다 사용할 수 없기도 하다 보니 필요한 것, 자주 쓰이는 것 위주로 사용하게 될 것 같다.

(마치 우리가 수많은 html태그 중에 자주 사용하는 것만 찾아서 쓰는 것처럼!)

 

 

마무리로 역할, 상태, 속성을 보기 편하게 잘 분류해 놓은 사이트를 하나 첨부한다.

다음엔 이 카테고리들은 어떻게 사용하면 좋을지 사용방법의 대해서 적어봐야겠다.

 

https://www.digitala11y.com/wai-aria-1-1-cheat-sheet/

WAI-ARIA 1.2 Cheat Sheet • DigitalA11Y