TIL) 웹 접근성, 한국형 웹 콘텐츠 접근성 지침, 웹 접근성을 갖추면 얻을 수 있는 효과, 웹 개발자라면 알아야 하는 지식

🖥FrontEnd/프론트엔드

TIL) 웹 접근성, 한국형 웹 콘텐츠 접근성 지침, 웹 접근성을 갖추면 얻을 수 있는 효과, 웹 개발자라면 알아야 하는 지식

hellohailie 2022. 7. 11. 11:30

웹 접근성(Web Accessibility)이란?

장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것.

비장애인도 정보 접근에 제한을 받는 불편함을 겪을 수 있다.

시력이 좋지 않은 경우, 텍스트를 음성으로 읽어주는 스크린 리더를 사용한다.

그런데 이미지에 들어있는 글자의 경우는 스크린 리더가 인식할 수 없어 음성으로 읽어줄 수 없다.

국내 온라인 쇼핑몰 사이트를 보면 상세 정보가 이미지로 올라와 있는 경우가 많다.

우리나라 웹 사이트들의 웹 접근성 평균 점수는 100점 만점에 60.8점..!

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

1. 사용자층 확대 : 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게 되고, 매출 증가로 이어질 수 있다.

2. 다양한 환경 지원 : 운전 중이라 화면을 보기 어렵거나, 마우스를 사용할 수 없는 상황일 때와 같은 정보에 접근하기 어려운 상황에 처할 때, 다양한 환경 및 다양한 기기에서의 웹 사이트를 자유롭게 사용할 수 있게 되어 서비스의 사용 범위가 확대되고 서비스 이용자 수를 증가할 수 있다.

3. 사회적 이미지 향상 : 정보 소외 계층을 위한 사회 공헌 및 복지 향상에 힘쓴다면, 기업의 사회적 이미지가 향상되면서 이용자 수와 충성 고객을 확보할 수 있다.

웹 접근성을 잘 확보했는지 판단할 수 있는 기준 '한국형 웹 콘텐츠 접근성 지침 2.1'

'WCAG (web content accessibility guidelines) 2.0' 을 기반으로 수정하였다.

✔️ 인식의 용이성 (Perceivable) : 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.

1. 적절한 대체 텍스트 : 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야한다.

<img src="이미지 주소" alt="대체 텍스트">

- 이미지에는 alt 속성 사용하기

- 배경 이미지라면 alt 값을 빈 문자열로 줘서 스크린 리더가 인식하지 못하게 하기

- 인접 요소에 이미지 정보를 충분히 인지할 수 있는 경우에는 작성하지 않는 것이 좋다.

2. 자막 제공 : 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야한다.

- 자막 사용 (어렵다면 대본 또는 수어 제공)

- 자막 지원하는 멀티미디어 플랫폼 사용하기

- 비디오 요소 안쪽에 track 요소를 사용해서 자막 파일 불러오기

<video>
	<track src="자막.vtt" kind="captions" />
</video>

WebVTT 또는 TTML 형식 사용하기

3. 색에 무관한 콘텐츠 인식 : 콘텐츠는 색에 관계 없이 인식될 수 있어야 한다.

- 콘텐츠에 테두리 설정하기

- 콘텐츠에 레이블 달기 (그래프라면 10%, 50% 와 같이 작성하기)

4. 명확한 지시사항 제공 : 지시사항은 모양, 크기, 위치, 방향, 색, 소리와 관계없이 인식될 수 있어야 한다.

동그란, 오른쪽에 있는, 빨간색 버튼 이라고 지시하지 않고, 대체 텍스트를 작성해야 한다. 또한 시각적 피드백도 제공해야 한다.

5. 텍스트 콘텐츠 명도 대비 : 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상!

텍스트가 18pt나 bold 14pt 이상인 경우, 확대 가능한 경우, 비활성화 된 콘텐츠인 경우, 장식 목적인 콘텐츠인 경우 3 대 1까지 허용

6. 자동 재생 금지 : 자동으로 소리가 재생되지 않아야 한다.

- 스크린 리더 사용시, 자동으로 재생된 소리와 겹쳐 페이지 내용을 파악하기 어려워진다.

- 불가피한 경우, esc 눌러서 정지, 3초 내 정지할 수 있도록 구현하기

7. 콘텐츠 간 구분 : 이웃한 콘텐츠는 구별될 수 있어야 한다.

✔️ 운용의 용이성 : 사용자 인터페이스 구성요소는 조작 가능하고 네비게이션 할 수 있어야 한다.

8. 키보드 사용 보장 : 모든 기능은 키보드만으로도 사용할 수 있어야 한다.

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

- 초점은 일반적으로 왼 -> 오, 위 -> 아래로 이동한다. 스크린 리더 사용자와 키보드 사용자도 이 순서로 웹 페이지를 탐색할 수 있도록 마크업을 구성해야 한다.

10. 조작 기능: 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.

-여백 주기

11. 응답 시간 조절 : 시간 제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.

- 은행 로그인 시 1) 충분한 시간, 2) 종료 안내, 3) 조절 수단(시간 연장 또는 바로 로그아웃) 제공한다.

12. 정지 기능 제공 : 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

- 캐러셀 슬라이드에 이전, 다음, 정지 기능을 제공해야하고, 버튼이 없더라도 마우스 호버 또는 키보드 접근시 정지되도록 구현해야한다.

- 자동 변경 콘텐츠 (실시간 검색어) 접근했을 때 모든 콘텐츠를 확인할 수 있어야 한다.

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

