웹 접근성

박준수·2023년 4월 17일

웹 접근성과 웹 표준 그리고 반응형 웹

목록 보기

1/5

웹 접근성이란?

접근성이란 남녀노소, 장애 유무와 상관없이 모두가 동등하게 불편 없이 이용할 수 있도록 제품, 서비스, 환경 등을 디자인하는 것을 의미한다.
따라서 접근성은 좁게는 장애인, 노령 사용자를 위한 서비스를 제공하는 것, 넓게는 장애인에 한정하지 않고 모든 사용자에게 필요한 서비스를 제공하는 것이라고 할 수 있다.

왜 웹 접근성을 지켜야 할까?

사용자층 확대

장애인 모바일 사용자를 더 이상 배려대상이 아닌 잠재 고객으로 볼 필요가 있다.
모바일 앱 서비스 이용과 직접적 영향이 있을 것으로 추정되는 장애를 가진 인구는 시각장애 25만 1,620명, 청각장애 41만 1,749명, 지체장애 119만 1,462명 정도로 모두 합치면 185만 4,831명으로 전체 인구에 3.6%(2021년 기준, 보건복지부)를 차지한다.
약 185만 명이라는 결코 적지 않은 사용자를 배려한 서비스는 이들을 신규 고객으로 서비스와 함께 성장하는 대상으로 바라볼 수 있다.

서비스를 이용하는 모든 사용자에게 이로움

장애를 가진 사람이 서비스를 이용하면서 겪는 불편함을 우리 모두가 경험할 수 있다고 생각해 보면 이점을 바로 알 수 있다.
빛 번짐이 심한 사용자나 저시력자를 위한 다크 모드는 눈에 피로가 덜 하게 화면을 보고 싶은 사람, 디자인적으로 예뻐 보여서 다크 모드를 사용하고 싶은 사람 모두가 잘 활용하는 기능이 된다.
청각장애인을 위한 동영상 자막 기능은 이어폰이 없는 상황에서 동영상 콘텐츠를 이용하는 사람에게 자막에 의존해 내용을 파악할 수 있는 편리함을 제공하게 된다.

법적 요구사항 준수

미국의 사례이지만, 미국 교통부는 전세계 항공사 중 미국에 취항하는 항공사, 그중에서도 60명 이상의 승객을 수용하는 좌석을 갖춘 항공기를 갖고 있는 모든 항공사에게 웹 접근성 준수 사항을 통보했다.
기준일까지 웹 접근성 준수 사항을 이행하지 않을 경우 벌금을 포함한 집행조치를 할 수 있는 지침이었다.
미국 교통부가 이렇게 나선 이유는, 미국의 청각장애인이 한국의 인터넷 사용자 수만큼 많기 때문이다.
웹 접근성을 지키지 않은 항공사 사이트를 이용할 때 너무 많은 청각장애인이 어려움을 겪고 있기 때문에 해당 조치를 취한 것인데
- 3가지 준수 항목
미국 교통부는 꾸준히 항공사의 웹 접근성 위배 사례를 모집했고, 2018년엔 스칸디나비아 항공사가 실제로 벌금을 내고 사이트를 개선하는 일이 있었다.
이런 사례는 우리나라에서도 앞으로 얼마든지 벌어질 수 있다.
실제로 시각장애인 10명이 대한항공을 상대로 건 소송도 있다.
이 소송으로 대한항공은 웹 접근성 지침에 따라 사이트를 수정, 보완하기로 했다.

어떻게 웹 접근성을 지킬수 있을까?

웹 접근성을 준수하는 방법

웹 접근성은 모든 사람이 인터넷을 이용할 수 있는 공간을 만들기 위한 중요한 요소이다.
따라서, 웹 개발자는 웹 접근성을 고려하여 웹 사이트를 구축하고, 이를 통해 모든 사용자들이 웹 사이트를 쉽게 이용할 수 있도록 노력해야 한다.

1. 시각적 요소 처리

시각 장애인은 이미지, 비디오, 그래픽 등을 인식할 수 없다. 따라서, 대체 텍스트, 적절한 색상 대비, 텍스트 크기 등을 고려하여 시각적 요소를 처리해야 한다.

2. 청각적 요소 처리

청각 장애인은 오디오 콘텐츠를 이해할 수 없다. 따라서, 자막, 수화, 오디오 설명 등을 제공하여 청각적 요소를 처리해야 한다.

3. 키보드 접근성

