웹 접근성 톺아보기

Accessibility (A11Y)

웹 접근성이란, 모든 사용자가 웹 콘텐츠에 접근하고 이용할 수 있도록 보장하는 것을 의미합니다
장애인뿐만 아니라 노인, 기술에 익숙하지 않은 사용자 등 다양한 사용자들이 웹을 이용하는 데 불편함을 느끼지 않도록 하는 것을 포함합니다.

웹 접근성 표준 주요 원칙

1. 인식의 용이성

사용자는 장애 유무와 관계없이 웹사이트에서 제공하는 모든 콘텐츠를 인식할 수 있어야 합니다. 인식의 용이성에는 대체 텍스트 제공, 멀티미디어 대체수단 제공, 콘텐츠 적응성, 콘텐츠 명료성이라는 네 가지 지침이 포함되어 있습니다.

1. 대체 텍스트 제공
   텍스트가 아닌 콘텐츠에 대체 텍스트를 제공합니다.

   • 아이콘, 버튼, 그래픽을 포함한 이미지에 대한 설명
   • 차트, 다이어그램, 삽화에 있는 정보 설명
   • 오디오나 영상과 같은 텍스트가 아닌 콘텐츠에 대한 짧은 설명
   • 폼 요소, 인풋, 다른 사용자 인터페이스 요소에 대한 라벨

2. 멀티미디어 대체수단 제공
   멀티미디어 콘텐츠에는 해당 콘텐츠와 같은 내용의 자막, 대본, 수어 중 최소 한 가지 이상의 대체 수단을 제공해야 합니다. 가장 권장되는 방법은 자막을 오디오와 동기화시켜 제공하는 방법이 있습니다.

   • 라디오 인터뷰 녹음과 같은 오디오 콘텐츠를 위한 텍스트 대본과 캡션
   • 청각 경험(auditory experiences)과 관련된 오디오 콘텐츠에 대한 수화
   • 영상의 중요한 시각적 정보를 묘사하는 나레이션인 오디오 설명

3. 콘텐츠 적용성
   표를 제공할 경우 표의 이해를 돕기 위한 내용과 구조에 대한 추가 정보를 제공하고, 전체 콘텐츠는 보조기술 사용자가 그 맥락을 이해할 수 있도록 논리적인 순서로 제공해야 합니다. 또한 콘텐츠 사용에 필요한 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등과 관계없이 여러 가지 다른 감각을 통해서도 인식하는 데 문제가 없어야 합니다.

4. 콘텐츠 명료성
   콘텐츠는 색과 관계없이 인식될 수 있어야 하며, 텍스트와 배경 간의 명도 대비는 4.5:1 이상이어야 합니다. 또한, 이웃한 콘텐츠는 테두리나 명도 대비, 글자 간격 등 시각적인 방법을 통해 서로 구별할 수 있게 설계하는 것이 바람직합니다. 마지막으로 화면 낭독 프로그램 사용자가 콘텐츠를 인식하고 사용하는데 방해되지 않도록 소리가 자동으로 재생되지 않아야 합니다.

2. 운용의 용이성

사용자는 장애 유무와 관계없이 웹사이트에서 제공하는 모든 콘텐츠를 운용할 수 있어야 합니다. 운용의 용이성에는 입력장치 접근성, 충분한 시간 제공, 광과민성 발작 예방, 쉬운 네비게이션, 입력 방식이라는 5가지 지침이 포함되어 있습니다.

1. 입력장치 접근성
   붓질 기능, 시뮬레이션 등 마우스의 커서 궤적이 중요한 역할을 하는 콘텐츠, 움직임 측정 센서를 이용하는 콘텐츠를 제외한 모든 기능은 키보드만으로도 사용할 수 있게끔 만들어져야 합니다. 모든 기능을 키보드만으로 조작해도 초점은 논리적인 순서로 이동해야 하며, 각 콘텐츠는 시각적으로 명확히 구별할 수 있어야 합니다.

   웹 페이지에서 제공하는 모든 사용자 입력과 버튼 등의 컨트롤은 개별적으로 조작할 수 있도록 충분한 크기(대각선 방향 길이 6.0mm 이상)와 여백을 두고 제공되어야 합니다. 그리고 문자 단축키는 오동작으로 인한 오류를 방지하기 위해 ‘비활성화’, ‘재설정’, ‘초점을 받은 경우에만 활성화’라는 세 가지 옵션 중 하나 이상을 충족해야 합니다.

   • 마우스로 사용 가능한 기능은 키보드로도 사용 가능해야 합니다.
   • 키보드 초점은 콘텐츠에 갇히면 안됩니다.
   • 웹 브라우저, 저작 도구를 포함한 도구들은 키보드 지원을 제공해야 합니다.