- 불규칙적으로 깜빡이는 화면은 눈에 피로를 유발하고, 광과민성 발작을 일으킬 수 있다.

- 사용해야만 한다면, 전체 화면의 10% 미만이어야 하고, 사전에 경고하고 중단할 수 있는 수단을 제공해야 한다. 3초 미만

14. 반복 영역 건너뛰기

- 스크린 리더 사용시, 모든 페이지에서 반복되는 요소도 반복해서 읽는다. 반복되는 요소를 건너뛰고 메인 콘텐츠로 이동할 수 있는 방법 제공해야 한다.

(건너뛰기 링크, 메뉴를 필요할 때만 열 수 있도록 만들기)

15. 제목 제공 : 페이지, 프레임, 콘텐츠 블록에는 적적한 제목을 제공해야 한다.

- 특수문자는 1개까지만 사용

16. 적절한 링크 텍스트

- 이미지에 링크가 있다면 링크를 설명해주는 대체 텍스트 작성

✔️ 이해의 용이성 : 콘텐츠는 이해할 수 있어야 한다.

17. 기본 언어 표시

<html lang="ko">

18. 사용자 요구에 따른 실행 : 사용자가 의도하지 않은 기능은 실행되지 않아야 한다.

- 페이지 진입 시, 팝업 뜨지 않도록 해야하고, 화면을 가리는 모달이 있는 경우, 가장 상단에 제공해서 먼저 제어할 수 있도록 해야한다.

- 스크린 리더 사용자에게는 새 창이면 새 창이라고 알려줘야 한다.

링크 요소 안에 보이지 않는 요소를 넣어 새 창에 접근하게 됨을 알려주기
```
<a href="...">페이지<span class="blind">새 창</span></a>
```
링크 요소에 title 속성으로 새 창 작성하기
```
<a href="..." title="새 창">페이지</a>
```
링크 요소에 target=”_blank” 속성을 넣기
```
<a href="..." target="_blank">페이지</a>
```

19. 콘텐츠 선형 구조 : 콘텐츠는 논리적인 순서로 제공해야 한다.

- 제목 -> 내용 -> 제목2 -> 내용2 와 같은 순서로 만들기

20. 표의 구성 : 듣기만해도 표의 구조, 내용을 이해하기 쉽게 구성하기

- 테이블 요소 안에 caption 요소를 사용해서 제목 제공하기

- 제목 셀은 <th>, 데이터 셀은 <td> 사용하기

- 표의 구조가 복잡할 경우, 최대한 간소화하거나 scope, id, headers 속성 사용해서 작성하기

21. 레이블 제공

<input> 요소에 value 나 placeholder 속성만 설정하는 것은 적합하지 않다.
```
(❌) <input type="text" placeholder="아이디" />
```

<input> 요소에 id 를 설정하고 <label> 요소의 for 속성으로 연결해주기.

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

title 속성을 사용하기.

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

WAI-ARIA의 aria-label 속성을 사용하기. (WAI-ARIA의 경우 꼭 필요한 경우가 아니라면 사용하지 않는 것이 좋다. 다른 HTML 속성이나 요소로 대체 가능한 경우에는 해당 속성이나 요소를 우선적으로 사용하기)
(✅) <input type="text" aria-label="아이디" placeholder="아이디" />

22. 오류 정정 : 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

- 작성 중, 혹은 제출 시 오류가 발생했을 때 입력했던 내용이 사라지지 않고 유지되도록 해야 한다.

- 오류가 발생한 경우, 사용자에게 오류 발생 원인 알려주기

- 오류 발생한 경우, 오류가 발생한 위치로 초점 이동해야 한다.

✔️ 견고성 : 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

23. 마크업 오류 방지

요소의 열고 닫음에 오류가 없어야 한다.

(❌) <div><span></div></span>
(✅) <div><span></span></div>

요소의 속성을 중복해서 사용해선 안된다.

(❌) <div class="중복" class="사용"></div>
(✅) <div class="안 돼요"></div>

id 를 중복해서 사용해선 안된다.

(❌) <div id="아이디"><span id="아이디"></span></div>

24. 웹 애플리케이션 접근성 준수 : 웹 콘텐츠에 포함된 웹 애플리케이션도 접근성을 갖추어야 한다. 갖추지 못한 경우에는 대체 수단이나 대체 텍스트를 제공해야 한다.

참고)

자막 형식 WebVTT & TTML

https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API

https://w3c.github.io/ttml2/index.html

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓

저작자표시 비영리 변경금지

'🖥FrontEnd > 프론트엔드' 카테고리의 다른 글

Lighthouse란, Lighthouse 사용하기, Lighthouse 분석해보기 (0)	2022.08.04
TIL) 번들링이란, Webpack의 필요성, 웹팩을 이용하는 방법 (0)	2022.07.25
TIL) WAI-ARIA, aria-live, 스크린 리더, 웹 접근성 향상 시키는 방법 (0)	2022.07.11
SEO란? SEO가 왜 필요한가요? 오픈 그래프 실습해보기 (0)	2022.07.08
TIL) 웹 표준을 왜 지켜야 하는가, 의미있는 HTML 구조 만들기, Semantic HTML, 시맨틱 요소와 종류, 크로스 브라우징, 웹 워크 플로우 (0)	2022.07.08

현재글TIL) 웹 접근성, 한국형 웹 콘텐츠 접근성 지침, 웹 접근성을 갖추면 얻을 수 있는 효과, 웹 개발자라면 알아야 하는 지식

Today Hailie Learned