티스토리 뷰

코드스테이츠(SEB_FE_42)

[사용자 친화 웹] 웹 접근성

codeyun2 2023. 1. 2. 21:46

웹 접근성 Web Accessibility

어떤 상황이든, 어떤 사람이든 동등한 수준의 정보를 제공받을 수 있도록 보장하는 것

(장애인, 고령자 등 정보 소외 계층, 운전 중이라 화면을 보기 어렵거나, 마우스를 사용할 수 없는 상황)

 

2008년 장애인 차별 금지 및 권리 구제등에 관한 법률에 의해

모든 공공기관과 법인의 웹사이트는 의무적으로 웹 접근성을 갖추도록 강제성이 부여됐음에도,

다양한 장애 상황을 모두 고려하여 웹 접근성을 확보한 경우는 찾아보기 어려움

-> 국내에서는 웹 접근성 인식이 상대적으로 낮고, 단속도 잘 이뤄지지 않고 있음

 

 

웹 접근성을 갖추었을 때 얻을 수 있는 효과

1. 사용자층 확대

장애인, 고령자 등 정보 소외 계층도 웹 사이트를 이용할 수 있게 되어 사이트 이용자를 늘릴 수 있고, 새로운 고객층 확보 가능

 

2. 다양한 환경 지원

정보 소외 계층이 아니더라도 운전 중이라 화면을 보기 어렵거나 마우스를 사용할 수 없는 상황 등

다양한 환경, 기기에서 웹 사이트를 자유롭게 사용할 수 있게 되어 서비스 사용 범위가 확대되고,

서비스 이용자 수 증가를 기대할 수 있음

 

3. 사회적 이미지 향상

기업의 사회적 책임의 중요성이 증가하고 있는 상황에서, 웹 접근성 향상을 통해

기업이 정보 소외 계층을 위한 사회 공헌 및 복지 향상에 힘쓰고 있음을 보여줄 수 있음.

-> 이용자 수 증가와 충성 고객 확보로 이어질 수 있음

 

=> 서비스 이용자 증가를 기대할 수 있음

 

 

웹 콘텐츠 접근성 지침(한국형 웹 콘텐츠 접근성 지침 2.1)

W3C가 지정한 웹 접근성 권고안 'WCAG(Web Content Accessibility Guidelines) 2.0'을 기반으로 한국 실정에 맞게 수정함

 

인식의 용이성(Perceivable)

모든 콘텐츠는 사용자가 인식할 수 있어야 함

 

1. 적절한 대체 텍스트

시각적으로 화면을 인식할 수 없는 사용자 혹은 상황을 대비하여

텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있는 대체 텍스트를 제공해야 함

  • alt 속성 사용
    • 배경 이미지 같이 정보를 인식할 필요가 없는 경우 속성값을 빈 문자열로 줌
      (스크린 리더가 해당 콘텐츠의 존재 자체를 인식하지 못함)
    • 인접 요소에서 이미지의 정보를 충분히 인지할 수 있는 경우에도 속성값을 빈 문자열로 주어 동일한 정보를 중복 제공하지 않음

 

2. 자막 제공

멀티 콘텐츠에는 자막, 원고 또는 수화를 제공해야 함

  • 자막을 포함한 동영상 사용하기
  • 자막을 지원하는 멀티미디어 플랫폼 사용하기
  • 비디오 요소 안쪽에 track 요소를 사용하여 자막 파일 불러오기
    • WebVTT(Web Video Text Tracks .vtt 파일) 또는 Timed Text Markup Language(TTML) 형식을 사용해야 함
<video>
  <track src="자막.vtt" kind="cations" />
</video>
  • 자막을 제공하기 어려운 경우 대본 또는 수어를 제공

 

3. 색에 무관한 콘텐츠 인식

색약, 색맹 등의 색을 인지하는데 어려움이 있는 사용자의 접근성을 위해

콘텐츠는 색에 관계없이 인식될 수 있어야함

  • 콘텐츠 테두리를 설정하여 구분을 명확하게 하기
  • 콘텐츠에 레이블을 달아 색 구분이 명확하지 않아도 내용을 명확하게 파악할 수 있게 하기

 

4. 명확한 지시사항 제공

