이동식 저장소

한국형 웹 접근성 지침 본문

Tertiary/Frontend

한국형 웹 접근성 지침

해스끼 2022. 1. 17. 21:46

인식의 용이성

  • 적절한 대체 텍스트 제공
    • 텍스트로 표현할 수 없는 콘텐츠(이미지 등)에는 스크린 리더가 읽을 수 있도록 대체 텍스트를 제공해야 한다.
  • 멀티미디어 대체 수단
    • 동영상의 음성을 대체할 수 있는 수단(자막, 스크립트, 원고 등)을 제공해야 한다.
    • 음성이 없는 동영상의 경우 스크린 리더가 읽을 수 있는 자막이나 원고를 제공해야 한다.
  • 콘텐츠의 명료성
    • 콘텐츠는 색에 무관하게 구분되어야 한다. 굵기, 모양, 테두리 등을 이용하여 콘텐츠를 구별할 수 있다.

운용의 용이성

  • 명확한 지시사항 제공
    • 지시사항을 단일 감각으로만 제공해서는 안 된다. 모양, 굵기, 소리 등을 이용하여 지시사항을 명확히 표현해야 한다.
  • 텍스트의 명도 대비
    • 텍스트와 배경색 간의 명도는 4.5:1 이상으로 구현해야 한다. 페이지를 확대 가능한 경우 3:1 이상으로 구현해야 한다.
  • 자동 재생 금지
    • 페이지에 접속했을 때 자동으로 음악 등이 재생되는 경우, 스크린 리더의 음성을 방해할 수 있다. 
  • 콘텐츠 간의 구분
    • 이웃한 콘텐츠(버튼 등)는 시각적으로 충분히 구분되어야 한다. 테두리, 구분선 등을 이용하여 콘텐츠의 경계를 구분할 수 있어야 한다.
  • 키보드 사용성 보장
    • 키보드만을 사용하여 페이지를 탐색하는 경우에도 페이지 이용에 문제가 없어야 한다. 즉 마우스와 키보드 간의 사용성이 동일해야 한다.
    • 예를 들어 마우스를 올려놓을 때 특정 메뉴가 보이는 버튼이 있다면, 키보드로 버튼에 접근했을 때에도 메뉴가 보여야 한다.
  • 포커스 이동
    • 포커스란 특정 객체가 선택된 상황을 말한다. 키보드로 포커스를 이동할 때 논리적인 순서로 이동하도록 페이지를 구현해야 한다. (HTML로)
  • 조작 가능성
    • 화살표 등의 컨트롤은 너무 작아서는 안 되며, 대각선 길이가 6mm 이상이어야 한다.
    • 컨트롤 테두리 안쪽으로 1픽셀 이상의 여백을 두어야 한다. 여러 컨트롤이 너무 가까이 붙으면 조작하기 어렵기 때문이다.
  • 응답 시간 조절
    • 은행 등의 사이트에서 접속 시간을 제한하는 경우가 있다. 이때 접속시간을 충분히 제공해야 하며, 시간이 얼마 남지 않았음을 안내하고 원하는 경우 시간을 연장할 수 있어야 한다.
    • 일정 시간이 지난 후 페이지를 자동으로 전환할 때에는 스크린 리더 사용자가 인지할 수 있도록 충분한 시간을 제공해야 하며, 사용자가 원하지 않는 경우 페이지를 전환하지 않아야 한다.
  • 정지 기능 제공
    • 자동 슬라이드 등 자동으로 변하는 컨텐츠는 이전, 다음, 정지 기능을 제공해야 하며, 포커스를 얻었을 때 정지하도록 구현해야 한다.
  • 깜빡임과 번쩍임 사용 제한
    • 지나치게 깜빡이거나 번쩍이는 화면을 볼 경우 광과민성 발작이 일어날 수도 있다. 따라서 깜빡이는 컨텐츠를 사용할 때는 컨텐츠의 면적을 최소화하고, 깜빡이는 빈도를 낮추고, 깜빡임을 멈출 수 있는 수단을 제공해야 한다.
    • 대표적인 사례가 포켓몬 쇼크이다.
  • 반복 영역 건너뛰기
    • 여러 페이지에 공통된 요소(헤더 등)가 있는 경우, 스크린 리더 사용자가 이를 건너뛸 수 있는 기능을 제공해야 한다.
    • 주로 페이지 맨 처음에 '건너뛰기' 버튼을 제공하는 방식으로 구현된다.

