웹사이트를 만들다 보면 디자인이나 렌더링 속도, SEO 같은 건 수시로 체크하게 되는데,
솔직히 ‘웹 접근성’은 중요하다는 건 머리로는 알면서도 막상 어디서부터 손대야 할지 막막할 때가 많다.
나도 이번에 사이트를 좀 다듬으면서 접근성을 어떻게 챙길까 찾아보다가 꽤 괜찮은 툴을 하나 발견했다.
WAVE라는 곳이다.
WebAIM이라는 곳에서 만든 웹 접근성 평가 도구라는데, 사용법은 진짜 별거 없다.
그냥 검사하고 싶은 페이지 주소만 띡 넣으면 알아서 분석해 준다.
보통 이런 검사 툴 돌리면 "이 줄에 이런 문제 있음" 하고 딱딱한 리포트만 뱉어내는 경우가 많은데, 얘는 실제 내 웹페이지 화면 위에다가 아이콘으로 문제가 있는 부분을 콕콕 찍어서 보여준다.
궁금해서 내 개인 사이트도 한번 돌려봤다.
뭔가 개판같지만 걍 아이콘 표기다. 끌수도 있음!그래도 몇 년동안 이런저런 고도화를 하다보니까 생각보다 점수가 잘 나와서 놀랐다.
솔직히 ARIA까지 다 구비하는건 개 오바라고 생각하고, 예전에 Lighthouse 기능으로 보완했던거 때문에 그런지 나름 괜찮았던게 아닐까 싶다.
그때도 뭐 텍스트&배경색 대비니뭐니해서 일일히 수치맞춰가면서 작업하긴했는데 이게 이제와서 도움이되네...
그리고 이미지에 alt 태그라던지 그런거 신경써서 한 보람을 여기서 새삼 느낀다.
뭐 다시 WAVE 이야기로 돌아오자면, 개발자 입장에서 제일 마음에 들었던 건 '바로 수정할 포인트를 짚어준다'는 거다.
갓직히 저스티파이 쓰지말라는데, 포기할 순 없지. 암.글자로만 리포트를 보면 DOM 트리 어디쯤인지 다시 찾아 헤매야 하는데, WAVE는 화면에 직접 표시해 주니까 개발자 도구 열어놓고 HTML 구조나 CSS 보면서 바로바로 고치기 딱 좋다.
블로그나 랜딩 페이지처럼 텍스트랑 이미지 꽉꽉 찬 콘텐츠 페이지들 점검할 때 꽤 쏠쏠하게 쓸 수 있기 때문.
물론 이런 툴이 늘 그렇듯 100% 맹신하면 안 되겠지만 말이다.
자동화 툴이다 보니 명확하게 코드가 꼬인 건 기가 막히게 찾는데, 문맥까지 파악하진 못한다.
예를 들어 이미지에
alt 속성이 들어있기만 하면 그 텍스트가 앞뒤가 맞는지 안 맞는지는 모르고 일단 통과시켜 버리기도 한다.버튼 이름이 진짜 직관적인지, 마우스 안 쓰고 키보드 탭 키만으로 사이트 탐색이 스무스하게 되는지 같은 부분은 결국 사람이 직접 스크린 리더도 켜보고 하면서 테스트해 봐야 한다.
흠, 대충 돌려보기 딱 좋은 서비스다그래도 웹 접근성 점검을 처음 시작해 보려는 사람에겐 이만한 도구가 없는 것 같다. 설치하기도 귀찮으면 그냥 웹에서 바로 해보면 되고, 시각적으로 딱 보여주니까 접근성에 익숙하지 않은 사람도 '아, 이래서 문제구나' 하고 파악하기 쉽다.
웹 접근성이 뭐 특정 사용자만을 위한 거창한 기능이라기보다는, 결국 더 많은 사람들이 내 사이트를 짜증 안 내고 편하게 쓰게 만드는 기본기 같은 거니까....
사이트 새로 배포하기 전이나 디자인 엎었을 때 한 번씩 쓱 돌려주는 것만으로도 자잘한 이슈는 다 잡을 수 있을 듯하다.
다른 사이트도 막 찍어볼 수 있으니까 궁금하면 아무사이트 돌려보자! ㅋㅋ