웹 접근성 공부를 위해서 공부한 내용 시리즈
▶ 2024.02.17 - [Web] - 웹 표준, 웹 호환성, 웹 접근성
▶ 2024.02.21 - [Web] - 웹 접근성 시나리오
▶ 2024.02.25 - [Web] - 웹 접근성이 왜 필요할까?
▶ 2024.03.16 - [Web] - 웹 접근성 기술 학습
▶ 2024.03.20 - [Web] - 웹 접근성 시나리오 - 2
▶ 2024.03.24 - [Web] - 랜드마크 롤 <= 현재 글
▶ 2024.03.27 - [Web] - WAI-aria
▶ 2024.03.31 - [Web] - 웹 접근성 시나리오 - 3
▶ 2024.04.04 - [Web] - 사용자가 입력하는 이미지
시맨틱 태그를 사용해서 태그의 용도에 맞춰서 개발하면 웹 스코어도 올라가서 검색 시 상단에 올라올 확률도
증가하고 웹 접근성 측면에서도 좋았다.
하지만 네이버에서는 시맨틱 태그를 포기하고 div를 사용한 이유가 뭘까?
시맨틱 태그는 HTML5부터 나오기 시작하였다.
그렇다는 것은 IE10 이하의 버전에서는 렌더링이 되지 않는 문제가 있다.
사용자가 어떤 브라우저를 사용할지 개발자는 알 수 없기 때문에 네이버는 해당 사용자들을 수용하기 위해서
div 태그를 사용해서 개발했다.
이때 div를 사용할지 시맨틱 태그를 사용할지는 기획 단계에서 결정하고 가는 부분이다.
그렇다고 네이버에서 웹 접근성을 포기할 순 없다.
이때 나온 것이 바로 랜드마크 롤이다.
랜드마크 롤
각 사이트가 동일한 표준을 지원할 수 있도록 하고, 스크린리더를 비롯한
보조 기술이 일관된 결과를 제공할 수 있도록 한다.
즉, 랜드마크 롤은 기존 시맨틱 태그를 대체하거나 추가하는 역할을 한다.
다양한 랜드마크 롤의 정의 및 사용법은 링크 를 통해서 참조할 수 있다.
기존 태그의 시맨틱에 추가 하는 랜드마크 롤의 예시
// 1. 메뉴 정의
<div class="menu" role="menu">
// 2. 경고 대화상자 정의
<div class="error" role="alertdialog">
// 3. 버튼 정의
<a class="btn" role="button">※ 만약 nav 태그도 사용할 수 있고, role="navigation"도 사용할 수 있다면 어떤걸 사용 해야할까?
IE 를 배제하는 경우에 가능하면 nav 태그를 사용하는 것이 더 좋다.
랜드마크 롤의 사용 대원칙에서 " ( 대안이 있다면 ) 랜드마크 롤을 사용하지 않는다. " 가 있다.
즉, 우리가 굳이 랜드마크 롤을 사용하지 않아도 되는 상황이라면 사용하지 않는 것이 좋다.
랜드마크 롤 사용 시 주의사항
한 페이지에 특정 랜드마크 롤이 두 번 이상 사용될 경우, 각 랜드마크 인스턴스에 고유한 레이블을 제공해야 한다.
예를 들어, 한 페이지 내에 메뉴가 여러 개라 role="navigation"을 많이 작성해야 하는 경우 공유한 레이블을 제공하기
위해서 aria-labelledby 혹은 aria-label 속성을 사용한다.
<div role="navigation"> <div role="navigation" aria-label="상단 메뉴">
// ... // ...
</div> </div>
==>>
<div role="navigation"> <div role="navigation" aria-label="하단 메뉴">
// ... // ...
</div> </div>
'Web' 카테고리의 다른 글
| 웹 접근성 시나리오 - 3 (1) | 2024.03.31 |
|---|---|
| WAI-aria (0) | 2024.03.27 |
| 웹 접근성 시나리오 - 2 (0) | 2024.03.20 |
| 웹 접근성 기술 학습 (0) | 2024.03.16 |
| 웹 접근성이 왜 필요할까? (1) | 2024.02.25 |