이해의 용이성

  • 제목 제공
    • 페이지마다 서로 다른 제목을 제공해야 한다. 페이지 내용을 쉽게 인식하기 어렵기 때문이다.
    • 페이지를 구분할 수 있는 가장 구체적인 제목을 작성하자.
  • 적절한 링크 텍스트
    • 링크는 주변의 맥락으로부터 그 의미를 충분히 파악할 수 있도록 작성해야 한다. 예를 들어 더 보기보다 공지사항 더 보기가 더 좋은 텍스트이다.
  • 페이지의 기본 언어 표시
    • 페이지에서 주로 사용하는 언어를 제공하면 스크린 리더가 화면을 더 잘 읽어줄 수 있다.
    • <html lang='ko'>
  • 사용자 요구에 따른 실행
    • 사용자가 의도하지 않은 기능을 실행하지 않아야 한다.
    • 예를 들어 링크를 클릭했을 때 새 창이 뜨는 경우, 스크린 리더 사용자는 새 창이 뜬 상황을 인식하기 어렵다. 이전 페이지를 탭으로 탐색할 수 있는지, 아니면 완전히 다른 창을 탐색해야 하는지 알 수 없다.
  • 선형(linear) 콘텐츠 구성
    • 여러 탭과 컨텐츠가 제공되는 경우, 탭 1 → 콘텐츠 1 → 탭 2 → 콘텐츠 2 → ...의 순서로 마크업을 구성해야 한다.
    • 제목, 내용, 더 보기는 이 순서대로 마크업을 구성해야 한다. 제목, 더 보기, 내용 순서는 논리적으로 부자연스럽다.
  • 표의 구성
    • 표를 너무 복잡하게 작성하면 스크린 리더로 이해하기 힘들다. 복잡한 표를 간단하게 분할하거나, ``td`` 태그의 ``headers`` 속성을 이용하자.
  • 레이블 제공
    • 텍스트 입력창에 레이블을 제공하여 입력하는 내용을 설명해야 한다. ``input`` 태그를 공부하다 보면 알게 될 것이다.
  • 입력 내용을 정정할 때
    • 사용자의 입력에 오류가 있는 경우 이를 정정할 수 있어야 한다.
    • 이때 입력한 내용이 모두 사라져서는 안 되며(아직도 이런 페이지가 많다), 오류의 원인을 제공하고 오류가 발생한 위치로 포커스를 이동해야 한다.

견고성

  • 마크업 문법 준수
    • 태그를 안 닫는다던가,
    • id를 중복 사용한다던가.
    • 간단하다. 문법을 지키자.
  • 웹 애플리케이션 접근성
    • 웹 애플리케이션은 페이지에 포함되어 특정 기능을 수행하는 소프트웨어로, 플래시가 대표적인 예이다. 페이지에 포함된 웹 애플리케이션 역시 접근성을 고려하여 구현되어야 한다.

 

 

 

저작자표시 비영리 변경금지

'Tertiary > Frontend' 카테고리의 다른 글

[CSS] 화면에서 대체 텍스트를 숨기는 방법  (0) 2022.01.19
[CSS] IR 기법  (0) 2022.01.19
[CSS] 길이의 단위  (0) 2022.01.02
Jetbrains Academy - Frontend Track 완료  (0) 2021.12.09
'Tertiary/Frontend' Related Articles more
Comments