href 없는 앵커라는 안티 패턴
가짜 링크가 키보드 사용자와 스크린 리더 사용자에게 문제를 일으키는 이유를 알아보세요.
href 없는 앵커라는 안티 패턴은(는) CoddyKit의 무료 Web Accessibility Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Web Accessibility Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
가짜 링크
흔한 안티 패턴은 href가 없는 앵커에 클릭 처리기를 연결하여 버튼처럼 동작하게 만드는 것입니다. 겉보기에는 괜찮지만 여러 기능을 망가뜨립니다.
<a onclick="openMenu()">Menu</a>href가 없으면 링크도 없습니다
앵커는 href가 있을 때만 실제 링크로 간주됩니다. href가 없으면 브라우저는 이를 대화형 요소로 처리하지 않습니다.
탭 순서에서 빠집니다
href가 없는 앵커는 포커스를 받을 수 없습니다. 따라서 키보드 사용자가 페이지를 탭으로 이동할 때 건너뛰게 되어 절대 접근할 수 없습니다.
키보드로 실행할 수 없습니다
강제로 포커스를 이동시키더라도 가짜 링크는 기본적으로 Enter와 스페이스 키를 무시하므로 키보드 사용자가 여전히 활성화할 수 없습니다.
스크린 리더가 혼란스러워합니다
href가 없으면 스크린 리더가 앵커를 링크로 알리지 않을 수 있습니다. 그러면 사용자는 이것이 사용할 수 있는 요소라는 사실을 알지 못합니다.
href에 해시를 넣는 임시방편
일부 개발자는 해시만 있는 href를 추가하여 문제를 해결하려 합니다. 그러면 포커스는 받을 수 있지만 페이지가 맨 위로 이동하여 불편합니다.
<a href="#" onclick="openMenu()">Menu</a>올바른 해결 방법
컨트롤이 동작을 수행한다면 실제 버튼을 사용하세요. 포커스, 키보드 지원, 올바른 역할을 별도의 작업 없이 얻을 수 있습니다.
<button type="button" onclick="openMenu()">Menu</button>링크여야 하는 경우
컨트롤이 실제로 탐색을 수행한다면 앵커를 유지하고 목적지를 가리키는 실제 href를 지정하세요.
<a href="/menu">Menu</a>사람들이 이렇게 하는 이유
개발자는 밑줄 스타일을 적용하기 쉽다는 이유로 앵커를 선택하는 경우가 많습니다. 하지만 접근성을 포기하지 않고 버튼에도 같은 스타일을 적용할 수 있습니다.
커서도 속일 수 있습니다
href가 없는 앵커는 기본적으로 포인터 커서도 표시하지 않습니다. 따라서 시각적으로 페이지를 보는 사용자에게 실제로 클릭할 수 있는 요소가 아니라는 인상을 줍니다.
핵심 내용
가짜 대화형 요소를 만들지 마세요. 동작에는 실제 버튼을, 탐색에는 href가 있는 앵커를 사용하고 임시방편은 피하세요.
빠른 확인
href 없이 클릭 처리기만 연결한 앵커가 문제가 되는 이유는 무엇인가요?
복습
href가 없는 앵커는 가짜 링크이므로 포커스를 받을 수 없고 키보드로 실행할 수도 없습니다. 동작에는 버튼을, 탐색에는 실제 href를 사용하세요. ✅
자주 묻는 질문
“href 없는 앵커라는 안티 패턴” 강의는 무료인가요?
네 — “href 없는 앵커라는 안티 패턴” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Web Accessibility Academy 강의 전체를 잠금 해제할 수 있습니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“href 없는 앵커라는 안티 패턴”에서 뭘 배우나요?
가짜 링크가 키보드 사용자와 스크린 리더 사용자에게 문제를 일으키는 이유를 알아보세요. 브라우저에서 직접 실행하는 실습 코드로 Web Accessibility Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Web Accessibility Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Web Accessibility Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“href 없는 앵커라는 안티 패턴” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Web Accessibility Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Web Accessibility Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 링크는 장소로, 버튼은 동작으로
- 맥락 없이도 의미가 통하는 링크 텍스트
- 동작을 알려 주는 버튼
- href 없는 앵커라는 안티 패턴