건너뛰기 링크를 사용하여 WordPress 사이트의 접근성을 높이는 방법
게시 됨: 2023-02-26접근성 시리즈 소개에서 다양한 웹 콘텐츠 접근성 지침(WCAG)의 기초에 대해 이야기했습니다. 이제 몇 가지 주요 지침을 살펴보고 사이트의 접근성을 높이는 방법을 보여줌으로써 다음 단계로 나아갈 때입니다. 일반적으로 스킵 링크로 알려진 바이패스 블록부터 시작하겠습니다.
건너뛰기 링크란 무엇입니까?
건너뛰기 링크는 탭 키나 스크린 리더를 통해 :focus 표시될 때까지 사이트에 숨겨져 있는 특수 링크입니다. 그들의 목적은 대체 기술 사용자(키보드와 스크린 리더를 사용하는 사람들)에게 콘텐츠 블록을 건너뛸 수 있는 기능을 제공하는 것입니다. 표준에서 바로:
"여러 웹 페이지에서 반복되는 콘텐츠 블록을 우회하는 메커니즘을 사용할 수 있습니다." – WCAG 표준 2.4.1 – 바이패스 블록
2.4.1은 A레벨 기준입니다. 이는 508조의 적용을 받으며 법으로 요구됨을 의미합니다. 건너뛰기 링크가 있어야 합니다 .
가장 일반적인 콘텐츠 건너뛰기 링크가 적용되는 블록이 무엇인지 추측할 수 있습니까? "메뉴"를 추측했다면 맞을 것입니다. 메뉴는 사이트의 거의 모든 페이지에 나타납니다. 시각 장애가 있는 사용자와 마우스 사용자는 바로 옆에 있을 것으로 예상되는 사이트 요소 중 하나이기 때문에 오른쪽으로 스크롤하는 경향이 있습니다. 그러나 탐색 메뉴는 건너뛰기 링크가 필요한 유일한 블록이 아닙니다.
건너뛰기 링크에 대해 일반적으로 간과되는 영역은 왼쪽 사이드바(또는 아랍어와 같이 오른쪽에서 왼쪽으로 쓰는 언어 사이트의 경우 오른쪽 사이드바)입니다. 의미론적 순서에 속하는 경향이 있기 때문에 사용자는 콘텐츠로 바로 이동하기 위해 정기적으로 반복되는 사이드바를 건너뛸 수 있는 방법이 필요합니다.
홈페이지 외부에 표시되는 추천 게시물 블록도 마찬가지입니다. 일부 사이트 디자인은 주요 게시물 섹션 또는 슬라이더를 내부 페이지로 전달합니다. 해당 섹션의 내용이 변경되지 않는 한(예: 카테고리 또는 아카이브 페이지) 건너뛰기 링크가 있어야 합니다.
건너뛰기 링크는 어떻게 추가합니까?
건너뛰기 링크가 무엇인지 알았으니 이제 사이트에 추가할 차례입니다. 이 문제를 해결하는 몇 가지 방법이 있습니다. 쉬운 방법(코더가 아닌 사용자에게는 유일한 방법)은 플러그인을 설치하는 것입니다. 어려운 방법은 테마에 직접 코딩하는 것입니다.
플러그인 사용
링크를 건너뛸 때 추천하는 플러그인은 Joe Dolson의 WP 접근성입니다. 기본 건너뛰기 링크 추가를 포함하여 여러 접근성 문제를 해결합니다.
직접 코딩하기
다른 옵션은 건너뛰기 링크를 직접 코딩하는 것입니다. 코드 자체는 매우 간단하고 기본적인 HTML 및 CSS 지식만 있으면 되지만 이 방법을 시도하기 전에 WordPress 테마 및 템플릿이 작동하는 방식에 익숙해야 합니다. 이 시점부터 참조된 파일을 찾는 방법과 파일을 편집하는 방법을 알고 있다고 가정합니다.
먼저 실제 건너뛰기 링크를 작성하는 것으로 시작하겠습니다. 이렇게 하면 템플릿 파일에 쉽게 복사하여 붙여넣을 수 있습니다. HTML 지식을 상기하면서 앵커 태그를 작성해야 합니다. 여기서 형식은 가독성을 위한 것입니다.
&amp;lt;a href=”[don't fill this in yet]” class=”skip-link”&amp;gt; Skip to Main Content &amp;lt;/a&amp;gt; 의도적으로 href 속성을 비워 두었습니다. 건너뛰기 링크를 연결할 위치를 정의해야 하기 때문입니다. 이 예에서는 <main> 요소를 대상으로 사용합니다. ID가 없는 요소에 직접 연결할 수 없기 때문에 <main> 요소에 ID가 있는지 확인해야 합니다. 귀하의 <main> 요소는 header.php 에서 찾을 수 있지만 항상 그런 것은 아닙니다. 요소를 찾았으면 ID가 있는지 확인해야 합니다. 그렇지 않은 경우 다음과 같이 추가하십시오.
&amp;lt;main id=”main-content”&amp;gt; [a bunch more code below]ID의 특정 값은 중요하지 않지만 기억해야 합니다. 이제 건너뛰기 링크 코드를 ID 값으로 업데이트해야 합니다.
&amp;lt;a href=”#main-content” class=”skip-link”&amp;gt; Skip to Main Content &amp;lt;/a&amp;gt; 이제 건너뛰기 링크가 만들어졌으므로 header.php 파일이나 테마의 여는 <body> 태그가 있는 곳으로 돌아갑니다. <body> 태그는 건너뛰기 링크의 필수 배치입니다. 키보드 및 스크린 리더 사용자를 위해 :focus 에 들어오는 절대적인 첫 번째 항목이어야 하기 때문입니다.
<body> 태그 바로 뒤, 완성된 HTML을 지난다. 다음은 여러 건너뛰기 링크가 있는 보다 자세한 예를 보여줍니다. 사이트에 여러 링크를 추가하려면 ID가 올바르게 적용되었는지 확인하세요.
&amp;lt;body&amp;gt; &amp;lt;a href=”#left-sidebar” class=”skip-link”&amp;gt;Skip to Sidebar&amp;lt;/a&amp;gt; &amp;lt;a href=”#featured-posts-block” class=”skip-link”&amp;gt;Skip to Featured Posts&amp;lt;/a&amp;gt; &amp;lt;a href=”#main-content” class=”skip-link”&amp;gt;Skip to Main Content&amp;lt;/a&amp;gt; [Header navigation goes here]이제 코드에 건너뛰기 링크가 있지만 아직 완료되지 않았습니다! 지금 페이지를 로드하면 상단에 건너뛰기 링크가 표시됩니다. CSS를 추가할 시간입니다. 건너뛰기 링크의 스타일은 아래 예를 사용하여 매우 간단합니다.
.skip-link { position: absolute; top: 0; z-index: 9999; right: 100%; padding: 5px; padding: 0.5rem; font-size: 20px; font-size: 2rem; color: #000; background: #FFF; } .admin-bar .skip-link { top: 32px; } .skip-link:focus { right: auto; } 표시되지 않는 것은 display: none 의 사용입니다. 이를 사용하면 스크린 리더가 링크를 완전히 건너뛰어 목적을 완전히 상실하게 됩니다. 숨기기는 right: 100% 사용하여 텍스트를 화면 밖에 놓고 right: auto on :focus 로 이동하여 수행됩니다.
CSS를 적용하면 모든 준비가 된 것입니다. 건너뛰기 링크가 있지만 숨겨져 있습니다. 키보드 사용자나 스크린 리더가 페이지를 시작 :focus 로 로드하면 건너뛰기 링크를 통해 원하는 콘텐츠로 바로 이동할 수 있습니다.
마무리
건너뛰기 링크는 손이 많이 가는 것처럼 보이지만 실제로는 그렇지 않은 접근성 기능의 완벽한 예입니다. 코드 측면에서 우리가 한 일은 HTML과 CSS 두 줄을 추가하는 것뿐이었습니다. 기술적이지 않은 접근 방식을 위해 플러그인을 설치했습니다. 두 방법 모두 시간이 오래 걸리지 않습니다. 건너뛰기 링크는 WCAG 2.0(최신 WCAG 표준)의 A 수준 표준이므로 유의해야 합니다. 귀하는 귀하의 사이트에 이러한 정보를 포함하도록법적으로 요구됩니다.자신을 위험에 빠뜨리지 마십시오. 오늘 건너뛰기 링크를 추가하세요!