🌐웹 접근성 4대 지침
- 인식의 용이성
- 운용의 용이성
- 이해의 용이성
- 견고성
🌐1. 인식의 용이성
- 콘텐츠를 사용자가 인식할 수 있도록 제공해야 한다.
- 사용자가 콘텐츠를 보거나 듣는 데 문제가 없도록 해야 한다.
💠 1-1. 대체 텍스트
- 텍스트가 아닌 콘텐츠인 경우,(인간의 언어가 아니거나 프로그래밍 방식으로 결정될 수 있는 문자 순서가 아닌 경우), 사용자가 필요로 하는 대체 텍스트를 제공해야 한다.
- 콘트롤, 입력(Controls, Input) : 사용자에게 입력을 받거나, 사용자의 컨트롤이 필요한 경우 그 목적을 설명하는 이름이 있어야 한다.
ex) 버튼위의 글씨
- 시간기반 미디어(Time-Based Media) : 텍스트가 아닌 시간 기반 미디어인 경우, 콘텐츠 자체에 설명 가능한 대체 텍스트를 제공해야 한다.
- 장식, 형식, invisibel 콘텐츠 : 콘텐츠가 오직 해당 의도로만 사용된다면, screen reader같은 보조공학이 인지하지 않고 지나칠 수 있도록 해야 한다.(ex) aria-hidden)
💠 1-2 시간 기반 미디어
- 시간기반 미디어에 대한 대체수단을 제공해야 한다.
- 사전 녹음된 오디오전용 및 사전 녹화된 비디오전용 미디어의 경우, 시각 및 청각 정보를 올바른 순서로 제공하는 텍스트를 제공해야 한다.
- 자막, 오디오 설명, 수어 등이 포함된다.
- 실시간 미디어에 대해서도 동등한 정보를 제공하는 대체수단을 제공해야 한다.
💠 1-3 Adaptable
- 콘텐츠는 정보나 구조의 손실 없이 다른 다른 방법으로도 표현된 수 있어야 한다.
- 정보와의 관계 : 콘텐츠를 통해 제공되는 정보는 텍스트로 이용가능해야 한다.
- 유의미한 순서 : 콘텐츠가 표시되는 순서가 중요한 경우, 콘텐츠의 의미를 변경하지 않는 순서가 보장되어야 한다.
- 감각적인 특성 : 콘텐츠를 이해하고 작동시키기 위해 제공된 text는 모양, 색상, 크기, 위치, 방향 또는 소리와 같은 감각 특성에 의존되어서는 안 된다.
예시)
- 온라인 설문조사 페이지에서 현재 페이지에서 다음 설문조사 페이지로 이동하기 위해 콘텐츠의 오른쪽 하단 모서리에 배치된 녹색 화살표 아이콘으로 구현된 링크를 사용한다.
- 화살표에는 "다음"이라는 레이블이 명확하게 표시되어 있으며 제공된 text정보에는 "설문조사의 다음 섹션으로 이동하려면 마지막 설문조사 질문 아래 오른쪽 하단 모서리에 있는 '다음'이라고 표시된 녹색 화살표 아이콘을 선택하십시오."라고 나와 있다.
- 이 예에서는 위치 지정, 색상 및 레이블 지정을 모두 사용하여 아이콘을 식별하는 데 도움을 준다.
- 방향 : 콘텐츠는 한 방향으로만 작동되도록 해서는 안 된다.
- 입력 목적 식별 : 입력 필드의 목적이 명확해야 한다. (ex)country-국가 코드, country-name-국가명 등
- 목적 식별 : 사용자 interface 구성요소, 아이콘 등의 목적이 확인가능해야 한다.
💠 1-4 식별 가능
- 콘텐츠는 사용자가 더 쉽게 보고 들을 수 있도록 제작되어야 한다.
- 색상 사용 : 색상이 시각적 요소 구분을 위한 유일한 수단이 되어서는 안 된다.(색맹, 노안인 사람들은 색상 정보를 제대로 받아들일 수 없을 수도 있다.)
- 오디오 제어 : 오디오 콘텐츠가 3초 이상 자동재생되는 경우, 해당 오디오를 일시정지, 또는 중지할 수 있는 방법을 제공해야 한다.
- 명도대비 : 로고, 커다란 텍스트, 장식이 아닌 경우 텍스트와 텍스트 이미지의 시각적 표현을 위한 명도대비율은 최소한 7:1 이상이 되어야 한다. 사용자 inteface 구성요소와 그래픽 객체는 명도대비율이 최소 3:1이어야 한다.
- 텍스트 크기 조정 : 텍스트는 콘텐츠나 기능의 손상 없이, 그리고 보조공학 없이 최대 200%까지 크기 조정이 가능해야 한다.
- 텍스트 이미지 : 정보는 반드시 필요한 경우가 아니라면 텍스트 이미지보다 텍스트로 전달되어야 한다.
- 배경음 : 오디오는 배경음을 포함하고 있지 않아야 하고, 있는 경우에 배경음을 끌 수 있어야 한다.
- 시각적 표현 : 텍스트 블록을 시각적으로 표현하고자 한다면,
- 사용자가 전경색과 배경색을 선택할 수 있어야 한다.
- 가로폭은 80자(한국어, 중국어, 일본어는 40자) 또는 글리프(glyph) 이하이어야 한다.
- 텍스트는 양쪽 정렬을 해서는 안 된다(왼쪽과 오른쪽 여백에 정렬).
줄 간격(leading)은 문단 내에서 최소 1.5배 이상되어야 하고, 문단 간격은 행 간격보다 최소 1.5배 이상이어야 한다.- 보조공학 없이도 전체 화면 창에서 텍스트 줄을 읽기 위해 수평으로 스크롤할 필요가 없도록 텍스트 크기를 최대 200%까지 조절할 수 있어야 한다.
- 재배치 : 콘텐츠는 정보나 기능의 손실 없이, 2차원으로 스크롤할 필요가 없도록 제공되야 한다.
-텍스트 간격 : 텍스트가 잘려서 정보의 손실이 생기는 경우가 없도록 해야 한다.
-마우스 포인터로 가리키거나 키보드 포커스를 받은 콘텐츠 : 해당 콘텐츠들은 1. 해제할 수 있어야 하고, 2. 포인터는 콘텐츠가 사라지지 않게 하면서 그 콘텐츠 위로 이동할 수 있어야 한다. 3. 사용자가 포커스를 해제하기 전까지 콘텐츠를 볼 수 있어야 한다.
🌐 2. 운용의 용이성
- 사용자가 interface와 navigation을 조작할 수 있어야 한다.
💠 2.1 키보드 접근성
- 키보드로 모든 기능을 사용할 수 있어야 한다.
-키보드 : 개별 키 입력에 대한 특정 시간종료(timeout)를 요구하지 않는 키보드 interface를 통해 모든 콘텐츠 기능을 이용할 수 있어야 한다. (포커스 이동 등) 종료 방법이 필요한 경우 사용자에게 안내해야 한다.
-문자 단축키 : 키보드 단축키를 문자(대문자 및 소문자), 구두점, 숫자 또는 기호만 이용하도록 구현할 경우, 1. 해제할 수 있어야 한다. 2. 재설정(하나 이상의 인쇄 불가능한 문자(예: Ctrl, Alt 등)를 사용하여 단축키로 재설정할 수 있어야 한다.) 3. 포커스 시에만 활성화되어야 한다.
💠 2.2 충분한 시간
사용자가 콘텐츠를 읽고 사용할 수 있도록 충분한 시간을 제공해야 한다.
- 시간 제한 조정 가능 : 필수적인 상황이 아닌 경우 콘텐츠가 시간 제한이 있다면, 1. 사용자가 넓은 범위 내에서 시간 제한을 해제할 수 있어야 한다. 2. 사용자는 시간 만료 최소 20초 전에 경고를 받아야 하고, 제한 시간을 연장할 수 있어야 한다.
- 일시정지, 중지, 숨김 : 자동 시작, 5초 이상 지속, 다른 콘텐츠와 병행하여 표시되는 콘텐츠가 필수적이지 않은 경우 사용자가 콘텐츠를 정지할 수 있어야 한다.
- 재인증 : 인증세션이 종료되었을 경우, 사용자는 재인증 후 데이터 손실없이 지속적으로 이용할 수 있어야 한다.
- 시간종료 : 사용자에게 데이터의 손실을 초래할 수 있는 상태에 대해 알려주어야 한다.
💠 2.3 발작 및 신체적 반응
콘텐츠는 발작 또는 신체적 반응을 일으키지 않도록 설계되어야 한다.
💠 2.4 네비게이션 가능
- 사용자에게 네비게이션 기능, 콘텐츠를 찾는 기능, 현재 위치를 파악할 수 있는 방법을 제공해야 한다.
- 블록 건너뛰기 : 반복되는 콘텐츠 블록을 건너뛸 수 있어야 한다.
- 요소에 목적을 나타내기 : 웹페이지와 헤딩과 레이블은 주제나 목적을 설명하는 제목을 포함해야 한다. 링크의 목적 또한 텍스트만으로 식별 가능해야 한다.
- 포커스& 위치 : 1. 탐색 순서가 의미에 영향을 주는 경우 operability이 유지되는 순서로 포커스를 받아야 한다. 2. 키보드 포커스가 표시되는 모드를 제공해야 한다.
- 섹션(section) 헤딩 : 콘텐츠는 섹션을 사용하여 조직화해야 한다.
💠 2.5 입력 방식
사용자가 키보드 이외의 다양한 입력 장치를 통해 기능들을 보다 쉽게 조작할 수 있도록 해야 한다.
- 포인터 : 단일 포인터로 작동 가능해야 한다. 이때 1. 다운 이벤트 상태에서는 다른 기능이 실행되면 안 된다. 2. 실행 전 기능을 중지/취소할 수 있어야 한다. 3. 되돌리기가 가능해야 한다.
- 네임(Name) 안의 레이블(Label) : label을 가진 사용자 interface 구성요소(체크박스, 콤보 박스 등)의 경우, name은 시각적으로 표시되는 텍스트를 포함해야 한다. 이때 '이름' 입력칸이 '이름:'으로 인식되면 안 된다.
- 모션기반 작동 : 장치나 사용자의 모션으로 작동할 수 있는 기능은 사용자 인터페이스 구성요소로 작동할 수 있어야 하며, 모션에 대한 반응은 우발적인 작동을 방지할 수 있도록 비활성화될 수 있어야 한다.
🌐 3. 이해의 용이성
- 사용자가 콘텐츠를 읽고 이해할 수 있어야 한다.
💠 3.1 가독성
- 텍스트 콘텐츠는 읽을 수 있고 이해할 수 있어야 한다.
- 언어 : 페이지는 인간이 이해할 수 있는 언어로 이루어져야 한다.
- 단어 : 특수하거나 제한적으로 사용된 단어나 문구의 구체적인 정의를 인식할 수 있어야 하고, 약어의 경우 본딧말을 인식할 수 있도록 해야 한다.
- 발음 : 발음을 모르면 의미가 확실하지 않은 용어에 대해서는 구체적인 발음을 제공해야 한다.
💠 3.2 예측 가능성
- 웹 페이지는 예측 가능한 방식으로 제시되고 작동해야 한다.
- 맥락 변경 : 포커스를 받은 경우 콘텐츠의 맥락 변경이 생기면 안 된다. 맥락의 변경은 사용자의 요청이 있을 경우에만 발생해야 하고, 해제 가능해야 한다.
- 일관된 네비게이션 : 반복되는 네비게이션 메커니즘은 사용자가 변경하지 않는 한 동일한 순서로 제시되어야 한다.
💠 3.3 입력 지원
- 사용자가 실수를 수정할 수 있어야 한다.
- 입력 : 입력이 필요한 경우 사용자에게 지시문/label을 제공해야 하고, 입력 오류에 대해 사용자에게 텍스트로 안내해야 한다.
- 오류 예방 : 사용자가 정보를 제출해야 하는 웹 페이지의 경우, 입력 내용을 1. 되돌릴 수 있어야 한다. 2. 사용자가 입력한 데이터는 입력 오류를 점검하고 오류를 수정할 수 있는 기회를 제공해야 한다.
- 제출을 완료하기 전에 정보를 검토, 확인, 수정할 수 있도록 해야 한다.
🌐 4. 견고성
- 다양한 사용자 agent와 보조 기술이 접근할 수 있어야 한다.
- 장애가 있는 사람들이 사용하는 화면 판독기, 화면 돋보기 및 음성 인식 소프트웨어와 같은 보조 기술과의 호환성이 가능해야 한다.
💠 4.1 호환성
- 보조공학을 포함하여, 현재나 미래의 사용자 에이전트와의 호환성을 극대화해야 한다.
- 파싱(Parsing) : 구성요소는 완전한 시작 태그와 종료 태그를 갖추어야 하고, 중복 속성을 포함해서는 안 되고, 모든 ID는 고유해야 한다.
- 이름, 역할 값 : 모든 사용자 interface 구성요소들은 보조 기술이 접근하여 사용자에게 제공될 수 있도록 해야 한다.
[참고문서]
wanna be bright person✨ Front-End developer