본문 바로가기

웹접근성지침(WCAG2.0)

[웹접근성 지침-일반기술 G53] '링크가 포함된 문장의 텍스트'와 '링크 안에 있는 텍스트'는 링크의 목적을 설명해야 한다.

728x90

링크는 클릭하면 다른 웹 페이지로 이동하기 때문에 사용자가 링크를 클릭하기 전에 이 링크가 어디로 가는지 무슨일이 벌어지는지 알 수 있도록 정보를 제공해야 합니다.

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


기술설명

이 기술의 목적은 '링크'와 '링크가 있는 문장'에서 링크의 목적을 알 수 있는지를 확인하는 것입니다.

한 문장이 링크가 되어있는 경우 문장의 내용이 링크의 목적을 설명해야 합니다.

그 설명을 통해 사용자는 이 링크가 다른 웹페이지와 연결되어 있다는 것을 알수 있게 되고, 링크 따라 이동할 것인지를 판단할 수 있게 됩니다. 단순히 URL만 제공해서는 안됩니다. 설명이 필요합니다.

 

[참고] 링크에 대한 설명은 링크 앞에 있어야 사용자가 유용하게 활용할 수 있습니다.

스크린 리더 사용자의 경우, 스크린 리더가 페이지를 위에서 아래로(순서 데로) 읽기 때문에 링크 앞에 링크 설명이 있어야 사용자가 제대로 인식 할 수 있습니다.

 

 

예시

예시1. 웹페이지에서 '이 페이지에서 광고를 보고 싶다면 여기를 클릭하세요.'라는 문장이 있습니다. [여기를 클릭하세요]부분을 누르면 광고를 볼 수 있습니다.

[여기를 클릭하세요]라는 텍스트만으로는 링크의 목적을 알 수 없지만 문장의 앞부분이 링크의 목적을 알려주고 있습니다.

 

예시2. ['스모 빌 타임즈'에서 보고합니다. 교육위원회는 827일에 시작하는 '2007년 학교 달력'을 선택했습니다.]

라는 기사가 있습니다. '보고합니다' 부분이 기사에 대한 링크 부분입니다.

*참고. '예시2'는 성공기준을 충족합니다. 하지만 링크 되는 부분 뒤에 링크에 대한 설명이 나와 있기 때문에 스크린 리더를 이용하는 사람들에게는 불편합니다.

 

 

관련기술

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

H2: 동일한 리소스에 대해 인접한 이미지와 텍스트 링크 결합

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

H33: 제목 속성으로 링크 텍스트 보완

H77: 포함된 목록 항목과 결합된 링크 텍스트를 사용하여 링크의 목적 식별

H78: 포함하는 단락과 결합된 링크 텍스트를 사용하여 링크의 목적 식별

H79: 포함하는 테이블 셀 및 연관된 테이블 헤더 셀과 결합된 링크 텍스트를 사용하여 데이터 테이블에서 링크의 목적 식별

H80: 이전 제목 요소와 결합된 링크 텍스트를 사용하여 링크의 목적 식별

H81: 목록이 중첩된 상위 목록 항목과 결합된 링크 텍스트를 사용하여 중첩 목록에서 링크의 목적 식별

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

ARIA1: aria-describedby 속성을 사용하여 사용자 인터페이스 컨트롤에 대한 설명 레이블 제공

 

 

점검절차

1. 문장 안에 링크가 있는지 확인합니다.

2. 링크안의 텍스트와 문장안의 텍스트가 링크의 목적을 설명하는지 확인합니다.


나의 정리

링크(link)HTML에서 <a>요소를 말합니다.

링크는 클릭하면 다른 웹 페이지로 이동하기 때문에 사용자가 링크를 클릭하기 전에 이 링크가 어디로 가는지 무슨일이 벌어지는지 알 수 있도록 정보를 제공해야 합니다.

링크(link)는 문장 안에 있을 수 있고, 문장 자체가 링크일 수도 있습니다. 예를 들어 보겠습니다.

 

링크가 문장 안에 있는 경우의 소스는 아래와 같습니다.

<p>‘daum’으로 이동 하려면 <a href="https://www.daum.net/">여기를 클릭하세요.</a></p>

문장을 통해서 '여기를 클릭하세요.'부분을 클릭하면 다음 포털 사이트로 이동 한다는 것을 알 수 있습니다.

 

문장 자체가 링크인 경우의 소스는 아래와 같습니다.

<a href="https://www.daum.net/">‘daum’으로 이동합니다.</a>

문장 자체가 링크로 감싸져 있고 링크안의 문장이 다음 포털 사이트로 이동 한다는 것을 알려주고 있습니다.

 

이런 식으로 링크를 포함하고 있는 문장은 그 링크의 목적을 설명해 주어야 하며,

문장 자체가 링크인 경우에는 링크 안의 문장의 링크의 목적을 설명해 주어야 합니다.

 

여기서 주의해야 할 점은 '링크' 보다 '링크에 대한 설명'이 앞에 있어야 한다는 것입니다.

'스크린 리더'를 사용하시는 분들의 경우(=시력에 문제가 있는 분들), '스크린 리더'HTML 코드 순서대로 위에서 아래로(순서대로) 사용자에게 콘텐츠들을 읽어줍니다. '링크 설명'을 먼저 읽고 난 뒤 '링크'가 있어야 사용자는 '링크'를 누른지 안 누를지 판단 할 수 있습니다. 반대로 '링크' 뒤에 '링크 설명'이 있다면 '스크린 리더'사용자는 혼란을 겪게 될 겁니다.

 

예를 들어보겠습니다.

<p><a href="https://www.daum.net/">여기를 클릭하세요.</a> 'daum'홈페이지로 이동합니다.</p>

 

위 소스는 '링크' 뒤에 '링크 설명'이 있는 방식입니다. '스크린 리더'는 사용자에게 [링크, 여기를 클릭하세요]라는 음성 메시지를 제공합니다. 사용자는 여기를 클릭하면 어디로 이동하는지 모르기 때문에 클릭해야 할지 말지 판단 할 수 없습니다.

 

<p>‘daum’으로 이동 하려면 <a href="https://www.daum.net/">여기를 클릭하세요.</a>

위 소스는 '링크 설명' 뒤에 '링크'가 있는 방식입니다. '스크린 리더'가 링크에 대한 설명을 먼저 하기 때문에 사용자는 [여기를 클릭하세요] 링크 부분을 클릭할지 말지 판단 할 수 있게 됩니다


 

G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence

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

 

G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence | Techniques for WCAG 2.

In the news summary containing the sentence "The Smallville Times reports that the School Board chose a 2007 school calendar that starts on August 27.", the words "reports that" are a link to an article in the Smallville Times about the School Board meetin

www.w3.org

 

728x90