WAI-ARIA Script v1.0을 소개합니다
WAI-ARIA Script v1.0을 소개합니다.
안녕하세요, 엔비전스입니다. 지난 2021년 5월, Chrome에 정식으로 추가된 AOM의 일부인 ARIA-Reflection을 Chrome 최신 버전에 추가된 WAI-ARIA Reflection 자바스크립트 API와 AOM 소개를 NULI를 통해 소개해 드렸습니다.
지난 시간에는 AOM의 어떤 부분이 Chrome에 먼저 적용됐는지 살펴보았습니다. setAttribute(‘key’,‘value’)와 getAttribute(‘key’)를 사용하지 않고 WAI-ARIA 속성을 조작하는 것은 매우 매력적인 것입니다.
그리하여, 이번 시간에는 AOM이 완전히 추가되기 전까지 사용할, Chromium이 아닌 브라우저를 위한 대체 수단이자 유틸리티인 WAI-ARIA Script 1.0 라이브러리를 소개하고자 합니다.
탄생 배경
WAI-ARIA Reflection은 아직도 Chromium 브라우저(Edge, Chrome, Whale, Opera, Brave)와 Webkit 엔진을 사용하는 Safari에서만 지원하고 있습니다. 물론, 보시면 아시겠지만, Chromium이 웹 브라우징에 굉장히 많은 비중을 차지하는 엔진인 것은 사실이고, 현재 대부분 사용자가 Chromium을 사용하고 있습니다. 하지만, Mozilla 제단에서 만든 FireFox또한 여전히 유의미한 사용률을 보이고 있으므로, FireFox와의 호환성을 무시할 수 없습니다.
저희는 FireFox에서 ARIA Reflection을 사용할 수 없다는 것에 아쉬움을 느끼고, 갈증을 느꼈습니다. 분명히 Reflection을 사용하게 된다면, 지금보다 간결하고, 간편할 테니까요. 그런 갈증을 해결하고자, Polyfill을 만들어보면 어떨까 하여 만들어진 것이 WAI-ARIA Script라는 DOM 확장 라이브러리입니다. 해외에서는 이이 오래전에 ARIA-Reflection에 대한 Polyfill이 있었지만, 저희만에 무언가를 추가하고 싶었기 때문에 이 WAI-ARIA Script를 새로 만들게 되었습니다.
그러면, 해외에서 만든 Polyfill과 어떤 차이점이 있어요?
Polyfill은 말 그대로, 최대한 최신 브라우저 네이티브 코드에서 동작하는 것을 모방하여 구형 브라우저에서 동작하도록 추가한 코드를 말합니다. 그러나, 저희는 고유의 특징을 추가하였습니다. 아래에서 함께 살펴보도록 하겠습니다.
특징 1: 원시 자료형을 반환하는 Reflection Getter
Chromium에 추가된 ARIA Reflection은 브라우저의 내부코드를 알 수는 없지만 Element.prototype.getAttribute 메소드로부터 값을 가져오는 것으로 추측됩니다. 저희가 이렇게 추측하는 이유는 getter로 값을 가져오면 null과 string으로만 값을 내보내기 때문입니다. 스크립트에서 가져온 속성값은 무조건 string 값이고, 속성이나 속성값이 정의되지 않았다면, getAttribute 메소드는 null 값을 반환하기 때문입니다.
이 말은 즉, 조건문을 만들 때, 수식·비교 연산, 부정문 등을 활용하려면 별도의 변수로 담아서 사용해야 한다는 불편함을 가지게 된다는 것입니다. 저희 라이브러리에서는 이러한 불편함을 해소하고자 문자열의 패턴에 따라, string, number, boolean, null 등을 반환합니다.
DevTools 실행예시
const level=Element.ariaLevel;
>> undefined
console.log(level);
>> 1
예시에서 보시는 바와 같이, getter에서 원시 자료형으로 변환하여 반환합니다. 이 말은 즉, 따로 자료형을 변환하지 않아도 곧바로 값의 크기를 연산하거나, 부정문으로 불리언형의 값을 뒤집거나 할 수 있다는 말입니다.
예외적으로, 추가로 지원하는 ID를 참조하는 속성은 대상 ID의 요소가 존재한다면, DOM 요소 객체를 반환합니다.
현재 지원되지 않는 Role 속성과 IDREF 속성에 대한 대책 지원
Chrome에 추가된 ARIA Reflection은 완전하지 않습니다. 본래, ARIA Reflection은 Role 변경과 HTML ID를 참조하는 WAI-ARIA 속성도 지원할 예정이었으나, 아쉽게도 현재 버전의 Chrome에서도 role이나 아이디를 참조하는 프로퍼티가 추가되지 않았습니다.
WAI-ARIA Script에는 임시방편이나마, Element.prototype.role과 ariaLabelledBy, ariaDescribedBy, ariaControls, ariaOwns, ariaActiveDescendant 등을 지원합니다. 이 속성들은 위에서 언급하였듯, string값의 아이디명을 setter에 등록하지만, getter에서 값을 가져올 때, 참조 ID를 사용하는 요소가 있다면, 해당 DOM 객체를 가져옵니다.
만약, aria-controls로 연결된 콘텐츠를 확인해야 한다면, 아래와 같이 할 수 있겠지요.
if(element.ariaControls instanceof Element ){
//...
}
accessibilityInfo 프로퍼티
WAI-ARIA Script에는 저희만의 속성인 accessibilityInfo를 Element.prototype에 확장하였습니다. accessibilityInfo는 getter와 setter로 구현돼 있으며, getter에서는 Reflection 속성들을 모아서 접근 가능하며, setter의 경우, Object를 값으로 받으며, aria 속성명을 케밥 케이스(kebab-case)나 카멜케이스(camelCase)로 key:value 형태로 작성하여 한꺼번에 여러 속성을 세팅할 수 있도록 하는 기능을 합니다.
커스텀 이벤트: AriaValueChangeEvent 추가
Element.addEventListener(‘ariaValueChange’,handler)를 활용하여 wai-aria 관련 속성의 변화를 감지할 수 있습니다. dispatch된 이벤트 객체에서는 name과 value 값을 참조할 수 있습니다.
예시: 간단한 확장 축소(Disclosure) 구현하기
<!DOCTYPE html>
<html lang="ko">
<head>
...
<script src="WaiAriaScript-v1.0.js"></script>
</head>
<body>
...
<div id="btn_about_disclosure" aria-controls="ctt_about_disclosure">확장축소 콘텐츠</div>
<div id="ctt_about_disclosure">해외에서는 HTML5의 details같은 확장축소 콘텐츠를 Disclosure 라고 불러요!</div>
<script>
const btnAboutDisclosure = document.getElementById('btn_about_disclosure');
btnAboutDisclosure.accessibilityInfo = {
ariaExpanded:false,
role:"button",
tabIndex:"0",
}
btnAboutDisclosure.addEventListener('click',function(){
this.ariaExpanded = !this.ariaExpanded;
});
btnAboutDisclosure.addEventListener('keydown',function(evt){
switch(evt.code) {
case "Enter":
case "Space":
this.click();
break;
}
});
btnAboutDisclosure.addEventListener('ariaValueChange',function (evt) {
const content = this.ariaControls;
if(content instanceof Element ) {
if(evt.name === "ariaExpanded") {
content.style.display = evt.value ? content.style.display = "" : content.style.display = "none";
}
}
})
</script>
</body>
</html>
WAI-ARIA Script는 네이티브 DOM의 확장 라이브러리로, 위와 같이 활용할 수 있습니다.
참고 또는 주의사항
WAI-ARIA SCript DOM 확장 라이브러리에는 다음과 같은 주의사항이 있습니다.
1. WAI-ARIA Script는 기존의 메소드 또는 프로퍼티를 오버라이드 합니다. 네이티브 코드를 커스텀 코드로 덮어씌웠기 때문에 얘기치 못한 동작이 있을 수 있습니다.
2. WAI-ARIA Script 로드 시, 위에 설명한 프로퍼티 오버라이드에 대한 경고 로그가 출력됩니다. 경고문을 콘솔에서 뜨지 않게 하려면, 경고문의 지시를 따르세요.
3. WAI-ARIA Script의 ariaValueChange 이벤트는 MutationObserver를 기반으로 합니다.
4. 버그 발견 및 건의사항이 있으시다면 ungjin.park@nvisions.co.kr로 문의하실 수 있습니다.
이상으로, WAI-ARIA Script 1.0에 대한 소개를 마칩니다. 누군가에게는 필요한 기능이기를 바라며, 읽어주셔서 감사합니다.