[240112] 스크린리더 UX 개선하기

토스에서 진행한 세션을 참고해, 직접 스크린리더 UX 개선을 도입한 과정을 적었습니다.

 

Accessible Name

• 스크린리더가 요소를 포커스했을 때 읽는 값
• author - 특별한 속성을 사용해서 정하는 값
  • aria-label
  • aria-labelledby
  • alt (<img> 태그의 경우)
• contents - 요소의 텍스트 값
• 우선순위 - author > contents

 

 

html 태그의 속성들

 

 

role

• 시멘틱태그는 암시적으로 role 을 갖고 있음
  • <button> - role=“button”
  • <a> - role=“link”
  • <input type=”checkbox”> - role=“checkbox”

 

 

Children Presentational

• 특정 role이 가진 특징
• 자식 요소의 Accessible Name 을 모아서 contents 로 사용
• 자식 요소를 스크린리더가 읽지 않도록 함
• 시각 사용자가 묶어서 이해하는 정보를 스크린리더가 끊어읽는 문제를 해결할 때 유용함

 

<img> 와 alt

• alt는 <img>의 author를 정하는 속성
• alt를 “” 로 주면 스크린리더가 읽지 않는다
• alt를 아예 명시하지 않으면 스크린리더가 src를 읽으므로 반드시 alt를 명시해야 함

 

 

스크린리더 사용하기

• PC - Screen Reader(크롬 확장프로그램)

• AOS - TalkBack
• iOS - VoiceOver

 

 

포트폴리오를 리팩터링 해보자

여기까지 정리한 후 지금까지 스크린리더 사용자를 고려하지 않았던 코드를 반성할 수 있었다. 포트폴리오의 project 페이지를 리팩터링 해보자.

1. 엔터 입력 시 카드 열리지 않음 + 클릭할 수 있는 버튼인지, 어디까지 하나의 묶음인지 인식할 수 없는 카드

• 현재 각 카드가 버튼처럼 동작하기 때문에 해당 카드의 래퍼 태그를 <button> 태그로 변경하면 자식 태그들을 한번에 모아 읽어주고, 버튼임을 알 수 있게 된다.

 

2. 카드가 확장될 때 / 축소될 때 알 수 없음

• aria-haspopup속성을 활용해 클릭 시 카드가 확장된다는 것을 알려준다.
• aria-expanded속성을 활용해 카드의 확장 여부를 알려준다.

 

3. 카드를 축소시키는 아이콘 버튼의 의도를 알 수 없음

• icon 래퍼의 aria-label속성에 icon의 key값(아이콘 이름)을 선택적으로 넣어 필요할 때 읽어줄 수 있도록 한다.

 

4. 카드가 확장되었을 때 카드 밖으로 포커스가 빠져나감

• 카드가 확장되면 포커싱 되어야 할 카드의 자식들에게 tabindex를 부여한다.
• 첫번째, 마지막 요소에서 키보드 이벤트가 발생했을 때 포커스를 조작한다.

 

 

결론

• 강연자님 말씀대로 적은 코드 수정으로 스크린리더 사용자를 배려하는 서비스를 만들 수 있다는게 신기했다.
• WAI-ARIA 문서를 참고하면 더욱 다양한 속성을 이용해 다양한 기능을 구현할 수 있을 것이다.

 

 

참고자료

https://www.w3.org/WAI/ARIA/apg/patterns

Patterns