모든 패턴
Link
다른 페이지나 리소스로 이동하는 하이퍼링크 패턴
관련 WCAG 기준 — 클릭하여 상세 보기
기본 코드 예시
Baseline (React)tsx
Loading...
공통 베이스라인
모든 디자인 시스템에 적용Must4
네이티브 <a> 또는 role="link"
네이티브 <a href>를 사용하세요. 비의미적 요소를 링크로 사용할 경우 role="link"와 키보드 처리를 추가해야 합니다.
설명적 접근 가능 이름
링크 텍스트 또는 aria-label이 목적지를 설명해야 합니다. "클릭하세요", "더보기" 같은 모호한 텍스트를 피하세요.
Enter로 활성화
포커스된 링크에서 Enter 키를 누르면 이동이 실행되어야 합니다.
유효한 href
<a> 요소에 href 속성이 있어야 키보드 포커스가 기본으로 적용됩니다.
Should3
새 탭 열기 시 안내
새 탭에서 열리는 링크는 텍스트나 aria-label에 이를 표시하세요 (예: "(새 탭에서 열림)").
포커스 표시
기본 아웃라인을 제거할 경우 더 강한 대안을 제공하세요.
텍스트와 구별 가능
본문 내 링크는 색상 외에 밑줄 등으로도 구별할 수 있어야 합니다.
Avoid2
빈 href 또는 # 금지
<a href="#">이나 <a href="javascript:void(0)">는 탐색이 아닌 액션에 사용하지 마세요. 대신 <button>을 사용하세요.
이미지 링크에 alt 텍스트 누락 금지
이미지만 있는 링크는 alt 텍스트 없이는 접근 가능 이름이 없습니다.
디자인 시스템별 구현
추가 체크포인트
MUI Link 컴포넌트 사용
MUI Link는 <a>를 기반으로 하므로 기본 접근성이 유지됩니다. underline prop을 "always"로 설정하는 것을 권장합니다.
코드 샘플
MUI Linktsx
Loading...
구현 노트
- –MUI Link는 component prop으로 Next.js Link 등 라우터와 통합할 수 있습니다.
- –color prop 변경 시 대비율을 확인하세요.