구글 블로그의 링크에 시각 장애인을 위한 인식 가능한 이름을 포함하는 방법

이번 포스트에서 블로그 HTML 편집을 통해 수정할 내용은 시각 장애인을 위한 블로그의 접근성을 높이는 방법이다.

링크 태그인 <a> 태그에는 안에 인식 가능한 텍스트가 전혀 없으면 스크린 리더(시각 장애인을 위한 읽기 도구)가 이 링크가 무엇에 대한 링크인지 읽을 수가 없게 되어버린다.

그래서 블로그 템플릿 내에 <a> 태그는 있지만 그 안에 인식 가능한 텍스트가 없는 곳에 텍스트를 넣는 작업을 하겠다.

PageSpeed Insights에서 문제점을 확인

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

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

지난 포스트에서 소개한 사이트인 PageSpeed Insights에서 이 블로그를 측정해보니, '접근성' 항목에 다음과 같은 메시지가 있었다.

"링크에 인식 가능한 이름이 포함되어 있지 않습니다"라는 메시지가 있었다.

내용을 확인해 보니, 포스트의 썸네일 이미지에 걸려있는 링크들마다 이 이미지에 걸려있는 링크가 어디로 연결되는 링크인 것인지 설명하는 내용이 없다는 그런 내용이었다.

a 태그에 aria-label 속성을 추가하자

보통은 <img> 태그에 alt 속성을 넣어야겠다고 생각할 수 있는데,

개발자 도구를 통해서 확인해 보니, 블로그의 썸네일 이미지는 <img> 태그를 사용하지 않고,

<span class="post-thumb lazy-ify" data-image="이미지 URL"></span> 이런 방식으로 이미지를 삽입하고 있었다.

그래서 alt 속성은 사용할 수 없고, <a> 태그에 aria-label 속성을 추가해서 스크린 리더에 설명을 줘야 한다.

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

이 안에서 <a> 태그는 수도 없이 많다.

어떤 <a> 태그가 포스트 썸네일 이미지에 연결된 a 태그인지 찾아야 한다.

다른 템플릿은 어떨지 모르겠는데, 내가 사용 중인 Amalia 템플릿의 경우에는 [ctrl + F] 키를 이용해 a class='post-image' expr:href='data:post.url'을 검색했을 때 나오는 6개의 a 태그들이 포스트 썸네일 이미지에 연결된 a 태그였다.

expr:aria-label='data:post.title'

이 6개의 a 태그들에 전부 이 속성을 추가하고 저장하도록 하자.

6개에 전부 이런 식으로 속성을 추가하자.

이렇게 하면 aria-label 속성에 해당 포스트의 제목이 들어가게 된다.

PageSpeed Insights에서 다시 측정을 해보니, 포스트 썸네일 이미지에 걸린 링크에 인식 가능한 이름이 없는 문제는 다 해결이 됐다.

그런다 문제가 딱 하나 남아있었다.

다음 페이지로 이동하는 이 버튼에는 여전히 스크린 리더가 인식할 수 있는 설명이 없었던 것이다.

이것은 어디를 수정해줘야 하는 것인지 찾는 과정이 좀 까다롭고 힘들었다.

결론은 이 다음 페이지로 이동하는 버튼에 직접 접근할 수 있는 방법이 없었다.

자바스크립트를 이용해서 강제적으로 속성을 추가해야 한다.

document.addEventListener('DOMContentLoaded', function() {
  const olderPageLink = document.querySelector('.page-next');
  if (olderPageLink) {
    olderPageLink.setAttribute('aria-label', '다음 페이지로');
  }
});

이 자바스크립트 코드를 템플릿의 자바스크립트 코드가 들어간 부분에 넣어줘야 한다.

위의 코드를 간단히 설명하면 page-next라는 class 속성을 갖고 있는 링크 요소에 aria-label 속성을 만들고, 그 안에 '다음 페이지로'라는 값을 넣는 코드다.

나는 이 위치에 코드를 추가했다.

저장 버튼도 잊지 말고 클릭하자.

개발자 도구를 열어서 다음 페이지로 이동하는 버튼의 태그를 확인해보면 aria-label 속성이 제대로 들어간 것을 확인할 수 있다.

이제 PageSpeed Insights로 블로그를 다시 측정해 보면, '링크에 인식 가능한 이름이 포함되어 있지 않습니다'라는 문제가 사라진 것을 확인할 수 있을 것이다.

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

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