웹 접근성과 링크 태그의 중요성
웹사이트를 만들 때 우리는 수많은 링크를 생성합니다. 다른 페이지로 이동하거나 외부 사이트로 연결할 때 주로 <a> 태그를 사용하게 됩니다. 하지만 이 링크가 모든 사용자에게 공평하게 작동하고 있을까요? 시각 장애인이 스크린 리더를 통해 웹사이트를 이용할 때, 마우스를 사용하기 어려운 사용자가 키보드만으로 탐색할 때, 링크 태그가 올바르게 작성되어 있지 않다면 큰 불편을 겪게 됩니다.
[목차]
이번 글에서는 초보 웹 퍼블리셔와 개발자가 반드시 알아야 할 링크 태그 접근성 체크리스트를 살펴보고, 누구나 쉽게 정보를 얻을 수 있는 웹사이트를 구축하는 실천 방법을 알아봅니다.
링크 텍스트만으로 목적지 이해하기
접근성 측면에서 가장 흔히 범하는 실수는 ‘여기’ 혹은 ‘클릭’ 같은 모호한 문구를 링크 텍스트로 사용하는 것입니다. 스크린 리더 사용자 중에는 웹페이지 전체의 링크 목록만 따로 추출해서 듣는 경우가 많습니다. 이때 ‘여기’라는 단어만 반복해서 들리면 링크가 어디로 향하는지 전혀 알 수 없습니다.
- 잘못된 예시: 자세한 내용은 <a href=”#”>여기</a>를 클릭하세요.
- 올바른 예시: <a href=”#”>2024년 웹 접근성 지침 안내서</a>를 확인하세요.
링크 텍스트는 해당 링크를 클릭했을 때 이동할 페이지나 콘텐츠의 핵심 내용을 명확하게 담고 있어야 합니다.
키보드 탐색과 포커스 가시성 확보
마우스를 쓸 수 없는 사용자나 지체 장애인은 키보드의 ‘Tab’ 키를 이용해 웹페이지의 링크 사이를 이동합니다. 이때 현재 어느 링크에 포커스가 위치해 있는지 시각적으로 명확하게 드러나야 합니다.
CSS에서 outline: none; 속성을 무분별하게 제거하면 키보드 사용자가 자신이 어디에 위치해 있는지 알 수 없어 접근성이 크게 떨어집니다. 브라우저 기본 포커스 스타일을 제거할 경우, 반드시 :focus 가상 클래스를 활용해 뚜렷한 대체 시각 효과를 제공해야 합니다.
새창 열기와 사용자 고지 방법
링크를 클릭했을 때 현재 창이 아니라 새로운 탭이나 창이 열리는 경우가 있습니다. 일반 사용자는 무심코 넘어가기 쉽지만, 스크린 리더 사용자나 인지 장애인은 예고 없이 새 창이 열리면 당황하거나 길을 잃기 쉽습니다.
새 창으로 열리는 링크라면 target="_blank" 속성을 사용할 뿐만 아니라, 텍스트 자체에 ‘(새 창)’ 등의 안내를 포함하거나 스크린 리더 전용 숨김 텍스트를 제공하는 것이 좋습니다.
링크 태그 접근성 점검 항목 요약
실제 웹페이지를 발행하기 전, 아래의 표를 참고하여 링크 관련 요소를 점검해 보세요.
| 점검 항목 | 판단 기준 | 개선 방안 |
|---|---|---|
| 링크 텍스트 명확성 | ‘여기’, ‘클릭’ 등 모호한 단어 사용 여부 | 목적지를 유추할 수 있는 구체적 명칭 사용 |
| 키보드 포커스 | Tab 키 이동 시 포커스 표시 여부 | outline 속성 유지 및 명확한 포커스 디자인 적용 |
| 새 창 열기 고지 | target=”_blank” 사용 시 사전 안내 여부 | 텍스트 또는 시각 보조 도구를 통한 새 창 안내 |
| 아이콘 링크 대체 텍스트 | 이미지만 있는 링크에 대안 제공 여부 | aria-label 또는 alt 속성으로 목적지 설명 |
초보자가 자주 하는 실수 모음
링크 태그를 다룰 때 초보자들이 흔히 겪는 시행착오를 정리했습니다.
- div나 span에 click 이벤트만 넣는 경우: 시맨틱한
<a>태그를 쓰지 않고 일반 요소를 클릭 가능하게 만들면 키보드 접근성과 스크린 리더 인식률이 떨어집니다. 링크는 가급적<a>태그를 사용하세요. - URL 주소 자체를 길게 노출하는 경우: 복잡한 인터넷 주소가 그대로 링크 텍스트로 들어가면 가독성이 떨어집니다. 사용자가 읽기 편한 자연스러운 문장으로 대체하세요.
- 색상으로만 링크 구분하기: 본문 텍스트와 링크 색상이 구분이 안 될 정도로 유사하면 시각 장애인뿐만 아니라 일반 사용자도 링크를 찾기 어렵습니다. 밑줄이나 뚜렷한 색상 대비를 적용해야 합니다.
마무리하며
웹 접근성은 복잡하고 어려운 전문가만의 영역이 아닙니다. 기본적인 HTML 구조를 잡을 때 조금만 신경 쓰면 누구나 평등하게 이용할 수 있는 웹사이트를 만들 수 있습니다. 오늘 살펴본 링크 태그 체크리스트를 바탕으로, 운영 중인 웹사이트의 코드를 점검해 보시기 바랍니다.