지체 장애인은 마우스를 사용하지 못하므로 키보드를 통해 웹 사이트를 이용해야 한다. 따라서, 키보드만으로 웹 사이트를 이용할 수 있도록 구현해야 한다.

4. 웹 접근성 검사

웹 사이트를 구축할 때, WCAG 준수 여부를 검사하여 웹 접근성을 확보할 수 있다.

웹 콘텐츠 접근성 지침 (WCAG)

웹 콘텐츠 접근성 지침(WCAG)은 웹 접근성을 확보하기 위한 국제 표준으로, 다양한 장애를 가진 사용자들이 웹 사이트에 쉽게 접근하고 이용할 수 있도록 가이드라인 이라고 보면 된다.
WCAG는 4가지 원칙, 13가지 지침, 78가지 성공 기준으로 구성되어 있다.

1. 인식의 용이성

정보와 사용자 인터페이스 요소는 그들이 인지할 수 있도록 사용자에게 표시될 수 있어야 한다.

텍스트가 아닌 콘텐츠에 대체 텍스트를 사람들이 원하는 인쇄, 점자, 음성, 기호 또는 간단 언어 등과 같은 형태로 제공해야 한다.
정보와 구조의 손실 없이 콘텐츠를 다른 방식(예를 들면 더욱 간단한 형태로)들로 표현할 수 있어야 한다.
사용자들이 보다 쉽게 보고 들을 수 있는 전경에서 배경을 분리한 콘텐츠를 만들어야 한다.

2. 운용의 용이성

사용자 인터페이스 요소와 탐색은 운용 가능해야 한다.

키보드로 모든 기능을 사용할 수 있도록 해야 한다.
읽기 및 콘텐츠를 사용하는 사용자에게 충분한 시간을 제공해야 한다.
사용자가 탐색하고, 콘텐츠를 찾고 그들이 어디에 위치하고 있는지를 알 수 있도록 도와주는 방법을 제공해야 한다.

3. 이해의 용이성

정보와 사용자 인터페이스 운용은 이해할 수 있어야 한다.

텍스트 콘텐츠를 판독하고 이해할 수 있도록 만들어야 한다.
웹 페이지의 탑재와 운용을 예측 가능한 방법으로 제작해야 한다.
사용자의 실수를 방지하고 수정할 수 있도록 도와야 한다.

4. 내구성

콘텐츠는 보조 기술을 포함한 넓고 다양한 사용자 에이전트에 의존하여 해석될 수 있도록 충분히 내구성을 가져야 한다.

웹 기술 사용, 호환성 검사, 오류 정정 등

웹 콘텐츠 접근성 지침 (WCAG)(풀버전)
웹접근성 준수사항, 가이드
인식의 용이성
1. 적절한 대체텍스트 의미가 있는 '텍스트'가 아닌 콘텐츠의 의미나 용도를 동등하게 인식할 수 있는 적절한 텍스트를 제공해야 한다. [오류]
- 대체택스트를 빈값으로 제공하는 경우
- 의미가 있는 이미지가 배경이미지로만 제공하는 경우.
- 이미지의 정보를 요약하거나 오타가 있는 경우.
  
  2. 자막 제공
  
  영상이나, 음성같은 멀티미디어 콘텐츠를 제공할 시에는 자막, 원고, 수화를 제공해야 한다.
  
  [오류]
- 멀티미디어 콘텐츠에 자막, 원고, 수화 중 하나 이상의 대체 수단을 제공하지 않을 경우.
- 멀티미디어 콘텐츠에 대한 대체수단의 내용을 불충분, 적절하지 않게 제공할 경우.
  
  3. 색에 무관한 콘텐츠 인식
  
  색상만으로 콘텐츠를 구별, 인식하도록 제공되지 않도록 디자인하여야한다.
  
  [오류]
- 그래프나 차트, 지도, 필수입력 등과 같은 항목에 색상만으로 내용을 구분하도록 제공되는 경우
- 현재 단계를 색상만으로 제공한 경우 오류.
  
  4. 명확한 지시사항 제공
  
  지시사항을 크기, 위치, 방향, 색에 관계 없이 인식할 수 있어야한다.
  
  [오류]
- 입력 폼에서 필수 입력항목을 의미하는 *,Asterisk를 시각정보로만 제공한 경우
- 상승, 하락을 의미하는 정보를 특수문자로 제공한 경우
  
  5. 텍스트 콘텐츠의 명도 대비
  
  텍스트 콘텐츠와 배경의 명도는 4.5대 1 이상이여야 한다.
  
  6. 자동 재생 금지
  
  웹 페이지에서 자동으로 재생되는 소리가 없거나, 3초 이내 혹은 바로 정지할 수 있는 콘텐츠를 사용하여야 한다.
  
  [오류]
