진행하던 프로젝트에서 웹접근성 인증마크를 따야 한다고 했는데 당시 경험이 없었던 나는 매우 긴장하며 작업을 했었다. 😵💫 oO(시련 그만..)
심사 당시 사이트 개편건 오픈이랑 맞물렸는데 기획자분께서 개편 전 사이트로 심사를 진행한다고 해서 나는 해당 사이트의 접근성을 개선했는데 심사는 개편 후 사이트로 심사가 되어버려서.. 1차때 불합격된 부분이 매우 많았다... 기획자님..
웹접근성 인증마크 심사를 거치며 깨달았던 점과 불합격된 이유를 공유하기 위해 글을 작성해 본다! (최종 합격은 했어유..🥹)
웹접근성? 어렵지 않아요~😎
웹접근성이란?
「지능정보화기본법」 에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것
-한국웹접근성인증평가원
웹접근성 품질인증 제도
장애인 및 고령자가 웹 사이트 이용에 불편이 없도록 웹 접근성 표준을 준수한 우수 사이트에 대해 품질을 인증하고 마크를 부여하는 제도로 아래와 같은 심사절차를 거친다.
(출처: https://www.wa.or.kr/m1/sub2.asp)
웹접근성 진단 도구
내가 사용했던 진단 도구는 3가지다!
1) OpenWAX
한국형 웹접근성 지침에 맞게 접근성 진단을 도와주는 크롬 확장프로그램으로 크롬 웹스토에서 다운 받아서 사용할 수 있다.
OpenWAX 설치하기
2) WAVE
웹 접근성을 개선이 필요한 부분을 자동으로 검출해주는 프로그램으로 별도 설치 없이 사이트에서 사용 가능하다.
WAVE 설치하기
3) Screen Reader
컴퓨터나 모바일을 사용할 때 화면에 표시되는 입출력 정보를 음성으로 알려주는 프로그램으로 직접 들어보면서 작업했더니 더 이해도 잘 됐고 놓쳤던 부분도 찾을 수 있어서 내겐 매우 유용했다!
Screen Reader 사용하기
오류 내용
아래는 1차 심사를 거치고 받았던 정보통신접근성 품질인증 전문가 심사 보고서 내용 중 일부이다.
📍 의미없는 대체 텍스트[권고]
항목 1. 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.
② 텍스트 아닌 콘텐츠에 대한 대체 텍스트를 부적절하게 제공한 경우
- 의미를 갖지 않는 장식용 이미지에 alt가 제공되었습니다.
- 아이콘 자체로 의미를 갖지 않는 경우 alt="" 제공해도 무방합니다.
※ alt=" " 등 공백문자가 들어가거나 제공하지 않는 경우는 오류입니다.
(예시이미지)
저는 이때까지 이미지의 모든 alt값은 다 채워 넣어야 한다고 생각했던 사람이라 머리가 띵해지는 사항이였습니다. 🫨
모든 사용자들에게 편안함을 제공할려고 했던게 오히려 불편함을 주다니..
권고 내용을 확인하고 실제로 스크린 리더기 를 사용해서 사이트를 읽어봤을때 장식용 이미지에 제공된 alt값이 오히려 화면을 읽는데 불편함(불필요한 내용으로 피곤함 유발, 텍스트와 중복된 내용) 을 느껴서 더 잘 와닿는 내용이였습니다.
✅ 해결법
불필요한 alt값 제거!
📍 키보드 초점 인지 불가능
항목 9. 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.
② 초점 또는 키보드의 위치를 나타내는 개체가 시각적으로 표시되지 않은 경우
- 키보드 초점이 현재 머무는 위치를 시각적으로 인지할 수 없습니다.
- 초점의 현재 위치를 시각적으로 인지할 수 있도록 제공해야 합니다.
확인했는데도 불구하고 놓쳤던 부분..🥲
키보드 초점을 알려 주기 위해 focus-visible 을 사용했습니다.
✅ 해결법
li > a:focus-visible { border: 2px solid #2460C5; }※ focus 를 사용해도 되지만 저는 button 과 a태그 의 포커스가 필요했기 때문에 focus-visible 을 사용했습니다.
focus는 마우스 포인터가 클릭했던 요소를 떠나더라도 클락한 요소에 적용한 스타일이 그대로 남아 있기 때문에 마우스 사용자들에게는 혼란스러울 수 있기 때문이죠!
📍 정지 기능 미제공
항목 12. 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
② 자동으로 변경되는 콘텐츠를 마우스, 키보드 또는 터치로 제어 불가능한 경우
- 자동 변경되는 슬라이드배너의 콘트롤 기능이 제공되지 않았습니다.
- 정지/재생 기능을 추가하여 사용자가 자동으로 변경되는 슬라이드 배너를 제어할 수 있도록 제공해야 합니다.
(예시이미지)
자동으로 변경되는 롤링배너 같은 경우에는 재생, 정지버튼으로 제어 가능하게 해야 한다! 이건 디자인이 이렇게 나와도 접근성을 생각한다면 수정을 해야 함!
✅ 해결법
<button type="button" class="btn-pause"><span class="ir">일시정지</span></button>
<button type="button" class="btn-play"><span class="ir">재생</span></button>이런식으로 재생, 정지 버튼을 제공해 줄 것!
📍 부적절한 링크 텍스트
항목 16. 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
① 용도나 목적을 알기 어려운 링크 텍스트를 제공한 경우
- 버튼의 기능 혹은 용도를 설명하는 링크텍스트를 제공해야 합니다.
※ 예시) 더보기 열기, 닫기
(예시이미지)
스크린 리더기 사용자들을 위해 버튼을 클릭했을때 하위 메뉴들이 열렸는지 닫혔는지 알 수 있게 링크텍스트를 제공해줘야 합니다.
+) 비슷한 경우로 탭을 클릭했을때도 해당 탭이 선택됐는지 알 수 있게 적절한 링크 텍스트를 제공해 주어야 합니다!
✅ 해결법
저는 단순한 방법으로 버튼을 클릭할때마다 display none, block 처리를 해서 알맞는 텍스트를 읽도록 처리했어요.
※ display:none 처리를 하면 스크린 리더기로 읽히지 않아요!
혹은 button 태그라면 title 이나 aria-label 을 이용해서 클릭할때마다 텍스트를 변경시켜 처리할 수 있죠😉
이거외에도
✔️ 대체택스트 미제공
✔️ 명도 대비 기준 미달
✔️ 색으로만 구분 가능한 콘텐츠
등등 심사에 걸렸던 항목이 많았다. 🫠
나는 마지막 세번째 시도에 합격했는데 솔직히 한번에 합격하는건 어려울거 같다. 심사위원을 잘 만나는것도 운이라고 하던데 나는 다행히도 친절하신분을 만나서 왜 오류가 났는지 어떻게 해결하는지 다 적어주셨다. (원래도 이렇게 해주는건지는 모름😇)
❗️ 그리고 왜 오류가 났는지 도저히 이해가 안된다 싶으면! 접근성 심사해주는 담당자분께 직접 여쭤보는것도 방법!
저도 두번째 심사때 수정한 부분이 또 걸렸길래 이해가 잘 안되서 직접 여쭤봤더니 담당자분이 테스트 할 때 문제가 있었는지 다시 해보니까 잘 된다고 해서 넘어갔었던 적이 있었다!
힘들었지만 뿌듯했던 접근성 인증마크 취득하기
여러분도 할 수 있습니다 👊
혹시 어느 기관에서 인증 받으셨나요?