현재 페이지 위치

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

목록이전 글 보기51/370다음 글 보기

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

유용한 접근성 평가툴을 소개합니다.

접근성

안녕하세요. 웹표준화팀의 조진주입니다.
저의 첫 블로깅이네요. 매우 반갑습니다.^^

앞으로 웹접근성 관련 정보들을 자주 블로깅 할 수 있는 기회가 생겼으면 좋겠습니다.

그 시작으로 유용한 접근성 평가툴을 하나 소개할까 하는데요, 바로 WebAIM 에서 제공하고 있는 WAVE라는 툴입니다.

wave.gif



WAVE를 통해 웹페이지의 접근성 관련 정보를 한눈에 알아보는 것이 가능해지는데요,
바로 다음과 같은 것들입니다.


1. Errors, Features and Alerts

접근성을 위한 엘리먼트, 속성이 제대로 사용되고 있는지 체크합니다. 빨간색 아이콘은 꼭 수정되어야 하는 Error, 노란색 아이콘은 잠재적 문제점을 안고 있는 Alert,  초록색 아이콘은 제공되고 있는 접근성 속성에 관련된 것이며 초록색 아이콘의 경우 속성값이 같이 표시가 되기 때문에 올바른 값이 들어갔는지 확인하는 것이 가능합니다.

아래 이미지를 보실까요?
웹페이지 위에 아이콘이 바로 떠서 어떤 속성이 어떻게 사용되고 있는지를 한 눈에 확인할 수 있도록 해 줍니다.

빨간색 아이콘이도 살짝 보이는군요..^^;;
스크린 리더에서 input 박스의 label값을 읽어주지 않는 경우가 있어 label대신 input태그에 title 속성을 선언해준것이 error가 난 모양입니다.

naver_test1.jpg

각각의 아이콘이 무엇을 뜻하는지 알고 싶으시면 여기를 클릭하세요.


2. Structure and Order

제목 그대로 구조와 순서를 알아보기 쉽게 표현해줍니다.
어디에 헤딩태그가 사용되었는지, <ol>이 사용되었는지, <li>가 사용되었는지 볼 수 있습니다.
아래 이미지에 보시면 숫자로 표시된 부분이 있는데요, 바로 마크업 순서가 되겠습니다.  Tabindex가 특별히 선언되어있지 않는 이상, Tab으로 링크를 이동 할 때나 스크린리더가 컨텐츠를 읽어줄 때 어떤 순서로 움직이는 지 한 눈에 확인할 수 있습니다.

naver_test2.jpg


3. Text only

스크린리더가 해당 페이지를 어떻게 읽어줄지 궁금하시다면? 바로 이 기능을 사용하시면 됩니다.
이미지의 경우 alt 속성값이 들어가 텍스트로 변환되는 것을 알 수 있습니다.

naver_test3.jpg

4. Outline

스크린리더가 해당 페이지를 어떻게 읽어줄지 궁금하시다면? 바로 이 기능을 사용하시면 됩니다.
이미지의 경우 alt 속성값이 들어가 텍스트로 변환되는 것을 알 수 있습니다.

 naver_test4.jpg
네이버 메인을 예로 들어 간략히 기능들을 설명해보았는데요, 파이어폭스 전용 툴바를 설치하시면 보다 편리하게 이용하실 수 있습니다.

이 툴이 웹접근성을 평가하는 절대적인 툴은 아니겠지만 웹페이지의 접근성 향상에 많은 도움이 될 것이라 예상합니다.

다음에는 더욱더 유용한 정보로 찾아뵙겠습니다. ^^
Nts Nuli님 프로필

회원 등급 : 7

Nts Nuli

널리 관리자입니다.

1개56개

댓글보기

전체 댓글
0
로그인

댓글이 없습니다.

목록이전 글 보기51/370다음 글 보기

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