현재 페이지 위치

Home> 광장> 널리 블로그> 상세보기

목록이전 글 보기350/354다음 글 보기

추천하기
추천 횟수 :0
조회수
412
공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0

스크린리더 사용자가 본 해외 언론의 접근성 1부

접근성

 

안녕하세요. 엔비전스입니다.
요즘은 영상을 기반으로 한 미디어가 대세를 이루고 있지만 깊이 있는 정보를 습득하는 데에 있어 텍스트 매체의 중요성을 간과할 수 없을 것입니다. 특히 영상 매체를 통해 정보를 얻는 데에 한계가 있는 시각장애 사용자의 경우 텍스트로 이루어진 정보를 습득하는 것이 훨씬 효율적일 수 있습니다. 따라서 정보의 신속성과 내용의 깊이를 고려했을 때 시각장애 사용자에게 기존 언론은 아주 유용하다고 할 수 있겠습니다.
저희가 이번 글을 통해 살펴볼 내용은 언론사의 접근성, 그중에서도 해외 언론사 페이지의 접근성 현황에 관하여 알아보려 합니다. 국내에도 잘 알려진 해외 언론의 경우 대부분 접근성 안내 페이지를 제공하고 있으며, 실제 웹 페이지 접근성 역시 잘 갖추어져 있습니다. 언론 페이지와 같이 복잡한 콘텐츠 소비 중심의 웹 페이지에 좋은 참고가 될 것으로 생각하여 이번 글을 통하여 해외 언론사 페이지의 접근성을 알아보겠습니다.

참고 : 이 글에서 다루는 해외 언론은 영미권 언론입니다.

The New York Times
뉴욕 타임스(The New York Times)는 접근성 면에서도 여러모로 모범적인 모습을 보이고 있습니다. 먼저 별도의 접근성 도움말 페이지를 통해 뉴욕 타임스에서 제공하는 접근성 기능을 알아볼 수 있습니다. 그리고 도움말 페이지에는 언급되어 있지 않지만, 뉴욕타임스는 W3C의 웹 접근성 표준을 준수합니다. 그럼 구체적으로 해당 언론사의 접근성 기능을 알아보겠습니다.

저시력인을 위한 접근성 기능

뉴욕 타임스의 저시력인을 위한 특별한 접근성 기능은 마련되어 있지 않습니다. 다만, 접근성 도움말 페이지에 웹브라우저에서 제공하는 글꼴 크기 확대/축소 기능 활용 방법이 안내되고 있습니다. 두 가지 방법으로 안내가 되고 있는데, 브라우저 설정을 통해 영구적으로 폰트 사이즈를 고정하는 방법은 각 웹 브라우저 도움말 링크를 제공합니다. 임시로 현재 페이지의 폰트 사이즈를 키우거나, 작게 할 때 Windows는 CTRL+Plus 혹은 CTRL+Minus 키를, MacOS는 CMD+Plus 그리고 CMD+Minus 키를 이용하도록 안내합니다.
또한, 뉴욕 타임스는 모바일 애플리케이션 이용자를 위한 모바일 OS의 도움말 페이지 링크도 함께 안내하고 있습니다. iOS와 Android 각각 폰트 사이즈 조절, 디스플레이 조정, 스크린리더 도움말 링크를 제공합니다.

영상 자막 제공

뉴욕 타임스는 2017/11/08부터 새롭게 업로드되는 영상에 자막을 제공할 것을 안내하였습니다. 그러나 아직 모든 영상에 자막이 제공되고 있지는 않습니다. 속히 청각장애 사용자를 위하여 영상 자막 제공이 확대되기를 바라봅니다.

적절한 콘텐츠 블록화

스크린리더 사용자 입장에서 뉴욕 타임스의 가장 큰 장점은 콘텐츠의 구조를 쉽게 파악할 수 있도록 콘텐츠 블록화가 잘 이루어져 있다는 것입니다. 우선 각 기사 본문은 main 랜드마크를 사용하여 스크린리더 사용자가 빠르게 기사 본문으로 이동할 수 있습니다. 물론 각 기사 제목에 Heading 요소가 선언되어 사용자가 쉽게 선택한 기사 영역으로 이동할 수 있습니다. 또한, 메인 메뉴, 서브 메뉴의 구분이 잘 되어 있어 사용자가 페이지 구조를 쉽게 이해할 수 있습니다.

기타 접근성

