웹 접근성

웹 접근성 설명

• 어떤 사용자가 어떤 기술 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있는 보장하는 것
• 기관 사이트마다 아래에 있는 WEB 접근성 마크가 존재. ⇒ 웹 접근성 표준화 존재.
  • KWCAG : 한국형 웹 컨텐츠 접근성 지침
    
• 사이트의 Tab키를 활용하여, 본문 바로가기가 가능
• 웹 접근성 작업 대표 예시
  
• 프로젝트를 시행시, 웹 접근성의 표준에 맞게 작업.

웹 접근성 작업

1. 적절한 대체 텍스트 제공
   • alt 속성에, 이미지의 설명을 다 적어줘야 함.
   • 설명이 긴 경우, 별도의 태그로 따로 작성해야 함.
   • 그래프와 같은 것도, 구조 설명이 필요.
   • 의미가 없는 경우도 alt 를 제공해야 한다.
   • 시각적인 부분도 표현 (예: 미안해하는 브라운)
   • 이미지와 설명이 같이 나타난 경우, alt 를 비워서 중복 제거
   • 시각적 캡차는 청각적 캡차도 제공하므로, 이미지의 내용을 알려주면 안됨.
2. 멀티미디어는 수화 자막 대본을 제공해야 함.
3. 색에 무관한 컨텐츠 인식
   • 색맹을 위한, 별도의 컨텐츠 구분 방법 필요
     • 패턴, 굵기 등…
     • 글짜 색으로 구분하지 않고 배경 색으로도 구분
     • 테두리로 선택된 곳 명시
4. 명확한 지시 사항 제공
   • 모양, 크기, 위치, 방향, 색에 관계없이 인식되도록 함.
     • (예: * 표시가 무슨 내용인지 알리도록)
   • 명확한 구체적인 기준이 중요
     • (예: 작은 버튼을 클릭 → 무슨 버튼을 클릭해야하는지?)
5. 텍스트 컨텐츠의 명도 대비
   • 컨텐츠와 배경 간의 명도 대비는 4.5:1 이어야 함.
     • 확대 가능 브라우저는 최소 3:1 이상
   • 명도 대비 체크 프로그램 kwcag a11y inspector - Chrome 웹 스토어
6. 자동재생 금지
   • 배경음과 동영상이 자동으로 소리가 재생되면 안됨.
     • (예: 마우스를 갖다 대면, 재생되면 안됨)
   • 사용자가 먼저 컨트롤할 수 있도록 제공
7. 컨텐츠 간의 구분
   • 이웃한 컨텐츠끼리는 구분되어야 함.
8. 키보드 사용 보장
   • 마우스 사용이 제한되는 사람을 위한 키보드 조작 제공
     • (예: Tab 키를 활용하여 이동 되로록)
9. 초점 이동
   • 논리적으로 이동하도록 함
     • (예: 로그인 입력 창에서, 확인 버튼이 모든 입력이 된 상태에서 포커스가 가도록 함)
   • tabindex 로 강제 이동하면 오류
   • 키보드 접근 시, 초점이 시각적으로 보여야 함.
10. 조작 가능
    • 컨트롤 대각선 10mm 이상
    • 컨트롤 테두리 안쪽으로 1px 이상의 여백
11. 응답시간 조절
    • 시간제한 컨텐츠는 응답시간이 조절되록 함.
      • (예: 시간 연장 가능 버튼, 페이지 자동 전환 해제)
12. 정지 기능 제공
    • 마우스 오버 시, 정지
    • 키보드 접근 시, 정지
13. 깜빡임과 번쩍임 사용 제한
    • 초당 3~50회 주기로 깜빡 or 번쩍이는 컨텐츠는 제공되지 않도록 함.
      • (예: 포켓몬 쇼크)
    • 전체 면적의 10% 미만, 3초 미만으로 제한
14. 반복 영역 건너뛰기
    • 서브 페이지에서도 제공되는 컨텐츠는 건너뛰도록
    • 중요한 부분은 먼저 나오게 처리
15. 제목 제공
    • 페이지 제목은 최하위 분류로 적절하게 제공
    • iframe 태그도 title 을 제공해야 함.
    • 컨텐츠 제목도 제공
    • 특수 기호 사용 제한
16. 적절한 링크 텍스트
    • 링크 텍스트는 어떤 용도 or 목적인지 알도록 제공
      • (예: 링크를 ‘여기’로 제시하기 보다는 자세한 내용 필요)
17. 기본 언어 표시
    • 주로 사용하는 언어를 명시
      • 문서 타입별 기본 언어 표시
18. 사용자 요구에 따른 실행
    • 의도하지 않은 경우는 실행되지 않도록 함
      • (예: 페이지 진입 시 새창이 뜨지 않도록, 팝업과 같이)
19. 컨텐츠의 선형 구조
    • 컨텐츠는 논리적인 순서로 제공해야 함
      1. 탭1제목 → 탭1내용 → 탭2제목 → 탭2내용
      2. 해당 탭 컨텐츠에 제목 제공
20. 표의 구성
    • 이해하기 쉽게 구성
      • scope 로 내용 그룹화
      • th-id 와 td-headers 를 활용하여 내용의 흐름대로 구성
    • 레이아웃 테이블은 굳이 사용하지 않도록
21. 레이블 제공 - 입력에 대응하는 레이블 제공

접근성 진단

Color Contrast Analyzer - Chrome Web Store

kwcag a11y inspector - Chrome 웹 스토어

스크린 리더

Screen Reader - Chrome 웹 스토어