요소에서 금지된 ARIA 속성을 사용함(Elements must only use permitted ARIA attributes)이 무슨 에러인지 파악해 보고 해결 방법을 찾아 보았다.
*사용하고 있는 워드프레스(WordPress) 테마는 GeneratePress 3.5.1. 무료 버전
[요약]
원인은 ARIA로 정의된 post-navigation과 cat-links 등을 모두 보이지 않도록 처리했을 때 발생. 파악한 해결 방법은 하나 이상의 항목을 노출시키거나, footer를 비활성화 시켜 모두 보이지 않게 하기.
ARIA
ARIA(Accessible Rich Internet Application)는 사용자, 특히 장애를 가진 사용자가 웹 콘텐츠 및 어플리케이션에 좀 더 쉽게 접근할 수 있는 방법을 정의하는 여러 가지 특성을 말한다. 만약 ARIA로 정의된 정보(post-navigation, cat-links)를 임의로 숨기는 등의 방법으로 전달하지 않게 되면 개선이 필요한 항목으로 지적되는 것으로 보인다.
물론 해당 정보가 실제로는 ARIA로 정의될 필요 없는 일반적인 정보라고 하면 관련 지적사항에 대해 무시해도 된다고 한다. 하지만 이렇게 두게 되면 ARIA로 정의했지만 ARIA로서 다루지 않게 되어 일관되지 않은 도구 사용에 의한 혼란을 초래할 수 있다.
이를 해결하기 위해서는 ARIA로 지정되어 있는 정보를 표시하도록 해야 하며, 중요한 정보가 아닐 경우에는 금지된 속성(화면에서 해당 정보를 숨기기 등)을 사용하는 것 대신 (ARIA가 아닌) 다른 요소로 변경하는 것을 권장한다.
워드프레스 GeneratePress에서의 footer
지적사항을 참고하여 footer(푸터) 영역의 소스 코드를 확인해 보니 footer가 aria-label="Entry meta"로 지정되어 있고 포스트 내비게이션(post navigation)과 카테고리 링크(category links)가 포함되어 있었다.
*만약 태그(tag)를 사용하는 경우에는 tags-links도 포함되어 있을 수 있다. 개인적으로 tag를 사용하고 있지 않아서 실제 그러한지는 확인하지 못했다. 아래의 내용은 tag를 사용하지 않고 있는 상황을 전제한 내용.
나의 경우 포스트 하단에 포스트 내비게이션(이전 글, 다음 글)과 현재 카테고리 링크가 방문자에게 큰 의미를 부여하지 못하고 지저분하기만 해 보여서 CSS를 이용해 숨겨두고 있었다. 이로 인해 상기한 ARIA 문제가 지적되었다고 볼 수 있다.
해결하기
GeneratePress 유료 버전은 사용해 보지 않아서 실제 확인할 수 없었으나, 모양 > 사용자 정의 > Layout > Blog에서 Post-navigation, cat-links 표시를 해제하는 옵션이 있다고 한다. 유료 버전 사용자라면 CSS로 숨기거나 PHP 스니펫으로 기능을 중지하는 것이 아니라 위의 경로를 통해 해제하면 문제가 해결될 것으로 예상된다.
나의 경우 무료 버전이기 때문에 무료 버전에서 해결할 수 있는 방법을 찾아보았다. 사실 가장 좋은 방법은 ARIA를 해제하거나 다른 요소로 치환하는 방법인데 해당 방법은 아직 찾지는 못했다.
방법 1. 정보를 숨기지 않고 모두 보이기
ARIA는 웹 이용자의 정보 접근성을 향상시키기 위해 만들어졌다고 볼 수 있다. 만약 post-navigation, cat-links 정보를 모두 보이지 않게 처리해 두었다면 해당 조치를 취소하고 원래의 목적대로 노출시키면 문제가 해결된다. CSS로 숨겨두었다면
.post-navigation, .cat-links { display: none; }
를 사용했을 확률이 높은데, 해당 항목을 지워주면 된다. PHP snippet을 사용했을 수도 있는데, 이 경우 각자 방법이 다를 수 있으므로 잘 확인해 보자.
방법 2. 최소 하나 이상의 정보를 노출하기
Footer에 정보가 하나라도 노출되고 있다면 PageSpeed Insights에서 지적사항이 나타나지 않았다. 따라서 본인이 수용할 수 있는 최소 정보 요소를 노출시키는 방법이다. 결과적으로 post-navigation 또는 cat-links 중 하나만 노출시키는 형태가 되겠다. 마찬가지로 CSS로 숨겨 두었다면
.post-navigation { display: none; }
또는
.cat-links { display: none; }
하나만 남겨두면 된다. 마찬가지로 PHP snippet을 사용한 경우에는 본인이 어떻게 했었는지 기억을 더듬어 찾아보자.
방법 3. 모두 보이지 않게 하기
ARIA와 관련된 지적사항 없이 post-navigation과 cat-links를 모두 숨기는 방법으로는 footer를 비활성화하는 방법이 있다. 물론 이 방법은 현재 footer를 활용하고 있지 않고 있다는 조건하에 사용할 수 있다. 본인이 footer를 직접적으로 사용하고 있지 않다고 해도 특정 플러그인이 footer에 코드를 삽입해 작동하는 경우도 있으니 확인 후 적용하는 것이 좋다. 기본적으로 footer에는 post-navigation과 cat-links 밖에 들어있지 않아서 특별히 문제가 될 부분은 없어 보였고, 짧은 시간 동안의 적용이었지만 실제로도 별문제는 없었다.
// footer 제거 php 스니펫
add_action( 'wp', function() {
remove_action( 'generate_after_entry_content', 'generate_footer_meta' );
} );적용 후 PageSpeed Insights 테스트
위에서 언급한 3가지의 방법 중 본인에게 적합한 방법을 적용해 보면 지적 사항이 사라진다.
