웹 접근성은 모든 신체적 한계, 환경적 한계를 고려해 개발하는 것을 의미합니다. 웹 접근성을 따르는 개발은 장애가 있거나 노령으로 인한 신체 변화, 여러 기기 환경을 사용하는 모든 사람이 웹 사이트와 도구등을 사용할 수 있도록 개발 라는하을 의미합니다.
웹 접근성 지침 준수 사항
WCAG(Web Content Accessibility) 기반으로 몇 가지 가이드라인과 적용방법을 토대로 설명 할것이다.
- 속어 약어 사용을 지양하라 속어나 약어 같은경우 장애를 가진 사람이든 가지지 않은 사람 모두가 정보를 이해할 가능성이 매우 낮기 때문에 가급적으로는 표준용어로 모든 사용자분 들이 이해할 수 있게끔 쓰는것을 권고한다.
- 콘텐츠의 제목과 단락을 명확하게 구분하자 스크린 리더는 컴퓨터의 화면을 읽어 주는 프로그램입니다. 시각적으로 정보를 획득하기 어려운 사람들을 위해서 화면에 나타나는 정보를 기계가 음성으로 읽어 줍니다. 콘텐츠 내 에 제목과 단락을 제대로 구분을 해줘야 기계가 글의 내용을 파악할 때 도움을 주기 때문에 .HTML 작성할 때 제목 요소와 단락을 내용의 의미에 맞게 나누는 것이 중요합니다. 시맨틱 하게 HTML 작성을 하면 기계가 각 태그에 의미에 맞게 요소의 내용에 맞게 읽는 방식으로 조절을 해 줍니다.
- 키보드 동작을 제공하자
tab을 사용해서 다음 input으로 이동해보자:
<button>,<input>,<select>요소를 사용하지않고<div>와 CSS를 이용해 지슷하게 구현을 해 사용할 때도 있습니다. 이럴땐 엔터 키나 탭 키를 누를 때 해당 요소로 이동시키는 동작과 같은 상호작용들을 누릴 수 없습니다. 스크린 리더가 그냥 div 만 설정하면 이 요소를 선택해야 하는 요소인지, 이벤트를 발생시키는 요소인지 파악하지 못한다. 그래서 div 요소를 사용해야한다면 추가적인 코드 작성으로 사용목적을 정확하게 명시를 해 줘야합니다. role: 해당 요소의 목적 tab-index: 해당 요소를 탭 키로 도달하게 하는 속성. 키보드 이벤트 리스너 추가하기
- Foucus하는 지점 명확하게 웹 사이트는 키보드만으로 모든 기능이 동작해야 합니다.
foucus 하시면 윤곽선이 나타난다:
항목에 Focus가 된다면 시력이 있는 사용자를 위해 윤곽선이 나타나야한다.(윤곽선은 기본으로 나타난다 하지만 css 설정으로 없앨 수 있다 그럴경우 다른방법으로 focus 되어있는지 나타내야합니다)
- 멀티미디어 요소에 접근성을 부여하자 이미지나 동영상,오디오는 모든 스크린 리더가 접근할 수 없다. 시각장애 혹은 청각장애가 있으신분은 접근하기가 힘들다 그래서 이런분들에게 의미를 전달하기위해서 존재하는 속성이있습니다.
이렇게 좋은 예제처럼 alt ,title 속성추가하여 작성하면 스크린리더가 더 명확하고 자세하게 이미지의 의미를 전달할 수 있다.// bad <img src=”coffee.png” /> // good <img src=”coffee.png” alt="컵에 담긴 따듯한 아메리카노" title="아메리카노"/>
