구글 블로그 role에러 해결 후 lighthouse 웹접근성 점수 향상시키기

lighthouse role에러

구글 블로그를 lighthouse로 검사했을때 나오는 점수 중 Accessibility 라는 점수가 있습니다. 웹 접근성에 대한 점수로 이 검사를 해보니 아래와 같은 메시지가 나왔고 점수는 77점 이었습니다.

• Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children.
• Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions

lighthouse role에러

제 블로그는 템플릿을 구입해 사용중이고 이 템플릿은 상단 카테고리가 UL과 LI태그로 이루어져 있는데 아래 그림에서 나타내는 것 처럼 이 부분이 문제였습니다. 

페이지소스보기를 열어 해당 부분을 살펴보니 구성이 ul - li - a 태그 순서로 이루어져 있는데 ul태그와 a태그는 role이 붙어있는 반면에 이 중간에 있는 li태그에 role이 보이지 않습니다. 

이 중간태그에 role이 안붙어서 연결이 끊어지기 때문에 생기는 문제였습니다.

li태그 role없음

role에러 해결 후 lighthouse 웹접근성 점수 향상시키기

해결을 위해서 관리자모드 테마 - HTML편집으로 들어가 코드를 수정해줘야 합니다. 이 부분은 템플릿마다 다를 수 있으므로 ul태그의 id값을 따라가 li부분에 값을 추가해줘야 합니다. 웹 접근성 연결을 이어주기 위해 비어있는 li태그에 role="none" 코드를 추가해줍니다.

role="none" 추가

코드를 추가한 후 다시 화면으로 돌아가 리프레쉬 하고 페이지소스보기를 열어 해당 부분을 살펴보면 li태그에 role="none' 이 추가된 것을 확인 할 수 있습니다. 이제 다시 lighthouse를 실행하여 확인해봅니다.

Accessibility가 향상된 모습

다시 lighthouse를 실행해보면 Accessibility점수가 77점에서 97점으로 변경된 것을 확인 할 수 있습니다. 

Accessibility 점수 향상