사용자 친화 웹 / 웹 접근성

📂 웹 접근성의 개념

---

일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻한다. 하지만 비장애인도 정보 접근에 제한을 받는 불편함을 겪을 수 있다.

웹 접근성을 갖추면 웹에 접근했을 때 그 어떤 상황에서도 항상 동등한 수준의 정보를 제공받도록 보장받을 수 있다.

결국 웹 접근성의 궁극적인 목적은 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록하는 것.

국내에서는 웹 접근성에 대한 인식이 낮은 편이고, 잘 지켜지지 않는 경우가 많다. 하지만 가능하다면 정보의 평등, 그 외 얻을 수 있는 효과들을 생각하여 웹 접근성을 갖추기 위해서 노력해야 한다.

 

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

• 사용자 층 확대
• 다양한 환경 지원
  (소외 계층이 아니더라도, 접근이 어려운 상황)
• 사회적 이미지 향상

 

 

📂 웹 콘텐츠 접근성 지침

---

웹 접근성을 잘 확보했는지 판단의 기준으로 ‘한국형 웹 콘텐츠 접근성 지침 2.1’을 사용한다. W3C이 웹 접근성 권고안인 ‘WCAG(Web Content Accessibility Guidelines) 2.0’을 기반으로 한국형으로 만든 것이다.

필요할 때 찾아서 사용하면 되겠다.

 

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

1.  텍스트가 아닌 콘텐츠에 적절한 대체 텍스트 적용

2. 멀티미디어 콘텐츠에 자막, 원고 또는 수화 제공

3.  색에 무관한 콘텐츠 인식(테두리, 레이블 달기)

4.  크기, 모양, 색, 소리 등과 관계 없이 인식 가능한 지시사항

5.  텍스트 콘텐츠 명도 대비 충분히

6.  자동재생 금지(스크린 리더를 사용하는 경우에 혼란)

7.  시각적으로 이웃한 콘텐츠들이 구분 가능

 

📎 운용의 용이성(Operable): 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다

8.  키보드 만으로도 사용 가능

9.  키보드에 의한 초점 이동을 위해 마크업 구성

10.  미세한 조작이 어려운 경우 반영

11.  불가피하게 시간 제한이 있어야 하는 경우, 응답 시간과 관련한 요소들 조절

12. 자동으로 변경되는 콘텐츠 제어 가능

13.  깜빡임과 번쩍임 제한

14.  반복 영역 건너뛰기(스크린 리더)

15.  제목 제공으로 빠르게 접근 가능

16.  용도나 목적을 설명해주는 적절한 링크 텍스트

 

 

📎 이해의 용이성(Understandable): 콘텐츠는 이해할 수 있어야 한다

17. 주로 사용하는 언어 명시

18. 사용자가 의도하지 않은 기능, 인식할 수 없는 기능은 실행되지 않아야함

19. 콘텐츠는 논리적인 선형 구조로

20. 표는 이해하기 쉽게 구성

21. 레이블 제공

22. 오류 정정

 

 

 

📎 견고성(Robust): 미래의 기술로도 접근할 수 있도록 만들어야 한다

23. 마크업 오류 방지

24, 웹 어플리케이션 접근성 준수

 

 

 

 

 

 

 

 

📂 WAI-ARIA

---

📎 WAI-ARIA 란?

WAI-ARIA는 WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격으로, 웹 접근성을 향상시킬 수 있는 방법 중의 하나이다.

 

• WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
• ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
  • RIA (Rich Internet Applications) : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다.

 

 

📎 WAI-ARIA 의 필요성

WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 해준다. 따라서 보조적으로 사용하면, 웹 접근성을 향상시킬 수 있다. 다음과 같은 상황에서 WAI-ARIA를 사용하면 웹 접근성을 효과적으로 향상시킬 수 있다.

1. 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색 할 수 있게 도와준다.
   * WAI-ARIA는 보조적인 역할로만 사용해야 합니다. WAI-ARIA를 남용해선 안 되며, 시맨틱한 HTML을 작성하는 것이 최우선
2. SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에대한 정보를 전달해줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있다.

 

 

📎 WAI-ARIA 사용법

HTML 태그 내부에 속성(attribute)을 추가함으로써 의미를 부여해줄 수 있다.

WAI-ARIA는 역할, 상태, 속성 세 가지로 분류 된다.

https://urclass.codestates.com/6d5ec9b9-6b36-4659-ba3d-f986d86458f8?playlist=2296

 

 

✔️ 역할:  HTML의 요소 종류와 역할이 다를 때, 역할을 명시함

✔️ 상태:  선택, 확장, 숨김 등 상태를 명시함

• aria-selected, aria-expanded, aria-hidden

✔️ 속성

• aria-label
  요소의 역할, 의미 부여
• aria-live
  실시간으로 내용을 갱신하는 영역인지 표시(alert, modal, dialog, AJAX 기술을 사용하여 실시간으로 내용을 갱신하는 경우)
  polite, assertive, off(default)
  
  

 

 

 

 

 

 

 

• MDN - Using ARIA: Roles, states, and properties
• W3C - ARIA in HTML

코드스테이츠

https://urclass.codestates.com/6d5ec9b9-6b36-4659-ba3d-f986d86458f8?playlist=2296