링크 목적
‘더보기’ 링크의 목적은 언제 충분하고 언제 모호한가
WCAG 2.2 성공 기준 2.4.4(Link Purpose in Context) 규칙과 단독 '더보기' 링크의 맥락 파악 및 aria-label 보완 기법을 분석합니다.
실무 검증 기록
실무 판단 기준 및 판정 조건
본 기록은 공개 fixture와 재현 조건을 기준으로 정리한 기술 설명입니다. 실제 브라우저·스크린리더 조합의 동작은 별도 수동 검토가 필요합니다.
| 검증 상태 | 공개 fixture 기반 재현 완료 |
|---|---|
| 검증 기준 | 공개 fixture 및 재현 조건 |
| 검증 범위 | 본문 링크 텍스트의 맥락적 목적(In Context) 및 비색상 단서 검증 및 명시된 입력값에 한정 |
| 수동 확인 | 실제 브라우저·키보드·스크린리더 환경에서 별도 확인 필요 |
| fixture에서 확인한 기대 결과 | [실패 상태] 링크만 보면 목적이 모호함 ➔ [수정 목표] 링크 문구 또는 주변 문맥을 구체화 |
검증에 사용된 실제 픽스처 / 재현 조건
제목 아래 더보기 링크와 독립 링크 목록- 동일 페이지 내 서로 다른 목적의 링크가 동일한 텍스트를 사용할 때 발생하는 혼선 여부
- CSS hover/focus 시에만 나타나는 밑줄은 SC 1.4.1 만족 불가 (상시 밑줄 권장)
웹 페이지에서 '더보기', '자세히 보기', '바로가기'와 같이 목적이 모호한 텍스트로만 구성된 링크는 스크린리더 사용자의 링크 목록 탐색(Links List Navigation) 시 심각한 장애를 유발합니다. WCAG 2.2 성공 기준 2.4.4 (Link Purpose in Context, Level AA)에 따라, 프로그램적으로 연결된 상위 문맥(Programmatically Determined Context)과 명시적 aria-label 보완 기법을 설명합니다.
WCAG 2.2 SC 2.4.4 Link Purpose in Context 기준의 이해
WCAG 2.2 성공 기준 2.4.4는 모든 링크의 목적이 텍스트 자체만으로 또는 링크를 감싸는 프로그램적 문맥(동일 문단, 동일 리스트 항목, 동일 표 셀, 연결된 헤딩)을 통해 명확히 이해될 수 있어야 함을 명시합니다.
스크린리더 사용자는 Tab 키로 링크만 빠르게 훑어보거나 링크 목록 팝업(Links List)을 띄워 탐색합니다. 이때 화면에 '더보기'만 10개 나열되면 개별 링크가 어떤 페이지로 이동하는지 전혀 알 수 없습니다.
프로그램적으로 결정되는 상위 문맥(Programmatic Context)의 조건
단순히 시각적으로 옆에 카드가 있다고 해서 맥락이 인정되는 것이 아닙니다. HTML DOM 상에서 링크가 해당 카드 제목(Heading)을 포함하는 동일한 <article> 또는 <li> 요소 내부 구조로 결합되어 있어야 보조공학기기가 상위 문맥으로 인지합니다.
구조적 결합이 어려울 경우 aria-label 속성을 활용하여 시각적으로는 '더보기'로 유지하되 스크린리더에는 '[공지사항 제목] 더보기'로 전달되도록 구현해야 합니다.
모호한 텍스트 링크 보완 코드 및 패턴
다음은 시각적 디자인을 유지하면서 '더보기' 링크의 목적을 명확히 보완하는 3가지 구현 패턴입니다.
- aria-label 패턴: <a href='/news/1' aria-label='2026년 웹 접근성 가이드라인 개정안 자세히 보기'>자세히 보기</a>
- aria-labelledby 패턴: <h3 id='news-head-1'>웹 접근성 개정안</h3><a href='/news/1' aria-labelledby='news-head-1'>더보기</a>
- 시각적 숨김 텍스트 패턴: <a href='/news/1'>더보기<span class='sr-only'> - 웹 접근성 개정안</span></a>
실무 판단 흐름 및 적용 순서
- 웹 사이트 내 '더보기', '자세히 보기', '바로가기', 'GO' 형태의 링크를 전수 수집합니다.
- 스크린리더 링크 목록 팝업 창에서 해당 링크들이 독립적으로 식별 가능한지 테스트합니다.
- 식별이 불가능한 모호한 링크에 aria-label 또는 .sr-only 보완 구문을 적용합니다.
예외 조건 및 수동 검토 범위
- 주변 문맥(부모 문단, li)에서 목적을 유추할 수 있더라도 스크린리더의 링크 목록 탐색 모드에서는 링크 자체의 텍스트가 우선됩니다.
- 새 창 열림(target="_blank") 링크는 시각적 아이콘과 함께 '새 창으로 열림' 텍스트를 보조공학에 명시해야 합니다.
실무 핵심 질문과 답변 (FAQ)
‘더보기’라는 링크 텍스트를 사용하면 무조건 접근성 지침 위반인가요?
동일한 <article> 또는 <li> 내부에 카드 제목(Heading)과 함께 링크가 감싸져 있어 프로그램적 문맥(Programmatic Context)이 형성된 경우 위반이 아닙니다. 그러나 단독으로 배치된 경우 위반입니다. FAQ 전체 보기
aria-label로 링크 목적을 보완할 때 기존 텍스트와 어떻게 연동되나요?
WCAG SC 2.5.3 (Label in Name) 지침에 따라 aria-label 문구에는 시각적으로 보이는 '더보기'라는 단어가 포함되어야 합니다. (예: aria-label='웹 접근성 개정안 더보기') FAQ 전체 보기
새 창으로 열리는 링크의 경우 접근성 텍스트 처리를 어떻게 해야 하나요?
target='_blank' 링크는 사용자에게 예고 없는 창 전환을 유발하므로, aria-label 또는 .sr-only 텍스트로 '(새 창으로 열림)'이라는 안내 문구를 텍스트 뒤에 보완해야 합니다. FAQ 전체 보기