[TIL] 웹 접근성을 높이기 위한 스크린 리더 적용

이번 과제에 "HTML은 웹 표준과 웹 접근성을 준수하면서 마크업을 수행하라"는 요구사항이 있었다.
가끔 HTML 관련 강의를 보거나, 클론 코딩으로 웹사이트의 마크업 된 코드들을 파악할 때 모르는 태그가 있어서 구글링 해보면 웹 접근성, 스크린 리더 관련 태그였던 기억이 있다.
그러나, 그 이상으로 주의 깊게 찾아본 적은 없었고 UI에 영향을 주지 않으니 그냥 무시하고 넘어가도 된다는 생각으로 스크린 리더를 적용하지 않고 코딩을 해왔었다.

하지만, 점점 웹 개발자가 되기 위해 공부를 하면서 단순히 작동만 되는, UI 적으로만 오류가 없으면 그만으로 생각하는 개발자가 아닌, 모두가 공평하고 올바른 정보를 주면 좋겠다는 생각을 했고, 그러기에 웹 접근성을 준수해서 개발하는 것이 꼭 필요하다는 생각이 들어,  스크린 리더에 대해 검색한 자료들을 찾고, 정리해보려 한다.

---

대부분의 사람들은 스크린리더 사용자들은 전맹이기 때문에 화면을 보지 않고 스크린리더 음성으로만 웹페이지를 탐색할 거라 생각하지만, 실제로 시각장애인 중 전맹은 20% 이하에 불과하고 80%는 시력이 떨어지는 저시력 장애인이라고 한다.

하지만 스크린리더를 사용하면서 화면을 보는 시각장애인들이 스크린리더가 읽는 곳을 화면에서 보여주지 않고, 다른 곳을 나타내고 있다면 이해하기 어려운 것이 당연하다.
따라서 시각장애인들이 웝 페이지를 원활하게 이용할 수 있도록 올바른 정보를 나타내야 한다.

 

접근성을 준수한다는 것은 스크린리더 사용성 외에도 여러 가지가 있는데, 광과민성 발작을 일으키는 분들을 위한 대처, 색각 이상자를 위한 작업 혹은 키보드 사용자를 위한 키보드 인터렉션 작업등도 이러한 것에 속한다.

 

https://www.w3.org/WAI/fundamentals/accessibility-intro/ko

웹 접근성 소개

---

스크린 리더가 앱을 읽는 방법

https://w3c.github.io/aria/#introroles

• 움직이는 단위 : 요소 (HTML Element)
• 순차 탐색 :
  • 손가락을 좌우로 스와이프 하면 앞뒤로 이동
• 스크린 터치 :
  • 터치한 영역에 있는 요소를 선택
• 로터를 이용한 탐색 :
  • 머리말/ 단어/ 글자 단위로 이동
• Accessible Name (이하 Name)
  • 스크린 리더가 요소를 포커스 했을 때 읽는 값
  • 다음 중 하나로 결정 :
    • author : 특별한 속성을 사용해서 정하는 값
      • aria-label, aria-labelledby, alt(<img>)
    • contents : 요소의 텍스트 값
    • 우선순위 : author > contents
  • 아래의 코드를 스크린 리더가 읽게 될 경우, "안녕히 가세요"라고 읽게 된다.
    그 이유는 명시된 aria-label의 author가 div의 contents보다 우선순위이기 때문에.

<div aria-label="안녕히 가세요">안녕하세요</div>

• Role
  • 스크린 리더가 요소를 어떤 방식으로 다룰지 결정하는 속성
  • Role마다 기대되는 스크린리더 동작이 있음
  • ex) role="button"
    • 요소의 Accessible Name을 읽은 뒤 "버튼"을 붙여 읽음
    • 자식 요소의 Accessible Name을 모아서 contents로 사용
• Semantic tag와 Role
  • Semantic tag는 암시적으로 Role을 갖고 있음
    • <button> : role="button"
    • <a> : role="link"
    • <input type="checkbox">: role="checkbox"
  • 적절한 Semantic tag 사용은 스크린 리더에게 이로움

<a role="link">링크</a>

• Children Presentational
  • https://www.w3.org/TR/wai-aria-1.1/#childrenArePresentational 
  • 특정 Role이 가진 특징
  • 자식 요소의 Accessible Name을 모아서 요소의 contents로 사용
  • 자식 요소를 스크린리더가 읽지 않도록 함
  • 시각 사용자가 묶어서 이해하는 정보를, 스크린 리더가 끊어 읽는 문제를 해결할 때 유용.
• <img>와 alt
  • 시각에 어려움이 있는 경우 이미지를 이해할 수 없음.
  • 이미지가 전달하는 정보의 alt에 명시해서 스크린리더가 읽을 수 있게 해야 함
    • alt는 <img>의 author를 정하는 속성
  • alt에 빈 값("")을 주면 스크린리더가 읽지 않는다(Accessible Name이 ""이 됨)
  • alt를 명시하지 않으면 스크린리더가 src를 읽으므로 반드시 alt를 명시해야 함

/* 딱히 전달하고 싶은 정보가 없을 경우, 읽지 않고 넘어감. */
<img src="HelloWorld.png" alt=""/>


/* 포인트 이미지 정보를 전달하고 싶을 경우 */
<img src="point.png" alt="포인트 이미지"/>

• role="checkbox"
  • 스크린리더가 "체크박스"라고 읽음
  • aria-checked="true|false"와 함께 사용하면, "선택됨/선택 해제됨"도 읽어줌
  • Children Presentational

<div role="checkbox" aria-checked="false">일회용 수저 필요하세요?</div>

