A. Data tag
사용하는 Kendo Library에는 data라는 태그가 많이 보이고 사용된다. 이번 기회에 어떻게 사용되는지 간단하게 파악해본다.
MDN에 따르면 HTML elements에 추가적인 정보를 저장할 수 있게 해주는 요소라고 한다. 추가는 아래와 같이 HTML 작성 시에 추가할 수 있다
<article
id="electric-cars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
<!-- Electric car content -->
</article>이 data tag들은 javascript를 통해서 접근이 가능하며 스타일링 선택자로서도 사용될 수 있다.
const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")
article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
article[data-columns="3"] {
width: 400px;
}
article[data-columns="4"] {
width: 600px;
}MDN에는 다음 이슈들이 존재한다고 한다.
- 접근 보조기술(assistive technology)이 접근할 수 없기에 접근해야하는 정보를 저장 비권장
- 여기서 접근 보조기술이란 장애가 있는 사람들이 웹사이트를 사용할 수 있도록 도와주는 기술이나 소프트웨어라고 한다
- 검색 크롤러가 해당 값을 인식 안함
- 의미가 없는(not semantic) 추가정보를 담고 있기에 확인을 할 필요가 없음
B-Q1. 왜 접근 보조기술이 접근을 못 할까?
이 질문의 시작은 javascript로 접근가능한 속성이 왜 보조기술에서는 접근이 불가능한지 궁금했고 GPT를 통해서 알아낸 내용을 정리한다.
접근이 불가능 한 이유는 다음과 같다:
- 보조기술의 태생이 더 빠르다. 그래서 javascript로 만들어지지 않았기에 data태그에 접근이 안 된다
- 보조기술은 OS레벨에서 작동을 한다. Javascript로 작성이 되면 OS레벨의 정보를 읽지 못한다
- 보조기술은 DOM이 전달해준 Accessibility Tree를 본다. 해당 tree에는 다음 내용이 존재한다. 따라서 읽을 수 없다
- 시맨틱 태그 (예:
<button>,<input>) - 역할 속성 (
role="dialog") - 이름/설명 (
aria-label,aria-describedby) - 상태 정보 (
aria-checked,aria-disabled) - 콘텐츠 (
textContent)
- 시맨틱 태그 (예:
이 정리를 통해서 알 수 있는 것은 data tag에는 개발에 필요한 정보를 넣되 민감한 정보를 넣으면 안 된 다는 것을 알 수 있다.
B. 웹 접근성(Web Accessibility)
이 주제는 data-* 속성을 살펴보다가, 웹 접근성 전반에 대해 이번 기회에 정리해보기로 했다.
web.dev에 따르면 웹 접근성(Web Accessibility, a11y)은 “개인의 장애 여부와 관계없이, 모두가 동등하고 의미있는 방식으로 상호작용할 수 있는 제품을 설계하고 만드는 것”이라고 규정하고 있다.
웹 접근성은 어떤 정보를 기반으로 판단될까?
웹 접근성은 Accessibility Tree(접근성 트리)를 기반으로 판단된다. 접근성 트리는 DOM 트리가 생성된 후 이를 기반으로 생성되며, 이때 활용되는 정보는 다음과 같다.
- 시멘틱 태그들(
<button>,<input>등등) aria-*속성들- role, tabindex, label, alt등 접근성과 관련이 있는 요소들
위 정보를 바탕으로 브라우저는 접근성 트리를 생성하며, 각 요소는 다음과 같은 4가지 주요 속성을 가진다:
| 속성 | 설명 | 예시 |
|---|---|---|
| Name | 스크린 리더가 읽는 대상의 라벨 또는 제목 | aria-label, alt, , 텍스트 콘텐츠 등에서 결정됨 |
| Description | 이름과 상태 외에도 보조 기술이 필요로 하는 추가 정보 | aria-describedby, aria-haspopup, aria-controls 같은 ARIA 속성 |
| Role | 요소의 기능적 역할. 시맨틱 태그나 role 속성으로 결정됨 | → role="button"으로 자동 매핑됨 |
| State | 요소의 현재 상태 | 선택됨(aria-selected), 비활성화됨(disabled), 확장됨(aria-expanded) 등 |
B-1. 웹 접근성 확인 방법
웹 접근성 정보는 크롬 기준으로 개발자 도구 > Elements > Accessibility에서 확인할 수 있다. 현재(25년 3월 기준)으로 Accessibility Tree를 만들어주는 실험기능이 있는 데, 아래 사진과 같이 Elements 탭 내부의 버튼을 클릭하여 DOM Tree와 Accessibility Tree간의 전환을 할 수 있다.
B-2. The Accessibility Object Model(AOM)
접근성과 관련된 내용을 조사하다 보면 AOM이라는 개념이 자주 등장한다.
AOM은 The Accessibility Object Model로 접근성 트리를 자바스크립트로 조작 가능하게 해주는 모델(제안서)이다.
왜 AOM을 제안했을 까?
Accessibility Tree는 DOM을 기반으로 만든다. 즉, DOM에 존재하는 시맨틱 정보 (예: <button>, aria-*, role)를 바탕으로 브라우저가 접근성 트리를 구성한다.
그런데 다음과 같은 DOM 외부의 UI 구성 방식은 접근성 트리에 정보가 반영되지 않는다:
- Shadow DOM 내부 요소들
- Canvas로 그린 UI
- SVG UI
- WebGL로 구성된 UI
- Virtual DOM 기반 프레임워크의 중간 상태
이런 요소들은 화면에 보이긴 해도, DOM 상에 직접적인 시맨틱 정보가 없어서 스크린 리더 같은 보조기술이 읽을 수 없다.
또한, 기존 접근성 트리는 읽기 전용(read-only)이라 JavaScript로 수정하거나 주석을 달 수 없다.
그래서 AOM은 뭘 바꾸려는가?
| 기능 | 설명 |
|---|---|
| 접근성 트리를 JS로 조작 | 기존엔 DOM에만 정보 넣어야 했지만, 이제 JS 코드에서 직접 name, role, state 같은 접근성 정보를 설정 가능 |
| DOM 없이 접근성 제공 | canvas, SVG, WebGL같이 DOM 구조가 없는 UI에서도 접근성 트리 생성 가능 |
| 더 정밀한 접근성 제어 | 기존 시맨틱 태그 + aria-* 조합만으로는 어려웠던 세부 제어가 가능해짐 |
이에 대한 자세한 내용은 AOM 제안(github)에서 더 자세히 볼 수 있다,
B-2. <div role="button"> vs <button> 차이
role을 통해서 해당 요소가 button의 형태라는 것을 알려주는 것과 <button>이라는 시멘틱 태그간의 차이가 있을 까? 있다면 무엇이 있을까?
간단히 이야기하면 role은 흉내만 낼 뿐 그외는 전부 불완전한다. 따라서 semantic인 <button>을 쓰는 것이 더 좋다.
| 항목 | <button> | <div role="button"> |
|---|---|---|
| 기본 role | button (시맨틱 자동) | role="button" 있어야 명시됨 |
| 기본 키보드 지원 | 🟢(Enter, Space 자동 지원) | ❌ 직접 keydown 이벤트 구현해야 함 |
| 포커스 가능 여부 | 🟢(자동으로 tab 포커스 됨) | ❌ tabindex="0" 수동 지정 필요 |
| 스크린 리더 호환성 | 뛰어남 (자동 name/role 지원) | 조건 따라 다름 (aria-label 등 필요) |
그러나 진짜 아주 예외적으로 디자인 시스템 상 <button>을 못 쓰는 상황 (ex: <button>이 특정 CSS 프레임워크에서 깨진다거나)일 때. 이럴 때는 다음을 반드시 같이 구현해야 최소한의 접근성을 지켜야 한다
- role="button" 명시
- tabindex="0" 추가
- keydown 이벤트로 Enter / Space 키 핸들링
- aria-label 또는 화면에 보이는 텍스트로 name 제공
웹 접근성은 단순히 특정 사용자를 위한 배려가 아니라, 모든 유저를 위한 기본 설계 원칙이라는 것을 알 수 있었다,. 시맨틱 태그, ARIA 속성, 그리고 접근성 트리에 대한 이해는 프론트엔드 개발자라면 반드시 갖춰야 할 기본 소양이지만 어렵다면 UI library를 직접 이용하는 것도 하나의 방법이라고 생각한다.
Reference
Data 태그
Using data attributes - Learn web development | MDN
Web Accessibility
Accessibility tree - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
GitHub - WICG/aom: Accessibility Object Model
Full accessibility tree in Chrome DevTools | Blog | Chrome for Developers
