2019년 11월 22일 정보접근성 기술 컨퍼런스를 다녀온뒤 세미나 내용을 정리 및 웹 접근성에 대해 작성한 글이다.

웹 접근성이란?

웹 접근성(Web Accessibility) 이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것이다. 법으로는 2017년 7월 26일부터 장애인차별금지법으로 시행되었다.

장애인 차별금지 및 권리구제 등에 관한 법률 제 2조(장애와 장애인)

이 법에서 금지하는 차별행위의 사유가 되는 장애라 함은 신처적, 정신적 손상 또는 기능상실이 장기간에 걸쳐 개인의 일상 또는 사회생활에 상당한 제약을 초래하는 상태를 말한다.

장애인이라 함은 제1항에 따른 장애가 있는 사람을 말한다.

웹 접근성은 정보와 사용자의 디지털정보격차를 줄인다는 개념으로도 볼 수 있다.

디지털정보격차(Digital Divide)란?

정보통신기술에서의 접근, 역량, 활용에 있어서의 불평등

사회자원에서의 접근, 역량, 활용에 있어서의 불평등

또한 접근성에서의 ‘장애’는 개인의 건강상태가 아니라 인간 상호작용이 일치하지 않는 상황으로 볼 수 있고, 접근성은 아래와 같은 의미로도 해석할 수 있다.

각자 다른 능력을 가진 사람들이 모든 것을 경험할 수 있도록 가능성을 만들어 주는것
그리고 이를 달성하기 위해 전문가들이 노력하는 것

정보통신 환경의 장애유형과 보완대책

장애유형	특징	보완대책
시각장애(전맹)	모니터를 볼 수 없음	스크린리더
시각장애(저시력)	모니터 사용이 일부 가능함	화면확대/고대비
시각장애(색맹)	색을 구별할 수 없음	색상에만 의존하지 않기/고대비
청각장애	사운드, 오디오 등을 창취할 수 없음	수화, 시각정보 제공
지체장애(상지장애)	손을 사용할 수 없음	마우스 대체 방법, 키보드만 사용
지체장애(기타)	움직임이 어려움	충분한 시간 제공
언어장애	복잡한 용어, 어려운 용어의 이해 불가능	쉬운 용어 사용

웹 접근성 국제표준 검사항목(KWCAG)

웹 접근성 한국표준이며 가이드는 한국형 웹 콘텐츠 접근성 지침 2.1 에서 확인해 볼 수 있다. 항목은 24가지 이며 국제표준(WCAG)은 더욱 엄격하여 항목으로는 78가지가 있다.

인식의 용이성 - 사람은 콘텐츠를 보거나 들을 수 있다.

1. 적정한 대체 텍스트
텍스트 아닌 콘텐츠는 대체 가능한 텍스트와 함께 제공되어야 한다.
2. 자막, 수화 등의 제공
영상이나 음성 콘텐츠에는 동등한 내용의 자막, 원고 또는 수화가 제공되어야 한다.
3. 색에 무관한 콘텐츠 인식
화면에 표시되는 모든 정보는 색에 관계없이 인식될 수 있어야 한다.
4. 명확한 지시사항 제공
특정한 감각(시각, 청각 등)에 의존하여 지시사항을 제공할 경우 해당 감각에 장애가 있다면 인식할 수 없으므로, 다른 감각을 통해서도 인식할 수 있도록 지시사항을 제공해야 한다. (3, 4번 항목의 예: 콘텐츠 구분 접근성)
5. 텍스트 콘텐츠 명도 대비
화면에 표시되는 모든 사용자 인터페이스 컴포넌트와 텍스트는 전경색과 배경색이 구분될 수 있도록 제공되어야 한다.(예: 명도 대비 접근성)
6. 자동 재생 금지
자동으로 재생되는 배경음을 사용하지 않아야 한다. 구글은 사용자가 원치 않은 미디어가 자동 재생되면서 데이터와 전력을 소모하고, 웹 탐색 중 소음을 유발한다는 이유로 2018년 1월부터 크롬 브라우저는 웹 사이트에서 자동으로 재생되는 영상을 기본 설정에서 차단한 사례가 있다.
7. 콘텐츠 간의 구분
이웃한 콘텐츠는 구별될 수 있어야 한다.

