학습 내용
웹 접근성은 무엇인지, 웹 접근성 실태는 어떠한지, 웹 접근성을 향상하기 위한 방법은 무엇이 있는지 알아본다.
학습 목표(블로깅에서 달성 시 지운다.
- 웹 접근성의 개념과 필요성을 이해한다.
- 국내에서의 웹 접근성 실태를 기억한다.
- 웹 콘텐츠 접근성 지침을 기억한다.
- 웹 콘텐츠 접근성 지침을 충족시키는 방법을 기억한다.
- WAI-ARIA의 사용법을 기억한다.
웹 접근성
개념
웹 접근성: 이 웹 사이트는 누구나 사용할 수 있고, 어디에서 접근 가능한가? 라고 질문해보자.
Yes라고 한다면, 웹 접근성이 있는 것이다.
*접근성
접근성은 사용자가 어떠한 제품이나 서비스 등을 사용할 때, 편리하게 이용할 수 있는 정도이다.
더 구체적으로 얘기하면,
사용자의 신체적 특성, 지역, 나이, 지식 수준, 기술, 체험과 같은 제한 사항을 고려할 때,
가능한 많은 사용자가 불편 없이 이용할 수 있도록 제품, 서비스를 만들어 제공하고 이를 평가 할 때 쓰는 말이다.
일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻한다.
웹 접근성 유무와 목적
- 웹 접근성이 없다면, 정보 접근에 제한을 받는 불편함을 겪을 수 있다.
- 웹 접근성이 있다면, 웹에 접근했을 때 항상 동등한 수준의 정보를 제공받도록 보장받을 수 있다.
- 웹 접근성의 목적: 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것
웹 접근성 효과
*효과: 어떤 목적을 지닌 행위에 의하여 드러나는 보람이나 좋은 결과.
- 사용자 층 확대
장애인, 고령자 등을 포함한 모든 사람들이 웹에서 원하는 정보들을 자유롭게 접근하고 이용할 수 있다. - 법률 준수
’08년 4월 11일부터 시행된「장애인차별금지 및 권리구제 등에 관한 법률」및 동법 시행령 등 관련 규정을 준수할 수 있게 된다. - 다양한 디바이스 지원
소음이 많은 환경 등 주변 환경에 영향 없이, 모바일과 같은 새로운 기기등장과 상관 없이 사용 가능한 웹을 제공. - 웹 디자인의 효율성
웹 페이지 구성이 논리적으로 최적화되어, 디자인 및 설계의 효율성 제고는 물론 개발·유지보수·개편 비용 절감 효과. - SEO 개선
웹 접근성을 갖춘 웹사이트는 검색 엔진 최적화(SEO)에 용이하다.
검색 엔진은 이미지나 미디어 등의 대체 텍스트 정보를 활용하여 웹사이트의 콘텐츠를 인식하므로,
검색 엔진의 순위를 개선할 수 있다. - 사회적 책임 실현
기업의 사회적 책임(CSR, Corporate Social Responsibility)이 중요하게 부각되고 있는 시점에서 홈페이지를 운영하고 있는 기관 및 단체에 대한 긍정적 이미지 형성에 도움.
우리나라 웹 접근성 실태
2021년 기준, 일반 국민의 정보화 수준을 100이라고 할 때,
장애인, 고령층 등 디지털 취약 계층의 정보화 지수는 75.4점이다.
우리나라 웹 사이트들의 웹 접근성 평균 점수는 100점 만점에 60.8점이었다.
WCAG(웹 콘텐츠 접근성 지침)
개념
WCAG = Web Content Accessibility Guidelines
웹 콘텐츠 접근성 가이드라인이다.
인터넷의 주요 국제 표준 기구인 W3C의 웹 접근성 이니셔티브가 출판한 일련의 웹 접근성 가이드라인의 일부이다.
한국형 웹 콘텐츠 접근성 지침 2.1
WCAG 2.0을 한국 실정에 맞게 수정한 자료이다.
한국 웹 접근성 인증 평가원에 자료가 업로드 되어있다.
아래는 한국형 웹 콘텐츠 접근성 지침 2.1의 pdf로 접근할 수 있는 링크이다.
http://www.wa.or.kr/board/view.asp?sn=161&page=1&search=&SearchString=&BoardID=0004&cate=
인식의 용이성(Perceivable)
모든 사용자가 콘텐츠를 명확히 인식할 수 있어야 한다.
- 적절한 대체 텍스트
(시각 장애가 있는 사용자에 도움)
텍스트가 아닌 콘텐츠는 그 의미를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
alt 속성을 사용해서 시각적으로 화면을 인식할 수 없는 사용자를 대비해서 대체 텍스트를 제공한다.
*alt 속성은 이미지가 업로드 되지 않는 오류의 상황에서도 사용할 수 있다. - 자막 제공
(청각 장애가 있는 사용자에 도움)
멀티미디어 콘텐츠에는 자막을 제공한다.
video 요소 안에, tract 요소를 사용해서 자막 파일을 불러온다. - 색에 무관한 콘텐츠 인식
(색맹이 있는 사용자에 도움)
콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
콘텐츠에 테두리를 설정하거나, 레이블을 다는 것으로 명확한 인지를 도울 수 있다. - 명확한 지시사항 제공
지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다. - 텍스트 콘텐츠 명도 대비
명도 대비는 텍스트 콘텐츠 : 배경 = 4.5 : 1 이상이어야한다.
명도 대비가 충분히 확보되지 않으면 텍스트를 읽기 어렵다. - 자동 재생 금지
자동으로 소리가 재생되지 않아야 한다. 유튜브에서 마우스 커서를 동영상 콘텐츠에 갖다대면, 영상은 재생되지만 소리는 들리지 않는다. - 콘텐츠 간 구분
이웃한 콘텐츠는 구별될 수 있어야 한다.
운용의 용이성(Operable)
사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
*내비게이션 할 수 있다는 말은 지도 등을 보면서 길, 방향을 찾을 수 있다는 말이다.
- 키보드 사용 보장
(마우스를 이용하지 못하는 사용자)
모든 기능은 키보드만으로 사용할 수 있어야 한다. - 초점 이동
(스크린 리더 사용자)
키보드에 의한 초점은 논리적을 ㅗ이동해야 하며 시각적으로 구별할 수 있어야 한다.
일반적으로 초점은 왼쪽 -> 오른쪽, 위쪽에서 아래쪽으로 이동한다. - 조작 가능
사용자 입력 및 컨트롤은 조작 가능해야 한다.
버튼이 너무 작은 경우 버튼을 클릭하기 어렵다. - 응답 시간 조절
시간 제한이 있는 콘텐츠는 응답 조절이 가능해야 한다.
예를 들면, 은행 웹 사이트 및 애플리케이션 - 정지 기능 제공
자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다. - 깜빡임과 번쩍임 사용 제한
초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
이건 좀 인상적이었는데, 웹 사이트에서 깜빡임이 과하면, 광과민성 발작이 일어날 가능성이 있다.
닌텐도를 사용하던 어린이가 과한 깜빡임으로 인해 광과민성 발작을 일으킨 사건이 있었다고 한다. - 반복 영역 건너뛰기
(스크린 리더 사용자)
콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다. - 제목 제공
적절한 제목을 제공해야 한다. - 적절한 링크 텍스트
링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
이해의 용이성(Understandable)
모든 콘텐츠는 이해할 수 있어야 한다.
- 기본 언어 표시
주로 사용하는 언어를 명시해야 한다.
HTML 요소에 lang 속성을 사용하여 읽을 수 있는 언어를 제공할 수 있다. - 사용자 요구에 따른 실행
사용자가 의도하지 않은 기능은 실행되지 않아야 한다. - 콘텐츠 선형 구조
콘텐츠는 논리적인 순서로 제공해야 한다. - 표의 구성
표는 이해하기 쉽게 구성해야 한다. - 레이블 제공
사용자 입력에는 대응하는 레이블을 제공해야 한다. - 오류 정정
입력 오류를 정정할 수 있는 방법을 제공해야 한다.
견고성(Robust)
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
- 마크업 오류 방지
마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다. - 웹 애플리케이션 접근성 준수
콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
WAI-ARIA(웹 접근성 기술 사양)
WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications)
W3C가 출판한 기술 사양이다.
사용자 인터페이스 구성 요소의 접근성을 증가시키는 방법에 대해 규정한 내용이다.
(웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, 자바스크립트 및 관련 기술로 개발된 UI에 대하여)
필요성
HTML 요소에 추가적으로 의미를 부여한다.
WAI-ARIA를 보조적으로 사용하면 웹 접근성을 향상시킬 수 있다.
사용법과 사용처
-
사용법
<HTML태그. "속성을 추가"></HTML태그>
"속성을 추가" 이 부분에, WAI-ARIA 속성을 추가해서 의미를 부여할 수 있다. -
사용처
- 시맨틱하지 않은 HTML 요소
- 시맨틱 HTML 요소에 추가적 의미 부여
WAI-ARIA 3가지 속성
- 역할(role) : HTML 요소의 역할을 정의하는 속성
- 상태(state) : 요소의 현재 상태를 나타내는 속성
aria-selected을 사용해서 선택 상태인 요소를 표시할 수 있다.
aria-expanded을 사용해서 아코디언 UI의 펼침 상태를 표시할 수 있다.
aria-hidden을 사용해서 요소의 숨김 상태를 표시할 수 있다. - 속성(property) : 요소의 특징을 정의하는 속성(attribute)
aria-label을 사용해서 어떤 역할인지 설명해줄 수 있다.
aria-live을 사용해서 해당 요소가 실시간으로 내용을 변경하는 영역인지 표시해줄 수 있다.
aria-live 속성 값으로는 polite, assertive, off(default)가 있습니다.
용어 정리
- WAI (Web Accessibility Initiative)
W3C에서 웹 접근성을 담당하는 기관 - ARIA (Accessible Rich Internet Applications)
웹 접근성을 갖추기 위한 기술 - RIA (Rich Internet Applications)
따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성에 더하여
프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션.
SPA를 의미하는 경우가 많다.
기술 사양이란?
기술에 대한 표준안, 규정을 설명한 것이다.
질의응답
질문
WAI-ARIA를 사용하면 검색 엔진에 더욱 노출될 수 있나요?
WAI-ARIA를 사용하는 목적 중에 검색 엔진에 더 노출이 되기 위함도 있나요?
답변
검색 엔진(특히 구글 크롤러)이 HTML의 ARIA 속성에 주의를 기울인다는 증거는 없다. ARIA 속성은 SEO 목적이 아니라, HTML 문서(또는 웹 애플리케이션)의 접근성을 높이기 위해 설계 되었다.
실제로 ARIA 속성은 이름(의미)을 객체에 연결한다. 그들은 기본 HTML 요소가 할 수 없는 객체에 의미론적인 의미를 할당하도록 설계되었으며 이 정보는 특정 장치에서 사용된다.
h1 검색 엔진은 다른 유형의 정보를 추출하는데, 주로 제목(...h6), 단락() 등과 같은 HTML 태그 사이에 삽입된 텍스트 콘텐츠 p와 src 속성을 통해 이미지를 추출한다.
그러나 접근성이 전체 사이트의 사용자 경험을 크게 향상시키면 웹 사이트 순위가 향상될 수 있다. 사용자에게 좋은가? 그럼 순위가 좋다. 따라서 이 질문에 답하면 ARIA는 SEO에 대한 직접적인 순위 요소가 아니라 SERP에서 웹 사이트의 위치를 개선할 수 있는 간접적인 요소이다.
