널리

안녕하세요, 엔비전스입니다.

오래전부터 웹브라우저와 관련된 기업(Google, Apple, Mozilla)의 몇 사람이 w3c의 그룹, WICG에서 AOM(Accessibility Object Model)을 만들기 시작했습니다.

AOM을 만들기 시작한 지는 오래되었으나, 일부 제한된 기능만 브라우저 설정을 통해 체험할 수 있었습니다.

그런데, 이번에 최신의 Chrome에 AOM에 있던 aria 속성의 reflection API가 먼저 도입되었고, Google이 지난달에 있던 CSUN에서 ARIA Reflection 기능은 Google Chrome 89(Edge 89)부터 사용할 수 있음을 발표하였습니다.

이번에는 AOM, ARIA Reflection이 무엇이며, 어떠한 장점이 있는지 소개해 드리는 시간을 갖도록 하겠습니다.

AOM(Accessibility Object Model) 소개

Accessibility Object Model은 개발자와 사용자 경험을 모두 향상시키기 위한 목적으로 만들어진 프로젝트로, CustomElements API로 만들어진 사용자정의 요소의 접근성을 향상시키기 위해 것입니다.

AOM은 Phase 1부터 4까지로 나누어져 있으며, 이번에 최신 크로미움 브라우져에 추가된 Reflection 기능은 Phase 1입니다.

Phase 목록은 다음과 같습니다.

Phase 1a: 아리아 속성 반영(ARIA Reflection)

Phase 1은 두 가지로 나뉩니다. Phase 1의 a는 ARIA Reflection 입니다.

ARIA Reflection API는 Javascript의 DOM 인터페이스에서 WAI-ARIA 속성을 바로 적용할 수 있게끔 Setter를 추가해주는 기술로, 아무런 프레임워크가 없는 순사한 ECMAScript에서 보다 간편하게 wai-aria 속성을 접근하고, 수정할 수 있게끔 돕습니다.

Phase 1b: 사용자 정의 요소 의미 부여(Custm Element Semantics)

Custom Element Semantics API는 Phase 1의 사용자 정의 요소를 만들 때 ARIA 속성을 초기값으로 지정하여 의미를 부여할 수 있게끔 해주는 기술입니다.

CustomElements API 그리고 이전에 설명한 ARIA Reflection API와 밀접한 연관이 있으며, CustomElements.define() 메서드의 세 번째 인자인 옵션 객체에 role과 다양한 아리아 속성을 미리 정의할 수 있습니다.

Phase 2: 사용자 동작 (User Action)

Phase 2: 사용자 동작은 보조기술 사용자를 위한 input요소의 입력 이벤트를 확장하기 위한 Phase로

여러 보조 기술과 호환되는 입력 이벤트를 제공합니다.

추가되는 AT 이벤트

1. actionincrement: spinbutton이나 slider와 같이 값을 증감 시킬 수 있는 요소를 AT 기술로 조절하려고 할 때 실행되는 이벤트입니다.
2. actiondecrement: spinbutton이나 slider와 같이 값을 증감시킬 수 있는 요소를 AT 기술로 조절하려고 할 때 실행되는 이벤트입니다.
3. actionScrollPageUp: AT 기술에 의한 스크롤 변경을 감지하는 이벤트로, 스크롤을 위로 올릴 때 발생합니다.
4. actionScrollPageDown: AT 기술에 의한 스크롤 변경을 감지하는 이벤트로, 스크롤을 위로 내릴 때 발생합니다.
5. actiondismiss: dialog, menu와 같이 화면 위에 팝업되어 나타나며, ESC 등으로 닫을 수 있는 요소들에 사용할 수 있는 이벤트로, dialog나 menu 등이 닫힐 때 사용할 수 있는 이벤트입니다.

이는 HTML의 표준 요소가 아닌 사용자정의 요소가 모바일 운영체제, 입력 장치 등 보조기술을 지원하는 보다 다양한 기기, 환경을 지원할 수 있도록합니다.

Phase 3: 가상 접근성 노드 (Virtual Accessibility Nodes)

접근성, AT 사용자를 위한 접근 가능한 가상의 노드를 만듭니다.

가상의 노드이기 때문에 눈에 보이지 않으며, DOM에는 나타나지 않습니다.

이는 데스크탑 원격제어 기능과 같이 화면에 의존적이나 접근성을 구현하기 어려운 DOM 기반이 아닌 웹 콘텐츠에 시멘틱(의미)를 부여할 수 있으며, canvas와 같이 시각적인 형태로만 구현된 UI에 스크린리더 사용자와 같은 AT 사용자를 위한 대체 UI를 제공할 수 있습니다.

Phase 4: 계산된 접근성 트리 (Computed Accessibility Tree)

Computed Accessibility Tree API를 사용하면 작성자가 가상 접근성 노드를 포함한 계산된 접근성 트리 (각 DOM 노드와 연결된 접근성 노드에 대한 모든 계산 속성)에 접근할 수 있게 합니다.

이를 통해, 개발자는 접근성을 조금 더 깊이 있게 테스트할 수 있게 되며, 테스트 툴에서 접근성 트리를 검사하여, WAI-ARIA 버전 구현 등을 체크할 수 있느 등, 개발자에게 많은 도움을 줍니다.

ARIA Reflection 소개

