PageSpeed Insights로 블로그의 접근성을 100으로 만들어봤다.

이전에 페이지 스피드 인사이트^{PageSpeed Insight}라는 곳을 소개한 적이 있다.

이곳을 통해서 블로그의 문제점들을 하나씩 개선해나가고 있었는데, 이제 이번에 접근성 문제를 전부 해결해서 100점으로 만들어보겠다.

블로그나 웹사이트의 속도를 측정해주고 개선점을 알려주는 사이트, PageSpeed Insights

PageSpeed Insights는 웹사이트 속도를 측정하고 개선점을 알려주는 웹사이트입니다. 이 글은 PageSpeed Insights를 소개하고, 어떻게 사용해야 하는지, 주요 지표는 무엇을 의미하는지 자세히 알려주는 가이드입니다.

이전에 PageSpeed Insights를 소개한 글이다.

오늘 해결할 문제 이외에 다른 문제들을 해결하는 링크들이 포함되어 있으니 참고하도록 하자.

현재 PageSpeed Insights의 데스크톱 접근성 점수는 87점

내 블로그를 측정했을 때 데스크톱에서 접근성이 87점이 나오고 있었다. (참고로 모바일은 100점)

그리고 아래에 해결해야 할 문제점들이 적혀 있는데, 가장 아래에 있는 "목록 항목(<li>)이 <ul>, <ol> 또는 <menu> 상위 요소 내에 포함되지 않음" 문제가 일단 가장 쉬워 보여서 살펴봤다.

목록 항목이 ul, ol 또는 menu 상위 요소 내에 포함되지 않음

<li> 태그가 있으면 그 <li> 태그를 감싸는 <ul> 태그 혹은 <ol> 태그가 있어야 한다는 것은 HTML을 공부한 사람이라면 누구나 아는 상식이다.

자세한 내용을 살펴보니, 헤더 메뉴가 <li> 태그로 구성되어 있는데 그걸 감싸는 <ul> 혹은 <ol> 태그가 없다고 하는 것 같다.

정말로 <ul> 혹은 <ol> 태그가 없나?

개발자 도구를 열어서 살펴보니, 분명 <ul> 태그가 <li> 태그들을 감싸고 있다.

이상하다.. 그럼 뭐가 문제지?

그래서 "목록 항목(<li>)이 <ul>, <ol> 또는 <menu> 상위 요소 내에 포함되지 않음"에 쓰여있는 메시지들을 다시 한번 자세히 읽어보니, <ul>이나 <ol> 태그가 없다는 것이 아니라 뭔가 다른 뜻이 있는 것처럼 보이기도 했다.

하위 요소에 특정 [role]을 포함해야 하는 ARIA [role] 지원 요소에 일부 또는 전체 하위 요소가 누락되었습니다

그래서 일단 넘어가기로 하고, 제일 상단에 있었던 "하위 요소에 특정 [role]을(를) 포함해야 하는 ARIA [role] 지원 요소에 일부 또는 전체 하위 요소가 누락되었습니다."라는 내용을 살펴보니, 이것도 헤더 메뉴에 뭔가 문제가 있는 것 같다.

PageSpeed Insights에서는 문제가 여러가지 있는 것처럼 표시가 되어있지만, 결국 다 뭔가 문제점이 연결되어 있는 것처럼 보였다.

그래서 이 문제부터 해결해 보기로 했다.

문제는 바로 여기에 있었다.

<ul> 태그에 role="menubar" 속성이 있다.

이 속성를 가진 <ul> 태그의 직계 자식 요소(<li>)에 role="menuitem" 속성이 있어야 하는데, 현재 코드에서는 <ul>의 직계 자식인 <li> 요소에 역할(role)이 지정되어 있지 않아 오류가 발생하고 있는 것이다.

코드를 보면 알 수 있듯 <li> 태그에 붙어야 할 role 속성이 엉뚱하게 <li> 태그 안에 있는 <a> 태그에 붙어있다.

이 문제를 해결하려면 <a> 태그에 붙은 role 속성을 <li> 태그로 옮겨야 한다.

구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한다.

그리고 [ctrl + F] 키를 누르고 menuitem을 검색한다.

그중에 위에 캡처한 이미지처럼 role="menuitem" 속성이 <a> 태그에 붙은 곳이 보일 거다.

이 role="menuitem" 속성을 <li> 태그로 옮긴 후에 저장을 해야 한다.

<li role='menuitem'><a expr:href='data:link.target'>

즉, 이렇게 수정하면 된다. 저장도 잊지말자.

이것으로 나의 블로그 접근성은 100점

접근성에 문제점이 세 가지나 있었지만, 이거 하나 해결함으로 인해 모든 문제가 해결되었다.

접근성의 점수가 100점이 되었다.

이걸로 내 블로그에서 접근성 문제는 모두 해결되었다.

이전에도 언급했지만, 이 블로그는 아직 검색 사이트에 등록을 시키지 않았다.

그래서 검색엔진 최적화 점수는 저 모양이지만, 저것도 곧 100점이 될 거다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.