- 자동으로 재생되는 배경음악을 제공할 때 제공 위치가 소스상 가장 먼저 제공하지 않는 경우
- 자동 배경음 외에 마우스 오버, 키보드 초점만으로 3초 이상 배경 콘텐츠가 재생되는 경우
  
  7. 콘텐츠 간의 구분
  
  이웃한 콘텐츠 간에 테두리, 구분선, 서로 다른 패턴을 사용하여 시각적으로 구분되도록 제공해야한다.
  
  마우스 오버나 키보드 포커스시 시각적으로 구분할 수 있는 방법을 제공 시 오류아님
  
  [오류]
- 이웃한 콘텐츠를 아래 1가지 방법 이상으로 구분하지 않은 경우.
  
  1) 테두리를 이용하여 구분
  
  2) 구분선을 삽입하여 구분
  
  3) 서로 다른 무늬를 이용하여 구분
  
  4) 텍스트와 배경간의 명도대비를 달리하여 구분
  
  5) 줄 간격, 글자 간격을 조절하여 구분
  
  6) 기타방법으로 구분
  
  운용의 용이성
  
  1. 키보드 사용 보장모든 기능은 키보드만으로 사용할 수 있어야 한다.
  
  [오류]
- a요소나 form요소에 onClick 이벤트를 사용하여 제공할 경우- 가상 키보드에서 마우스로만 이용 가능하게 할 경우
  
  2. 키보드 사용시 초점 이동
  
  이동 가능한 개체들에 키보드로 이용할 때 초점을 인지할 수 있어야 하고, 논리적인 순서로 이동되어야 한다.
  
  [오류]
- 메뉴 이동시 메인메뉴1 -> 메인메뉴1의 서브메뉴, 메인메뉴2 -> 메인메뉴2의 서브메뉴 형식으로 이동하여야 한다.
  
  3. 조작 가능
  
  웹페이지에서 제공하는 컨트롤 및 사용자입력은 조작 가능하도록 제공해야 한다.
  
  [오류]
- 컨트롤의 크기가 대각선으로 6.0mm 이상 제공하지 않은 경우- 콘트롤의 크기가 6.0mm 이하이면서 1픽셀 이상의 여백을 제공하지 않은 경우
  
  4. 응답시간 조절
  
  시간 제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.(예 : '10초 후 메인페이지로 이동합니다.')
  
  [오류]
- 시간제한이 있는 콘텐츠를 제어할 수 있는 수단을 제공하지 않은 경우- 제한 시간 해제, 또는 연장하는 방법에 대한 안내시간을 20초 이상 제공하지 않은 경우
  
  5. 정지 기능 제공
  
  시간에 따라 자동으로 변경되는 콘텐츠에 정지,이전,다음 기능이 있어야 한다.( 예 : 슬라이드 이미지 )
  
  6. 깜빡임과 번쩍임 사용 제한
  
  1초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않는다.
  
  [오류]
- 사전 안내, 경고 없이 초당 3~50회 깜빡이는 콘텐츠가 존재할 경우
  
  7. 반복 영역 건너뛰기
  
  반복되는 영역은 건너 뛸 수 있어야 한다.(예 : 메뉴제공시 메뉴를 스킵할 수 있는 네비게이션이 있어야 한다.)
  
  [오류]
- 대 메뉴, 팝업, 프레임과 같은 반복 영역이 있을 경우 건너 뛰기 링크가 제공하지 않을 경우- 건너뛰기 링크의 href의 값 연결이 잘못되었을 경우.
  
  8. 제목 제공
  
  페이지, 프레임, 콘텐츠 블록에 절절한 제목을 제공해야 한다.
  
  제목제공 예시 사진 : 네이버
  
  [오류]
- 페이지 제목 중복시- 페이지 제목에 2개 이상 반복되는 특수 문자를 사용한 경우
  
  9. 적절한 링크 텍스트
  
  링크 텍스트의 용도나 목적을 이해할 수 있도록 제공하여야 한다.
  
  [오류]
- 빈 링크텍스트를 제공한 경우- 썸네일 이미지와 텍스트에 링크가 사용될 경우 이미지 링크의 대체 텍스트가 빈 값인 경우
  
  이해의 용이성
  
  1. 기본 언어 표시
  
  문서 타입에 맞는 기본 언어를 명시해야한다.
  
  [오류]