현재 페이지 위치

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

목록이전 글 보기263/388다음 글 보기

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

워드프레스의 접근성 1부

접근성

안녕하세요, 엔비전스입니다.


이번 글에서는 전 세계적으로 웹 페이지 제작에 있어 사랑 받고 있는 CMS 툴, 워드프레스의 접근성에 대해 알아 보도록 하겠습니다.

워드프레스의 접근성을 다루는 글은 총 두 차례에 걸쳐 연재될 계획입니다. 첫 번째 글에서는 워드프레스 접근성에 대한 전반적인 내용과 워드프레스의 기본적인 접근성 설정을 할 수 있는 WP Accessibility를 소개해 드리도록 하겠습니다. 두 번째 글에서는 워드프레스 테마 중 별도의 접근성 설정을 지원하는 테마와 접근성을 향상시킬 수 있는 플러그인에 대해 알아보도록 하겠습니다.

참고 : 이 연재글은 추후 내용 추가에 따른 연재 회수의 변동이 있을 수 있습니다.

워드프레스의 접근성 현황

워드프레스는 W3C에서 권고하는 웹 표준 및 웹 접근성 가이드라인을 준수하기 위한 많은 노력을 하고 있습니다. 따라서 워드프레스는 워드프레스 코어 뿐만 아니라 테마와 플러그인들 역시 별도의 접근성 설정/기능이 존재하는 특화된 것이 아니더라도 어느 정도 접근성이 보장되어 있는 경우가 많습니다. 접근성 준수를 위해 워드프레스에서는 테마, 플러그인, 디자이너, 콘텐츠 공급자 및 관리자를 위한 접근성 가이드라인 핸드북을 함께 제공하고 있습니다.

워드프레스는 또한 웹접근성 준수를 필요로 하는 사용자 유형을 분류하여 접근성의 필요성을 구체적으로 명시합니다. 접근성을 필요로 하는 사용자 유형은 크게 5가지이며, 다음과 같습니다.

  • 마우스 커서를 제대로 볼 수 없거나, 마우스를 사용할 수 없는 사용자

  • 청력의 손실로 인하여 음성 언어를 사용할 수 없는 사용자

  • 페이지의 주요 언어가 방문자의 주요 언어와 다른 경우(Multilingual Codex 참조)

  • 웹 페이지에 접근함에 있어 보조공학 소프트웨어 또는 하드웨어를 사용하는 사용자(스크린리더 등)

  • 색각 이상 사용자이거나, 낮은 색 대비로 제공되는 콘텐츠를 식별하기 어려운 저시력 사용자

사용자의 참여를 통한 접근성 개선 프로젝트

워드프레스가 접근성을 높이기 위한 방안으로 진행하고 있는 프로젝트 중 사용자가 워드프레스에 공급되고 있는 테마와 플러그인을 직접 테스트하여 개선이 필요한 사항을 개발자에게 리포트하는 프로젝트가 있습니다. 테마와 플러그인에 대한 테스트는 매우 체계적으로 이루어지고 있는데, W3C의 가이드라인을 기준으로 테스트가 진행됩니다. 또한, 접근성 테스트 대상이 지정되면 참여자들이 테마와 플러그인의 세부 범위를 분담하여 테스트 합니다. 테스터는 자원봉사 형태로 프로젝트에 참여하게 됩니다. 이 곳에서 워드프레스 접근성 프로젝트에 대한 전반적인 내용을 확인할 수 있습니다.

WP Accessibility에 대한 소개

WP Accessibility는 별도의 접근성 기능이 없는 테마에 기본적인 접근성 기능을 추가해주는 플러그인입니다. 아울러 저시력 사용자를 위한 전경색과 배경색의 비율을 체크할 수 있는 기능을 제공합니다.

WP Accessibility 플러그인에서 제공하는 접근성 기능을 사용하는 방법은 먼저 가지고 계신 워드프레스 페이지에 WP Accessibility를 검색하여 설치합니다. 설치가 완료된 다음 관리자메뉴 > 설치된 플러그인에서 해당 플러그인이 사용 가능 상태로 되어 있는지 확인합니다. 만약 비활성화되어 있다면 활성화합니다.

위 작업을 마무리한 뒤에 다시 관리자메뉴 홈으로 이동합니다. 정상적으로 WP Accessibility가 설치되었으며 활성화된 경우 설정 카테고리 아래에 WP Accessibility 링크가 표시됩니다. 해당 링크를 눌러 WP Accessibility에서 제공하는 접근성 기능을 설정할 수 있습니다. WP Accessibility의 접근성 기능에 대한 자세한 내용은 아래와 같습니다.

WP Accessibility에서 설정할 수 있는 접근성 기능들

title 속성 제거(Removing title attributes)

워드프레스 시스템은 사용자가 메뉴 링크를 만드는 과정에서 링크 텍스트와 동일한 값의 title 속성을 생성하는 경우가 있습니다. 그러나 링크에 title 속성을 추가하는 것은 스크린리더의 호환성을 고려했을 때 바람직한 방법은 아닙니다. 관련 내용은 지난번에 등록한 스크린리더 사용자를 위한 IR(Image Replacement)기법과 추가 설명 제공하기를 참고해 주세요.

title 속성을 제거하는 기능은 태그 클라우드(Tag Clouds)와 아카이브 링크(Archive links)로 나누어 사용할 수 있습니다. 제거를 원하는 항목을 체크한 다음 Update Title Attribute Settings 버튼을 눌러 설정 값을 적용하십시오.

스킵 내비게이션 추가하기