모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식할 수 있어야 함

  • 동그란 버튼, 가장 큰 버튼, 오른쪽 버튼, 빨간색 버튼 등을 시각적 특징을 가리켜 지시한다면,
    시각 장애를 가진 사용자는 지시사항을 인지할 수 없기 때문에 버튼을 설명하는 대체 텍스트를 작성해야 함
  • 소리를 통해 지시한다면,
    청각 장애를 가진 사용자는 지시사항을 인지할 수 없기 때문에 시각적 피드백도 함께 제공해야 함

 

5. 텍스트 명도 대비

명도 대비가 충분하지 않은 경우 텍스트를 읽기 어렵기 때문에 4.5 : 1 이상으로 설정해야 함

아래의 경우에 해당된다면 3 : 1까지 허용됨

  • 텍스트가 18pt 또는 굵은 14pt 이상인 경우
  • 확대 가능한 페이지인 경우
  • 비활성된 콘텐츠인 경우
  • 장식 목적의 콘텐츠인 경우

6. 자동 재생 금지

스크린 리더를 사용하는 경우 자동으로 재생된 콘텐츠와 소리가 겹쳐 페이지 내용을 파악하기 어려워짐

(동영상, 오디오, 음성, 배경 음악 등 모든 종류의 소리)

꼭 자동 재생을 제공해야한다면 아래 기능을 구현할 것

  • 가장 먼저 위치시켜 정지할 수 있게 구현
  • ESC를 눌러 정지할 수 있게 함
  • 3초 내에 정지하게 함

7. 콘텐츠 간 구분

웹 페이지를 구성하는 모든 콘텐츠는 시각적으로 구분할 수 있어야 함

  • 테두리, 구분선, 무늬, 명도대비, 간격 등을 사용하여 구분

 

운용의 용이성(Operable)

사용자 인터페이스 구성요소는 조작 가능하고 내비게이션할 수 있어야 함

 

8. 키보드 사용 보장

마우스를 사용할 수 없는 경우를 위해 모든 기능을 키보드만으로 사용할 수 있어야 함

  • 키보드 조작시 빠져나오지 못하는 경우가 없도록 주의해야 함

 

9. 초점 이동

키보드에 의한 초점은 논리적*으로 이동해야 하며, 시각적으로 구별할 수 있어야 함

스크린 리더 사용자와 키보드 사용자가 논리적인 순서로 웹 페이지를 탐색할 수 있도록 마크업 구성

* 논리적: 위에서 아래로, 왼쪽에서 오른쪽으로

 

10. 조작 가능

미세한 조작이 어려운 상황에서도 사용자 입력 및 컨트롤을 조작할 수 있도록 제공

  • 컨트롤의 대각선 길이 6mm 이상
  • 컨트롤 간 1픽셀 이상의 여백 주기(구분)

 

11. 응답 시간 조절

시간 제한이 필요한 콘텐츠(은행 보안 등)에는 충분한 시간 제공, 종료 안내(남은 시간), 조절 수단(연장)을 제공해야 함

  • 페이지가 자동 전환되는 경우 시간을 연장하거나 정지시킬 수 있는 수단 제공
  • 특히 스크린 리더나 키보드 사용자도 이 수단을 인지할 수 있는 충분한 시간을 제공해야 함

 

12. 정지 기능 제공

자동으로 움직이는 콘텐츠의 움직임 제어

  • 자동 변경 슬라이드(캐러셀): 이전, 다음, 정지 기능 제공, 마우스 호버 혹은 키보드 접근 시 정지되게 구현
  • 자동 변경 콘텐츠(실시간 검색어 등): 접근했을 때 모든 콘텐츠를 확인할 수 있도록 구현

 

13. 깜빡임과 번쩍임 사용 제한

초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 말아야 함

불규칙적으로 깜빡이는 화면은 눈의 피로를 유발하고, 심한 경우 광과민성 발작을 일으킬 수 있음

이러한 콘텐츠를 제공하는 경우 아래를 지켜야 함

  • 콘텐츠가 차지하는 면적이 전체 화면의 10% 미만일 것
  • 사전에 경고하고 중단할 수 있는 수단을 제공할 것
  • 시간을 3초 미만으로 제한할 것

 

14. 반복 영역 건너뛰기

스크린 리더를 사용하는 경우 헤더, 내비게이션 바 등 반복되는 요소를 건너뛰고 메인 콘텐츠로 이동할 수 있는 방법 제공

  • 가장 앞에 건너뛰기 링크 제공
  • 메뉴를 필요할 때만 열 수 있도록 만들기

 

15. 제목 제공

