웹 접근성 지침
웹 접근성 지침은 W3C에서 설립한 WAI에서 전문적으로 연구하며 가이드라인을 제공한다.
여기서는 WCAG 기반으로 몇 가지 가이드라인과 적용 방법을 설명한다.
속어, 약어 사용을 지양하라.
속어나 약어 등을 사용하면 이용자가 정보를 이해할 가능성이 낮아진다.
콘텐츠의 제목과 단락을 명확하게 구분하자.
콘텐츠 내 제목과 단락을 명확히 구분하는 것은 스크린 리더가 글의 내용을 파악할 때 도움을 준다.
키보드 동작을 제공하자.
<button>이나 <input>, <select>엘리먼트 등을 사용하지 않고 <div>와 <span>을 CSS와 결합해 비슷하게 구현해 사용할 때가 있다.
하지만 그러면 기본 엘리먼트들이 제공하는 키보드 동작들을 모두 사용하지 못한다.
또한 스크린 리더는 해당 엘리먼트를 선택해야 하는 요소인지, 이벤트를 발생시키는 엘리먼트인지 파악하지 못한다.
그럼에도 <div> 엘리먼트를 반드시 사용해야 한다면 다음과 같은 내용을 지키도록 한다.
-
role : 해당 엘리먼트의 원래 목적을 작성한다.
<div>를<button>의 목적으로 사용할때 role=button으로 작성하면 스크린 리더 등 기계에서 해당 엘리먼트를 버튼으로 인식한다. -
tab-index : 해당 요소를 탭 키로 도달하게 하는 속성이다.
해당 속성을 통해 탭 키로 이동할 다음 키보드 위치를 지정한다. -
키보드 이벤트 리스너 추가하기 : 버튼 동작이 엔터나 스페이스로 동작하게끔 자바스크립트를 추가한다.
Focus하는 지점을 명확하게 하자.
웹 사이트는 키보드만으로도 모든 동작을 수행할 수 있도록 제작되어야 한다.
키보드 사용자는 일반적으로 탭 키를 이용해 포커스를 이동한다.
키보드 사용자들을 위해서 현재 포커스의 위치를 시각적으로 나타내도록 해야한다.
만약 outline CSS 프로퍼티를 0이나 none으로 지정할 경우 Focus가 된 엘리먼트인지 아닌지 화면에서 식별할 수가 없게된다.
따라서 윤곽선을 지우는 것은 지양해야 한다.
멀티미디어 엘리먼트에 접근성을 부여하자.
스크린리더는 텍스트에 접근해 해당 엘리먼트를 읽지만, 이미지나 동영상, 오디오는 모든 스크린 리더에서 접근할 수 없다.
그러니 이러한 엘리먼트들이 어떠한 의미인지 전달해주는 속성들이 있다.
<img src="coffee.png">스크린 리더는 이미지를 "coffee.png, image"라고 읽는다.
예시처럼 파일 이름이 해당 이미지를 잘 설명한다면 괜찮지만 그렇지 않다면 판단하기가 어렵다.
<img src="coffee.png" alt="컵에 담긴 따뜻한 아메리카노" title="아메리카노" />위의 코드처럼 alt와 title속성을 작성한다면 스크린 리더는 "컵에 담긴 아메리카노"라고 읽는다.
alt속성을 통해 이미지를 텍스트로 전달할 때는 올바르게 전달해야 하며 개인적인 견해를 작성하는 것은 지양해야 한다.
이 외에 해당 이미지가 문서에서 특별한 의미가 없다면 <img> 엘리먼트를 사용하기보단 CSS의 background 속성을 이용하도록 한다.
