aria-*, data-* 속성 비교 :: 마이구미

이 글은 aria-* 속성과 data-* 속성을 비교한다.

두 속성 모두 HTML5 스펙에 존재한다.

data-* - MDN, aria-* - MDN

우선 aria-*, data-* 속성을 사용한 예제를 보자.

다음은 css 가상 클래스(before, after)와 함께, 많이 사용하는 예제이다.

두 속성은 같은 목적으로 사용할 경우, 동일한 결과를 낸다.

// html
<div class="item1" aria-label="foo">label : </div>
<div class="item2" data-label="boo">label : </div>

// scss
.item1 {
  &:after {
    content: attr(aria-label);
  }
}
.item2 {
  &:after {
    content: attr(data-label);
  }
}

두 방법 모두 동일한 결과를 낸다.

위와 같은 동일한 목적으로 사용함에 있어, 문제 될 것이 전혀 없다.

javascript 에서도 두 속성의 값을 읽을 경우, 동일하게 getAttribute() 메소드를 통해 접근할 수 있다.

document.querySelector(".item1").getAttribute("aria-label"); // foo
document.querySelector(".item2").getAttribute("data-label"); // boo

그렇다면 두 속성의 차이점은 무엇인가?

두 속성이 위와 같은 케이스에서 동일하게 결과를 낼 수 있으나, 서로 스펙으로 추가된 목적 자체가 다르다.

짧은 문장으로 설명하면 다음과 같다.

data-* 속성의 경우는 커스텀 속성으로, 데이터 자체를 위함이다.

aria- * 속성의 경우는 웹 접근성을 위함이다.

data 속성은 HTML 요소에 추가적으로 데이터를 저장할 수 있게 해준다.

이 의미는 id 나 class 는 의미를 부여하는 것이라고 한다면, data 속성은 데이터 자체를 저장한다고 생각하면 된다.

data-* 속성이 없던 시절에는 자체적으로 DOM에 attribute 를 만들거나 class 에 넣는 경우도 존재했다.

<div class="item number" seq="1">1</div> // 타입은 number, 순서는 1
<div class="item string" seq="2">A</div> // 타입은 string, 순서는 2

위 코드처럼 자체 커스텀 속성 및 class 를 쓴다면, 여러모로 좋은 상황은 아니라는 것을 느낄 수 있을 것이다.

class 는 자체 목적과는 다른 타입을 체크하기 위한 목적이 추가되어 혼동을 줄 수 있고, 커스텀 속성도 명확해보이지 않는다.

data 속성을 쓴다면, 다음과 같이 작성할 수 있다.

<div class="item" data-type="number" data-seq="1">1</div>
<div class="item" data-type="string" data-seq="2">A</div>

HTML 코드가 이전 코드보다 명확한 의미를 가지는 것을 알 수 있다.

또한, data 속성은 getAttribute() 메소드가 아닌 dataset 속성을 통해 읽기, 쓰기 같은 접근할 수 있다.

el.getAttribute("data-label") => el.dataset.label
el.setAttribute("data-label", "A") => el.dataset.label = "A"

data 속성은 현재 많은 사이트에서 사용하고 있어, 페이지 코드를 확인해봤다면 익숙할 것이다.

부트스트랩이나 jQuery 관련된 라이브러리 등과 같은 곳에서도 data 속성을 기반으로, 서로 다른 모듈을 제공한다.

Vue.js 의 scoped CSS 기능을 사용해봤다면, data-v-4646bc3c  와 같은 형태를 볼 수 있다.

이를 이용해서 scoped 가 적용된 CSS 를 알아챌 수 있다.

---

전하고자 하는 핵심은 class || id, data-*, aria-* 속성의 각 큰 범위에서 가지고 있는 목적에 맞게 사용해야한다.

하나의 예는 다음과 같다.

<ul class="vehicles" data-list="trigger-interactive">
 <li data-additional-info="white, red, yellow">Fiat 500</li>
 <li data-additional-info="white, black">BMW M3</li>
 <li data-additional-info="black, blue">Audi R8 Coupe</li>
</ul>

const cars = document.querySelector("[data-list='cars']");

cars.addEventListener("click", e => {
  alert("Available colors: " + e.target.dataset.additionalInfo);
});

위 코드의 문제점은 정의된 data-list 속성이다.

현재 상황에서는 data-list 는 데이터를 위한 것이 아닌, class 역할에 가깝기 때문이다.

<ul class="vehicles trigger-interactive" data-list="trigger-interactive">

aria-* 속성의 사용법은 다음 링크를 참고하면 좋다.

https://tech.lezhin.com/2018/04/20/wai-aria