웹 접근성 찍먹 경험

✍️ 웹 접근성 적용해보고 정리한 내용

목차
1. 웹 접근성이란
2. 직접 사용해보기
3. 느낀점

웹 접근성이란 📌

✅ accessibility 정의

• 한국웹접근성인증평가원: 정보통신접근성 (Web 접근성)은 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항 입니다.
• W3C: 웹 접근성은 웹 사이트, 도구, 기술이 장애를 가진 사용자들이 사용할 수 있도록 설계 및 개발된 것

accessibility는 줄여서 a11y라고도 한다. 장애인의 경우 다양한 보조기술들을 사용하는데(스크린 리더, 화면 확대도구 등) 이를 이용할 때 불편함이 없도록 개발해야한다.

✅ 관련 법률

• 장애인차별금지 및 권리구제 등에 관한 법률 제21조, 시행령 제14조

차별행위에 해당하는 경우, 법적 처벌을 받을 수 있으며 손해보상청구소송을 당할 수도 있다.

✅ 가이드라인 & WAI-ARIA

한국웹접근성인증평가원: 한국형 웹 접근성 지침 2.2

W3C: 웹 콘텐츠 접근성 가이드라인(WCAG-Web Content Accessibility Guidelines) 발행

• 대상: 웹 기술을 사용하는 모든 콘텐츠
• 원칙: 인식 가능성, 운용 편리성, 이해의 용이성, 견고함

WAI-ARIA(Accessible Rich Internet Applications Suite)

• 장애인이 웹 콘텐츠와 웹 애플리케이션을 보다 쉽게 사용할 수 있도록 하는 방법을 정의
• W3C(World Wide Web Consortium) WAI(Web Accessibility Initiative)의 일부인 ARIA WG(Accessible Rich Internet Applications Working Group)에서 개발
• ARIA Authoring Practices Guide (APG) 에서 요소에 따른 패턴들을 제공

웹 접근성과 WAI-ARIA를 비슷한 의미로 받아들이고 있었는데, WAI-ARIA는 웹 접근성을 향상시키기 위한 구체적인 도구 정도로 이해하면 될 것같다. 아니라면 알려주세요 🥲

✅ WAI-ARIA attribute

WAI-ARIA attribute는 세가지로 구분할 수 있는데, state와 property는 엄격하게 구분되지 않는다고 한다.

• role: HTML 요소에 해당 role이 존재하지 않거나 스펙에는 있지만 브라우저에는 미구현
  상태일 때 사용하여 요소에 의미를 부여
• state: 요소의 현재 상태, 주로 js 조작에 의해 변경되는 상태 지정
• property: 요소의 성질이나 특성 표현, 요소에 대한 추가 설명이 필요하거나 다른 요소와의 연관성을 표현할 때 사용

✅ 꼭 적용해야하나?

보통은 필요하다는 것을 알지만, 어떻게 적용해야하는지 모르거나 귀찮거나라고 생각한다.

나도 강사님께 피드백 받기 전까지는 잊고 있던 내용이라, 이번에 과제를 하면서 적용해본 내용들을 다시 찾아보고 정리했다.

---

직접 사용해보기 🔨

보이스 오버(Command+F5)를 사용하면서 어떻게 적용되는지, 어느부분에서 접근성이 더 필요한지를 찾아가며 적용했다.

1️⃣ aria-haspopup + aria-expanded

aria-haspopup

The ariaHasPopup property of the Element interface reflects the value of the aria-haspopup attribute, which indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaHasPopup

• 대화형 팝업 요소가 있는지를 알려주는 속성
• 속성 값: false, true, menu, listbox, tree, grid, dialog

aria-expanded

The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded

• 확장되거나 축소될 수 있는 요소의 상태를 표시
• 속성 값: true, false, undefined

적용 전

<button> 만 있는 경우: 버튼 내부 이미지 태그에 작성한 alt="메뉴 버튼" 를 읽어준다.
메뉴 버튼을 알 수는 있지만 버튼을 클릭해도 클릭 소리만 나고, 어떤 변화가 있는지 알 수 없다.

적용 후

aria-haspopup="menu" 추가: 메뉴 팝업 이라고 읽어준다.
aria-expanded="false" 추가: 메뉴 팝업 축소됨, (클릭시)확장됨이라고 읽어준다.

