웹 접근성
'웹 접근성'을 알아보기 전에 단어를 떼어서 살펴보자. '웹' 그리고 '접근성' 웹은 넘어가고 접근성은 무엇일까?
접근성은 사용자의 신체적 특성이나, 지역, 나이, 지식 수준, 기술, 체험과 같은 제한사항을 고려하여 가능한 많은 사용자가 불편없이 이용할 수 있도록 서비스를 만들어 제공하고 이를 평가할 때 쓰이는 말이다.
다시말해 접근성은 장애 여부와 관계없이 누구나 이용할 수 있는것을 의미한다.
예전 발가락 뼈가 부러진적 있었다. 그 때 지하철을 타고 이동해야 했는데, 어느 역에 가더라도 몸이 불편한 사람들을 위해 엘리베이터를 사용할 수 있었다.
다른 예를 들어보자. 왼손잡이인 내 친구는 일반 마우스를 사용하면 불편하기 때문에 선택적으로 왼손잡이용 마우스를 구매해서 사용 할 수있었다.
위 예시들이 접근성을 의미한다. 내가 어떤 장애가 있어도 제품 또는 서비스를 누릴 수 있는것을 의미한다. '웹 접근성' 단어를 다시 한번 보자. 웹과 접근성이 합쳐져있다. 이 말의 뜻은 웹 서비스에 접근할 때 장애여부와 관계없이 누구나 접근 가능해야함을 말한다.
왜 웹 접근성을 높여야 할까?
WHO world health survey에 의하면 세계 15세 이상 인구의 15.6% (약 7억 8500만)가 장애인 이라고 한다. 15.6%는 결코 적은 비율이 아니다.
웹 서비스는 사용자들이 사용하도록 만든것이다. 그런데 사용자들이 접근할 수 없다면 사용할 수 없을것이다. 다시말해 사용자가 사용할 수 없다면, 만드는 이유가 없다.
서비스를 제작할 때 사용자들이 웹사이트를 어떻게 사용할지, 어떠한 상황에 놓여있는지 알지못한다. 그러므로 모든 가능성을 열어두고 항상 접근할 수 있도록 제작하는게 바람직하다.
내가 만드는 서비스에 많은 사람들이 방문하기 바란다면 웹 접근성은 선택이 아니라 필수적이다.
누구를 위해 웹 접근성을 높여야 할까?
웹 접근성은 특정한 누군가를 위한 기술이 아닌 우리 모두를 위한 기본이다. 장애가 있는사람에게만 해당하는것이 아닌, 장애를 갖지 않은 사람도 충분히 필요한 상황이있다.
앞서 말했듯이 세계인구의 15%가 장애를 갖고있다. 장애의 종류에는 영구장애(시각, 청각장애인 등), 일시장애(다쳐서 잠깐 사용하지 못하는경우), 상황장애와 인지, 신경장애 등이 있다.
또한, 기술적제한, 노화로 인한 문제, 공황장애 등 사용자들이 다양한 상황에 놓여있다. 우리는 이런 다양한 상황에도 웹 사이트를 쉽게 탐색할 수 있도록 만들어야 한다.
어떻게 웹 접근성을 높일것인가?
웹 접근성을 높이기 위해서는 사용자가 필요로 하는게 무엇인지 사용자 관점에서 생각해야한다.
사용자의 관점이 되어 웹 접근성을 높이는 몇가지 방법들을 알아보자.
1. 앞을 보지못하는 사용자를 위해
시각장애인들은 디스플레이를 제대로 볼 수 없다. 아예 못보는 사용자들도 있지만, 시력이 매우 나빠 화면을 제대로 못보는 경우도 있을것이다.
이러한 사용자들은 스크린리더를 통해 웹을 탐색하게 된다. 스크린리더가 제대로 탐색할 수 있도록 HTML을 작성하는것이 중요하다.
스크린리더가 제대로 탐색하기 위해서는 시멘틱 HTML을 사용하는것이 중요하다.
<h1>제목 요소 입니다.</h1><span style="font-size: 32px; margin: 21px 0; font-weight: bold">제목 요소 입니다.</span>
위 두가지 마크업은 디자인 상으로는 똑같이 표현된다. 하지만 진짜 동일하게 동작하는것일까?
스크린리더 사용자들에게는 두가지 요소가 다른것으로 파악된다. <h1> 태그는 제목을 담당하는 의미를 가지고 있다. 그렇기 때문에 스크린리더로 요소를 들었을때도 h1 태그임을 알려준다.
하지만 후자의 경우 <span> 요소로 스크린리더상으로 제목이라고 인식이 불가능하다. 때문에 스크린리더 사용자들은 제목이 아닌 내용 중 하나라고 인식할 수도 있는것이다.
이처럼 시멘틱하게 작성한다면 보조기기를 사용하는 사용자들도 그 의미를 쉽게 파악할 수 있다.
2. 마우스를 사용못하는 사용자를 위해
클릭 가능한 모든 요소들은 마우스가 아닌 키보드로 접근할 수 있어야한다. 여러분들도 마우스가 아닌 키보드의 엔터, 탭, shift+탭, esc로 서비스를 탐색한 경험이 있을것이다.
키보드를 통한 탐색을 하기 위해서는 두가지 방법이 있다.
- 시맨틱 button 태그 사용하기
- 버튼에 js 코드 추가하기
시맨틱 button 태그를 사용한다면 키보드를 통해 탐색이 가능하다. 하지만, div로 버튼을 만든다면 탐색이 불가능하다. 피치못할 상황으로 div 태그를 사용해야 한다면 js 코드를 추가함으로써 키보드 사용자의 접근성을 높일 수 있을것이다.
const buttonEle = document.getElementById("acc-button");
buttonEle.addEventListener("click", () => {
// 버튼을 클릭할 때 발생해야 하는 작업에 대한 코드
}
);
buttonEle.addEventListener("keydown", (event) => {
if (event.key === ' ' || event.key === 'Enter') {
// 버튼을 눌렀을 때 발생해야 하는 작업에 대한 코드
// 스페이스바 키를 눌러도 콘텐츠가 스크롤되지 않도록 기본값 방지
event.preventDefault();
}
});3. 애니메이션을 보면 안되는 사용자를 위해
피치못할 사정으로 애니메이션을 보면 안되는 사용자들도 있다. 이런 사용자들을 위해 운영체제에서 애니메이션을 on/off 하는 기능이 존재한다.
mac os 에서는 위와같이 환경설정에서 동작 줄이기를 통해 애니메이션을 최소화 하는 방법이 있다. 이렇게 사용자들이 애니메이션 동작을 off 해놓았다면 우리 서비스 안에있는 애니메이션 또한 최소화 되어야한다. 이를 해결하기 위해서는 CSS 또는 JS를 추가해야한다.
- CSS - 미디어 쿼리 조작
@media (prefers-reduced-motion: no-preference) {
.animate-balls {
animation: jump infinite 2s linear;
animation-iteration-count: infinite;
}
}- JS - matchMedia api 사용
const animationClassName = matchMedia("(prefers-reduced-motion)").matches
? ""
: "animate-balls";위 세가지 예제를 제외하고 웹 접근성을 높이기 위한 방법은 많다. 더 자세한 내용이 궁금하다면 웹 콘텐츠 접근성 지침(WCAG)2.0 을 확인해보자.
마치며
웹 접근성은 누군가를 위한것이 아닌 모두를 위한것이며 꼭 지켜야한다고 생각한다. 항상 웹 접근성에 대해 고민하고, 더 나은 방향으로 코드를 작성해야 할것이다.
구현에만 급급하지 않고, 프로젝트를 한번 돌아보며 접근성에 대한 생각을 코드에 적용했는지 확인해보는것은 어떨까?
참고자료
1. "웹 접근성 소개." W3C. 2019년7월11일 수정, 2021년10월12일 접속, https://www.w3.org/WAI/fundamentals/accessibility-intro/ko
2. "한국형 웹 콘텐츠 접근성 지침 2.1" 한국 웹 접근성 인증평가원. 2016년03월24일 수정, 2021년10월12일 접속, http://www.wa.or.kr/board/view.asp?sn=161&page=1&search=&SearchString=&BoardID=0004&cate=
3. 세계보건기구. WHO 세계장애 보고서. 서울:(재)한국장애인재단, 2012
4. Anuradha Kumari. 2020년10월. Inaccessible websites? - it's you, not JavaScript. JSConf. 한국.
5. 안동한. 2020년11월. 정보접근성 국제표준으로 알아보는 모두를 위한 기술. 2020 정보접근성기술 컨퍼런스. 한국
