Web Content Accessibility Guidelines (웹 콘텐츠 접근성 지침)
시각, 청각, 신체, 언어, 인지, 학습 및 신경 장애 등 광범위한 장애뿐만 아니라 노화로 인해 신체 능력이 변하는 노인을 비롯한 비장애인들의 접근성을 증진시키는 방법을 정의한다.
웹 접근성은 접근 가능한 콘텐츠뿐만 아니라 웹 브라우저 및 다른 사용자 에이전트들에도 영향을 주고 받는다.
0. 지침의 위계구조 (layers)
콘텐츠를 좀 더 접근성있게 만드는 방법에 대한 지침을 제공하기 위해 함께 작동
원칙 (principles)
- 웹 접근성의 기초를 제공하는 4가지 원칙
- 인식의 용이성 (perceivable)
- 운용의 용이성 (operable)
- 이해의 용이성 (understandable)
- 견고성 (robust)
지침 (guildlines)
- 웹 콘텐츠 저작자들이 노력을 해야할 기본적인 목적들
- 성공기준을 이해하고 기법들을 보다 더 잘 구현할 수 있도록 도와주는 기본적인 틀(framework)과 전반적인 목표들(objectives)
성공기준 (success criteria)
- 요구사항과 준수에 대한 검증이 필요한 곳에서 해당 지침이 사용되기 위한 각 지침별 검증가능한 성공기준
- A (최저), AA, AAA (최고) 세 가지 기준 존재
충분/조언기법 (sufficient and advisory techniques)
- 개별 성공기준이 요구하는 것 이상을 다룸. 지침을 보다 더 잘 구현할 수 있도록 도움
1. 인식의 용이성
정보와 사용자 인터페이스 요소는 사용자가
인식할 수 있는 방법으로 제시되어야 함
1) 대체 텍스트
큰 인쇄물, 점자, 음성, 기호 또는 간단한 언어와 같이 사용자가 필요로 하는 다른 형식으로 변경할 수 있도록 콘텐츠에 대한 대체 텍스트를 제공해야 함
👉 level A
- 사용자가 필요로하는 다른 형식으로 변경할 수 있도록 텍스트가 아닌 콘텐츠들은 대체 텍스트를 제공해야 함
- controls, input: 목적을 설명하는 이름을 가져야 함
<label for="user-email">아이디</label><input type="email" id="user-email" **name="uid"** required placeholder="이메일 주소">2) 시간 기반 미디어
👉 level A
- 오디오와 비디오 같은 미디어의 경우, 시각 및 청각 정보를 올바른 순서로 제공하는 텍스트 설명과 시간 기반 인터렉션의 결과를 달성하기 위한 수단을 제공해야 함
- 모든 사전 녹음된 오디오 콘텐츠에는 자막을 제공해야 함
👉 level AA
- 실시간 오디오 콘텐츠에 실시간 자막을 제공
👉 level AAA
- 사전 녹음된 오디오 콘텐츠에 수어 통역 제공
- 오디오의 일시정지만으로는 충분하지 않은 경우, 확장형 오디오 설명을 제공
3) 적응 가능
콘텐츠는 정보나 구조의 손실 없이 더 간단한 레이아웃 같은 다른 방법들로 표시될 수 있도록 제작되어야 함
👉 level A
- 전달되는 정보와 구조, 관계는 프로그래밍 방식으로 결정되거나 텍스트로 이용가능해야 함
- 콘텐츠가 표시되는 순서가 의미있는 순서일 경우, 단어와 단락이 콘텐츠의 의미를 변경하지 않는 순서로 제시되어야 함
- 이해를 돕기 위한 지시문은 감각적인 특성에만 의존해서는 안 됨
- 시각적인 분별을 위한 용도로만 사용하면 안 된다는 뜻
👉 level AA
- 특정 디스플레이 방향이 필수적이지 않는 이상, 콘텐츠는 한 방향으로만 보거나 작동되도록 제한해서는 안 됨
- 입력 목적 필드는 의미를 식별할 수 있도록 결정되어야 함
👉 level AAA
- 사용자 인터페이스 구성요소, 아이콘, 영역의 목적 식별 가능하도록 프로그래밍 방식으로 결정되어야 함
4) 식별 가능
사용자가 콘텐츠를 더 쉽게 보고 들을 수 있도록 제작되어야 함
👉 level A
- 색상은 시각적인 수단으로만 사용되어서는 안 됨
- 3초 이상 재생되는 오디오의 경우, 일시정지 또는 중지할 수 있는 메커니즘을 제공해야 함
👉 level AA
- 텍스트와 텍스트 이미지의 시각적 표현을 위한 명도대비율은 4.5:1 이상 되어야 함
- 식별가능한 색상을 사용해야 함
- 텍스트는 콘텐츠나 기능 손상, 보조 공학 없이 최대 200%까지 크기 조정이 가능해야 함
- 자막, 텍스트 이미지 제외
- 사용되는 기술이 시각적 표현을 할 수 있는 경우라도, 텍스트 이미지보다는 텍스트로 전달해야 함
- 사용자의 요구사항이나 로고의 경우 제외
- 스크롤의 경우, 단방향으로만 가능하도록 제공
- UI 구성요소, 그래픽 객체는 명도대비율이 최소 3:1 이상 되어야 함
- 텍스트 간격
- 줄 높이 - 글자 크기의 1.5배 이상
- 문단 간격 - 글자 크기의 2배 이상
- 글자 간격 - 글자 크기의 0.12배 이상
- 단어 간격 - 글자 크기의 0.16배 이상
hover나focus적용 시, 이를 해제할 수 있으면서 마우스 포인터로 가리킬 수 있으면서 지속되어야 함
👉 level AAA
- 텍스트와 텍스트 이미지의 시각적 표현을 위한 명도대비율은 7:1 이상 되어야 함
- 배경음이 없거나 배경음을 끌 수 있어야 함. 배경음이 있다면, 전반적인 음성 콘텐츠보다 최소한 20dB 이상 낮아야 함
- 텍스트 블록의 시각적 표현
- 사용자가 글자색과 배경색을 선택할 수 있어야 함
- 가로폭은 80자 이상, 글리프 이하
- 줄 간격은 문단 내에서 최소 1.5배 이상, 문단 간격은 행 간격보다 최소 1.5배 이상
- 텍스트 크기를 최대 200%까지 조절할 수 있어야 함
- 텍스트 이미지는 필수적인 경우에만 사용되어야 함
2. 운용의 용이성
사용자 인터페이스 구성요소 및 네비게이션은 운용 가능해야 함
1) 키보드 접근성
키보드로 모든 기능을 사용할 수 있어야 함
👉 level A
- 키보드 인터페이스를 통해 모든 콘텐츠의 기능을 이용할 수 있어야 함
- 다른 표준 종료 방법이 필요한 경우, 사용자에게 포커스를 이동시키는 방법에 대해 안내해야 함
- 키보드 단축키를 문자, 구두점, 숫자, 기호만 이용하도록 구현할 경우, 준수 사항
- 단축키를 끌 수 있어야 함
- 단축키를 재설정하는 메커니즘을 제공해야 함
- 단축키는 해당 구성요소가 포커스를 받았을 때만 활성화되어야 함
👉 level AAA
- 개별 키 입력에 대한 특정 timeout을 요구하지 않는 키보드 인터페이스를 통해 운용 가능해야 함
2) 충분한 시간
사용자가 콘텐츠를 읽고 사용할 수 있도록 충분한 시간을 제공해야 함
👉 level A
- 콘텐츠에 의해 설정된 시간 제한의 경우 조정이 가능해야 함
- 시간 제한을 해제할 수 있어야 함
- 제한 시간을 조정할 수 있어야 함
- 시간 만료 최소 20초 전에 경고를 받고, 제한 시간을 10회 이상 연장할 수 있어야 함
- 실시간 이벤트의 경우는 예외
- 시간 제한이 필수적인 경우 예외
- 제한 시간이 20시간을 초과하는 경우 예외
- 이동, 깜빡임, 스크롤, 자동 업데이트 정보를 일시정지, 중지, 숨김할 수 있어야 함
👉 level AAA
- 시간 제한 없음
- 작업 방해를 연기하거나 차단할 수 있음
- 인증 세션이 종료되었을 때, 재인증을 할 수 있음
- 사용자에게 데이터의 손실을 초래할 수 있는 사용자 비활동 상태에 대해 알려주어야 함
3) 발작 및 신체적 반응
콘텐츠는 발작 또는 신체적 반응을 일으키지 않도록 설계되어야 함
👉 level A
- 초당 3회 이상 번쩍이는 콘텐츠를 포함하지 않거나, 일반 번쩍임과 적색 번쩍임 임계값 이하로 설정해야 함
👉 level AAA
- 초당 3회 이상 번쩍이는 콘텐츠를 포함해서는 안 됨
- 모션 애니메이션은 기능 조작이나 정보 전달을 위해 반드시 필수적인 경우가 아니라면 비활성화할 수 있어야 함
4) 네비게이션 기능
사용자에게 콘텐츠를 찾을 수 있고, 현재 위치를 파악할 수 있는 방법을 제공해야 함
- 반복되는 콘텐츠 블록이 있는 경우, 이를 건너뛸 수 있어야 함
- 주제나 목적을 설명하는 제목을 포함해야 함
- 웹 페이지를 순차적으로 탐색할 수 있을 때, 포커스할 수 있는 요소들은 의미와 운용가능성이 유지되는 순서로 포커스를 받아야 함
- 링크의 목적은 링크 텍스트만으로도 식별 가능하거나 링크 맥락과 함께 식별 가능해야 함
👉 level AA
- 특정 웹 페이지를 찾을 수 있는 방법을 한 가지 이상 제공해야 함
- 헤딩과 레이블에는 주제 또는 목적을 기술해야 함
- 키보드로 조작할 수 있는 사용자 인터페이스는 키보드 포커스가 표시되는 작동 모드를 제공해야 함
👉 level AAA
- 웹 사이트가 웹 페이지 세트로 구성되어 있는 경우, 사용자의 위치 정보를 제공해야 함
- 링크 텍스트만으로도 각 링크의 목적을 식별 가능하게 해야 함
- 섹션 헤딩을 사용하여 조직화해야 함
5) 입력 방식
사용자가 키보드 이외의 다양한 입력 장치를 통해 기능들을 보다 쉽게 조작할 수 있도록 해야 함
👉 level A
- 멀티 포인트 또는 경로 기반 제스처로 작동되는 모든 기능은 경로 기반 제스처 없이 단일 포인터로 작동 가능해야 함
- 포인터의 취소
- 다운 이벤트 상태에서는 어떠한 기능도 실행되어서는 안 됨
- 이벤트 실행 전에 기능을 중지하거나, 실행 후 기능을 취소할 수 있는 메커니즘을 제공해야 함
- 다운 이벤트의 결과를 되돌릴 수 있어야 함
- 다운 이벤트에서 기능을 완료하는 것이 필수적
- 텍스트 또는 텍스트 이미지가 포함된 레이블을 가지고 있는 UI 구성요소의 경우,
**name**은 시각적으로 표시되는 텍스트를 포함해야 함 - 장치나 사용자의 모션으로 작동될 수 있는 기능은 UI 구성요소로 작동할 수 있어야 함. 모션에 대한 반응은 우발적인 작동을 방지할 수 있도록 비활성화될 수 있어야 함
👉 level AAA
- 포인터 입력용 타겟의 크기는 최소 44X44 px이상이어야 함
- 웹 콘텐츠는 플랫폼 상에서 이용가능한 입력 방식의 사용을 제한해서는 안 됨
3. 이해의 용이성
사용자 인터페이스의 정보와 운용은 이해가능해야 함
1) 가독성
텍스트 콘텐츠는 읽을 수 있고 이해할 수 있어야 함
👉 level A
- 각 웹 페이지는 언어는 프로그래밍 방식으로 결정될 수 있어야 함
👉 level AA
- 특정 절이나 문구의 언어는 프로그래밍 방식으로 결정될 수 있어야 함
👉 level AAA
- 관용어와 전문용어 같은 단어나 문구의 구체적인 정의를 인식할 수 있어야 함
- 약어의 본딧말이나 의미를 인식할 수 있어야 함
- 텍스트의 독해에 중학생 수준 이상의 독해능력이 요구되는 경우, 보충 콘텐츠나 상응하는 버전을 제공해야 함
- 발음을 모르면 문맥상 의미가 명확하지 않은 용어에 대해서는, 구체적인 발음을 인식할 수 있어야 함
2) 예측 가능성
웹 페이지는 예측 가능한 방식으로 제시되고 작동해야 함
👉 level A
- UI 구성요소가 포커스를 받은 경우, 맥락의 변경을 초래해서는 안 됨
- 자동으로 맥락의 변경을 초래해서는 안 됨
👉 level AA
- 네비게이션은 사용자가 변경하지 않는 한, 반복될 때마다 동일한 순서를 유지해야 함
- 동일한 기능을 지닌 구성 요소들은 일관되게 식별되어야 함
👉 level AAA
- 맥락의 변경은 사용자의 요청에 의해서만 변경되어야 함
3) 입력 지원
사용자가 실수를 회피하거나 수정할 수 있도록 지원해야 함
👉 level A
- 입력 오류가 자동으로 감지되면, 사용자에게 오류 항목과 설명을 텍스트로 보여줘야 함
- 입력이 필요한 부분은 레이블 또는 지시문을 제공해야 함
👉 level AA
- 사용자에 대한 법률, 금융, 데이터 관련 이벤트 발생 시, 제출 내역을 되돌리거나, 입력 오류를 점검하고 수정할 수 있는 기회를 제공하거나, 제출 전 확인할 수 있는 기회를 제공해야 함
👉 level AAA
- 맥락에 적합한 도움말이 제공되어야 함
- 사용자가 정보를 제출해야 하는 경우, 제출 내역을 되돌리거나, 입력 오류를 점검하고 수정할 수 있는 기회를 제공하거나, 제출 전 확인할 수 있는 기회를 제공해야 함
4. 견고성
콘텐츠는 보조공학을 포함한 다양한 사용자 에이전트가 해석할 수 있을 정도로 견고해야 함
1) 호환성
콘텐츠는 보조공학을 포함한 다양한 사용자 에이전트가 해석할 수 있을 정도로 견고해야 함
👉 level A
- 파싱 - 마크업 언어를 사용하여 구현된 콘텐츠의 경우, 구성요소는 완전한 시작 태그와 종료 태그를 갖추어야 하고, 사양에 따라 중첩되며, 요소는 중복 속성을 포함해서는 안 됨
- 모든 UI 구성요소의 경우, 이름과 역할은 프로그래밍 방식으로 결정되어야 함. 상태, 속성 및 값 또한 사용자에 의해 설정될 수 있어야 함
👉 level AA
- 상태 메시지는 포커스를 받지 않고 보조공학을 통해 사용자에게 제시될 수 있도록 역할이나 속성을 통해 프로그래밍 방식으로 결정될 수 있어야 함
블로그 이사했어요 https://ktmihs.tistory.com/