클릭할때마다 메뉴 팝업이 확장된 상태인지 축소된 상태인지 알 수 있다.
true 와 false 상태는 함수를 통해 변경해주어야한다.

만약 버튼이 토글버튼이라면 aria-pressed 속성을 사용할 수 있다
https://www.w3.org/WAI/ARIA/apg/patterns/button/

2️⃣ aria-label

aria-label

The aria-label attribute defines a string value that can be used to name an element, as long as the element's role does not prohibit naming.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label

aria-label 을 쓰는 경우 내부 텍스트를 읽지 않기 때문에 내부에 읽을 수 있는 텍스트가 있다면 사용하지 않는 것이 좋다. 그리고 보통은 시멘틱 태그들로 대체가 가능하기 때문에 남용하지 말라고 한다.

어디서부터가 남용인가요..?😢

비슷한 속성인 aria-labelledby, aria-description, aria-describedby들도 있어서 헷갈렸다.

aria-label과 aria-labelledby

aria-label: 요소에 직접 라벨을 작성, 시각적 요소와 별개로 라벨을 표현할 때
aria-labelledby: 요소를 라벨링하는 다른 요소를 참조(참조되는 요소의 id를 입력), 이미 html에 존재하는 요소를 사용할 때

<!-- aria-label -->
<button aria-label="닫기">❌</button>

<!-- aria-labelledby -->
<h2 id="modal-title">설정 창</h2>
<button aria-labelledby="modal-title">❌</button>

작업중인 페이지 내부에 달력에서 날짜를 선택하는 폼이 있었는데, 날짜 선택시 day 숫자만 읽다보니까 전달에 부족함이 있겠다는 생각이 들어서 aria-label을 추가해보았다.

적용 전

처음에 12월을 읽어주긴하지만, 다음달인 1월로 바뀌는 경우 별도 월 구분없이 다시 1부터 읽는다.

적용 후

몇월 몇일인지 읽어주게 하니, 현재 선택할 날짜를 인식하는 게 수월하다.
newA.ariaLabel = ${month}월${day}일 js에서 동적으로 요소를 추가하면서 속성을 추가했다.

3️⃣ tabindex

The tabindex global attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key, hence the name) and determine their relative ordering for sequential focus navigation.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

마우스를 사용할 수 없는 사용자의 경우 탭을 통해 요소에 접근하는데, 탭인덱스가 적용되지 않으면 아예 접근을 할 수 없다.

• 속성 값: "-1"-접근 불가능, "0"-접근 가능, 양수-작은 수부터 접근
• 동일한 속성 값인 경우 문서 소스의 위치에 따라 순서가 정해진다.

기본적으로 접근 가능한 요소들이 있으므로(a, button, input 등), 기본 동작을 확인 후 적용하는 것이 좋다.

적용 전후

접근이 되지 않는 요소들에 tabindex="0"을 적용해주었고, 대부분의 요소들을 읽을 수 있게 되었다.
Space키와 Enter키가 다르게 작동하는 경우에는 별도로 keydown 이벤트리스너를 추가해서 처리를 해주어야한다.

---

느낀점 💭

실제 사용자의 경험을 알 수 있으면 좋겠다. 사용하는 기기들도 다양할텐데 내가 경험해볼 수 있는건 보이스 오버와 탭키 밖에 없어서 실제로 잘 적용되는지 확인하기가 어렵다.
이번 과제에서는 웹 접근성을 뒤늦게 적용하기 시작해서 일부만 적용해볼 수 있었는데, 처음 구조를 짤 때부터 패턴들을 알고 시작한다면 좀더 유기적으로 구성해볼 수 있을 것 같다.
이번에는 APG 패턴들을 적용하지 못했는데 나중에는 예시 패턴들을 잘 활용해보고 싶다!

APG 패턴 보면서 공부하기 ✍️
aria-live="assertive" 속성을 에러 메세지에 적용하면 되겠다고 생각했었는데, 실제로는 role="alert"을 적용해두면 aria-live="assertive" 와 alia-atomic="true"가 포함되어 있으므로 별도 적용할 필요가 없다고 한다.
속성들이 다양해서 어려운데, 패턴을 익혀두면 많은 도움이 될 것 같다.