2.4.4 링크 목적(맥락 내)

요구 사항

각 링크의 목적을 링크 텍스트만으로, 또는 링크 텍스트와 프로그램으로 알 수 있는 링크 맥락(같은 문장, 문단, 목록 항목, 표 셀·머리글, 링크 바로 앞 제목, aria-describedby 등)으로 알 수 있어야 합니다. 예외: 링크의 목적이 일반 사용자에게도 모호한 경우(예: 수수께끼 정답 링크).

왜 필요한가요

화면낭독기 사용자는 링크 목록만 모아 보며 이동하는 경우가 많습니다. “더보기”, “여기”, “클릭”이 여러 개 나오면 어디로 가는지 알 수 없습니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 인지·학습 장애가 있는 사용자
• 음성 인식 사용자
• 저시력 사용자(화면 확대 사용자)

적용 방법

• 링크 텍스트에 목적지를 씁니다: “공지사항 더보기”, “2024년 연차 보고서(PDF, 2MB)”.
• 디자인상 “더보기”만 보여야 한다면 숨김 텍스트나 aria-label로 보충하되, 보이는 텍스트를 이름 앞부분에 포함합니다(2.5.3).
• 이미지 링크는 대체 텍스트로 목적지를 알립니다.

사례

<h2>공지사항</h2> ... <a href="/notice">더보기</a>
<h2>이벤트</h2> ... <a href="/event">더보기</a>

<a href="/notice">더보기<span class="sr-only"> 공지사항</span></a>
<a href="/event">이벤트 더보기</a>

자주 하는 실수

• “여기를 클릭”, “더보기”만 있고 맥락이 프로그램적으로 연결되지 않습니다.
• 같은 텍스트의 링크가 서로 다른 곳으로 이동합니다.
• 이미지 링크의 대체 텍스트가 없거나 목적지와 관계없습니다.

검사 방법

• 화면낭독기의 링크 목록 기능으로 각 링크의 목적을 알 수 있는지 확인합니다.
• 목적을 알 수 없는 링크는 같은 문장·목록 항목·표 셀·앞 제목 등 맥락으로 알 수 있는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목

참고 자료

• WCAG 2.2 원문: 2.4.4 (새 창)