2. 충분한 시간 제공
   시간제한이 있는 콘텐츠는 될 수 있다면 포함하지 않는 것이 바람직하며 해당 종류의 콘텐츠가 반드시 필요할 경우 이를 회피할 수 있는 수단을 제공해야 합니다. 보안과 같은 이유로 사용자가 시간 조절이 필요한 콘텐츠를 이용해야 한다면, 시간 조절 기능을 사전에 충분한 시간을 두고 알려주어야 하며, 반응시간이 완료되기 전 이를 해제하거나 연장할 수 있는 수단을 제공해야 합니다.

   그리고 이동이나 스크롤 등을 통해 자동으로 변경되는 콘텐츠는 최대한 배제하거나, 일시 정지 기능을 제공하는 등 사용자가 직접 움직임을 제어할 수 있는 기능이 필요함.

   • 필수적인 상황이 아니라면 시간 제한을 조정하여 연장하고 멈출 수 있어야 합니다.
   • 스크롤되거나 깜빡이거나 움직이는 콘텐츠는 멈추거나 숨길 수 있어야 합니다.
   • 필수적인 상황이 아니라면 방해 요소를 제거할 수 있어야 합니다.
   • 데이터 손실 없이 세션이 만료되었을 때 권한이 다시 부여되어야 합니다.

3. 광과민성 발작 예방
   10인치 이상의 스크린을 사용하는 기기에서는 콘텐츠에 의한 광과민성 발작을 주의해야 합니다. 사용자가 깜빡이거나 번쩍이는 콘텐츠로 인해 발작을 일으키지 않도록, 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠는 제한적으로 사용해야 합니다.

   • 특정 속도로 번쩍이는 콘텐츠나 패턴은 지양해야 합니다.
   • 번쩍이는 콘텐츠가 나타나기 전 사용자에게 경고하고 대안을 제공해야 합니다.
   • 필수적인 것이 아니라면 애니메이션을 끌 수 있는 방법을 제공해야 합니다.

4. 쉬운 네비게이션
   화면 낭독 프로그램을 이용하는 사람이 메뉴처럼 모든 웹 페이지에 공통으로 들어간 반복 영역을 계속해서 듣는 불편을 방지해야 함. 이때 사용자가 콘텐츠의 반복되는 영역은 건너뛰고 바로 핵심 영역으로 이동할 수 있는 수단을 제공해야 합니다.

   사용자는 보통 여러 개의 웹 페이지가 열려 있더라도 제목을 통해 웹 페이지를 선택함. 따라서 페이지, 프레임, 팝업, 콘텐츠 블록 등의 콘텐츠에는 각각 유일한 제목을 부여해서 사용자가 콘텐츠를 운용하기 쉽게 도와주어야 합니다. 또한 링크의 텍스트는 주변 맥락을 통해 용도나 목적을 직관적으로 이해할 수 있도록 제공해야 합니다. ‘여기를 클릭하세요’처럼 모호한 표현을 사용하지 않는 것이 좋습니다.

   한편 페이지 구분이 있는 전자출판 문서 형식의 웹 페이지는 각 페이지로 이동할 수 있는 기능이 있어야 하고, 서식이나 플랫폼에 상관없이 참조 위치 정보를 일관되게 제공하고 유지해야 합니다.

   • 능숙함과 미세한 움직임을 요구하는 제스처는 높은 수준의 능숙함을 요하지 않는 대안을 제공해야 합니다.
   • 요소는 취소 기능을 제공하는 것과 같이 의도치 않은 활성화를 피할 수 있도록 디자인되어야 합니다.
   • 음성으로 활성화되도록 하기 위해 라벨은 코드에서 상응하는 객체 이름과 맞게 작성해야 합니다.
   • 움직임으로 활성화되는 기능은 사용자 인터페이스 요소를 통해서도 활성화되어야 합니다.
   • 버튼, 링크와 같은 활성화 요소들은 터치로도 쉽게 활성화되도록 사이즈가 커야 합니다.

5. 입력 방식
   두 개 이상의 손가락을 동시에 사용해야 하는 인터랙션(예: 핀치 줌, 두 손가락 탭) 또는 경로 기반 동작을 통한 입력(예: 스와이프, 그리기, 끌기와 놓기)으로 작동하는 모든 기능은 단일 포인터 입력으로도 조작할 수 있어야 한다. 또한, 단일 포인터 입력으로 실행되는 기능은 해당 입력이 실수로 실행되는 것을 방지하기 위해 중지 또는 취소할 수 있어야 함.

메뉴, 링크, 버튼 등 텍스트나 텍스트 이미지가 포함된 레이블이 있는 구성 요소는 시각적으로 표시되는 해당 텍스트를 이름에 포함해야 한다. 그렇지 않으면 보조기술이 해당 요소를 인식할 수 없다. 또한 보조기술 사용자가 혼란을 겪는 것을 방지하기 위해 이름과 텍스트는 동일하게 제공하는 것이 좋다.

마지막으로 사용자가 장치를 움직이거나, 사용자의 움직임을 통하여 작동하는 기능(예: 흔들어서 실행 취소, 손동작을 이용한 사진 촬영 등)은 사용자 인터페이스 구성요소로 조작할 수 있어야 하며, 의도하지 않은 조작을 예방하기 위해 꼭 필요한 경우를 제외하고 해당 기능을 비활성화할 수 있어야 한다.

