팝업 WAI-ARIA 접근성

 

우선 팝업이랑 WAI-ARIA에 대해서 알아보자

 

팝업이란?

팝업은 웹 사이트에서 많이 사용되는 요소 중 하나로, 사용자에게 중요한 정보를 제공하거나 상호작용을 유도하기 위해 활용된다. 마우스로 옵션을 선택하거나 특수 기능 키를 누르면 갑자기 나타나는 창이 나타나는 방식이다. 일반적으로 팝업 창에는 명령 메뉴가 포함되어 있으며 명령 중 하나를 선택할 때까지만 화면에 남아 있는다.

그러나 접근성을 고려하지 않을 경우 스크린 리더 사용자나 시각적으로 장애가 있는 사용자는 팝업에 있는 정보를 제대로 파악하기 위해 명확한 설명이 필요할 수 있고, 팝업에 대한 컨트롤이 부족할 경우 상호작용하기 어려울수 있다. 그러므로 WAI-ARIA(Web Accessible Rich Internet Applications)를 활용하여 팝업의 접근성을 개선하는 것이 중요하다.

 

WAI-ARIA이란?

Web Accessibility Initiative – Accessible Rich Internet Applications의 약자로

WAI는 W3C에서 웹 접근성을 담당하는 기관으로 ARIA는 RIA 환경의 웹 접근성에 대한 표준 기술 규격을 의미

RIA : 정적인 HTML, 단순한 자바스크립트 환경의 웹이 아닌 동적인 자바스크립트와 Ajax와 같은 기술을 사용한 환경에서 수준 높은 UX(User eXperience)를 제공하는 웹 애플리케이션

 

WAI-ARIA를 사용하는 이유

• RIA의 동적 웹 애플리케이션 접근성 보장 지침이 부족
• Ajax, 통한 실시간 변경 콘텐츠, SPA 방식의 콘텐츠 변경
• 화면 확대사용자의 경우, 가시 범위 밖 콘텐츠의 변경 내용 인지 불가능

WAI-ARIA를 이용해서 개발자가 의도한 유저 인터페이스(User Interface) 행동이나 구조적인 정보를 스크린 리더와 같은 보조 기술에 전달하여
시각/인지 장애인들에게 일반 사용자들과 동일하게 정보를 제공하고 행동을 유도함으로써 웹페이지 탐색을 돕는 사용자 경험(UX)을 제공합니다.

 

WAI-ARIA를 사용하는 방법

role은 태그의 역할을 알려주는 속성(attribute)이다.
role에 들어가는 값은 우리 마음대로 정하는 게 아닌 정해진 값을 사용해야 한다.

• tab
• tablist
• banner
• button
• gruop
  ...

 

aria-label

aria-label은 태그가 가지고 있는 의미를 적어주는 이름표 같은 역할을 한다. role과는 다른 기능이 있는데, 크게 두 가지로 나눌 수 있다.

 

 

1.aria-label은 role의 banner나 tab처럼 값이 정해져 있는 게 아닌, 브라우저가 스크린 리더 사용자에게 전달해야 할 내용을 상황에 따라 적어야 한다.

 

2. aria-label과 같이 써도 되는 태그가 있고 아닌 태그가 있다.

 

aria-label과 role을 쓰기 위한 규칙

1. 만약 HTML에 개발자들이 쓰기 좋게 만들어져 있는 태그가 존재한다면 그 태그를 사용하는 것이 좋다.

2. 시멘틱 태그에 role을 될 수 있으면 쓰지 않는다. 

3. aria로 사용된 모든 요소는 키보드로 제어할 수 있어야 한다. (제 기능을 해야 한다)

4. 시멘틱 태그가 의미하는 것을 aria-label로 다시 나타낼 필요는 없다.

// 시맨틱 태그가 의미하는 것을 한 번더 나타낸 코드
<button type="button">
  <a href="#" aria-label="app button"></a>
</button>

