[WEB] 웹 접근성 지침

▶▷ 서론◁◀

• 웹 접근성 지침에는 어떤 것이 있는지 목차로 살펴 볼 수 있다.
• NULI 사이트의 지침 내용을 확인하고 웹 접근성을 고려한 웹 페이지를 만들 수 있다.
• https://nuli.navercorp.com/guideline/s01/g01

NULI

---

▶▷ 목차 ◁◀

1. 인식의 용이성
2. 운용의 용이성
3. 이해의 용이성
4. 견고성
5. 정리

---

▶▷ 1. 인식의 용이성◁◀

"텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다."

1. 적절한 대체 텍스트 제공
   1. alt 제공
   2. IR 기법
   3. 의미 없는 이미지
   4. 이모티콘 이미지
   5. QR코드 이미지
   6. 썸내일 이미지
   7. 캡차 이미지
   8. 사용자가 업로드하는 이미지
2. 자막제공
   1. 멀티미디어
   2. 사용자가 업로드하는 멀티미디어
   3. 음성이 나오지 않는 멀티미디어
3. 색에 무관한 콘텐츠 인식
   1. 차트
   2. 슬라이드 버튼 선택 여부
   3. 페이지내이션
   4. 탭 버튼 선택 여부
4. 명확한 지시 사항 제공
   1. 모양으로만 정보 제공
   2. 위치나 방향으로만 정보 제공
   3. 크기로만 정보 제공
   4. 색으로만 정보 제공
5. 텍스트 콘텐츠의 명도 대비
   1. 텍스트
   2. 이미지 내부 텍스트
   3. 의미 있는 이미지
6. 배경음 사용 금지
   1. 페이지 진입 시 자동 재생되는 3초 이상의 배영음 콘텐츠(동영상 포함)
   2. 불가피하게 제공해야 하는 경우
7. 콘텐츠 간의 구분
   1. 테두리를 이용하여 구분
   2. 콘텐츠 사이에 시각적인 구분선을 삽입하여 구분
   3. 서로 다른 무늬를 이용하여 구분
   4. 콘텐츠 배경색 간의 명도대비(채도)를 달리하여 구분
   5. 줄 간격 및 글자 간격을 조절하여 구분
   6. 기타 콘텐츠를 시각적으로 구분할 수 있는 방법을 통해 구분

---

▶▷ 2. 운용의 용이성 ◁◀

"모든 기능은 키보드만으로도 사용할 수 있어야 한다."

1. 키보드 사용 보장
   1. 드롭다운 메뉴
   2. 자동 롤링 콘텐츠 마우스 오버 시 전체 콘텐츠 노출
   3. 특정 버튼에 마우스 오버 시 레이어 노출
   4. 이미지 또는 초점을 받을 수 없는 요소에 마우스 이벤트 적용
   5. a링크 요소에 href 속성이 없는 경우
   6. 키보드가 함정에 빠진 경우
2. 초점 이동
   1. 논리적 순서 이동
   2. 레이어 팝업 초점 이동
   3. tabindex 초점 강제 이동 제한
   4. hideFocus, outline:none, onfocus="this.blur();" 사용 제한
3. 조작 가능
   1. 컨트롤 대각선 길이 6mm 이상
   2. 컨트롤 테두리 안쪽으로 1픽셀 이상의 여백
4. 응답 시간 조절
   1. 시간 연장이 불가능한 콘텐츠
   2. 페이지 자동 전환
5. 정지 기능 제공
   1. 자동으로 변경되는 슬라이드
   2. 자동으로 변경되는 콘텐츠
6. 깜빡임과 번쩍임 사용 제한
   1. 깜빡이거나 번쩍이는 콘텐츠 사용 제한
   2. 깜빡이거나 번쩍이는 콘텐츠를 제공할 경우
7. 반복 영역 건너뛰기
   1. 페이지마다 반복되는 영역이 있는 경우
8. 제목 제공
   1. 페이지 제목
   2. 프레임 제목
   3. 콘텐츠 블록
9. 적절한 링크 텍스트
   1. 빈 링크
   2. 독립적 이미지 링크
   3. 독립적 배경 이미지 링크
   4. 썸내일 이미지
   5. 명확한 링크

---

▶▷ 3. 이해의 용이성 ◁◀

"주로 사용하는 언어를 명시해야 한다."

1. 기본 언어 표시
   1. HTML 4.01/HTML5 표준
   2. XHTML 1.0 표준
   3. XHTML 1.1 표준
   4. 페이지 내 다른 언어가 존재하는 경우
2. 사용자 요구에 따른 실행
   1. 페이지 진입 시 뜨는 새 창(팝업)
   2. 화면을 가리는 레이어 팝업
   3. 사전에 인식할 수 없는 새 창
   4. 컨트롤 선택 시 기능 실행
   5. Select에 onchange 이벤트 적용
3. 콘텐츠의 선형 구조
   1. 탭 콘텐츠
   2. 더보기가 존재하는 콘텐츠
4. 표의 구성
   1. 데이터 표
   2. 복잡한 표
   3. 레이아웃 
5. 레이블 제공
   1. 레이블이 시각적으로 노출되어 있는 경우
   2. 레이블이 시각적으로 노출되어 있지 않은 경우
6. 오류 정정
   1. 입력 오류 시 입력 내용이 모두 사라지는 경우
   2. 요류 내용 제공
   3. 오류 발생 시점으로 초점 이동

---

▶▷ 4. 견고성 ◁◀

"마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다."

1. 마크업 오류 방지
   1. 요소의 열고 닫음
   2. 요소의 중첩
   3. 중복된 속성 사용
   4. id 속성 값 중복
2. 웹 어플리케이션 자체 접근
   1. 사이트 전체가 플래시로 구현된 경우

---

▶▷ 5. 정리 하기 ◁◀

• 모두가 함께 정보에 접근할 수 있도록, 웹 콘텐츠는 인식, 운용, 이해, 견고성의 4가지 측면에서 접근성을 보장해야 한다.