개요
회사에서 웹 접근성 심사를 받고 반려된 부분을 수정하는 작업을 수행했습니다.
웹 접근성을 위한 작업들을 숙지하기 위해 앞으로 내용을 지속적으로 추가해 나가려 합니다.
웹 접근성이란?
장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록
보장하는 것으로 웹 접근성 준수는 법적 의무사항입니다.
웹 접근성 작업
1. 텍스트가 아닌 콘텐츠 alt 태그
이미지와 비디오 태그 등의 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 합니다.
만약 해당 콘텐츠에 텍스트가 있는 경우 해당 내용과 동등하게 제공돼야 합니다.
2. 배경색과 글자색 간의 명도 대비
배경색과 글자색 간의 명도대비가 4.5:1 이상이 되도록 해야 합니다.
화면 확대가 가능한 경우 3:1 이상이 되도록 해야 합니다.
3. 마우스 제어 요소 키보드 제어
마우스로 제어할 수 있는 요소는 키보드로도 제어할 수 있어야 합니다.
저의 경우는 slick slider를 활용해 슬라이드를 만들었을 때 마우스 클릭으로는
아래 이미지를 클릭해 슬라이드 이동을 할 수 있었지만 키보드로는 할 수 없었습니다.
해당 문제는 slick slider의 accessibility 속성에 true 값을 줘 해결했지만
만약 그게 되지 않는다면 tabindex 속성을 태그에 추가해 키보드 접근을 허용할 수 있습니다.
4. 불필요한 키보드 접근 X
3번과 반대되는 내용입니다. 아무런 동작이 없는 요소에 tabindex가 있어
불필요하게 접근하면 안 됩니다. tabindex를 속성을 없애거나 -1 값을 주면 됩니다.
5. 초점 요소 시각화
초점( focus )된 요소는 시각적으로 보이도록 해야 합니다.
Tab으로 요소를 이동할 때 현재 내가 어떤 요소를 보고 있는지 명확이 보여야 합니다.
쉬운 해결법으로는 css로 focus 시에 모든 요소에 outline이나
text-decoration-line : underline을 걸어주는 것입니다.
이때 outline-offset으로 outline을 요소에서 띄워주면 더 좋습니다.
*:focus {
outline: 2px dotted #000;
outline-offset: 2px;
text-decoration-line: underline;
}
6. 세분화된 타이틀 제공
페이지의 타이틀은 내용에 맞는 세분화된 타이틀을 제공해야 합니다.
7. 새 창 열림 추가 설명
새 창 열림 기능이 있다면 "새 창 열림"과 같이 추가 설명이 필요합니다.
물론 새 창이 열리지 않는데 새 창 열림 추가 설명을 넣는 것도 안됩니다.
8. 콘텐츠 간 제목 제공
콘텐츠 간의 제목 제공이 필요합니다. 단순히 텍스트가 아닌
제목을 의미하는 h 태그를 넣어줘야 합니다.
예를 들어 "월간 공연 일정"과 "지난 공연 리스트"와 같은 제목은 span태그가 아닌
< h > 태그를 해줘야 하며 만약 월간 공연 일정이 <h2> 태그라면 지난 공연 리스트는
소제목이니 더 작은 <h3> 태그를 걸어주면 좋습니다.
9. 노출되는 레이어 초점
모달창과 같이 버튼 클릭을 통해 띄워지는 레이어 화면의 경우
모달창 버튼 클릭 시 노출되는 모달창의 요소를 바로 인지할 수 있도록 합니다.