운용의 용이성 - 사람이 타이핑이나 음성으로 컴퓨터를 사용할 수 있다.

1. 키보드 사용 보장
모든 기능은 키보드만으로도 사용할 수 있어야 한다.
2. 초점 이동
키보드의 Tab키(다음으로 이동)와 Shift + Tab(이전으로 이동)키로 확인해볼 수 있다.
초점 이동 순서가 순환적이며, 반복적이어야 한다.
페이지에 포함된 모든 링크, 버튼, 입력창에 초점이 가야한다.
사용자가 사용할 수 없는 비활성 요소(버튼, 입력창 등)에는 초점이 가지 않아야 한다.
3. 조작 가능
손떨림이 심하여 미세한 조작이 어려운 경우와 같이 운동 장애가 있는 경우에도 사용자 입력 및 컨트롤은 조작이 가능하도록 제공되어야 한다. 4. 응답시간 조절
웹 콘텐츠 제작 시 시간제한이 있는 콘텐츠는 가급적 포함하지 않는 것이 바람직하며, 보안 등의 사유로 시간제한이 반드시 필요할 경우에는 이를 회피할 수 있는 수단을 제공해야 한다.(일시 정지 등)
5. 정지기능 제공
자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
6. 깜빡임과 번쩍임 사용 제한
초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
7. 반복영역 건너뛰기
콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.(스킵 네비게이션)
8. 제목 제공
페이지, 프레임, 콘텐츠 블록에는 적절한 제목(헤딩 태그)을 제공해야 한다.
9. 적절한 링크 텍스트
링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.(새창 열림 및 더보기)

이해의 용이성 - 사람이 명확하고 단순한 언어로 사용할 수 있다.

1. 기본언어 표시
주로 사용하는 언어를 명시해야 한다. 웹 페이지에 주로 사용하는 언어를 <html> 요소에 lang 속성을 지정하여 명시
2. 사용자 요구에 따른 실행
사용자가 의도하지 않은 기능(새 창, 초점 변화 등)은 실행되지 않아야 한다.
3. 콘텐츠 선형구조
콘텐츠는 논리적인 순서로 제공해야 한다. 콘텐츠 및 마크업이 논리적인 순서로 구성해야 한다.
4. 표의 구성
표는 이해하기 쉽게 구성 및 caption 및 scope을 꼭 명시해 준다. 복잡한 표의 경우 id, header 를 사용한다.
5. 레이블 제공
입력 서식에는 대응하는 레이블을 제공해야 한다.
6. 오류정정
입력 오류를 정정할 방법을 제공해야 한다.

견고성 - 사람들이 다른 보조 기술을 사용할 수 있다.

1. 마크업 오류 방지
마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
2. 웹어플리케이션 접근성 준수
콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

대비해야 할 대표 기술 8가지

1. 시멘틱 마크업

W3C는 텍스트를 시각적으로 표현하는 태그보다 프로그램적으로 의미를 전달할 수 있는 시멘틱 마크업 사용을 권장한다. 웹 사이트는 결론적으로 ‘웹으로 된 문서’이기 때문이다.

예시

보통 아이콘을  태그를 사용하지만 이 태그는 이태릭체를 의미하는 태그이다. 아이콘으로 쓰지 말도록 하자. 의미가 없는 태그는 가상선택자(:after, :before)를 이용하며, 의미가 있는 태그는  태그 등에 대체 텍스트를 활용해 준다.
 태그는 강조보단 두껍게를 의미하는 태그이다.  태그와 마찬가지로 사용을 지양하며, 강조의 의미인  및  태그를 사용하도록 하자.
쇼핑몰 사이트의 ~~10,000원~~ 이런 형태의 가격표를 많이 보았을 것이다. 이 경우 <del> 태그를 사용하면 스크린리더기가 10,000원 뒤에 ‘삭제’ 라고 읽어준다. 이런식으로 의미론적인 태그를 사용하여 마크업을 작성하도록 하자.

2. 텍스트를 포함하는 이미지

