널리

WAVE를 통해 웹페이지의 접근성 관련 정보를 한눈에 알아보는 것이 가능해지는데요,

바로 다음과 같은 것들입니다.

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

아래 이미지를 보실까요?

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

빨간색 아이콘이도 살짝 보이는군요..^^;;

스크린 리더에서 input 박스의 label값을 읽어주지 않는 경우가 있어 label대신 input태그에 title 속성을 선언해준것이 error가 난 모양입니다.

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

제목 그대로 구조와 순서를 알아보기 쉽게 표현해줍니다.

어디에 헤딩태그가 사용되었는지, <ol>이 사용되었는지, <li>가 사용되었는지 볼 수 있습니다.

아래 이미지에 보시면 숫자로 표시된 부분이 있는데요, 바로 마크업 순서가 되겠습니다.  Tabindex가 특별히 선언되어있지 않는 이상, Tab으로 링크를 이동 할 때나 스크린리더가 컨텐츠를 읽어줄 때 어떤 순서로 움직이는 지 한 눈에 확인할 수 있습니다.

스크린리더가 해당 페이지를 어떻게 읽어줄지 궁금하시다면? 바로 이 기능을 사용하시면 됩니다.

이미지의 경우 alt 속성값이 들어가 텍스트로 변환되는 것을 알 수 있습니다.

스크린리더가 해당 페이지를 어떻게 읽어줄지 궁금하시다면? 바로 이 기능을 사용하시면 됩니다.

이미지의 경우 alt 속성값이 들어가 텍스트로 변환되는 것을 알 수 있습니다.

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

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

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