Anatomy
Link는 destination action이라는 의미가 가장 중요합니다.
Destination
현재 문맥 안에서 명령을 실행하는 Button과 달리, Link는 다른 위치나 문서로 이동합니다.
Label
링크 텍스트만 읽어도 이동 결과를 예측할 수 있어야 합니다.
State
현재 위치는 aria-current와 비색상 표현을 함께 사용합니다. 외부 이동 의미가 중요하다면 작성자가 accessible markup으로 명시합니다.
States
Inline, navigation, standalone 표현은 같은 destination semantics를 유지합니다.
Inline
본문 안에서는 기본 underline을 유지합니다.
Navigation
bounded app/page navigation에서 사용하며 현재 위치는 aria-current="page"로 표시합니다.
Standalone
텍스트 목적지를 더 큰 조작 영역으로 보여줄 때 사용하되 Button처럼 보이게 만들지 않습니다.
Usage
이동은 Link, 제자리 명령은 Button으로 구분합니다.
URL이나 문서 위치를 바꾸는 행동에는 Link를 사용합니다. 저장, 실행, 삭제, 모달 열기처럼 현재 문맥에서 명령을 수행하는 행동에는 Button을 사용합니다.
How to use
조작 방식보다 destination 의미를 먼저 보존합니다.
Hierarchy
본문 link를 장식적 CTA로 과장하지 않습니다. navigation/standalone variant는 정보 위계가 실제로 다를 때만 선택합니다.
Responsive
inline link는 자연스럽게 줄바꿈됩니다. navigation/standalone은 coarse pointer에서 WBDS touch minimum을 확보합니다.
Accessibility
이름, 현재 위치, 포커스가 각각 독립적으로 읽혀야 합니다.
Keyboard
native anchor semantics를 유지하고 visible focus를 제거하지 않습니다.
Current page
현재 위치는 색만으로 전달하지 않고 aria-current와 underline을 함께 사용합니다.
New window
target 속성만 보고 WBDS가 의미를 추론하지 않습니다. 새 창/외부 이동이 사용자에게 중요하면 accessible label이나 주변 copy에서 알려야 합니다.