자, 위에서 간단히 AOM을 살펴봤는데요. 아쉽게도 아직 이 기능을 모두 사용할 수는 없습니다.

위 기능들중 일부는 브라우저의 실험적 기능을 켜면 사용할 수 있으며, 아예 구현되지 않은 것 또한 있습니다.

자 이제 본격적으로, Phase 1번인 ARIA Reflection에 대해 설명하도록 하겠습니다.

훨씬 간편해진 WAI-ARIA 속성 정의 방법

ARIA Reflection API는 DOM 객체에 접근하여 아래와 같이 setAttribute 메소드없이 바로 WAI-ARIA 속성을 추가, 수정, 제거할 수 있습니다.

ARIA Reflection 없이 자바스크립트로 ARIA 마크업하기

잘 모르시는 분들을 위해 기존 코드도 함꼐 알아 보도록 합시다.

const button1 = document.querySelector('#button1');
const accordionButton = document.querySelector('#button2');

button1.setAttribute('role','button')
button1.setAttribute('disabled','true') //make dimmed, unavailable

accordionButton.setAttribute('role','button')
accordionButton.setAttribute('aria-expanded','true');// collapsed button.

JQuery를 쓰면 훨씬 간편하게 객체로 한꺼번에 전달할 수는 있지만, 바닐라 자바스크립트에서는 기본적으로 속성을 이렇게 긴 메소드로 지정해야 합니다.

Reflection 프로퍼티로 ARIA 속성 작성

그럼 reflection을 사용하면 어떻게 되는지도 한번 봅시다.

const button1 = document.querySelector('#button1');
const accordionButton = document.querySelector('#button2');

button1.role = "button";
button1.ariaDisabled = "true"; //make dimmed, unavailable

accordionButton.role = "button";
accordionButton.ariaExpanded="false";// collapsed button.

어때요? 줄은 똑같지만, 훨씬 쓰기 간편해진 것을 볼 수 있습니다.

사용 가능한 속성

아쉽게도 지난 달, Chrome 버전 89에서는 role 프로퍼티를 사용할 수 있었으나, 현재 90 버전 이상의 크롬에서는 사용할 수 없습니다. 아마도, 빠른 시일 내에 다시 사용할 수 있게 될 것으로 기대됩니다.

그리고, 현재는 다음과 같은 속성을 제외한 아리아 속성을 DOM 인터페이스에서 바로 사용할 수 있습니다.

• aria-labelledby
• aria-describedby
• aria-controls
• aria-activedescendant

위 속성들은 전부 ID를 참조하여 연결하는 속성으로, 현재 Reflection API에서 지원하지 않습니다. 위 속성들의 Reflection에는 새로운 기능이 추가될 예정인데요.

단순히 ID를 연결하는 것이 아니라, DOM 요소 자체를 참조할 수 있는 프로퍼티가 추가 될 것으로 보입니다. 아래 코드처럼 말이죠.

// 원래 aria-labelledby, aria-describedby 등은 HTML ID값으로 요소를 참조합니다.
// 하지만, AOM에서 기획한 reflection API에서는 ID값뿐만 아닌, DOM 요소 자체를 참조할 수 있습니다.
const label = document.querySelector('custom-label#name-label');
const element = document.querySelector('custom-input#name');
const tit = document.querySelector('custom-title#tit');

element.ariaLabelledByElements = [label]; // 요소 자체를 값으로 사용
element.ariaDescribedByElements = [tit]; // 요소 자체를 값으로 사용

아직 이 기능은 작동하지 않았지만, 일부 브라우저에서는 아래의 기능을 검색하여 활성화하면 체험하실 수 있습니다.

Chrome, Edge:

ALT + D(Command + L)로 주소창에 접근 후 chrome://flags를 입력하여 접속한 다음 아래 기능을 활성화하세요. Edge는 edge://flags를 입력하여 접소갛세요.

• Experimental Web Platform features

Firefox:

ALT + D(Command + L)로 주소창에 접근 후 about:config를 입력하여 접속한 다음, 아래 기능들을 true로 설정하세요.

• accessibility.AOM.enabled
• accessibility.ARIAReflection.enabled

Safari:

아래 스탭을 따라 진행하세요.

1. 키보드 사용 시 Control + F2(VoiceOver 사용시, Control + Option + M)를 눌러 Safari 메뉴에 접근하세요.
2. Safari 메뉴 막대에서 개발자용(Develop) 메뉴를 확장하세요.
3. 개발자용(Develop) 메뉴에서 실험적 기능(Experimental Features) 항목을 확장하세요.
4. 실험적 기능 메뉴에서 Accessibility Object Model 항목을 활성화하세요.

마치며

이번에는 멀면서도 가까운 미래에 사용될 접근성 API 객체인 Accessibility Object Model에 대해 알아보았습니다.

이 기능이 도입된다면, 컴포넌트를 개발하는 개발자들 또한 접근성을 다루기 보다 쉬워질 것으로 기대됩니다.

이 기능이 빨리 도입되어 IT 접근성이 개선되고, 더 많은 사람의 삶이 윤택해지고 행복해지길 기대합니다.

오늘도 긴 글 읽어주셔서 감사드리며, 앞으로도 더 유익한 정보로 찾아 뵐 수 있도록 노력하겠습니다.

감사합니다.