Day 4) 접근성을 고려한 링크 작성법

🎄  A11y Advent Calendar (번역) 4일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :)

 

이번엔 링크에 대해 이야기해 보겠습니다. 스크린 리더는 페이지의 모든 링크를 나열해 사용자가 더 빠르게 탐색할 수 있도록 돕는 기능을 제공합니다. 또한, 탭 키를 사용하면 링크 간을 이동하며 링크 사이의 텍스트는 건너뛸 수 있습니다. 이 과정에서 링크는 페이지의 콘텐츠나 문법적 문맥과 분리된 상태로 보여지게 됩니다.

 

이러한 이유로, 링크는 그 자체로 명확하고 설명 가능해야 합니다. 링크가 포함된 문장의 나머지 부분 없이도, 링크 자체만으로 의미를 전달할 수 있어야 합니다. 링크의 내용은 사용자가 클릭했을 때 수행될 작업이나 이동할 페이지를 명확히 설명해야 합니다.

 

만약 페이지에서 링크가 어떻게 보이는지 확인하고 싶다면 Tobias Bengfort의 접근성 확장 프로그램을 추천드립니다. README 내용을 해석하여 여러분께 공유해 드리겠습니다. 여러분을 위해 🤓

 

1. 가장 최신 버전을 다운받고 압축을 해제해줍니다. (이 글을 최초 작성했을 당시는 2.0.0이었군요? )

 

2. 크롬에서 chrome://extensions/를 입력하고 이동합니다.

• 이때 "Developer mode" 가 체크되어있도록 하세요. (오른쪽 위)
• 압축해제된 확장 프로그램을 로드합니다. 라는 버튼을 클릭하고 압축해제된 확장프로그램을 추가해주세요.
• 맨 왼쪽의 단축키 버튼을 눌러서 프로그램을 활성화하기 위해 원하는 단축키를 추가해줍니다.

확장프로그램을 실행했을 때 아래와 같은 화면이 나올 것입니다. 이리저리 눌러보면서 페이지가 어떻게 구성되어있는지 확인해보세요 :)

 

링크가 그 자체로 설명이 부족하다면 반드시 내용을 수정해야 합니다. “여기를 클릭하세요”, “자세히 알아보기”와 같은 의미 없는 링크는 사용하지 말아야 합니다. 또한, 대부분의 스크린 리더는 링크 텍스트 앞에 이미 ‘링크’라는 단어를 붙여 읽어주므로, 링크 텍스트에 굳이 해당 단어를 포함할 필요도 없습니다.

 

예를 들어, 리스트의 각 항목에 수정 버튼을 추가한다고 가정해봅시다. 이 경우, 스크린 리더를 사용해 탭으로 이동하면 모든 링크가 단순히 “수정”으로만 표시될 것입니다. 이는 사용자에게 혼란을 줄 수 있고, 사용자가 자신이 어느 항목의 수정 링크에 있는지 파악하지 못하게 만듭니다.

 

이 문제를 해결하려면, 어제 배운 내용을 활용하여 링크에 시각적으로 숨겨진 콘텐츠를 추가하는 방식을 사용할 수 있습니다. 이렇게 하면 링크가 스크린 리더에서 더욱 명확하게 읽히면서도 화면 디자인에는 영향을 주지 않습니다.

<a href="/edit/1234567890">
  Edit <span class="sr-only">item [distinguishable item name]</span>
</a>

 

이처럼 접근성을 고려한 링크 작성은 단순히 텍스트를 추가하는 것을 넘어, 모든 사용자가 페이지를 명확히 이해하고 편리하게 탐색할 수 있도록 돕는 중요한 작업입니다. 작은 변화가 사용자 경험에 큰 차이를 만들 수 있다는 점을 기억하며, 오늘 공부한 내용을 적용해보셨으면 합니다. 다음 시간엔 페이지의 제목에 관해 다뤄보겠습니다 :) 오늘도 봐주셔서 감사합니다 

 

출처: Day 4) Self-Explanatory Links