WordPress 사이트의 접근성을 높이기 위해 건너뛰기 링크를 사용하는 방법
게시 됨: 2017-07-06접근성 시리즈 소개에서 다양한 WCAG(웹 콘텐츠 접근성 지침)의 기초에 대해 이야기했습니다. 이제 몇 가지 주요 지침을 살펴보고 사이트를 더 쉽게 액세스할 수 있도록 만드는 방법을 보여줌으로써 다음 단계로 넘어갈 때입니다. 건너뛰기 링크로 더 일반적으로 알려진 우회 블록부터 시작하겠습니다.
건너뛰기 링크란 무엇입니까?
건너뛰기 링크는 탭 키나 스크린 리더를 통해 :focus 에 올 때까지 사이트에 숨겨져 있는 특수 링크입니다. 그 목적은 대체 기술 사용자(키보드 및 화면 판독기를 사용하는 사용자)에게 콘텐츠 블록을 건너뛸 수 있는 기능을 제공하는 것입니다. 표준에서 바로:
"여러 웹 페이지에서 반복되는 콘텐츠 블록을 우회하는 메커니즘을 사용할 수 있습니다." – WCAG 표준 2.4.1 – 우회 블록
2.4.1은 A급 표준입니다. 이는 508조의 적용을 받으며 법적으로 요구됨을 의미합니다. 건너뛰기 링크가 있어야 합니다.
콘텐츠 건너뛰기 링크가 적용되는 가장 일반적인 블록이 무엇인지 추측할 수 있습니까? "메뉴"를 추측했다면 맞습니다. 메뉴는 사이트의 거의 모든 페이지에 나타납니다. 시력이 있는 사용자와 마우스 사용자는 바로 옆으로 스크롤하는 경향이 있습니다. 왜냐하면 그것은 바로 거기에 있을 것으로 예상되는 사이트 요소 중 하나이기 때문입니다. 그러나 탐색 메뉴는 건너뛰기 링크가 필요한 유일한 블록이 아닙니다.
건너뛰기 링크에서 일반적으로 간과되는 영역은 왼쪽 사이드바(또는 아랍어와 같이 오른쪽에서 왼쪽으로 쓰는 언어 사이트의 경우 오른쪽 사이드바)입니다. 의미상 순서가 떨어지는 경향이 있기 때문에 사용자는 콘텐츠로 바로 이동하기 위해 정기적으로 반복되는 사이드바를 건너뛸 수 있는 방법이 필요합니다.
홈페이지 외부에 표시되는 추천 게시물 블록도 마찬가지입니다. 일부 사이트 디자인은 추천 게시물 섹션 또는 슬라이더를 내부 페이지로 가져옵니다. 해당 섹션의 내용이 변경되지 않는 한(예: 카테고리 또는 아카이브 페이지) 건너뛰기 링크가 있어야 합니다.
접근성 소개: 1부
접근성은 당신이 계속 듣고 있지만 완전히 이해하지 못할 수 있는 용어입니다. 이것은 부분적으로 단어 자체가 약간 혼란스러울 수 있기 때문입니다. 액세스라는 루트 단어는 개념을 다음과 같은 것들에 묶인 것처럼 보이게 합니다.
건너뛰기 링크는 어떻게 추가합니까?
이제 건너뛰기 링크가 무엇인지 알았으므로 사이트에 추가할 차례입니다. 이 문제를 해결하는 몇 가지 방법이 있습니다. 쉬운 방법(코더가 아닌 경우 유일한 방법)은 플러그인을 설치하는 것입니다. 어려운 방법은 테마에 직접 코딩하는 것입니다.
플러그인 사용
링크를 건너뛸 때 추천하는 두 가지 플러그인이 있습니다. Joe Dolson의 WP Accessibility와 Rian Rietveld의 Genesis Accessible입니다. 두 플러그인 모두 기본 건너뛰기 링크 추가를 포함하여 여러 접근성 문제를 해결합니다. Genesis Accessible은 특히 Genesis 프레임워크를 사용하여 구축된 사이트용입니다. 제네시스 사이트가 없다면 WP 접근성을 이용하세요.
직접 코딩하기
다른 옵션은 링크 건너뛰기를 직접 코딩하는 것입니다. 코드 자체는 상당히 간단하고 기본적인 HTML 및 CSS 지식만 있으면 되지만 이 방법을 시도하기 전에 WordPress 테마와 템플릿이 작동하는 방식에 익숙해져야 합니다. 이제부터는 참조된 파일을 찾는 방법과 편집하는 방법을 알고 있다고 가정하겠습니다.
먼저 실제 건너뛰기 링크를 작성하는 것으로 시작하겠습니다. 이렇게 하면 템플릿 파일에 쉽게 복사하여 붙여넣을 수 있습니다. HTML 지식을 상기하면서 앵커 태그를 작성해야 합니다. 여기서 형식은 가독성을 위한 것입니다.
<a href=”[don’t fill this in yet]” class=”skip-link”> Skip to Main Content </a>
href 속성은 일부러 비워두었습니다. 이것은 건너뛰기 링크가 링크될 위치를 정의해야 하기 때문입니다. 이 예에서는 <main> 요소를 대상으로 사용합니다. ID 없이 요소에 직접 연결할 수 없기 때문에 <main> 요소에 ID가 있는지 확인해야 합니다. <main> 요소는 header.php 에서 찾을 수 있지만 항상 그런 것은 아닙니다. 요소를 찾은 후에는 ID가 있는지 확인해야 합니다. 그렇지 않은 경우 다음과 같이 추가하십시오.
&lt;main id=”main-content”&gt; [a bunch more code below]
ID의 특정 값은 중요하지 않지만 기억해야 합니다. 이제 ID 값으로 건너뛰기 링크 코드를 업데이트하려고 합니다.
&lt;a href=”#main-content” class=”skip-link”&gt; Skip to Main Content &lt;/a&gt;
이제 건너뛰기 링크가 구축 header.php 파일이나 테마의 여는 <body> 태그가 있는 곳으로 돌아갑니다. <body> 태그는 키보드 및 화면 판독기 사용자 :focus 가장 먼저 표시되어야 하는 건너뛰기 링크의 필수 배치입니다.
<body> 태그 바로 뒤에 완성된 HTML을 지나갑니다. 다음은 여러 건너뛰기 링크가 있는 더 자세한 예를 보여줍니다. 사이트에 여러 링크를 추가하려면 ID가 올바르게 적용되었는지 확인하십시오.
&lt;body&gt; &lt;a href=”#left-sidebar” class=”skip-link”&gt;Skip to Sidebar&lt;/a&gt; &lt;a href=”#featured-posts-block” class=”skip-link”&gt;Skip to Featured Posts&lt;/a&gt; &lt;a href=”#main-content” class=”skip-link”&gt;Skip to Main Content&lt;/a&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-레벨 표준이기 때문에 주의해야 합니다. 법 에 따라 사이트에 있어야 합니다. 자신을 위험에 빠뜨리지 마십시오. 오늘 건너뛰기 링크를 추가하세요!