HTML 웹접근성

2020-12-27

차별 및 제한 없이 동등하게
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. (웹의 힘은 보편성에 있다. 장애에 관계없이 모든 사람이 접근할 수 있도록 하는 것은 필수적인 요소이다.)
─ Tim Berners-Lee

웹접근성 (web accessibility)

웹사이트에서 제공하는 정보를 신체적 조건이나 환경적 조건에 관계 없이 웹에 접근해 동등하게 이용할 수 있도록 보장하는 것.

장애인 및 고령자를 포함한 모든 사람
다양한 플랫폼 및 디바이스와 웹브라우저 등 모든 환경

보이스오버

시각장애인에 맞춰 스마트폰 설정을 바꿔주는 기능. 이 기능을 사요하면 텍스트를 음성으로 읽어주는 기능이기 때문에 시각장애인도 게임 등을 즐길 수 있다.

웹접근성 향상을 위한 방법

비장애인은 이용할 수 있지만 장애인은 이용할 수 있다면 장애인을 위한 별도의 서비스를 제공해주면 된다. 서로 다른 환경을 사용하고 있다면 환경에 적합한 서비스를 별도로 제공해주면 된다.

웹접근성을 향상시키기 위한 방법

웹접근성 지침 준수

웹표준 기술의 활용

웹접근성 지침 (WCAG)

W3C 웹 콘텐츠 접근성 가이드라인 표준 권고안은 웹사이트/ 애플리케이션에서 충족해야 하는 기준을 정의 하여 장애가 있는 사용자가 보다 쉽게 이용할 수 있도록 준수해야 하는 지침 으로 웹 서비스를 제작하는 사람들이 기획/디자인/개발 과정에서 고려해야할 요구사항이다. 접근성은 시각, 청각, 지체, 음성, 인지, 언어, 학습 및 신경 장애를 포함한 광범위한 장애를 포함한다.

원칙	설명
인식	모든 사용자는 서비스 콘텐츠를 인식할 수 있어야 한다
운용	모든 사용자는 서비스의 기능을 운용할 수 있어야 한다
이해	모든 사용자가 서비스의 콘텐츠, 기능 사용법 등을 이해하기 쉬워야 한다
견고	사용자가 이용하는 모든 기기 및 브라우저에서 접근, 사용 가능하여야 한다

웹표준 기술

웹에서 표준적으로 사용되는 기술이나 규칙.

견고한 구조 설계를 위한 HTML: 콘텐츠의 구조를 설계하고 의미를 부여하는 기술
레이아웃 및 스타일을 위한 CSS: 콘텐츠의 배치 및 스타일 위한 기술
동작 및 제어를 위한 DOM과 Javascript: 콘텐츠의 기능을 구현하는 기술
WAI-ARIA: RIA를 위한 웹접근성 관련 기술

WAI-AREA
기존에 HTML에서 부족했던 부분을 보완하고 웹 접근성을 준수할 수 있도록 역할 모델이나 속성, 상태 정보 등을 추가할 수 있다.

<!-- 메뉴 닫기 버튼 -->
<button type="button" title="메뉴 닫기" aria-label="메뉴 닫기">
    <!-- 스크린 리더기가 읽지 않도록 aria-hidden을 적용 -->
    <span aria-hidden="true">X</span>
</button>

웹접근성을 고려한 HTML 마크업

기본 언어 설정(`lang`) 및 문서 제목(`title`)

주로 사용하는 언어를 명시하여야 한다. (원칙3 이해의 요의성)
페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다. (원칙 2 운용의 용의성)

<!DOCTYPE html>
<!-- 언어 설정 -->
<html lang="ko-KR">
<head>
    <meta charset="UTF-8">
    <!-- 제목 설정 -->
    <title>제목입니다</title>
</head>
</html>

콘텐츠 구조 설계 (HTML5)

머릿말을 의미하는 헤더 영역
주요 콘텐츠를 의미하는 메인 영역
연락처나 주소 정보 등을 의미하는 푸터 영역. 화면에서 제공하지 않을 경우 숨김 컨텐츠로 제거하거나 생략할 수 있다.

화면에서 보이지 않는 영역은 구조 설계시 제외한다. 그러나 해당 정보를 제공할 가치가 있다고 판단된다면 디자인에서만 제외하고 숨김 컨텐츠 형태로 제공할 수 있다.

WAI-ARIA보다는 네이티브 요소로 구조설계를 하는 것이 좋으며, 혼용하여 사용하는 것은 적절하지 않다.

네이티브 요소

<body>
    <header>헤더</header>
    <main>메인</main>
    <footer>푸터</footer>
</body>

WAI-ARIA

<body>
    <div role="banner">헤더</div>
    <div role="main">메인</div>
    <div role="contentinfo">푸터</div>
</body>

콘텐츠 제목 및 논리적인 순서

콘텐츠의 논리적인 순서 : 화면에 보여지는 순서가 아니라 웹브라우저가 콘텐츠를 탐색하고 이해할 수 있는 선형화된 순서 를 의미한다.
- 프레임, 콘텐츠는 논리적인 순서로 제공하여야 한다. 스크린 리더 등 보조 기기를 사용하는 사용자가 콘텐츠의 의미를 이해할 수 있도록 제공하여야 한다. (원칙3 이해의 용이성)
콘텐츠 제목 : 독립된 콘텐츠 영역이라면 각각을 대표하는 콘텐츠 블록의 제목을 제공해야 한다.
- 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공하여야 한다. (원칙2 운용의 용이성)

제목의 계층 구조를 건너뛰지 않도록 주의하여야 한다.

키보드 접근

텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공하여야 한다. (원칙1 인식의 용이성)
모든 기능은 키보드만으로도 사용할 수 있어야 한다. (원칙2 운용의 용이성)
키보드에 의한 초점은 논치적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다. (원칙2 운용의 용이성)

REFERENCE

https://www.youtube.com/watch?v=g8-Y8dHQ22Y&list=PLtaz5vK7MbK1vJ7HJjCV5xSy7bW7D_mbB