Pagespeed Insight가 콘텐츠의 가독성을 개선하기 위해 권장하는 사항이며, 링크 부분 특히 cat-links가 색상에 의존하여 구분할 수 있다는 내용이다. 구분할 수 있는데 무엇이 문제라는 말인가.
상세 내용을 읽어 보면 텍스트와 배경 간의 색상 대비 부족으로 받아들일 수 있는데 실상은 그렇지 않았다. 링크는 보통 (파란색 계열 글자색에) 밑줄(underline)이 들어가 있다는 점이 일반적인 구분 포인트이다. 즉, underlined hyperlink. 하지만 디자인적인 측면에서 밑줄을 없애는 경우도 많기 때문에 종종 맞닥뜨리게 되는 지적사항으로 보인다.
*사용 중인 테마는 GeneratePress 3.5.1 무료 버전
cat-links만 지적하는 이유 (추정)
단순히 링크의 밑줄이 문제라면 본문의 모든 텍스트 링크 부분이 지적되어야 할 텐데 굳이 cat-links만 지적하고 있는 이유는 무엇일까. 이 부분은 명확하지 않으나 cat-links가 ARIA 요소로 지정되어 있기 때문으로 추정해 본다.
ARIA(Accessible Rich Internet Application)는 사용자, 특히 장애를 가진 사용자가 웹 콘텐츠 및 어플리케이션에 좀 더 쉽게 접근할 수 있는 방법을 정의하는 여러 가지 특성을 말하는데, ARIA 요소가 사용자에게 제대로 전달될 수 없는 특성을 보이면 개선이 필요하다는 주의 메시지를 받을 수 있다.
즉 cat-links는 ARIA 요소로서 사용자에게 잘 전달되어야 하는 항목인데, 링크임에도 불구하고 이를 나타내는 특징(즉, 밑줄)이 보이지 않아 발생한 문제로 본다.
하지만 post-navigation 역시 ARIA 요소이지만 링크에 밑줄이 없어도 지적사항이 뜨지 않는다. 결국 cat-links만 지적되는 이유에 대해서는 잘 모르겠다.
해결되지 않는 방법
'백그라운드 및 포그라운드 색상의 대비율이 충분하지 않습니다.'의 상황과 비슷하게 간주해서 링크 텍스트의 명도와 채도를 조절해 보는 것으로는 해결할 수 없었다.
해결 방법
결국 해당 링크에 밑줄(underline)을 넣어 줌으로써 해결할 수 있었다. 모든 링크를 밑줄 없음으로 설정해 사용 중이라면 cat-links에만 밑줄을 넣어 주자. (CSS)
.cat-links a:link { text-decoration: underline; } 사실 이렇게만 하면 조금 밋밋하기 때문에 커서가 링크 위에 올라갔을 때에는 밑줄이 사라지게 해 본다. 기본적인 상황에서는 cat-links에 밑줄이 나타나 있기 때문에 앞선 지적사항은 발생하지 않는다.
.cat-links a:link { text-decoration: underline; }
.cat-links a:hover { text-decoration: none; } 이후 Pagespeed insight에서 테스트해 보면 해당 문제가 해결되었음을 알 수 있다. 처음부터 '링크에 밑줄을 넣는 등의 조치를 취하세요'라고 해 주면 좋지 아니한가.