// 시맨틱 태그가 의미하는 것을 한 번더 나타내지 코드
<button type="button">
  <a href="#" aria-label="app"></a>
</button>

 

aria-label과 aria-labelledby의 차이점

aria-label이 이름표를 붙여주는 것이라면, aria-labelledby는 쉽게 말해 그룹으로 묶어주는 속성이다.

 

 

---

 

 

WAI-ARIA를 이용해 접근성을 개선하고, tabindex를 이용해 팝업 내부 영역에서만 이동하도록 하는 방법을 사용한 팝업 만들기

 

 

// html
<button id="popupButton" aria-haspopup="true" aria-expanded="false">팝업 열기</button>
<div id="popup" role="dialog" aria-labelledby="popupHeading" aria-modal="true" tabindex="-1">
  <h2 id="popupHeading">팝업 제목</h2>
  <p>팝업 내용</p>
  <input type="text" placeholder="입력1" />
  <input type="text" placeholder="입력2" />
  <input type="text" placeholder="입력3" />
  <button id="closeButton">닫기</button>
</div>

 

 

// JS
// 팝업 내부의 요소들에게 tabindex를 할당, 이동 가능하도록 설정
const popupButton = document.getElementById('popupButton');
const popup = document.getElementById('popup');
const closeButton = document.getElementById('closeButton');

const popupContents = popup.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])');

const enableTabindex = () => {
  popupContents.forEach((content) => {
    content.setAttribute('tabindex', '0');
  })
}

const disableTabindex = () => {
  popupContents.forEach((content) => {
    content.removeAttribute('tabindex');
  })
}

// 팝업 열기
popupButton.addEventListener('click', () => {
  popup.style.display = 'block';
  popupButton.setAttribute('aria-expanded', 'true');
  enableTabindex();
  closeButton.focus();
});

// 팝업 닫기
closeButton.addEventListener('click', () => {
  popup.style.display = 'none';
  popupButton.setAttribute('aria-expanded', 'false');
  disableTabindex();
});

//tabindex 설정
popup.addEventListener('keydown', (e) => {
  const lastElement = popupContents[popupContents.length - 1];
  if (e.key === 'Tab') {
    if (e.target === lastElement) {
      e.preventDefault();
      popupContents[0].focus();
    }
  }
});

팝업 버튼을 클릭하면 aria-expanded 속성을 변경하여 팝업이 열렸음을 알리고, 팝업 닫기 버튼을 클릭하면 팝업이 닫힌다.

​

팝업이 열렸을 경우, enableTabindex() 함수를 호출하여 팝업 내부의 포커스 가능한 요소들에게 tabindex를 설정, 팝업 닫힐 때는 disableTabindex() 함수를 호출, index 값을 초기 상태로 복원한다.

​

tab 키를 사용하여 팝업 내부에서 다음 요소로 이동하는 것뿐만 아니라, Shify 키를 사용하여 팝업 내부에서 이전 요소로 이동할 수 있도록 설정했다.

 

---

 

접근성을 알면 알수록 고려해야 될 부분들이 많은 것 같네용

그만큼 섬세해야 하고 여러 측면을 고쳐하면서 작업해야겠다

 

---

참고 문헌

https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics

WAI-ARIA basics - Learn web development | MDN

https://kkanz.tistory.com/entry/%EB%88%84%EA%B5%AC%EB%82%98-%EC%A0%91%EA%B7%BC%ED%95%98%EC%9E%90-WAI-ARIA

누구나 접근하자! "WAI-ARIA"

 

https://velog.io/@uuujinnn/%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%84-%EA%B3%A0%EB%A0%A4%ED%95%9C-%ED%8C%9D%EC%97%85

접근성을 고려한 팝업

 

https://velog.io/@geniee1220/JavaScript-%EB%AA%A8%EB%8B%AC-%ED%8C%9D%EC%97%85%EC%9D%98-Focus-Trapping%EA%B3%BC-WAI-ARIA

[JavaScript] 모달 팝업의 Focus Trapping과 WAI-ARIA