ARIA 접근성 가이드

역할 · 위젯

role="link"

누르면 다른 페이지나 같은 페이지의 다른 위치로 이동하는 참조입니다.

기초HTML 요소 우선

한눈에 보기

분류
위젯
대응 HTML
<a href>, <area href>
이름 정하는 방법
콘텐츠, 작성자
이름 필수
예
필수 상위 요소
없음
필수 하위 요소
없음

설명

link는 리소스로 이동시키는 상호작용 요소입니다. href가 있는 <a>가 이 역할을 기본으로 가지며, 새 탭에서 열기, 주소 복사, 방문 기록 표시, 브라우저 기록(뒤로 가기)이 모두 자동으로 됩니다. role="link"로는 이런 브라우저 기능을 흉내 낼 수 없으므로 가능하면 항상 <a href>를 씁니다.

href가 없는 <a>는 링크가 아닙니다(역할 없음, 포커스도 받지 않음). 링크처럼 보이게 만들려면 href를 넣어야 합니다.

링크와 버튼 구분

링크와 버튼 구분
상황알맞은 역할
다른 페이지, 같은 페이지의 다른 위치(#id), 파일 다운로드link
폼 제출, 대화상자 열기, 패널 펼치기, 삭제·저장 실행button
SPA에서 주소(URL)가 바뀌는 화면 전환link (<a href> + 라우터)

현재 페이지 표시

내비게이션에서 지금 보고 있는 페이지의 링크에는 aria-current="page"를 붙입니다. 색깔만으로 현재 위치를 표시하면 화면낭독기 사용자는 알 수 없습니다.

테스터 관점

  • 링크 목록(NVDA Insert+F7)에서 링크 텍스트만으로 목적지를 알 수 있는지 확인합니다. “더 보기”, “여기”가 반복되면 결함입니다.
  • role="link"로 만든 요소가 Enter로 동작하는지 확인합니다. 링크는 Space로 실행되지 않는 것이 정상입니다.
  • 새 창으로 열리는 링크는 그 사실을 텍스트로 알리는지 확인합니다.

함께 쓰는 속성

지원 속성

aria-disabledaria-expandedaria-haspopup

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

키보드 동작

키보드 동작
키동작
Enter링크를 실행해 목적지로 이동합니다.
Shift + F10(선택 사항) 링크에 대한 컨텍스트 메뉴가 있으면 엽니다. 네이티브 링크는 브라우저 메뉴가 열립니다.
Tab링크로 포커스를 옮깁니다. <a href>는 기본으로 탭 순서에 들어갑니다.

사용 예

네이티브 링크

권장권장
<a href="/orders">주문 내역</a>
<nav aria-label="주 메뉴">
  <a href="/" aria-current="page">홈</a>
  <a href="/shop">상점</a>
</nav>

어쩔 수 없이 role="link"를 쓸 때

포커스, Enter 처리, 이동 동작을 모두 직접 넣어야 합니다. 새 탭 열기 등은 여전히 지원되지 않습니다.

HTML
<span role="link" tabindex="0" data-href="/orders">주문 내역</span>
<script>
  var l = document.querySelector('[role="link"]');
  function go() { location.href = l.dataset.href; }
  l.addEventListener('click', go);
  l.addEventListener('keydown', function (e) { if (e.key === 'Enter') go(); });
</script>

링크로 버튼 흉내 내기

비권장비권장
<a href="#" onclick="openDialog()">로그인</a>
<!-- 이동하지 않으므로 버튼이어야 합니다 -->
<button type="button" onclick="openDialog()">로그인</button>

직접 해 보기

두 링크를 Tab으로 이동해 Enter로 실행해 보세요. 직접 만든 링크는 Enter 처리를 넣었지만, 마우스 오른쪽 클릭 메뉴(새 탭에서 열기 등)는 나타나지 않습니다.

배송 안내로 이동 (a 요소) 배송 안내로 이동 (span role=link)
배송 안내 — 주문 후 2~3일 안에 도착합니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
링크에 포커스주문 내역, 링크
방문한 링크에 포커스주문 내역, 방문한 링크
현재 페이지 링크에 포커스홈, 현재 페이지, 링크

사용 지침

이렇게 쓰세요

  • 이동은 <a href>로 만듭니다. 목적지를 알 수 있는 링크 텍스트를 씁니다.
  • 현재 페이지 링크에는 aria-current="page"를 붙입니다.
  • 새 창·새 탭으로 열리면 링크 텍스트나 숨긴 텍스트로 알립니다.

이렇게 쓰지 마세요

  • href 없는 <a>에 클릭 이벤트만 붙이지 않습니다. 포커스도 역할도 없습니다.
  • “여기를 클릭”, “더 보기”처럼 맥락 없이 반복되는 링크 텍스트를 쓰지 않습니다.
  • 링크 안에 다른 링크나 버튼을 넣지 않습니다.
buttonnavigationmenuitem

이 역할을 쓰는 패턴

브레드크럼(현재 위치)페이지 레이아웃(랜드마크)

참고 자료