아티클

워드프레스의 접근성 2부 : 접근성을 지원하는 테마와 플러그인

2016-04-19 10:36:09

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


지난 글에 이어 예고 드린 바와 같이 이번 글에서는 워드프레스에서 접근성을 지원하는 테마와 접근성을 개선하는 데에 도움이 되는 플러그인 몇 가지를 살펴보도록 하겠습니다. 페이지를 직접 편집하거나, 지난 글에서 소개 드린 WP Accessibility를 사용하여 간단한 접근성 개선을 할 수 있지만 다양한 접근성 기능을 제공하는 테마와 플러그인을 활용하면 보다 손쉽게 접근성을 준수한 웹 페이지를 만들 수 있을 것입니다.


[참고]
이 글은 워드프레스를 어느 정도 활용할 수 있는 사용자를 대상으로 작성하였습니다. 즉 기본적인 워드프레스 설정을 할 수 있고, 테마샵, 플러그인샵에서 테마와 플러그인을 설치하거나, 다운로드한 플러그인을 직접 설치할 수 있는 사용자입니다.

[참고2]
이 글에서 소개하는 테마와 플러그인 대부분이 한국어를 지원하지 않기 때문에 영문으로 된 메뉴명을 한국어로 번역하면서 원래 영문 메뉴명을 괄호안에 병기하였습니다. 번역 과정에서 잘못된 의미의 전달을 막기 위하여 취한 조치입니다.


접근성을 지원하는 테마

접근성을 명시적으로 지원하는 테마는 대표적으로 Genesis Framework와 Catch Box가 있습니다. 그럼 두 테마에 대해 구체적으로 살펴보겠습니다.


Genesis Framework

Genesis Framework는 하나의 단순한 테마라기보다 명칭 그대로 프레임워크 테마입니다. 최신 Genesis의 버전은 2.2.7입니다. Genesis Framework 안에는 해당 테마에서 사용할 수 있는 하위 플러그인들이 포함되어 있는데, 접근성을 설정하는 것은 Genesis AccessibleGenesis Accessible Dropdown입니다.


먼저 Genesis는 유료 테마이므로 위에 링크한 페이지에 접속하여 테마를 구매합니다. 구매가 정상적으로 되었다면 Genesis를 설치하고 테마를 활성화합니다. 다음으로 Genesis Accessible과 Accessible Dropdown은 플러그인이므로 새로운 플러그인 추가에서 해당 플러그인을 검색하여 설치합니다. 이 과정이 모두 마무리되면 관리자 메뉴 대시보드의 Genesis 하위 메뉴에 ‘Accessibility Settings’ 메뉴가 있음을 확인할 수 있습니다. Genesis Accessible Dropdown은 특별한 설정값이 없기 때문에 이 글에서는 Genesis Accessible을 중심으로 설명하겠습니다.


Genesis Framework는 원활한 사용을 위해 워드프레스 4.0 이상의 버전에서 사용할 것을 권장합니다. 또한, Genesis Accessible은 Genesis 2.0 이상의 버전에서 원활하게 동작합니다. 참고로 Genesis 플러그인들을 사용할 때 해당 프레임워크 패키지에 포함된 플러그인 중 하나인 Child Theme을 함께 사용하는 것이 좋습니다. Child Theme은 이름에서 짐작하시듯이 차일드 테마를 생성해 주는 것입니다.


Genesis Accessible에서 지원하는 접근성 설정

Genesis Accessible에서 지원하는 접근성 설정은 아래 목록과 같습니다.

  • 스킵 링크 추가하기(Add skiplinks) 스크린리더 사용자 또는 키보드 사용자를 위해 페이지에 스킵 내비게이션을 제공합니다. 그리고 연관된 옵션으로 스크린리더용 텍스트와 스킵 내비게이션을 위한 CSS 추가[Add CSS for screen readers (screen-reader-text) and skiplinks]가 있습니다. 이 옵션은 스킵 내비게이션이 탭키로 접근했을 때에만 시각적으로 보이게 할 것인지를 옵션으로 선택할 수 있습니다.

  • 의미에 맞는 헤딩 사용(Use a semantic heading structure) 이 옵션을 선택하면 제작하신 페이지의 영역 순서에 맞게 Heading을 추가해줍니다. 이 옵션은 HTML5의 시멘틱 태그로 분류해 놓은 카테고리를 따르기 때문에 Genesis > SEO Settings에서 해당 항목을 먼저 설정해 주시기 바랍니다.

  • 드롭 다운 메뉴에 키보드 접근성 추가하기(Add keyboard accessibility to the dropdown menu) 드롭다운 메뉴의 경우 단지 화살표 키로 하위 메뉴에 접근하는 것 만으로도 사용자의 의도와는 다르게 선택되는 경우가 있습니다. 키보드 접근성을 고려한 드롭 다운 메뉴는 사용자가 드롭 다운 메뉴에서 선택하고자 하는 항목에 화살표 키를 움직여 포커스 한 다음 Tab 키를 눌러 드롭 다운 메뉴를 빠져 나올 때 선택되어야 합니다. 이 설정 항목은 이 문제를 해결해줍니다. 단 위에 언급한 Genesis Accessible Dropdown이 설치되어 있어야 합니다.

  • Genesis 위젯 제거하기(Remove Genesis widgets) 이 항목은 접근성이 부족한 Genesis의 위젯을 제거합니다.