페이지 프레임, 콘텐츠 블록에 적절한 제목을 제공하여 원하는 내용에 빠르게 접근할 수 있게 함

  • 특수문자는 하나만 사용할 것
    시각적 장식을 목적으로 특수문자를 반복적으로 사용하는 경우 스크린 리더에서 불필요하게 반복 출력하게 됨

 

16. 적절한 링크 텍스트

목적이나 용도를 알 수 있도록 제공

  • 비어있는 링크가 없어야 함
  • 이미지에 링크가 걸려있는 경우 링크를 설명하는 대체 텍스트 작성

 

이해의 용이성(Understandable)

17. 기본 언어 표시

주로 사용하는 언어 표시

  • html 요소에 lang 속성으로 제공
  • 페이지 내 다른 언어가 있는 경우 해당 요소에 lang 속성으로 표시
<html lang="ko">
<div lang="ko">

 

18. 사용자 요구에 따른 실행

사용자가 의도하지 않는 기능(새 창, 초점에 의한 맥락 변화 등)이 실행되지 않아야 함

  • 페이지 진입 시 팝업이 뜨지 않게 할 것
  • 화면을 가리는 레이어창(모달)이 있는 경우,
    가장 상단에 제공하여 가장 먼저 제어할 수 있도록 함
  • 스크린 리더 사용자는 새 창이 떴을 때 인지하지 못하고 기존 페이지를 보고 있다고 생각할 수 있기 때문에
    새 창이 열림을 알려줄 수 있어야 함
    • 링크 안에 보이지 않는 요소를 넣어 알려주기
    • 링크 요소에 title 속성으로 알려주기
    • 링크 요소에 target="_blank" 넣기
<a href="...">페이지<span class="blind">새 창</span></a>
<a href="..." title="새창">페이지</a>
<a href="..." target="_blank">페이지</a>

 

19. 콘텐츠 선형 구조

스크린 리더는 마크업 순서로 내용을 읽기 때문에 제목 다음 내용이 오도록 구성

(콘텐츠를 논리적인 순서로 제공하기)

 

20. 표의 구성

시각 장애가 있는 경우 내용을 들으면서 표의 구조를 파악해야하기 때문에 표의 구조, 내용을 이해하기 쉽게 구성하기

  • 테이블 요소 안에 caption 요소를 사용해서 표에 제목 제공하기
    • 제목만으로 표가 말하고자하는 바를 파악할 수 있음
    • 표 내용을 요약하여 함께 작성하는 것도 좋음
  • 제목셀과 데이터셀이 구분되도록 작성(<th>, <td> 요소 사용)
  • 표의 구조를 최대한 간소화
  • 표의 구조가 복잡하다면 scope, id, headers 속성을 사용하여 작성
    • scope: 1대 1 매칭(row, column)
    • id, headers: 병합된 셀이 있는 경우 사용(구분자, 내용)
요소 역할
<table> 표를 생성
<caption> 표의 제목
<thead> (optional) 열의 제목을 묶음
<tbody> (optional) 표의 내용을 묶음
<th> 열의 제목
<tr> table row의 약자. 열을 생성
<td> table data의 약자. 행을 생성

 

21. 레이블 제공

사용자가 어떤 정보를 입력해야 하는지 정확하게 알 수 있도록 레이블 제공

  • value나 placeholder 속성만 사용하는 것은 부적합
  • title 요소 사용
  • id를 작성하고 for로 연결해주기
  • WAI-ARIA의 aria-label 속성 사용(html 속성으로 설명이 부족할 경우에만 사용) 
// placeholder는 처음엔 인식되지만 입력하고 난 후에는 인식할 수 없음
<input type="text" placeholder="아이디"/>

<input type="text" placeholder="아이디" title="아이디"/>

<label for="user_id">아이디<label>
<input id="user_id" type="text" placeholder="아이디"/>

<input type="text" placeholder="아이디" aria-label="아이디"/>

 

22. 오류 정정

입력 오류를 정정할 수 있는 방법 제공

  • 작성 중 혹은 제출 시 오류가 발생했다면 입력했던 내용이 사라지지 않고 유지돼야 함
  • 오류 발생 시 사용자에게 원인을 알려줘야 함
  • 오류 발생 시 오류가 발생한 위치로 초점이 이동해야 함

 

견고성(Robust)

미래의 기술로도 접근할 수 있도록 견고하게 만들어야 함

 

23. 마크업 오류 방지

  • 요소를 열고 닫음에 오류가 없어야 함
