웹 접근성(Web Accessibillity)
: 일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것
- 웹 접근성을 갖추면 웹에 접근했을 때 어떤 상황에서도 항상 동등한 수준의 정보를 제공받도록 보장할 수 있음
- 웹 접근성의 궁극적인 목적은 어떤 상황, 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것
웹 접근성을 갖추면 얻을 수 있는 효과
- 1 사용자층 확대 : 웹 접근성 확보 시 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게됨에 따라 이요자 증가, 새로운 고객층의 확대를 기대할 수 있음
- 2 다양한 환경 지원 : 운전중이라 화면을 보기 어렵다거나 마우스를 사용할 수 없는 상황등 다양한 환경 및 기기에서 웹 사이트를 자유롭게 사용할 수 있게 되므로 서비스 사용 범위가 확대됨
- 3 사회적 이미지 향상 : 기업의 사회적 이미지가 향상되면 그만큼 이용자 수의 증가 및 충성 고객 확보의 가능성이 높아짐
웹 콘텐츠 접근성 지침
A. 인식의 용이성(Perecivable) : 모든 컨텐츠는 사용자가 인식할 수 있어야 함
1. 적절한 대체 콘텐츠
: 텍스트가 아닌 콘텐츠는 그 의미나 용도를 알 수 있도록 대체 텍스트를 제공해야 한다
// alt 속성 사용하기
<img src='이미지 주소' alt='대체 텍스트' />- 시각적으로 화면을 인식할 수 없는 사용자 혹은 상황을 대비해서 대체 텍스트를 제공할 필요가 있음
- 배경 이미지와 같이 정보를 인식할 필요가 없는 경우에는 alt 값으로 빈 문자열을 주어 스크린 리더가 인식하지 않게 함
- 인접 요소의 내용에서 이미지의 정보를 충분히 인지할 수 있는 경우에도 alt 값으로 빈 문자열을 주는 것이 좋음 → 이 경우에는 대체 텍스트를 작성할 경우 이미지 정보를 중복해서 제공하게 됨
2. 자막 제공
: 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다
- 자막을 포함한 동영상 사용하기
- 자막을 지원하는 멀티미디어 플랫폼 사용하기
- 비디오 요소 안쪽에 track 요소를 사용하여 자막 파일 불러오기
<video ...>
<track src='자막.vtt' kind='captions' />
</video>- 자막을 제공하기 어려운 경우 대본 또는 수어를 사용하기
3. 색에 무관한 콘텐츠 인식
: 콘텐츠는 색에 관계 없이 인식될 수 있어야 한다
- 색약, 색맹 등의 색을 인지하는데 어려움이 있는 사용자의 경우 색으로 구분되는 콘텐츠를 제대로 파악하지 못할 수 있음
- 콘첸츠에 테두리를 설정하거나 레이블을 다는 방식으로 해결하기
4. 명확한 지시사항 제공
: 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계 없이 인식될 수 있어야 함
- 지시사항이 동그란 버튼, 우측 버튼 이런 방식으로 가리켜 지시하고 있다면 시각 장애를 가진 사람은 어떤 버튼을 가리키는 것인지 알 수 없음. 따라서 해당 버튼을 설명하는 대체 텍스트를 작성해야 함
- 소리를 통해 지시하는 경우, 청각 장애를 가진 사용자는 지시사항을 제대로 인지 할 수 없으므로 시각적 피드백도 함께 제공해야 함
5. 텍스트 콘텐츠 명도 대비
: 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 함
- 명도 대비가 충분히 확보되지 않은 경우 텍스트를 읽기 어려우으로 꼭 지켜야 함
- 텍스트가 18pt 또는 Bold 14pt 이상을 경우, 확대 가능한 페이지 일 경우, 비활성화 콘텐츠, 장식 목적의 콘텐츠 일 경우 → 3 대 1까지 허용
6. 자동 재생 금지
- 동영상, 오디오, 음성, 배경 음악 등 모든 종류의 소리를 말함
- 스크린 리더를 사용하는 경우, 자동으로 재생된 소리와 겹쳐 페이지 내용을 파악하기 어려워짐
- 불가피하게 제공해야하는 경우 → 가장 먼저 위치시켜 정지할 수 있게 구현, ESC를 눌러 정지, 3초 내 정지
7. 콘텐츠 간 구분
- 이웃한 콘텐츠는 구별될 수 있어야 한다
- 웹 페이지를 구성하는 모든 콘텐츠는 시각적으로 구분할 수 있어야 한다
B. 운용의 용이성(Operable)
: 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다
8. 키보드 사용 보장
- 모든 기능은 키보드만으로도 사용할 수 있어야 함
- 모든 사용자가 마우스를 사용할 수 있는 것은 아님. 키보드로도 웹 페이지에서 제공하는 기능을 사용할 수 있도록 제공하는 것이 좋음
9. 초점 이동
- 키보드에 의한 초점은 논리적으로 이동히야 하며 시각적으로도 구별 할 수 있어야 함
- 초점은 일반적으로 왼쪽에서 오른쪽으로, 위쪽에서 아래쪽으로 이동하게 됨
- 스크린 리더 사용자와 키보드 사용자도 이 순서로 웹 페이지를 탐색할 수 있도록 마크업을 구성해야 함
10. 조작 가능
- 사용자 입력 및 컨트롤은 조작 가능하도록 제공
- 미세한 조작이 어려운 상황에서도 원하는 요소를 조작할 수 있도록 해야 함
11. 응답 시간 조절
- 시간 제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 함
- 가능하면 시간 제한이 있는 콘텐츠를 넣지 않는 것이 좋지만 불가피할 경우 충분한 시간, 종료 안내, 조절 수단을 제공히야 함
- 페이지 자동 전환하는 경우에도 전환되기 전까지 시간을 연장하거나 정지할 수 있는 수단을 제공해야 함
12. 정지 기능 제공
- 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 함
- 자동 변경 콘텐츠, 캐러셀 슬라이드 : 이전, 다음, 정지 기능을 제공해야 하며 정지 버튼이 없더라도 마우스 호버 및 키보드 접근시 정지되도록 구현
13. 깜빡임과 번쩍임 사용 제한
- 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 함
- 불규칙적으로 깜빡이는 화면은 눈에 피로를 유발하고 시함 경우 광과민성 발작을 유발 시킴
- 만약 이런 콘텐츠를 제공하는 경우 차지하는 면적이 전체화면의 10% 미만, 사전 경고와 중단할 수 있는 수단 제공, 시간이 3초 미만이어야 함
14. 반복 영역 건너뛰기
- 콘텐츠가 반복되는 영역은 건너뛸 수 있어야 함
- 스크린 리더를 사용할 경우 헤더, 내비게이션 바등 모든 페이지에서 반복되는 요소도 반복해서 읽게 됨
- 따라서 이러한 요소를 건너뛰고 메인 콘텐츠로 이동할 수 있는 방법을 제공히야 함
- 가장 앞에 건너 뛰기 링크 제공, 메뉴를 필요할 때만 열 수 있도록 만들기 등의 해결 방법 고려
15. 제목 제공
- 페이지, 프레임, 콘텐츠 블록에는 적적한 제목을 제공해야 함
- 특수 문자는 1개까지만 사용
16. 적절한 링크 텍스트
- 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 함
- 이미지에 링크가 걸려 있는 경우 링크를 설명해주는 대체 텍스를 작성해야 함
C. 이해의 용이성(Understandable)
17. 기본 언어 표시
- 주로 사용하는 언어를 명시해야 함
- HTML 요소에 lang 속성을 제공하여 제공하면 됨
<html lang='ko'>- 페이지 내에 다른 언어가 존재하는 경우에는 해당 요소에 lang 속성을 표기함
18. 사용자 요구에 따른 실행
: 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 함
- 페이지 진입 시에 팝업이 뜨지 않게 해야 하며, 화면을 가리는 레이어 창이 있는 경우 가장 상단에 제공하여 가장 먼저 제어할 수 있어야 함
- 스크린 리더 사용자는 새 창이 떴을 때 이를 인지하지 못하고 기존 페이지를 계속 보고 있다고 생각할 수 있음. 따라서 새 창임을 알려줄 수 있어야 함
## 링크 요소 안에 보이지 않는 요소를 넣어 새창에 접근하게 됨을 알려주기
<a href='...'>페이지<span class='blind'>새 창</span></a>
## 링크 요소에 title 속성으로 새 창 작성하기
<a href="..." title="새 창">페이지</a>
## 링크 요소에 target=”_blank” 속성을 넣기
<a href="..." target="_blank">페이지</a>
19. 콘텐츠 선형 구조
: 콘텐츠는 논리적인 순서로 제공해야 함
- 글은 제목, 내용 순서로 제공되는 것이 논리적임
- 탭에 해당하는 내용이 있는 경우, 탭 제목 다음에 탭 내용이 오도록 마크업을 구성해야 함
- 스크린 리더는 마크업 순서대로 내용을 읽어준다는 것을 항상 고려해야 함
20. 표의 구성
- 표는 이해하기 쉽게 구성해야 한다
- 비장애인은 표를 보면 그 구조를 인식할 수 있지만, 시각 장애가 있는 경우에는 내용을 들으면서 그 구조를 파악해야만 함
- 따라서 듣기만 해도 표의 구조, 내용을 이용하기 쉽게 구성해야 함
- 테이블 요소 안에 caption 요소를 사용해서 표에 제목을 제공하기
21. 레이블 제공
: 사용자 입력에는 대응하는 레이블을 제공해야 함
- 사용자가 정보를 입력하는 상황에 어떤 정보를 입력해야 하는지 정확하게 알 수 없으만 입력이 불가함
// 적합하지 않은 예
// <input> 요소에 value나 placeholder 속성만 제공하는 것은 적합하지 않음
<input type='text' placeholder='아이디' />
// 적합 한 예
// 1- <input> 요소에 id를 설정하고 <label> 요소에 for 속성으로 연결해줌
<label for='user_id'>아이디</label>
<input id='user_id' type='text' placeholder='야이디' />
// 2 - title 속성을 사용함
<input type='text' title='아이디' placeholder='아이디' />
// 3 - WAI-ARIA의 aria-label 속성을 사용
<input type='text' aria-label='아이디' placeholder='아이디' />
22. 오류 정정
: 입력 오류를 정정할 수 없는 방법을 제공함
- 작성 중 혹은 제출 시 오류가 발생했을 때 입력했던 내용이 사라지지 않고 유지되도록 해야 함
- 오류가 발생할 경우 사용자에게 오류 발생 원인을 알려줘야 함
- 오류가 발생할 경우 오류가 발생한 위치로 초점 이동해야 함
D. 견고성(Robust)
: 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 해야함
23. 마크업 오류 방지
- 마크업 언어는 요소를 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 함
24. 웹 애플리케이션 접근성 준수
- 콘텐츠에 포함된 웹 애플리케인션은 접근성이 있어야 함
- 웹 콘텐츠에 포함된 애플리케이션도 접근성을 갖춰야 함
- 접근성을 갖추지 못한 경우에는 대체 수단이나 대체 텍스트를 제공해야 함
'📚 기초 지식' 카테고리의 다른 글
| 브라우저 (0) | 2023.01.15 |
|---|---|
| WAI-ARIA (0) | 2023.01.01 |
| SEO(Search Engine Optimization) (0) | 2022.12.29 |
| 웹 표준 (0) | 2022.12.29 |
| 와이어프레임 & 프로토타입 (0) | 2022.12.19 |