본문 바로가기

웹접근성지침(WCAG2.0)

[웹접근성 지침-일반기술 G189] 웹 페이지 상단에 링크 텍스트를 변경할 수 있는 버튼이나 메뉴를 배치해야 합니다.

728x90

원문: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G189.html


모든 링크의 '링크 텍스트'가 해당 링크의 목적을 설명해주는 대체 페이지로 이동 할 수 있는 버튼을 제공해 줍니다.

사용자는 원하는 방식으로 페이지를 볼 수 있게 됩니다.


기술설명

이 기술의 목적은 페이지의 시작 부분에 해당 웹페이지의 대체 버전으로 이동할 수 있는 버튼이나 메뉴를 제공하자는 것입니다.

대체 버전에서는 각 링크의 텍스트만으로도 링크의 목적과 의도를 알 수 있어야 합니다.

즉 링크 앞의 내용을 보지 않고도 해당 링크의 텍스트만으로도 어디로 이동하는지 예측할 수 있습니다.

 

일부사용자들은 링크의 앞뒤 문장을 볼 필요 없이 자체 링크 텍스트만으로도 의도를 파악할 수 있는 방법을 선호합니다.

하지만 이렇게 하면 일부 내용이 반복적으로 사용되어 내용이 더 길어지고 전체적인 내용을 읽는데 불편함을 느낄 수 있어 싫어하는 사용자들도 있습니다.

그래서 이 기술 적용하려면 사용자가 자신에게 맞는 방법을 선택할 수 있게 해야 합니다. 

 

대체 버전으로 이동하는 링크를 제공하는 경우, 링크 텍스트가 목적을 정확하게 명시해야 합니다.

이 기술은 현재 페이지의 대체 버전을 제공하는 것입니다.

쿠키나 사용자의 프로필에 설정된 값을 통해 저장하는 것이 가능하기 때문에 자동으로 사용자가 선호하는 버전으로 이동할 수 있게 해줍니다.

 

 

 

예시

다른 버전으로 이동하는 링크를 제공 하는 경우:

웹 페이지에서 책을 다양한 형식으로 다운로드 할 수 있습니다.

웹 페이지의 다른 버전에서는 링크 텍스트만으로도 책의 제목과 유형을 알 수 있습니다.

 

[원문] books-full-links.html

<h1>책 다운로드</h1>
<p><a href="books-full-links.html">전체 링크 버전</a></p>
<ul>
    <li>웹의 역사: 
        <a href="history.docx" class="hist">워드</a>, 
        <a href="history.pdf" class="hist">PDF</a>, 
        <a href="history.html" class="hist">HTML</a>
    </li>
</ul>

 

[대체 버전] books-full-links.html

<h1>책 다운로드</h1>
<p><a href="books-full-links.html" >짧은 링크 버전</a></p>
<ul>
    <li>웹의 역사: 
        <a href="history.docx" class="hist">웹의 역사(워드)</a>, 
        <a href="history.pdf" class="hist">웹의 역사(PDF)</a>, 
        <a href="history.html" class="hist">웹의 역사(HTML)</a>
    </li>
</ul>

 

 

관련기술

G91: 링크의 목적을 설명하는 링크 텍스트 제공

H30: 앵커 요소에 대한 링크 목적을 설명하는 링크 텍스트 제공

H24: 이미지 맵의 영역 요소에 대한 텍스트 대체 제공

C7: CSS를 사용하여 링크 텍스트의 일부 숨기기

SCR30: 스크립트를 사용하여 링크 텍스트 변경하기

G136: 비준수 웹 페이지의 시작 부분에 적합한 대체 버전을 가리키는 링크 제공

C29: 스타일 전환기를 사용하여 적합한 대체 버전 제공

 

 

점검절차

1. 웹페이지 시작 부분에 링크 텍스트를 변경하는 제어기가 있는지 확인합니다.

2. 제어기를 활성화합니다.

3. 모든 링크에 목적을 설명하는 링크 텍스트가 있는지 확인합니다.

 

 


 

나의 정리

웹 페이지 상단에 현재 페이지의 대체 페이지로 이동할 수 있는 링크를 제공하자는 것입니다.

대체 페이지에 있는 모든 링크는 그 링크가 품고 있는 텍스트, 즉 '링크 텍스트'가 링크의 목적을 말해주어야 합니다.


이 말을 이해하기 위해 '링크 텍스트'와 '링크의 목적'이 무엇인지 알아 봅시다.

 

먼저 '링크 텍스트'란 a태그 안에 있는 텍스트를 말합니다.
아래와 같은 예시를 보겠습니다.

<a href="file.pdf">설명서(PDF) 다운로드</a>

a태그 사이에 있는 ' 설명서(PDF) 다운로드 '가 링크 텍스트가 되는 것이다.

이 '링크 텍스트'는 링크를 누르면 pdf로 된 설명서를 내려 받을 수 있다는 내용을 담고 있습니다. 

링크를 눌렸을 때 어떤 일이 일어날지를 알려주고 있습니다. 이것을 링크의 목적이라고 합니다.

 

즉 대체 페이지에 있는 모든 링크 텍스트는 그 목적을 잘 표현해야 합니다.

그래야 사용자가 링크 텍스트만 보고 링크를 이용할지를 결정할 수 있습니다.

 

하지만 링크 텍스트가 해당 링크의 목적을 충실하게 알려주는 것이 모든 사람들에게 좋지는 않습니다.

중복되는 단어가 많아지거나 문맥의 흐름에 방해를 하기 때문입니다.

그래서 사용자가 선택해서 볼 수 있도록 대체 페이지로 이동할 수 있는 링크를 제공하는 것입니다.

모든 링크의 '링크 텍스트'가 해당 링크의 목적을 설명해주는 대체 페이지로 이동 할 수 있는 버튼을 제공해 줍니다.

사용자는 원하는 방식으로 페이지를 볼 수 있게 됩니다.

 

 


 

G189: Providing a control near the beginning of the Web page that changes the link text

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G189.html

 

G189: Providing a control near the beginning of the Web page that changes the link text | Techniques for WCAG 2.0

The objective of this technique is to provide the user with a control near the beginning of the page that takes the user to a conforming alternate version of the Web page where the link text alone of each link is sufficient to determine its purpose out of

www.w3.org

 

728x90