앵커 텍스트 분포 분석기

브라우저 처리

HTML의 링크 글자를 양호·모호함('더보기', '여기')·글자 없음·주소 그대로로 분류하고, 같은 글자가 서로 다른 곳을 가리키는 링크를 찾아 목적지가 드러나는 링크 글자로 고칠 곳을 알려 줍니다.

도구 실행입력 후 결과 확인

앵커 텍스트 분포 분석기 샘플 실행

'더보기', '여기를 클릭' 같은 링크 글자는 주변 문맥을 보지 않으면 어디로 가는지 알 수 없습니다. 화면 낭독기 사용자는 링크만 모아 듣기도 하는데, '더보기, 더보기, 더보기'로는 아무것도 고를 수 없습니다. 검색엔진도 링크 글자로 도착 페이지의 내용을 짐작합니다.

브라우저 처리

샘플 입력

<a href="/sale">더보기</a>
<a href="/new">더보기</a>
<a href="/products/linen">린넨 원피스 상세 보기</a>
<a href="/help"></a>
<a href="https://shop.example.com/event">https://shop.example.com/event</a>

샘플 결과

글자 없음 1 · 모호함 2 · 주소 그대로 1 · 양호 1
⚠ 같은 글자로 다른 곳을 가리키는 링크: "더보기" → 2곳

상태	링크 글자	주소
모호함	더보기	/sale
모호함	더보기	/new
양호	린넨 원피스 상세 보기	/products/linen
글자 없음	-	/help
주소 그대로	https://shop.example.com/event	https://shop.example.com/event

자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.

앵커 텍스트 분포 분석기 사용 가이드

이 분석기는 링크마다 실제로 읽히는 글자(내용, 없으면 aria-label, 그것도 없으면 링크 안 이미지의 alt)를 뽑아 네 가지로 분류합니다. 더보기·자세히·여기·클릭·바로가기 같은 한국어·영어 모호한 글자, 글자가 아예 없는 링크, 주소를 그대로 글자로 쓴 링크를 찾습니다.

같은 글자로 서로 다른 주소를 가리키는 링크도 따로 모아 보여 줍니다. '더보기'가 세 곳을 가리킨다면 각각 '신상품 더보기', '세일 상품 더보기'처럼 구분해야 합니다.

사용 방법

'검사할 HTML' 칸에 페이지 소스를 붙여 넣습니다.
'실행'을 누르면 분류별 개수와 링크 표가 나옵니다.
'모호함'과 '글자 없음' 링크부터 목적지를 적은 글자로 바꿉니다.
같은 글자가 여러 곳을 가리키는 경고가 사라질 때까지 다시 검사합니다.

예시: '더보기'가 반복되는 첫 화면

입력

<a href="/sale">더보기</a>
<a href="/new">더보기</a>
<a href="/products/linen">린넨 원피스 상세 보기</a>
<a href="/help"></a>
<a href="https://shop.example.com/event">https://shop.example.com/event</a>

결과

글자 없음 1 · 모호함 2 · 주소 그대로 1 · 양호 1
⚠ 같은 글자로 다른 곳을 가리키는 링크: "더보기" → 2곳

상태	링크 글자	주소
모호함	더보기	/sale
모호함	더보기	/new
양호	린넨 원피스 상세 보기	/products/linen
글자 없음	-	/help
주소 그대로	https://shop.example.com/event	https://shop.example.com/event

아이콘만 있는 링크는 aria-label이나 이미지 alt가 있으면 그 글자로 판단합니다.

이럴 때 쓰면 좋아요

웹 접근성 심사의 '링크 목적' 항목을 점검할 때
카드형 목록의 '더보기' 링크를 정리할 때
아이콘 버튼 링크에 이름이 있는지 확인할 때
블로그 글의 링크 글자를 검색 친화적으로 다듬을 때

문제가 생겼을 때

디자인상 '더보기'만 보여야 합니다.

화면에는 '더보기'를 두고 화면 낭독기용 숨김 글자로 '신상품'을 덧붙이거나 aria-label='신상품 더보기'를 주세요.

아이콘 링크가 '글자 없음'으로 나옵니다.

아이콘 이미지에 alt를 넣거나 링크에 aria-label을 주면 이름이 생깁니다.

주소를 그대로 링크 글자로 썼습니다.

긴 주소는 읽기 어렵습니다. '이벤트 안내 페이지'처럼 목적지 이름을 쓰세요.

활용 팁

링크 글자만 읽어도 어디로 가는지 알 수 있으면 좋은 링크입니다.
같은 곳을 가리키는 링크는 같은 글자로 통일하면 혼란이 줄어듭니다.
링크 종류와 개수는 내부 링크 분석기로 함께 확인하세요.

자주 묻는 질문

어떤 글자를 모호하다고 보나요?

더보기, 자세히(보기), 여기, 클릭, 바로가기, 보기, 링크, 이동과 영어 click here, read more, learn more, here, more, link처럼 목적지를 알려 주지 않는 글자입니다.

title 속성은 반영하나요?

title은 보조기기에서 일관되게 읽히지 않아 판단에 쓰지 않습니다. 링크 내용, aria-label, 이미지 alt 순서로 봅니다.

같은 글자가 같은 곳을 가리키면요?

그건 경고하지 않습니다. 서로 다른 곳을 같은 글자로 가리킬 때만 구분하라고 알려 줍니다.