학습 목표
- 웹 접근성의 개념과 필요성을 이해한다.
- 국내에서의 웹 접근성 실태를 기억한다.
- 웹 콘텐츠 접근성 지침을 기억한다.
- 웹 콘텐츠 접근성 지침을 충족시키는 방법을 기억한다.
- WAI-ARIA의 사용법을 기억한다.
웹 접근성이란?
웹 접근성(Web Accessibility)이란 일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻합니다.
웹 접근성의 궁극적인 목적은 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록하는 것입니다.
웹 접근성의 효과
1. 사용자층 확대
정보 소외 계층도 사이트를 이용할 수 있게 되어 이용자도 늘리고 새로운 고객층도 확보
2. 다양한 환경 지원
다양한 환경, 다양한 기기에서의 웹 사이트를 자유롭게 사용할 수 있게 되므로 서비스의 사용 범위가 확대
3. 사회적 이미지 향상
기업이 사회공헌과 복지에 힘쓰고 있음을 보여주어 기업의 사회적 이미지가 향상되면 그만큼 이용자 수의 증가는 물론 충성 고객을 확보할 수 있는 가능성 증가
웹 콘텐츠 접근성 지침
인식의 용이성(Perceivable)
: 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
1. 적절한 대체 텍스트
: 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
<img src="이미지 주소" alt="대체 텍스트" />- 시각적으로 화면을 인식할 수 없는 사용자 혹은 상황을 대비해서 대체 텍스트를 제공할 필요가 있습니다.
<alt>속성 사용하기
- 배경 이미지와 같이 정보를 인식할 필요가 없는 경우에는 빈 문자열을 줘서 스크린 리더가 인식하지 않게 합니다.
- 콘텐츠에 빈 문자열을 입력하면 콘텐츠 존재 자체도 인식하지 못하게 되므로 주의해야 합니다.
- 인접 요소의 내용에서 이미지의 정보를 충분히 인지할 수 있는 경우에는 작성하지 않는 것이 좋습니다. 이 경우에는 대체 텍스트를 작성할 경우 이미지 정보를 중복해서 제공하게 됩니다.
2. 자막 제공
: 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
- 자막을 포함한 동영상 사용하기
- 자막을 지원하는 멀티미디어 플랫폼 사용하기
- 비디오 요소 안쪽에
<track>요소를 사용하여 자막 파일 불러오기
<video ... >
<track src="자막.vtt" kind="captions" />
</video>- 자막을 제공하기 어려운 경우 대본 또는 수어를 제공하기
3. 색에 무관한 콘텐츠 인식
: 콘텐츠는 색에 관계 없이 인식될 수 있어야 한다.
- 콘텐츠에 테두리 설정하기
- 콘텐츠에 레이블 달기
4. 명확한 지시사항 제공
: 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
- 시각적인 장애를 가진 사용자를 위하여 설명하는 대체 텍스트를 작성해야 한다.
5. 텍스트 콘텐츠 명도 대비
: 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
6. 자동 재생 금지
: 자동으로 소리가 재생되지 않아야 한다.
- 불가피하게 제공해야 하는 경우에는 다음과 같이 해결합니다.
- 가장 먼저 위치시켜 정지할 수 있게 구현하기
- ESC를 눌러 정지
- 3초 내에 정지
7. 콘텐츠 간 구분
: 이웃한 콘텐츠는 구별될 수 있어야한다.
운용의 용이성(Operable)
: 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
8. 키보드 사용 보장
: 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
9. 초점 이동
: 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
10. 조작 가능
: 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
11. 응답 시간 조절
: 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
- 가능하면 시간 제한이 있는 콘텐츠를 넣지 않는 것이 좋지만, 꼭 넣어야 하는 상황에서는 (1) 충분한 시간, (2) 종료 안내, (3) 조절 수단을 제공해야 합니다.
12. 정지 기능 제공
: 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
- 자동 변경 슬라이드 (캐러셀 슬라이드)
- 자동 변경 콘텐츠
13. 깜빡임과 번쩍임 사용 제한
: 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
- 만약 이런 콘텐츠를 제공하게 되는 경우 다음 조건 중 하나를 충족해야 합니다.
- 번쩍이는 콘텐츠가 차지하는 면적이 전체 화면의 10% 미만이어야 함
- 사전에 경고하고 중단할 수 있는 수단을 제공해야 함
- 시간을 3초 미만으로 제한해야 함
14. 반복 영역 건너뛰기
: 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
- 스크린 리더를 사용할 경우, 헤더, 내비게이션 바 등 모든 페이지에서 반복되는 요소도 반복해서 읽게 됩니다. 따라서 이러한 요소를 건너뛰고 메인 콘텐츠로 이동할 수 있는 방법을 제공해야 합니다.
- 가장 앞에 건너뛰기 링크 제공하기
- 메뉴를 필요할 때만 열 수 있도록 만들기
그 외에도 건너뛰기 목적을 달성할 수 있는 방법이 있으면 됩니다.
15. 제목 제공
: 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
16. 적절한 링크 텍스트
: 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
- 이미지에 링크가 걸려있는 경우 링크를 설명해주는 대체 텍스트를 작성해야 합니다.
이해의 용이성(Understandable)
: 콘텐츠는 이해할 수 있어야 한다
17. 기본 언어 표시
: 주로 사용하는 언어를 명시해야 한다.
<html lang="ko">18. 사용자 요구에 따른 실행
: 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.
- 페이지 진입 시에 팝업이 뜨지 않게 해야 하며, 화면을 가리는 레이어 창(모달)이 있는 경우, 가장 상단에 제공하여 가장 먼저 제어할 수 있도록 해야 합니다.
- 스크린 리더 사용자는 새 창이 떴을 때 이를 인지하지 못하고 기존 페이지를 계속 보고있다고 생각할 수 있습니다. 따라서 새 창임을 알려줄 수 있어야 합니다.
- 링크 요소 안에 보이지 않는 요소를 넣어 새 창에 접근하게 됨을 알려주기
<a href="...">페이지<span class="blind">새 창</span></a>- 링크 요소에 title 속성으로 새 창 작성하기
<a href="..." title="새 창">페이지</a>- 링크 요소에 target=”_blank” 속성을 넣기
<a href="..." target="_blank">페이지</a>19. 콘텐츠 선형 구조
: 콘텐츠는 논리적인 순서로 제공해야 한다.
20. 표의 구성
: 표는 이해하기 쉽게 구성해야 한다.
- 테이플 요소 안에
<caption>요소를 사용해서 표에 제목을 제공하기 - 표의 셀은 제목 셀과 데이터 셀이 구분되도록 구성해야 합니다. 제목 셀은
<th>, 데이터 셀은<td>를 사용하면 됩니다. - 표의 구조가 복잡할 경우, 최대한 간소화하거나
<scope>혹은<id>와<headers>속성을 사용하여 작성합니다.
21. 레이블 제공
: 사용자 입력에는 대응하는 레이블을 제공해야 한다.
<input>요소에id를 설정하고<label>요소의for속성으로 연결해줍니다.
<label for="user_id">아이디</label>
<input id="user_id" type="text" placeholder="아이디" />- title 속성을 사용합니다.
<input type="text" title="아이디" placeholder="아이디" />- WAI-ARIA의 aria-label 속성을 사용합니다.
<input type="text" aria-label="아이디" placeholder="아이디" />WAI-ARIA의 경우 꼭 필요한 경우가 아니라면 사용하지 않는 것이 좋습니다. 다른 HTML 속성이나 요소로 대체 가능한 경우에는 해당 속성이나 요소를 우선적으로 사용해주세요.
22. 오류 정정
: 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
- 작성 중, 혹은 제출 시 오류가 발생했을 때 입력했던 내용이 사라지지 않고 유지되도록 해야 합니다.
- 오류가 발생한 경우 사용자에게 오류 발생 원인을 알려줘야 합니다.
- 오류가 발생한 경우 오류가 발생한 위치로 초점이 이동해야 합니다.
견고성(Robust)
: 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
23. 마크업 오류 방지
: 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
- 요소의 열고 닫음에 오류가 없어야 합니다.
- 요소의 속성을 중복해서 사용해선 안 됩니다.
id를 중복해서 사용해선 안 됩니다.
24. 웹 애플리케이션 접근성 준수
: 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
- 웹 콘텐츠에 포함된 웹 애플리케이션도 접근성을 갖춰야 합니다. 접근성을 갖추지 못한 경우에는 대체 수단이나 대체 콘텐츠를 제공해야 합니다.
WAI-ARIA
- WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
- ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
- RIA (Rich Internet Applications) : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다.
WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 해줍니다.
WAI-ARIA 사용법
- 역할(role) : HTML 요소의 역할을 정의하는 속성
- 상태(state) : 요소의 현재 상태를 나타내는 속성 (aria-selected)
- 속성(property) : 요소의 특징을 정의하는 속성 (aria-label), (aria-live)