워드프레스 접근성 설정(WordPress - Accessibility Settings)

Genesis Accessible에는 지난 글에 소개했던 WP Accessibility와 호환되는 설정이 있습니다. 링크에 title 속성 제거(Remove title attribute from links)와 에디터 툴바의 Heading1 제거(Remove h1 from editor toolbar)입니다. Title 속성 제거는 지난 글의 설명을 참고해 주십시오. 에디터 툴바의 Heading1 제거는 대개 페이지의 제목이나 포스트의 제목으로 Heading1이 생기게 되는데 이 부분이 사용자의 사용성에 도움이 되지 않습니다. 이 옵션을 체크해주면 이 문제가 해결됩니다.

[Tip]

레이아웃이 잘 갖추어진 페이지를 만들려면 페이지의 Header 영역부터 Footer 영역까지 일관성 있게 만드는 것이 좋겠지요? 그래서 접근성과는 큰 관련이 없지만 Genesis 테마를 썼을 때 Footer 영역을 손쉽게 만들어 주는 플러그인을 소개하겠습니다. 바로 Footer Builder입니다. Footer Builder는 통상적으로 웹 페이지 Footer 영역에 들어가는 정보들을 별도의 편집 없이 손쉽게 만들 수 있습니다. 접근성 역시 잘 갖추어지도록 되어 있습니다.


Catch Box

Catch Box 테마는 Genesis처럼 직접적으로 접근성 설정 기능을 제공하지는 않습니다. 그러나 해당 테마는 기본적으로 시맨틱 요소와 스킵 내비게이션과 같은 접근성 요소들이 설정되어 있습니다. 또한, 테마 편집에서 스크린리더 전용 텍스트 등을 삽입할 수 있도록 되어 있습니다.


접근성을 개선하도록 지원하는 플러그인

지금까지 접근성이 잘 지켜진 페이지를 만들어주는 테마와 그 테마에 속한 두 가지 플러그인을 살펴보았습니다. 이들 테마와 플러그인은 페이지의 구조를 접근성이 지켜지도록 만들어주는 것이었습니다. 그러나 이 섹션에서 소개할 내용은 위에 소개해드린 것과 달리 페이지 레이아웃을 설정하는 거시 아니라 페이지의 접근성을 진단할 수 있는 플러그인입니다. 이 플러그인의 이름은 Access Monitor입니다. 그럼 Access Monitor에 대해 자세히 알아보겠습니다.


Access Monitor 설치/인증하기

Access Monitor는 Tenon.IO의 Tenon API를 기반으로 동작하기 때문에 플러그인 설치 후 Tenon.IO에서 Tenon API 키를 발급받아 등록해야 합니다. 먼저 Access Monitor를 설치/활성화합니다. 그 다음 Tenon.IO에 접속하여 ID를 등록합니다. 등록이 완료되면 ID로 사용하시는 E-Mail로 등록 확인 메일이 발송됩니다. 메일에 첨부된 URL 링크를 눌러 Tenon에 등록을 마무리합니다. 정상적으로 등록이 되었을 경우 성공적으로 완료되었다는 메일이 다시 한 번 발송됩니다.


이제 Tenon API 키를 받을 차례입니다. Tenon.IO에 로그인하여 Get Code > API로 이동합니다. Overview에서 두 개의 URL 링크가 있는데 안내문을 읽어 보시면 아시겠지만 첫 번째는 Tenon.IO에 등록하는 URL이며, 두 번째가 API 키를 획득하는 URL입니다. 두 번째 링크를 선택하면 textarea에 발급된 API 키가 있음이 확인될 것입니다.


API 키를 복사해 워드프레스 관리자 페이지에 Access Monitor가 설치되면 나타나는 Accessibility Reports > add Report/Settings로 이동합니다. 여러 가지 설정 양식 중 API 키를 입력하는 텍스트 필드를 찾아 복사한 API 키를 붙여 넣고 설정을 업데이트합니다. 해당 섹션에서 접근성 진단을 원하는 페이지를 추가하는 등의 설정을 하면서 한꺼번에 업데이트하는 것도 무방합니다. 여기서 명심하셔야 할 점은 이 API 키는 이전 등록 과정에서 안내문을 꼼꼼히 읽어 보신 분은 아시겠지만 30일간만 유요한 Trial 버전이라는 것입니다. 계속해서 Access Monitor을 이용하려면 API 키를 정식 구매해야 합니다.


Access Monitor로 페이지 접근성 진단하기

Access Monitor는 Add Report/Settings의 API 키 등록 과정에서 대략 확인하셨겠지만 페이지 제목과 페이지 URL을 등록하여 접근성을 진단하는 방식입니다. 또한, 진단 스케줄도 설정할 수 있는데 한 번, 주간, 월간으로 설정 가능합니다. 페이지를 추가하려면 페이지 제목과 URL을 양식에 맞게 입력하고 Add a test URL 버튼을 선택합니다. 그리고 Create Accessibility Report 버튼을 누르면 추가한 페이지를 진단합니다. 진단 결과는 결과 테이블에 나타납니다.


이상으로 저희가 준비한 워드프레스의 접근성 2부를 마치겠습니다. 이 글이 접근성 있는 워드프레스 기반의 페이지를 만드는데 도움이 되었으면 좋겠습니다. 감사합니다.

댓글 0
댓글을 작성하려면 해주세요.