- 능숙함과 미세한 움직임을 요구하는 제스처는 높은 수준의 능숙함을 요하지 않는 대안을 제공해야 합니다.
- 요소는 취소 기능을 제공하는 것과 같이 의도치 않은 활성화를 피할 수 있도록 디자인되어야 합니다.
- 음성으로 활성화되도록 하기 위해 라벨은 코드에서 상응하는 객체 이름과 맞게 작성해야 합니다.
- 움직임으로 활성화되는 기능은 사용자 인터페이스 요소를 통해서도 활성화되어야 합니다.
- 버튼, 링크와 같은 활성화 요소들은 터치로도 쉽게 활성화되도록 사이즈가 커야 합니다.

3. 이해의 용이성

사용자는 장애 유무와 관계없이 웹사이트에서 제공하는 콘텐츠를 이해할 수 있어야 합니다. 이 원칙은 가독성, 예측 가능성, 입력 도움이라는 3가지 지침으로 구성됩니다.

1. 가독성
   다국어를 지원하는 화면 낭독 프로그램을 사용하는 경우, 텍스트 콘텐츠의 언어 정보를 프로그램으로 전달하여 정확한 발음으로 읽어주도록 제어하기도 합니다. 따라서 웹 페이지에서 주로 사용하는 언어를 기본 언어로 명확히 정의해야 합니다.

   • 아랍어, 독일어, 한국어와 같은 웹 페이지의 주요 언어들을 구분해야 합니다.
   • 텍스트 구문, 관용구나 웹 페이지의 여러 부분들의 언어를 구분해야 합니다.
   • 생소한 단어, 구문, 관용구, 약어들에 대한 설명을 제공해야 합니다.
   • 최대한 명확하고, 단순한 언어를 사용하거나 단순화한 버전을 제공해야 합니다.

2. 예측 가능성
   입력이나 기능, 정보는 사용자가 예측할 수 있는 형태로 제공되는 것이 바람직합니다. 컨트롤 조작 또는 입력 시 사용자가 의도하지 않은 기능은 자동으로 실행되지 않아야 합니다. 특히 새 창, 팝업창 등은 사용자가 인지하지 못한 상황에서 열리지 말아야 합니다. 그리고 담당자 상세 연락처, 연락 방법, 도움말 옵션 등 웹페이지에서 하나 이상의 도움 정보가 제공되는 경우, 정보는 각 페이지에서 동일한 순서로 접근할 수 있어야 합니다.

   • 여러 페이지에서 사용되는 내비게이션은 같은 위치에 있어야 합니다.
   • 웹 페이지에서 반복되는 사용자 인터페이스 요소는 항상 같은 라벨을 갖고 있어야 합니다.
   • 웹 페이지에서의 중요한 변화는 사용자의 동의가 있어야 합니다.

3. 입력 도움
   사용자 입력에는 근처에 사용법을 알려주는 레이블을 보조기술이 알 수 있도록 해당 컨트롤과 대응하여 제공해야 합니다. 반복되는 입력 정보는 자동 입력 또는 선택 입력할 수 있어야 하며, 입력 오류를 정정하는 방법도 함께 제공해야 합니다.

또한 인증 과정은 인지 기능 테스트에만 의존하지 않는 인증 방법을 적어도 하나 이상 제공해야 합니다. 인지 기능 테스트란 비밀번호 입력, 패턴 인식, 문자열 기억 등을 말하며 여기에 의존하지 않는 방법이란 브라우저가 아이디/비밀번호를 저장할 수 있도록 마크업 된 서식, 신체(얼굴, 지문)나 물건(휴대폰, USB)을 이용한 인증을 예로 들 수 있습니다.

• 지시 사항, 에러 메시지, 수정을 위한 내용을 포함해야 합니다.
• 맥락 민감성(context-sensitive)은 더 복잡한 기능과 상호작용을 돕습니다.
  • 리뷰하고 수정할 기회와 필요하다면 제출한 것을 회수할 수 있는 기회를 제공해야 합니다.

4. 견고성

사용자는 기술에 영향을 받지 않고 원하는 콘텐츠를 이용할 수 있어야 합니다. 견고성 원칙은 문법 준수와 웹 애플리케이션 접근성의 2가지 지침으로 구성되어 있습니다.

1. 문법 준수
   마크업 오류 방지를 위해 마크업 언어로 작성된 콘텐츠는 해당 마크업 언어의 문법을 최대한 준수하여 제공해야 한다. 특히 언어 요소의 여닫음, 중첩 관계 및 속성 선언에 오류가 없어야 합니다.

2. 웹 애플리케이션 접근성
   콘텐츠 사용에 필요한 플러그인이나 웹 애플리케이션은 사용자가 웹페이지에 접근하여 사용하는 것을 방해하지 않아야 합니다. 특히 국내의 보조기술로 접근할 수 없는 웹 애플리케이션은 가능한 사용하지 않는 것이 좋으며, 반드시 사용해야 한다면 해당 웹 애플리케이션에 대한 대체수단을 함께 제공해야 합니다.

   • 유효성 보장과 같이 마크업이 정확하게 해석될 수 있도록 해야 합니다.
   • 비표준 사용자 인터페이스 요소를 위해 name, role, value를 제공해야 합니다.

참고
웹 접근성 소개