브라우저 안에서만 계산

링크·버튼 이름과 색상 의존 검사기

빈 링크·버튼과 모호한 문구를 찾고, 링크 목적의 문맥 판단과 색상 구분 하위검사를 분리합니다.

무엇을 결정할 수 있나요?

웹페이지를 구성하는 수많은 하이퍼링크 중 '더보기', '자세히 보기', '바로가기'와 같은 단독 문구는 화면을 보지 못하는 스크린리더 사용자에게 목적지를 전혀 알 수 없는 암흑과 같습니다. 특히 시각장애인이 페이지 내의 링크만 모아둔 '링크 목록 다이얼로그(Links List Dialog)'를 열었을 때 같은 이름의 '더보기' 링크 수십 개가 나열되는 치명적인 혼선이 발생합니다.

본 도구는 링크 텍스트의 맥락 독립성(WCAG 2.4.4 Link Purpose in Context)과 아이콘 링크의 Accessible Name 누락 여부를 정밀 분석합니다.

텍스트 없이 SVG 아이콘만으로 구성된 버튼이나 링크에 명확한 역할을 부여하는 aria-label 적용법과 글로벌 다국어 번역을 지원하는 .sr-only 텍스트 병기 기법을 함께 검토합니다.

이 페이지의 고유 질문: ‘더보기’ 링크를 자동 실패로 단정하지 않으면서 빈 이름과 색상 의존은 어떻게 찾는가?

로컬 계산 도구

값을 입력해 검사하기

입력값은 브라우저 상태에서만 처리하며 서버·URL·Analytics로 보내거나 저장하지 않습니다.

자동으로 확인하는 범위

빈 링크·버튼과 아이콘-only 이름 후보
모호 문구와 동일 문구·다른 목적지 신호
링크색·본문색 대비 (옵션 입력 시 계산)
지속 underline과 hover·focus 단서 분리

입력값과 단위

HTML 코드: 정적 링크·버튼 HTML 조각
선택 스타일: 링크색, 본문색, 배경색, underline과 상호작용 단서

판정할 때 지키는 원칙

이름이 비어 있으면 fail입니다.
모호한 문구는 주변 문맥을 알 수 없어 manual_review입니다.
항상 보이는 underline 같은 비색상 단서가 있으면 색 의존 하위검사만 pass로 표시합니다.

자체 검증 도식

자체 검증 도식: 본문 링크는 주변 일반 텍스트와 3:1 대비를 이루더라도 색상 외의 비색상 단서(상시 밑줄, 아이콘 등)를 함께 제공해야 WCAG 1.4.1 색상 사용 기준을 만족합니다.

수정 전·후 예제

아이콘 버튼 이름

빈 이름

<button><svg aria-hidden="true">…</svg></button>

기능 이름 제공

<button aria-label="검색 열기"><svg aria-hidden="true">…</svg></button>

아이콘의 의미를 버튼의 접근 가능한 이름으로 제공합니다.

반복되는 더보기

목적지 식별 어려움

<a href="/contrast">더보기</a>

링크 자체에 목적 포함

<a href="/contrast">명도 대비 검사 방법 더보기</a>

주변 문맥으로 충분할 수도 있지만 링크 목록과 음성 명령 사용성을 함께 고려하면 구체적인 이름이 안정적입니다.

실무 판단 가이드

‘더보기’ 링크는 무조건 오류일까?

먼저 바로잡을 통념

‘더보기’라는 단어는 언제나 실패이며, 링크색 대비만 높이면 링크 구분도 해결된다.

링크 목적은 링크 텍스트 단독 또는 프로그램적으로 판단 가능한 문맥에서 이해될 수 있는지 확인합니다. 문맥을 읽지 않은 단어 목록만으로 자동 실패를 확정할 수 없습니다.

본문 속 링크를 색만으로 구분하는 문제는 링크 목적과 별개의 색상 사용 하위검사입니다. 지속적인 밑줄 같은 비색상 단서가 가장 단순한 해결책이 될 수 있습니다.

판단 순서

빈 링크와 버튼을 먼저 찾는다.
링크 텍스트와 프로그램적 문맥을 함께 읽는다.
같은 이름이 다른 목적지를 가리키는 목록을 확인한다.
본문과 링크의 비색상 구분 단서를 확인한다.
hover뿐 아니라 focus에서도 추가 단서가 유지되는지 검사한다.

실패했을 때 복구

빈 아이콘 버튼에는 기능을 설명하는 이름을 제공합니다.
모호한 문구는 목적을 포함하도록 고치거나 프로그램적 문맥을 명확히 합니다.
본문 링크에는 지속적인 비색상 단서를 제공하고 focus 상태를 재검사합니다.

회귀 테스트와 검수 증거

아래 fixture는 실제 고객 사례가 아니라 판정 로직이 같은 입력에 같은 결과를 내는지 확인하는 공개 회귀 자료입니다. 현장 사용 경험으로 과장하지 않습니다.

링크·버튼 이름과 색상 의존 검사기 회귀 입력과 기대 결과
Fixture ID	입력	기대 결과
`link-named`	<a href="/guide">명도 대비 검사 방법</a>	이름 존재
`link-empty`	<a href="/guide"></a>	fail
`link-ambiguous`	<h2>명도 대비</h2><a href="/guide">더보기</a>	manual_review

자동 판정의 한계

주변 문맥이 목적을 충분히 설명하는지
CSS cascade와 실제 underline
SVG·이미지 링크의 의미
JavaScript 동작과 새 창·다운로드 안내
사이트 전체 이름 일관성

반드시 남는 수동 확인

링크만 모아 읽어도 목적을 구분할 수 있는가?
같은 이름이 다른 목적지를 가리킬 때 주변 문맥이 충분한가?
키보드 focus에서도 링크 구분 단서가 나타나는가?
아이콘의 기능 이름이 화면 문구와 일치하는가?

공식 상세 근거

로직 버전 html-analysis-1.0.0 · 공개 검수일 2026-08-04 · 검수 책임 서호영 (운영·콘텐츠 검토 책임)

이번 공개 검수 범위

링크 목적·색상 사용 조건과 정적 이름 후보 범위 대조, Chromium 입력 검수

테스트 증거: 빈 이름·모호 문구·색상 단서 단위 테스트와 Playwright 흐름
콘텐츠 검토: ‘더보기’ 통념과 색 이외 단서 판단을 도구 본문에 통합
미검사·한계: 전체 페이지 문맥·CSS cascade 미검사
미검사·한계: 실제 음성 명령 사용성 미검사

자주 묻는 질문

단독 '더보기' 링크의 접근성을 가장 쉽게 보완하는 방법은 무엇인가요?

<a href='...'>더보기 <span class='sr-only'>- 2026년 공지사항</span></a> 형태로 시각적으로는 깔끔하게 '더보기'만 노출하고, 스크린리더에게는 구체적인 기사 제목이나 대상 문맥을 함께 낭독시키는 기법이 가장 표준적이고 효과적입니다.

SVG 아이콘만 들어있는 버튼이나 링크는 어떻게 처리하나요?

내부의 <svg> 태그에는 aria-hidden='true'를 주어 장식용으로 숨기고, 부모 <a>나 <button> 태그에 aria-label='장바구니 담기'처럼 명확한 기능 목적을 텍스트로 부여해야 합니다.

새 창으로 열리는 링크는 어떻게 안내해야 하나요?

target='_blank' 링크는 시각장애인에게 예고 없이 새 창이 열려 탐색 흐름을 방해하므로, 링크 텍스트 뒤에 '(새 창으로 열림)'이라는 숨김 텍스트를 넣거나 title 속성을 부여해야 합니다.