링크는 클릭하면 다른 웹 페이지로 이동하기 때문에 사용자가 링크를 클릭하기 전에 이 링크가 어디로 가는지 무슨일이 벌어지는지 알 수 있도록 정보를 제공해야 합니다.
기술설명
이 기술의 목적은 '링크'와 '링크가 있는 문장'에서 링크의 목적을 알 수 있는지를 확인하는 것입니다.
한 문장이 링크가 되어있는 경우 문장의 내용이 링크의 목적을 설명해야 합니다.
그 설명을 통해 사용자는 이 링크가 다른 웹페이지와 연결되어 있다는 것을 알수 있게 되고, 링크 따라 이동할 것인지를 판단할 수 있게 됩니다. 단순히 URL만 제공해서는 안됩니다. 설명이 필요합니다.
[참고] 링크에 대한 설명은 링크 앞에 있어야 사용자가 유용하게 활용할 수 있습니다.
스크린 리더 사용자의 경우, 스크린 리더가 페이지를 위에서 아래로(순서 데로) 읽기 때문에 링크 앞에 링크 설명이 있어야 사용자가 제대로 인식 할 수 있습니다.
예시
예시1. 웹페이지에서 '이 페이지에서 광고를 보고 싶다면 여기를 클릭하세요.'라는 문장이 있습니다. [여기를 클릭하세요]부분을 누르면 광고를 볼 수 있습니다.
[여기를 클릭하세요]라는 텍스트만으로는 링크의 목적을 알 수 없지만 문장의 앞부분이 링크의 목적을 알려주고 있습니다.
예시2. ['스모 빌 타임즈'에서 보고합니다. 교육위원회는 8월 27일에 시작하는 '2007년 학교 달력'을 선택했습니다.]
라는 기사가 있습니다. '보고합니다' 부분이 기사에 대한 링크 부분입니다.
*참고. '예시2'는 성공기준을 충족합니다. 하지만 링크 되는 부분 뒤에 링크에 대한 설명이 나와 있기 때문에 스크린 리더를 이용하는 사람들에게는 불편합니다.
관련기술
H2: 동일한 리소스에 대해 인접한 이미지와 텍스트 링크 결합
H30: 앵커 요소에 대한 링크의 목적을 설명하는 링크 텍스트 제공
H77: 포함된 목록 항목과 결합된 링크 텍스트를 사용하여 링크의 목적 식별
H78: 포함하는 단락과 결합된 링크 텍스트를 사용하여 링크의 목적 식별
H79: 포함하는 테이블 셀 및 연관된 테이블 헤더 셀과 결합된 링크 텍스트를 사용하여 데이터 테이블에서 링크의 목적 식별
H80: 이전 제목 요소와 결합된 링크 텍스트를 사용하여 링크의 목적 식별
H81: 목록이 중첩된 상위 목록 항목과 결합된 링크 텍스트를 사용하여 중첩 목록에서 링크의 목적 식별
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
'웹접근성지침(WCAG2.0)' 카테고리의 다른 글
| [웹접근성 지침-일반기술 G55] 정의에 대한 링크 (0) | 2024.02.05 |
|---|---|
| [웹접근성 지침-일반기술 G54] '동영상 스트리밍 서비스'의 경우 '수어(수화)'가 제공 되어야 한다. (0) | 2024.01.31 |
| [웹접근성 지침-일반기술 G21] 사용자가 콘텐츠에 갇히지 않도록 해야 한다. (0) | 2024.01.25 |
| [웹접근성 지침-일반기술 G19] 어떤 요소든 1초 동안 3번 이상 깜빡이면 안 됩니다. (0) | 2024.01.23 |
| [웹접근성 지침-일반기술 G18] 텍스트(또는 이미지 텍스트)와 그 텍스트의 배경에 대한 명암비는 4.5:1이어야 한다 (1) | 2024.01.19 |