위에서 언급한 접근성 항목 외에도 뉴욕 타임스에는 스킵 내비게이션이 잘 제공되어 사용자의 페이지 탐색을 용의하게 합니다. 또한, 탭 메뉴의 경우 적절한 WAI-ARIA를 사용하여 스크린리더 사용자가 탭 메뉴임을 바로 알 수 있도록 합니다. 나아가 스크린리더 사용자를 위해 탭 메뉴를 구성할 때 간과하기 쉬운 부분이 키보드 접근성이지만, 뉴욕타임스는 키보드 접근성 역시 고려하여 페이지가 개발되었습니다.

참고

접근성을 고려한 탭 컨트롤을 구현할 때 role=”tablist”, role=”tab”, aria-selected 등을 사용하여 탭 컨트롤의 접근성 기능을 구현합니다. 이러한 과정에서 반드시 포함되어야 할 것이 스크립트를 통한 키보드 접근성인데요, 여기서 의미하는 키보드 접근성이란 스크린리더 사용자가 탭 컨트롤 영역에 포커스 한 다음 가상 커서를 해제하고, 좌/우 화살표 키로 탭을 전환할 수 있어야 한다는 것입니다.
뉴욕 타임스의 경우 World, Politics, Science 등의 섹션으로 진입하면 recent 탭과 Search 탭으로 나누어 기사를 확인할 수 있습니다. 해당 탭 컨트롤에 위에서 설명한 키보드 접근성이 잘 구현되어 있습니다.

Financial Times의 접근성

영국의 금융/비즈니스 전문지 파이낸셜 타임스(Financial Times)는 WCAG 2.0에 근거하여 Digital Accessibility Center에서 데스크톱과 모바일 모두 접근성 AA 등급을 받은 언론사입니다. 파이낸셜 타임스는 스크린리더 사용자, 고대비 모드 또는 화면 확대 프로그램을 사용하는 저시력인, 색맹 사용자, 난독증이 있는 사용자의 사용성 테스트를 모두 통과하였습니다. 이러한 이유로 스크린리더 사용자 입장에서도 파이낸셜 타임스를 쾌적하게 이용할 수 있었습니다. 그리고 메인 페이지 상단에 접근성 도움말로 이동할 수 있는 스크린리더 전용 링크를 제공했기 때문에 접근성에 대한 도움말이 필요할 경우 해당 링크를 통해 접근성 도움말을 이용할 수 있습니다.

적절한 콘텐츠 블록화

뉴욕 타임스와 마찬가지로 파이낸셜 타임스 역시 Heading 요소와 랜드마크를 적재적소에 사용하여 스크린리더 사용자가 페이지 구조를 쉽게 이해할 수 있도록 만들어졌습니다. 특히 role=region과 aria-label을 사용하여 메인 메뉴 영역과 각 메인 메뉴에 속한 서브 메뉴를 그룹화해 준 것은 사용자에게 매우 큰 도움을 줍니다. 이와 함께 스킵 내비게이션 역시 메인 메뉴, 본문, 페이지 하단으로 이동할 수 있도록 제공하고 있어 키보드 사용자가 손쉽게 페이지를 탐색할 수 있습니다.

적절한 WAI-ARIA의 사용

파이낸셜 타임스는 특정 영역을 눌러 확장/축소할 수 있는 서랍 메뉴, 토글 버튼 등이 상당수 존재합니다. 특히 world, Companies, Global Economy 등의 카테고리를 My FT에 추가하여 읽을 수 있도록 하는 기능을 제공하는데, 추가/해제 버튼은 모두 토글 버튼으로 구성되어 있습니다. 이러한 상황에서 만약 어떤 카테고리가 추가되어 있는지 아닌지를 구별할 수 없다면 스크린리더 사용자는 혼란스러울 것입니다.
위의 문제를 보완하기 위해 확장/축소되는 메뉴의 경우 role=menu와 ARIA-expanded 속성을 사용하고 있습니다. 토글 버튼의 경우 ARIA-pressed를 사용하여 눌림/눌리지 않음 상태를 정확히 표시하고 있습니다.

글을 마치며

지금까지 해외 언론 중 뉴욕 타임스와 파이낸셜 타임스에서 제공하는 접근성 기능에 대해 알아보았습니다. 다음 글에서는 이번 글에 이어 와이어드, 가디언 등의 접근성 기능에 대해 알아보도록 하겠습니다. 읽어주셔서 감사합니다.

 

Nts Nuli님 프로필

회원 등급 : 7

Nts Nuli

널리 관리자입니다.

1개79개

댓글보기

전체 댓글
0
로그인

댓글이 없습니다.

목록이전 글 보기350/354다음 글 보기

공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0