접근성 향상: Read more Links do not have descriptive text

by

워드프레스를 만지다보면, Pagespeed Insights에서 블로그 글 리스트에 Read More 버튼에 대한 설명이 추가되지 않았다는 경고가 뜨는 경우가 있습니다.

‘Links do not have descriptive text’ 라는 문구인데요. 버튼에 이런 문구가 붙으면, aria-label로 설명을 넣어도 좀처럼 해결되지 않습니다. 이럴 때는 다음과 같이 해결해보세요.

<a href="link 1">Read more<span class="screen-reader-text">Details</span></a>

<style>
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    word-break: normal;
}
</style>

보통 screen-reader-text 클레스는 테마마다 거의 다 포함되어있으므로, 스타일을 새로 만들어 추가할 필요가 없는 경우가 많습니다. 위에 span 태그 내용만 Read more 다음에 붙여넣으면 해결됩니다.

<i class="fa-solid fa-xmark"></i>

이렇게 아이콘 같은 걸 가져다 쓰면서, a 태그로 감쌀 때는 i 태그안에 다음과 같이 aria-hidden 속성을 넣어주는 것이 좋습니다.

<a href='link1'><i class="fa-solid fa-xmark" aria-hidden='true'></i></a>

아이콘 i 태그를 div가 감쌀 때는 div 태그 안에 aria-label을 넣어주어도 경고가 사라집니다.

<div class="dark-mode" aria-label="<?php esc_html_e('Dark Mode Switcher') ?>">
	<i class="far fa-moon"></i>
</div>

접근성(Accessibility) 항목에서 매우 흔한 지적입니다. 장애우들을 위한 접근성 향상에는 늘 신경을 써야겠지만, 좀 헤깔리고 어려운 부분이 많습니다. 보통 자식 테마를 만든다음 테마파일을 수정해서 올리는 데요. 오늘은 바빠서 이만하고 다음에는 자식 테마 활용법에 대해 알아보도록하겠습니다.

Leave a Comment