브라우저 안에서만 계산

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

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

무엇을 결정할 수 있나요?

링크와 버튼의 텍스트·ARIA 이름 후보를 추출하고 빈 조작 요소를 명확한 오류로 표시합니다.

‘더보기’, ‘여기’처럼 문맥에 따라 목적이 달라지는 표현은 자동 실패가 아니라 주변 제목과 문장까지 확인할 manual_review입니다.

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

로컬 계산 도구

값을 입력해 검사하기

입력값은 브라우저 상태에서만 처리하며 서버·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 미검사
미검사·한계: 실제 음성 명령 사용성 미검사

자주 묻는 질문

‘더보기’는 항상 오류인가요?

아닙니다. 같은 문장이나 제목과 프로그램적으로 연결된 문맥에서 목적이 명확할 수 있으므로 수동 검토합니다.

링크색 대비만 높이면 충분한가요?

본문과 링크를 색만으로 구분한다면 추가 조건이 있습니다. 지속적인 밑줄 같은 비색상 단서를 쓰는 방법도 검토하세요.