W3C는 특별한 경우를 제외하고는 텍스트를 이미지 형태로 제공하지 않도록 권장한다. 텍스트 이미지는 사용자의 요구사항에 따라 시각적으로 사용자 정의될 수 있어야 한다. 예를 하나 들면 번역을 해야 되는 경우가 있다. 꼭 이미지로 사용해야 하는 경우에는 대체 텍스트를 꼭 사용해주도록 한다.(alt 속성 등)

3. 텍스트 명도대비

W3C는 기본적으로 텍스트와 배경과의 명도대비는 최소한 4.5 : 1 을 제공하도록 권장한다. 대신 비활성 상태의 인터페이스 요소나 텍스트, 순수한 장식, 로고 또는 상표명에 포함된 텍스트의 경우, 그림의 일부인 텍스트의 경우 어떠한 명도대비 요구사항도 없다. 명도 대비 검사는 Contrast Finder에서 테스트해볼 수 있다.

4. 비 텍스트 명도대비

W3C는 UI요소 및 그래픽 콘텐츠에 한에서 명도대비를 3:1을 제공하도록 권장하고 있다. 예를들어 그래프의 경우 명도가 비슷한 색 끼리 맞닿은 경우 닿는면 사이를 흰색 라인으로 처리를 해준다. 색애 무관한 콘텐츠 인식에서 예시를 확인할 수 있다.

5. WAI-ARIA

정적인 HTML과 단순한 JavaScript 환경이 아닌 동적인 JavaScript 및 Ajax와 같은 기술을 사용한 환경에서 스크린리더 및 보조기기등이 접근성 및 상호 운용성을 향상시키기 위하여 탄생되었으며, 역할(Role), 속성(Property), 상태(State) 정보를 추가하여 이를 개선 할 수 있도록 제공하고 있다. W3C가 권장을 하고 있지만, 느리다는 단점이 있다.

6. 반응형 웹

콘텐츠는 정보 또는 기능 손실 없이, 2차원 스크롤 없이 제공해야 한다. 2차원 스크롤을 이용해 본 사람은 알겠지만 콘텐츠 이용이 상당히 불편하다. 2차원 스크롤은 아래을 의미한다.

가로 320px 넓이에서 가로 스크롤이 없이 수직으로 스크롤
세로 256px 높이에서 세로 스크롤이 없이 수평으로 스크롤

7. 동영상 실시간 자막

동영상 제공 시 W3C는 특별한 경우를 제외하고 동기화된 자막을 제공하도록 권장한다. 단, 미디어가 텍스트에 대한 대체수단이 분명히 명시된 경우는 예외이다. 되도록이면 대화, 해설, 효과음 등의 자막 스타일을 다르게 하여 나타내는 것도 하나의 방법이다. 동영상 자막의 경우 게임 분야가 상당히 잘 되어있다. 청각 장애와 난청을 위한 게임 만들기에서 좋은 예시를 볼 수 있다.

8. 자동완성기능

입력칸의 목적성을 규정하여 각각의 입력 필드가 가지는 의미는 계획하에 결정되어야 한다. 다른 말로 하면, 사용자들로부터 어떤 값들이 입력되길 기대하는지, 혹은 입력된 정보의 의미가 무엇인지를 나타내는 코드가 필요하다. 이를 정확하게 하면 사용자의 브라우저가 이전에 사용자가 입력한 데이터들을 활용하여 미리 해당 입력 필드를 자동적으로 채우는 것을 가능하게 해준다.

결론

기술이 필요한 궁극적인 이유는 사람이다. 정보 접근성 준수 기술은 사용자를 이해하고 배려하는 것에서 시작된다. 웹 접근성을 꼭 준수하도록 하자

References

네이버 접근성 가이드
다음 접근성 가이드
웹 접근성이란?
웹 접근성의 이해
장애인차별금지 및 권리구제 등에 관한 법률
한국형 웹 콘텐츠 접근성 지침 2.1
[인식의 용이성] 1.3.1. 색에 무관한 콘텐츠 인식
[웹표준]WCAG 2.1 가이드라인
한국웹접근성성인인증평가원