망보드 랜드마크와 양식 라벨 오류 해결하기

안녕하세요! 지난번 SNS 공유 버튼 최적화에 이어, 오늘은 구글 서치 콘솔(또는 라이트하우스)에서 자주 발생하는 ‘웹 접근성’ 관련 오류 두 가지(랜드마크와 양식 라벨 오류 )를 해결해 보려고 합니다.

내 사이트가 구글 검색에서 좋은 점수를 받으려면 눈에 보이는 디자인도 중요하지만, 검색 로봇이나 스크린 리더가 사이트를 얼마나 잘 이해하느냐가 정말 중요하거든요. 오늘 해결해 볼 에러는 바로 이겁니다.

1. “주요 랜드마크가 없습니다” 해결하기

이 검색 최적화 접근성 에러는 검색 로봇이 사이트에 들어왔을 때 “이 페이지에서 진짜 중요한 본문이 어디야?”라고 길을 잃었을 때 발생합니다. 집으로 치면 거실과 안방에 이름표가 없는 셈이죠.

보통 본문 영역을 감싸는 태그에 role="main"이라는 속성만 넣어주면 해결됩니다. 하지만 페이지마다 클래스명이 달라서 고치기 까다로운데요, 저는 자바스크립트를 이용해 자동으로 이름표를 붙여주는 방식을 사용했습니다.

[해결 코드 예시]functions.php 파일에 아래 코드를 넣으면 글 페이지(.container), 카테고리(.ht-body-wrapper), 메인 페이지(.ht-content-wrap)를 자동으로 찾아 본문으로 지정해 줍니다.

document.addEventListener('DOMContentLoaded', function() {
 var selectors = '.container', '.ht-body-wrapper', '.ht-content-wrap'];
 for (var i = 0; i selectors.length; i++) {
 var element = document.querySelector(selectorsi]);
 if (element && !element.getAttribute('role')) {
 element.setAttribute('role', 'main');
 }
 }
});

2. “양식 요소에 관련 라벨이 없습니다” 해결하기

두 번째는 주로 망보드에서 발생하는 검색 최적화 오류중 양식 요소에 대한 오류는 검색창에서 발생합니다. 스크린 리더를 쓰는 분들이 검색창에 커서를 가져갔을 때 “검색어를 입력하세요”라고 읽어줘야 하는데, 이름표(label)가 없어서 그냥 “빈 칸”이라고 읽어주는 상태인 거죠.

디자인상 이름표를 밖으로 노출하고 싶지 않을 때는 aria-label이라는 속성을 써서 검색 로봇에게만 살짝 알려주면 됩니다.

[해결 코드 예시]

var searchInput = document.getElementById('wp-block-search__input-1') || document.querySelector('.wp-block-search__input');
if (searchInput && !searchInput.getAttribute('aria-label')) {
 searchInput.setAttribute('aria-label', '사이트 검색');
}