-
role 속성은 어떻게 사용해야할까?HTML, CSS, SASS 2023. 2. 22. 09:27
role, 어디서 많이 본 것 같은데?
이게 뭔데 Attribute 값으로 많이 들어가 있는거야?
role 속성은 alt 태그와 같이, 심각한 문제를 가지고 있는 페이지로 분류를 할 정도의 힘을 가지고 있지는 않습니다만, 이 또한 시각장애인들이 이용하는 스크린 리더기나 검색엔진의 크롤링 및 색인 과정을 도와주는 부수적인 역할을 수행하는 속성입니다.
쉽게 말해 role은 태그의 역할을 알려주는 속성이다.
role에 들어가는 값은 우리 마음대로 정하는 게 아닌 정해진 값을 사용해야 한다.
- tab
- tablist
- banner
- button
- group
등등 참 많다.
참고: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques
role 속성은 alt 태그와 사용법은 동일하나 사진마다 고유의 설명을 입력해야 하는 alt 속성과는 달리 해당 부분의 역할을 설명하는 속성 이기에 입력하는 role 이 정해져 있습니다.
아래는 직접 작성했던 코드의 잘못된 예 입니다.
Vue.js 로 avatar라는 컴포넌트를 만들고 있었다.
해당 컴포넌트는 avatar라는 컴포넌트니까 role에 avatar를 넣어줘볼까? 라고 생각했지만
avatar는 role에서 정해진 값으로 없었기에 부적절해 보인다는 것을 알게 되었다.
우리가 흔히 알고있는 aria-label 하고 좀 비슷해보이는데?
aria-label은 태그가 가지고 있는 의미를 적어주는 이름표 같은 역할을 한다.
role과는 다른 기능이 있는데, 크게 두 가지로 나눌 수 있다.
- aria-label은 role의 banner 나 tab 처럼 값이 정해져 있는 게 아닌, 브라우저가 스크린리더 사용자에게 전달해야 할 내용을 상황에 따라 적어야 한다.
예) aria-label=”메뉴 탭”, aria-label=”펼치기 버튼”, aria-label=”이벤트 배너”
- aria-label 과 같이 써도 되는 태그가 있고 그렇지 않은 태그가 있다. 시멘틱 태그이거나, role 속성 값이 상호작용을 하는 값일 때 aria-label을 붙일 수 있다.
- a
- button
- header
- footer
- nav
- main
- form
- iframe
- img
- role="navigation"
- role="button"...
시멘틱 태그가 아닌 의미 없는 태그에는 role이 붙어있지 않은 이상 aria-label을 마음대로 붙이면 안 된다.
- div
- span
- p
- li…
<div role="button" aria-label="펼치기"> <i class="ico ico-arrow"></i> </div>
이렇게 role와 aria-label을 함께 쓰면 스크린 리더에는 ‘버튼 펼치기’라고 읽을 것이다.
참고: 구글링
'HTML, CSS, SASS' 카테고리의 다른 글
Sass의 import, extend, mixin (0) 2021.02.17 font-size: 62.5% 를 사용하는 이유? (0) 2021.01.19 [CSS] 키보드 커서 컬러 변경 (0) 2018.02.20 [CSS] IE 10, 11 background-image blur bug (0) 2018.02.02 [CSS] IE 11 (0) 2018.02.02