• role="dialog"
  • dialog : 사용자가 상호작용할 수 있는 대화 상자
  • aria-modal : 스크린 리더가 dialog 밖의 요소에 포커스 할 수 없게 만드는 속성
    
    • 스크린 리더가 dialog만 포커스 하게 되므로 사용자가 dialog를 잘 인지할 수 있음
    • 스크린 리더가 구현하지 않는 경우가 있어 직접 구현 필요
    • TODO : 모달인 dialog가 열렸을 때 dialog 밖을 포커스 할 수 없도록 만들기
      • dialog 요소 외의 요소를 포커스 할 수 없게 만들기(aria-hidden)
        • 자동으로 포커스가 dialog로 옮겨가게 됨
      •  aria-hidden
        • 요소에 aria-hidden="true"를 명시할 경우, 스크린 리더가 해당 요소와 자식을 읽지 않음
        • 스크린 리더는 아래의 코드를 읽지 않고 그냥 넘어감.

• role="alert"
  • 해당 요소를 추가하지 않으면, toast가 떠도 아무런 소리가 나지 않음.
  • 다음과 같은 상황에서 스크린 리더가 해당 요소를 읽어줌
    • 요소가 DOM Tree에 추가되었거나
    • 요소의 자식에 변경사항이 생겼을 때

<div role="alert">아이템을 선택해주세요.</div>

---

그렇다면, 내 코드를 리팩터링 해보자

왼쪽 위의 빨간 박스가 할인율 정보라는 것을 스크린 리더 사용자에게 전달하기 위해
아래의 코드를 작성하였던 과거의 나..
해당 코드에서 나는 3개의 문제점을 발견하여, 리팩터링을 진행하였음.

1. 상황에 맞지 않는 button tag와 class명
   
   • 처음엔 클릭하는 건 줄 알고 버튼으로 생성하였는데, 그냥 할인율 정보가 담긴 카드였음.
     따라서, tag와 class명 모두 변경되어야 한다.
2. alt는 <img>의 author를 정하는 속성
   • 어떤 html 태그이든 alt를 넣고 정보를 전달하면 되는 줄 알았다.. 이때도 구글링 한 건데ㅠ..
     alt는 <img>를 정하는 속성이기에, alt 대신 aria-label을 통해 해당 카드가 의미하는 정보를 전달해주어야 한다.

• 이렇게만 하면 바뀌는 줄 알았지만, HTML 문법 검사를 해보니, aria-label 쪽에 error가 발생하였다.

여기저기 다 검색하였는데, 내가 구글링을 잘 못하는 건지... 해결법 찾는데 너무 오래 걸렸다 처음부터 영어로 찾을걸ㅠ
요약하자면, div 또는 span 요소들은 aria-label만 쓰면 안 되고, role=navigation, search, main, img와 같이 사용해야 한다.
https://www.davidmacd.com/blog/does-aria-label-override-static-text.html

아래는 이러한 점들을 참고하여 내가 리팩터링 한 최종 코드이다.
role에 navigation을 추가하였으며, 한글로 적었던 aria-label 부분을 영어로 바꾸었다.

• region: region 영역은 웹사이트 제작자가 중요하다고 판단되는 콘텐츠에 region 랜드마크를 설정할 수 있습니다. region 랜드마크에는 해당 영역이 어떤 영역인지 스크린 리더 사용자에게 명확히 알릴 수 있도록 aria-labelledby나 aria-label 속성으로 적절한 레이블을 지정해야 합니다.

(wai-aria 요소들 안에 한글로 적어도 되는지 검색해보았지만, 답을 찾지 못하여 영어로 수정)

해당 코드로 수정하고, 다시 한번 HTML 문법 검사기로 체크하였더니 error나 warning 없이 잘 돌아가는 것으로 나온다.

---

https://www.youtube.com/watch?v=tKj3xsXy9KM

https://www.biew.co.kr/entry/WAI-ARIA-%EC%9B%B9%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%8B%B1

WAI-ARIA 웹퍼블리싱

https://abcdqbbq.tistory.com/76#:~:text=WAI%2DARIA%20%EC%82%AC%EC%9A%A9%EC%8B%9C%20%EC%A3%BC%EC%9D%98%EC%82%AC%ED%95%AD&text=%EC%9D%BC%EB%B0%98%20%EB%B2%84%ED%8A%BC%EC%B2%98%EB%9F%BC%20%EC%97%AD%ED%95%A0%EC%9D%84,div%EA%B0%80%20%EC%A0%91%EA%B7%BC%EC%9D%B4%20%EC%95%88%EB%90%9C%EB%8B%A4.)&text=%EB%B2%84%ED%8A%BC%EC%9D%98%20%EC%9A%A9%EB%8F%84%EC%97%90%20%EB%A7%9E%EA%B2%8C,%EC%9D%98%EB%AF%B8%EC%97%90%20%EB%A7%9E%EA%B2%8C%20%EC%9E%91%EC%84%B1%ED%95%9C%EB%8B%A4.

WAI-ARIA 접근성1. 소개 및 주의사항, 태그별 role의 사용

https://nuli.navercorp.com/community/article/1132889?email=true

https://nuli.navercorp.com/community/article/1132906?email=true

WAI-ARIA 바르게 사용하기 4부 - 랜드마크 역할

---

[출처, 참고 : https://brunch.co.kr/@snclab/2 ]
[출처, 참고 : https://www.youtube.com/watch?v=kidbJ82Eukg ]
[출처, 참고 : https://bcp0109.tistory.com/348?category=967799 ]