<div><span></div></span> // 틀린 예시
<div><span></span></div>
  • 요소 속성을 중복 사용하지 않아야 함
<div class="중복" class="사용"></div> // 틀린 예시
<div class="안 돼요"></div>
  • id를 중복하지 않아야 함
(X) <div id="아이디"><span id="아이디"></span></div> // 틀린 예시

 

24. 웹 애플리케이션 접근성 준수

콘텐츠에 포함된 웹 애플리케이션도 접근성을 갖춰야 함

갖추지 못한 경우 대체 수단이나 대체 텍스트를 제공해야 함

 

 

WAI-ARIA

WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격

WAI(Web Accessibility Initiative): 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관

ARIA(Accessible Rich Internet Applications): 웹 접근성을 갖추기 위한 기술

  • RIA: 프로그램을 설치하지 않고 웹 브라우저를 통해 사용할 수 있는 편리성과,
    설치하여 사용하는 것 만큼 빠른 반응의 사용자 인터페이스를 가지는 웹 애플리케이션.
    SPA를 의미하는 경우가 많음

 

WAI-ARIA 필요성

HTML에 의미를 부여해줌(시맨틱)

1. '시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황'에만 사용하여 페이지 탐색을 도와줌

- 시맨틱 요소만으로 충분하다면 사용하지 말 것. 보조적인 역할로 사용

2. SPA처럼 AJAX를 사용하는 상황(새로고침 없이 페이지의 내용이 바뀌는 상황)에서도 

변경된 영역에 대한 정보를 전달해줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있음

 

WAI-ARIA 사용법

1. 역할(role)

HTML 요소 종류와 역할이 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해주려고 사용하는 속성

- HTML 요소로 역할을 충분히 파악할 수 있는 경우 사용하지 말 것

- 시맨틱 요소 본연의 의미를 바꾸지 말 것

<div role="button">div이지만 button으로 사용되는 요소</div>

// 잘못 사용한 예시
<button role="button">button인 요소</button>
<h1 role="button">h1인 요소</h1>
<div role="tabList">
  <li role="tab">Tab1</li>
  <li role="tab">Tab2</li>
  <li role="tab">Tab3</li>
</div>

<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>

 

2. 상태(state)

요소의 현재 상태를 나타내는 속성

  • aria-selected
    • 선택 가능한 여러 개의 요소 중 선택된 요소를 표시
  <li role="tab" aria-selected="true">Tab1</li>
  <li role="tab" aria-selected="false">Tab2</li>
  <li role="tab" aria-selected="false">Tab3</li>
  • aria-expanded
    • 아코디언 UI가 펼쳐진 상태인지 표시
  • aria-hidden
    • 요소가 숨긴 상태인지 표시

 

3. 속성(property)

요소의 특징을 정의하는 속성

  • aria-label
    • 텍스트 없이 이미지로만 만들어진 버튼처럼 요소에 대한 정보가 전혀 없는 경우 사용
<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>
  • aria-live
    • 해당 요소가 실시간으로 갱신되는 동적인 요소인지 표시
      • alert, modal, dialog, AJAX로 내용을 갱신하는 영역
      • 시각 장애인은 동적인 요소를 인지하기 어렵기 때문에
        실시간으로 갱신되는 영역을 표시하는 것이 콘텐츠 파악에 도움 됨
    • 속성값
      • polite 스크린 리더가 현재 읽고 있는 내용을 모두 읽은 뒤 갱신된 내용을 사용자에게 전달
      • assertive 스크린 리더가 현재 읽고 있는 내용을 중단하고 갱신된 내용을 사용자에게 전달
      • off(기본값)

 

 

 

 

* 참고

더 자세한 WAI-ARIA

MDN - Using ARIA: Roles, states, and properties

W3C - ARIA in HTML

WAI-ARIA 예시

Material-UI 자주 사용되는 컴포넌트가 저장된 라이브러리(WAI-ARIA 사용하고 있어 예시로 보기 적절)

 

2023.01.02

코스 S3U5 웹 접근성

'코드스테이츠(SEB_FE_42)' 카테고리의 다른 글

[인증 / 보안] Cookie 쿠키, Session 세션  (0) 2023.01.05
[네트워크] 네트워크 계층 모델, HTTPS  (0) 2023.01.03
[React] Redux Toolkit  (0) 2023.01.01
[사용자 친화 웹] 웹 표준  (0) 2022.12.30
[React] Redux-thunk, Redux Toolkit  (0) 2022.12.29
댓글
공지사항