크롬 lighthouse 기능을 통해 프로젝트의 각 페이지별 접근성 점수를 확인하고 개선 사항으로 제안된 내용들을 해결해 보자.
[role]이(가) 필수 상위 요소에 포함되지 않음헤더의 각 메뉴 <li> 태그는 role="menuitem"으로 명시가 되어있지만 상위 태그인 <ul>에는 role이 지정되지 않은 상태였다.
어떤 태그를 넣어주어야 할까? MDN을 보니 엄청나게 많은 ARIA 태그가 있었다.
A
menuitemis one of the three types of options in a set of choices contained by amenuormenubar
ARIA: menuitem role - Accessibility | MDN
menu와 menubar는 무슨 차이지?
The menubar type of menu is usually presented as a persistently visible horizontal bar of commands.
⇒ 지속적으로 보이고 (즉, 토글 버튼 등으로 껐다 켜지지 않고) 수평 바처럼 생긴 메뉴. 우리의 헤더에 적용하기 가장 적절해 보였다.
button, link 및 menuitem 요소에 접근성을 위한 이름이 없음
아이콘 버튼의 경우 텍스트가 존재하지 않기 때문에 따로 접근성 태그를 추가하지 않으면 스크린 리더가 이를 읽지 못한다.
aria-label 속성에 적절한 이름을 넣어주어서 해결하였다.
색상 대비가 저시력자에게 중요하다는 것은 알고 있었지만, ‘비활성화’ 상태처럼 일부러 흐리게 표시해둔 요소까지 이 항목에 걸렸다.
정말 비활성화 요소까지 선명한 색상 대비가 필요한 걸까?