웹 접근성 Web Accessibility
Thw power of the Web is in its university, access by everyone regardless of diability is an essential aspect.
- Tim Berners
중요하지만 실무에서 많이 무시되는 영역이다. '내'가 직접적으로 사용하지 않고, 해당 고려사항이 수익과 직결하지 않기 때문이다. 하지만 좋은 개발자란 항상 사용자의 관점을 생각하고, 그들의 편안함을 위해 조금의 수고를 더 하는 것이다.
다양한 사용자 경험, 그에 대한 개발자의 당연한 고려
시각 장애, 청각 장애, 지체 장애, 뇌병변 장애 등 다양한 카테고리의 장애가 있다. 그들이 정보를 접하는 방법을 생각하여 접근성이 좋은 개발을 생각하자.
사범대를 다니며 특수교육에 관한 전공 수업을 들었던 적이있다. 이 때, 교수님께서 시력이 나빠 안경을 쓰는 학생들을 보고 했던 말이 있다.
'여러분들이 안경을 벗고 교실 뒷편에서 수업을 들으면 남들은 쉽게 접할 수 있는 수업내용을 제대로 가져갈 수 없게됩니다. 하지만 안경이라는 도구를 이용해 남들과 동등한 수업경험을 가져가는 것이지요. 누군가에게 특별한 대우를 해주는 것이 아닌, 최대한 많은 사람들이 평등하게 교육 경험과 서비스를 취할 수 있도록 고려하는 것, 그것이 특수교육에 대해 생각할 때 놓쳐선 안될 시작점입니다.'
클라이언트 단에서 사용자와 직접 소통하는 프론트엔드 개발자로서 최대한 많은 사용자가 편한 사용자 경험을 가질 수 있도록 노력하는 것은 매우 중요하다.
(어플이지만) 웹접근성에 대한 개발자의 올바른 자세를 일깨워준_ 반지하 게임즈
개인적으로 좋아하던 게임이다. 2033 폐허가된 서울이라는 배경에서 벌어지는 스토리 기반 선택지 게임이다. 선택지에 따라 체력, 돈, 감성 등의 게이지가 하나라도 다 떨어지면 게임이 종료되고 스토리가 마무리된다.
글자를 읽어주는 '보이스오버'라는 기능을 사용하는 시각장애인이 캐릭터의 상태창 항목은 읽어주지 않아 게임을 하는데 다소 어려움이 있다는 코멘트를 달았다. 이후 담당 개발자가 적극적으로 불편사항을 시정하고자 노력하였고, 해당 코멘트를 게시한 사용자와 소통하여 모든 불편사항을 시정한 일이 있다.
웹접근성보단 어플리케이션에 관한 일화지만, 웹에서도 똑같이 적용할 수 있는 사례라고 생각한다. 개발자도 본인이 사용자로서 경험한 것 이상으로 모든 면을 미리 고려하기란 쉽지 않다. 하지만, 웹 접근성에 대한 기본적인 개념을 가지고, 예기치 못한 피드백이 왔을 때 적극적으로 대처할 수 있는 자세가 필요하다.
대체 텍스트를 다는데 소홀히 하지 말고, header, main 등 구조 태그에 신경쓰는 것 부터 시작하자.
웹접근성, 어떻게 고려할까?
01. 대체 텍스트
a태그에 image를 넣고 대체 텍스트를 넣지 않으면, 검색 등에 문제가 많다. 이미지의 대체 텍스트에는 해당 이미지의 뜻으로 넣자. 'logo, ...이미지 '등의 예시는 매우 좋지 않다. 약어를 사용할 땐 K.B.D Bank 와 같이 점을 써준다.
<header class="header">
<h1 class="logo">
<a href="./index.html">
<!-- xhtml 로 하면 닫는 태그 자동으로 들어감 -->
<img src="./assets/logo.png" alt="Web Cafe">
</a>
</h1>
</header>02. 구역 설정
접근성 보조기기 (랜드마크)를 사용할 때를 위해 header 등 구역을 잘 정해줘야 한다. 그렇지 못할 경우 role 속성을 사용한다.
03. lang="ko-KR"
헤더에서 언어설정을 해줘야 접근성 보조기가 음성을 제대로 인식할 수 있다.
(꾸준히 업데이트하기)