널리

안녕하세요. N-Visions입니다.

스크린 리더로 웹서핑하다 보면 같은 이름의 링크가 두 번 이상 반복되는 경우가 있습니다. 이렇게 중복된 이름의 링크가 제공되는 이유는 섬네일 이미지 링크와 단순 텍스트 링크가 함께 제공되기 때문인 경우가 대부분입니다.

네이버 뉴스에서 그 예를 확인할 수 있습니다.
네이버 뉴스에 접속하면 ‘주요 뉴스’섹션에 오늘의 핫뉴스, 정치, 사회, 경제 등의 섹션이 있습니다. 이 글에서는 경제 섹션을 살펴보겠습니다.  

스크린 리더 사용자는 Heading 단위로 이동하는 빠른 탐색키 ‘h’를 눌러 해당 섹션으로 이동합니다. 또는 경제 섹션이 Heading Level 4임으로 숫자 ‘4’를 눌러 이동할 수도 있습니다. ‘일반’, ‘금융’, ‘생활경제’ 카테고리와 위, 아래로 스크롤 할 수 있는 링크를 지나면 섹션에 속하는 뉴스 제목 링크가 두 번 반복되는 것을 확인할 수 있습니다. 스크린 리더는 첫 번째 뉴스 제목 링크에 이미지가 있다는 사실을 알려 줍니다. 이 이미지 링크가 기사 섬네일의 이미지 링크입니다.

(그림 설명: 섬네일 이미지 링크와 텍스트 링크가 함께 제공되는 예, 출처: 네이버 뉴스)

섬네일 이미지 링크의 대체텍스트와 링크텍스트가 같은 목적지를 가지고 있다면 스크린 리더를 이용해 웹 페이지를 탐색하는 것에 아직 익숙하지 않은 사용자들은 페이지 구조를 한 번에 이해하기 어렵거나 오해할 수 있습니다. 이 문제가 구체적으로 어떻게 나타나는지 실제 스크린 리더가 해당 부분을 처리하는 음성을 들어봅시다.

시연 음성 듣기

(시연 음성 내용: 커피 한 잔 뽑는데 물 132L 퍼붓는다 그래픽 링크, 커피 한 잔 뽑는데 물 132L 퍼붓는다 링크)

시연 음성을 들어보시면 ‘그래픽’이라는 음성 출력 외에는 모두 같은 내용을 읽어줍니다. 이러한 문제를 어떻게 해결할 수 있을까요?

첫째, 중복된 섬네일 이미지 링크의 대체텍스트에 ‘섬네일’과 같이 그 의미를 좀 더 명확하게 파악할 수 있도록 대체텍스트를 추가합니다.
예를 들면 ‘커피 한 잔 뽑는데 물 132ℓ 퍼붓는다 섬네일 이미지’처럼 대체텍스트를 제공하는 것입니다. 이 방법으로 스크린 리더 사용자가 더 정확하게 화면의 구성과 의미를 이해할 수 있습니다.
네이버 뉴스는 방송사 동영상으로 뉴스가 제공될 경우 섬네일 이미지에 ‘동영상 기사’라는 텍스트가 강조 표시되어 함께 제공되기도 하는데요. 직접 선택해 보지 않고는 바로 아래 제공되는 기사 제목 링크와 중복되는 링크인지를 파악하기 어려울 수도 있습니다. 그러므로 ‘섬네일 이미지’와 같이 의미를 명확히 파악할 수 있게 하는 대체텍스트를 제공하여 이러한 혼동을 예방할 수 있습니다.

둘째, ‘ARIA-hidden’을 사용합니다.
그러나 이 방법은 매우 신중하게 사용해야 합니다. 왜냐하면, ARIA-hidden은 화면상에 있는 요소를 스크린 리더가 읽지 않도록 하기 때문입니다. (스크린 리더에서 ARIA-hidden의 예는 지난 ‘센스리더 4.0 beta 버전의 업그레이드 사항 (2/2)’의 해당 항목을 참조해 주세요.)

ARIA-hidden을 제안하는 이유는 목적지가 같은 두 개 이상의 중복 링크가 불가피하게 제공되야 할 경우 링크 하나를 제외하고는 스크린 리더에서 읽지 않도록 만들 수 있기 때문입니다. 이 경우 스크린 리더 사용자가 페이지를 빠르게 탐색할 수 있고, 중복 링크로 인한 혼동을 예방할 수 있습니다.

위의 네이버 뉴스에서 예를 들면 섬네일 이미지 링크 아래에 있는 중복되는 텍스트 링크를 ARIA-hidden을 적용하여 스크린 리더가 무시하도록 한다면 사용자 입장에서 반복되는 링크가 사라지기 때문에 탐색의 효율성이 증가하고, 중복 링크가 야기할 수 있는 혼란을 막을 수 있습니다. 다만, 이 방법은 스크린 리더 사용자에게 어떤 요소를 제공할지 말지에 대한 부분이 문제가 될 수 있어서 신중하게 사용하는 것이 좋고, 따라서 중복 링크에 대해서는 기획 단계에서 부터 고려할 필요가 있습니다.

이 글을 통해 평소 이 문제로 인해 혼란을 겪으셨던 스크린 리더 사용자분들이 구조를 파악하는데 도움이 되었으면 합니다. 아울러 웹페이지를 개발, 기획하시는 분들이 스크린 리더 사용자를 위한 정확한 콘텐츠 제공에 대한 고민을 풀어나갈 때 실마리가 되었으면 좋겠습니다.

감사합니다.