페이지 콘텐츠가 복잡하다면 스크린리더 사용자를 위해 스킵 내비게이션을 제공해 주는 것이 좋습니다. WP Accessibility에서는 매우 간편하게 스킵 내비게이션을 설정할 수 있습니다. 우선 페이지에 스킵 내비게이션을 적용하기 위해 ‘Enable Skiplinks’를 체크합니다. 그리고 스킵 네비게이션이 시각적으로 표시되게 하려면 ‘Skiplinks always visible’을 체크합니다. 반대의 경우 해당 항목을 해제합니다. 다음으로 폼의 양식에 맞게 스킵 링크의 목적지가 되는 컨테인어의 ID와 스킵 링크의 텍스트를 입력하고 설정을 업데이트하여 적용합니다.

WP Accessibility의 기타 접근성 설정들

title 속성 제거와 스킵 내비게이션 외에 WP Accessibility에는 여러 가지 접근성 설정 항목이 있습니다. 주요 항목을 간략하게 살펴 보도록 하겠습니다.

  • Target 속성 제거하여 새창으로 링크 열림 방지:
    웹 페이지에서 특정 링크의 속성에 target="_blank" 등이 선언되었을 경우 스크린리더 사용자가 해당 링크를 눌렀을 때 새 창으로 링크가 열렸는지를 몰라 탐색의 맥이 끊어질 수 있습니다. 이 기능은 이러한 상황을 방지하기 위해 링크에 target 속성을 제거합니다.

  • HTML5 요소에 LandMark Role 적용하기:
    이 설정 항목은 HTML5 시멘틱 요소에 그에 대응하는 LandMark Role을 자동 적용하게 됩니다. 스크린리더 사용자에게 LandMark Role은 현재 탐색하고 있는 영역을 구별하는데에 매우 중요한 요소입니다.

  • Tab 키로 포커스 가능한 영역에 적용된 tabindex 제거하기:
    워드프레스의 테마에 따라 불필요한 곳에 tabindex가 적용된 경우가 있습니다. 이 기능을 체크하면 Tab 키로 포커스 가능한 컨트롤 요소들에 적용된 tabindex를 제거합니다.

  • 게시물 이미지에 삽입된 title 속성 제거:
    이 기능은 게시물에 포함된 이미지에 불필요하게 생성된 title 속성을 제거합니다. 게시자가 이미지에 alt 속성을 선언했다면 title 속성은 불필요합니다. 원칙적으로도 이미지에는 alt 속성을 선언해야 합니다.

  • 키보드로 포커스 된 요소 강조하기:
    키보드를 사용하는 저시력인들은 페이지 디자인에 따라 현재 키보드 포커스가 어디에 위치했는지 식별하기 어려울 수 있습니다. 이 기능은 키보드 포커스가 위치한 요소를 지정한 색으로 표시해 줄 수 있는 기능입니다. 색상 값은 16진수로 입력합니다.

  • 흑백모드 토글:
    접근성 툴바가 있을 경우 저시력인을 위해 흑백모드를 토글할 수 있도록 하는 기능을 제공합니다.

색상 대비 테스트

위에 언급한 것처럼 WP Accessibility에는 전경색과 배경색의 색상 대비를 체크할 수 있는 테스트 도구가 포함되어 있습니다. 사용 방법은 16진수의 값으로 전경색과 배경색의 값을 입력한 다음 ‘Check Color Contrast’ 버튼을 눌러 색상 대비를 체크합니다. 색상 대비 비율은 W3C의 WCAG의 기준에 따라 4.5:1을 정상적인 값으로 권고합니다.

참고 : 스크린리더 사용자가 색상 대비 테스트 기능을 이용할 경우 ‘Check Color Contrast’ 버튼을 선택해도 포커스가 결과 영역으로 이동하지 않으므로 우선 Ctrl_Home 키를 누른 다음 ‘WP Accessibility: Settings’ 영역으로 이동합니다. 해당 영역은 Heading Level 2이므로 빠른 탐색키 ‘h’키 또는 숫자 ‘2’ 키로 이동할 수 있습니다. 아래 화살표 키를 이용해 테스트 결과를 확인합니다.

글을 마치며

지금까지 워드프레스 접근성 소개 및 워드프레스의 기본 접근성 플러그인이라고 할 수 있는 WP Accessibility에 대해 알아보았습니다. 글의 서두에 언급했듯이 워드프레스는 W3c의 웹 표준과 웹 접근성을 준수하는 CMS 툴입니다. 또, 다양한 테마와 플러그인을 활용하여 원하는 웹 페이지를 손쉽게 제작할 수 있는 만큼이나 접근성을 준수하는 웹 페이지 제작 역시 테마와 플러그인을 사용해 간단히 만들 수 있습니다. 따라서 다음 글에서 예고드린바와 같이 접근성을 준수한 웹페이지 제작에 도움이 되는 테마와 플러그인을 여러분께 소개해 드리도록 하겠습니다.

긴 글 읽어주셔서 감사합니다.

댓글보기

전체 댓글
2
로그인
Sangki Park
"스크린리더 사용자를 위한 IR(Image Replacement)기법과 추가 설명 제공하기" 링크가 잘못 되었네요.
아래 URL 링크주소로 되어있습니다.
http://nuli.navercorp.com/sharing/blog/post/1132804http:/nuli.navercorp.com/sharing/blog/post/1132804

항상 좋은 글 감사합니다^^
Webacc NV
@Sangki Park안녕하세요. 엔비전스입니다. 
링크 주소 수정하였습니다~

감사합니다:)

목록이전 글 보기263/388다음 글 보기

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