기획자로써 웹 접근성 바라보기
어느날 굴러들어온 ASAP 요건
어느날 옆동네에서 웹접근성을 근거로 소송이 제기되었다는 소식을 들었다.
우리도 어떻게 이슈가 제기될 지 모르니 선제적으로 대응하자는 팀장님의 지시.
그렇게 치고 들어온 요건, <사이트 웹 접근성 현황 파악 및 개선>
'... 근데 웹 접근성은 뭘 어떻게 해야해?'
이 글은 아무것도 몰랐던 나처럼, 심히 당황스러울 분들에게 도움이 될까 싶어 남기는 것임을 미리 밝힌다.
장애인들은 어떻게 사이트를 이용할까?
비장애인 유저로 살면서 이 질문에 대해 크게 고민해본 적이 없다.
대략적으로 스크린리더가 있고 그걸 기반으로 이용할 거라는 막연한 생각을 할 뿐.
EDWITH 웹접근성 이해 강의 (강사:이선주) / ※ 아래 넘버링과 맞지 않음 주의우선 '장애'를 정의하고
사용자가 사이트를 이용하는 환경을 인지하자.
1~4와 같은 신체적장애가 가장 웹접근성 준수가 필요한 사용자일 것이다.
나는 더 나아가 5~6과 같은 케이스 또한 환경적 장애로 간주하여 고려할 필요가 있다고 생각한다.
1. 전맹 시각장애
시력이 거의 없어 앞을 볼 수 없는 상태. 청각 또는 촉각으로 웹을 이용한다.
청각적으로 스크린리더기를 이용하거나 촉각적으로 점자 정보 단말기를 통해 손으로 점자를 읽는다.
→ 이미지에 대한 대체텍스트를 고려해야함.
2. 저시력 시각 장애
- 시력저하, 시야장애 : 뿌옇게 보이거나 페이지의 일부만 확인 가능. 확대기능을 많이 사용한다.
- 색약, 색맹 : 색상 분별에 어려움을 겪으므로, 고대비를 사용하여 페이지 구성이 필요하다.
- 시각장애인 비율 중 저시력 시각장애가 80%라고 한다. 기사참고(링크)
→ 사이트를 확대하여 이용하는 케이스 / UI 검수 시 명도대비에 대한 인지 필요.
3. 중증 운동장애 / 손 운동 장애
목만 움직일 수 있거나, 한손만 사용 가능한 장애환경으로 키보드만으로 사이트를 사용한다.
→ 키보드 원툴에 대한 인지 필요.
4. 청각장애
안내문구 또는 자막을 이용하여 화면의 글씨를 읽음.
→ 오디오가 없는 환경에 대한 인지 필요.
5. 맥 사용자 (의외)
요즘엔 거의 사라졌지만 Windows환경에서만 접근 가능한 사이트가 있었다. (구 공공기관 사이트....)
이러한 환경일 경우 웹에 접근이 불가하여 장애가 된다고 한다.
→ OS 뿐만 아니라 브라우저 호환도 고려할 필요 있음.
6. 느린 인터넷 또는 아웃룩과 같은 특정 상황 (의외2)
인터넷이 느릴 경우 로딩이 느려 UI가 깨진다.
또는 아웃룩과 같은 메일서비스에선 이메일에 배너가 들어갈 경우 이미지가 깨지는 경우가 빈번하다.
이 때 웹 내용에 대해 인식할 수 없다면 이 또한 장애의 범주에 들어갈 것이다.
→ 환경적으로 UI가 깨지는 케이스 고려
기획자는 어떻게 해야 할까?
어디에나 가이드라인은 있다. 한국은 한국형 웹 콘텐츠 접근성 지침(링크)이 있다.
2008년에 제정되어 2015년까지 모든 사이트가 웹 접근성을 보장하게 규정했다.
표준가이드에 맞춰 작업하는 사람은 퍼블리셔다.
다만 기획자 또한 기획 또는 QA 시 웹 접근성을 인지 하며 업무할 필요가 있다는 이야기다.
위에서 장애를 정의하면서 고려하면 좋을 것을 러프하게 적어봤지만,
한 블로거가 기획자가 챙겨야 할 웹 접근성 가이드(링크) 를 친절히 정리해준 걸 공유하고자 한다.
내용 중 특히 업무 시 염두하면 좋을 것을 간추려서 정리하고자 한다.
1. 키보드 엑세스 - 마우스 사용불가 환경에 대한 고려
키보드로 이동, 입력, 탐색, 롤오버, 호버 등 모든 인터랙션이 가능한 지 확인
Tab으로 이동 시 포커스가 이동하는 지 확인
다이얼로그팝업, 모달팝업 등 팝업을 esc키 등으로 닫을 수 있는 지 확인
2. 텍스트 및 이미지 - 이용 환경에 대한 고려
브라우저에서 글꼴 크기를 변경했을 때 폰트 사이즈 및 가변영역이 변경되는 지 확인
이미지 태그에 Alt 속성 (대체 텍스트)를 지원하는 지 확인 - 아래 이미지 참고
Name(alt) 영역에 정보가 있어야 이 이미지가 어떤 상품인지 알 수 있다. 3. 색상 / 명도 대비
특히 중요한 컨텐츠가 있을 수록 색상 및 명도대비에 유의할 것.
(+ 개발자도구 Inspector를 통해 Contrast 4.5이상일 경우 접근성 가이드를 잘 준수하고 있는 것이다.)
4. 히든 컨텐츠
Aria Hidden 또는 CSS를 사용하여 스크린리더 사용자에게도 숨길 수 있다.
한 브런치 글(링크)에서 카카오저금통 액수가 일반 사용자에겐 숨겨지지만, 스크린리더기에선 읽혀서 아쉬움을 토로한 글을 보았다. 만약 숨겨야 하는 컨텐츠라면 동일하게 스크린리더기에도 숨겨야 할 것이다.
당장 웹 접근성 현황을 파악해야 한다면?
늘 모든 건은 급하다.
퍼블리셔가 바빠 죽겠는데, 지금 당장 웹 접근성 현황을 파악해야 한다면?
크롬 확장프로그램인 OPEN WAX를 이용하면 된다.
전체 항목을 확인할 순 없지만, 어느정도 퍼블리셔의 부담을 줄여줄 수 있는 훌륭한 도구다. :)
자세한 이용방법은 이 블로그(링크)를 참고하세요.
웹 접근성 진단도구 OPEN WAX기획자는 참 쉽지 않은 직업이다.
생각지도 못한 범위를 고려하며 기획해야 할 때 어려움을 느낀다.
하지만 깊이 고민해서 결과적으로 '쓰기 참 편하다!'는 평가를 받으면 얼마나 기분이 좋을까? :)
보다 많은 사람이 편한 사이트를 만들기 위해선, 웹 접근성부터 고려되어야 한다는 걸 요즘 알게된다.
