웹 접근성(Web Accessibility) - WCAG / WAI-ARIA / RIA

 

📌 웹 접근성(Web Accessibility)

: 모든 사용자가 웹 사이트 및 웹 애플리케이션을 이해하고 이용할 수 있는 능력

• 장애가 있는 사람, 고령자 등을 포함한 모든 사용자가 웹을 사용할 수 있도록 하는 것을 목표로 한다.
• 웹 사이트나 애플리케이션을 설계하고 개발할 때 특정 규칙과 지침을 준수해야 한다.
• 이러한 규칙은 W3C (World Wide Web Consortium)에서 발표한 웹 콘텐츠 접근성 지침(WCAG)에 기반한다.

 
 

📌 웹 콘텐츠 접근성 가이드라인 (Web Content Accessibility Guidelines, WCAG)

: W3C 웹 콘텐츠 접근성 가이드라인 표준 권고안
- 웹 사이트/애플리케이션에서 충족해야 하는 기준을 정의하여 장애가 있는 사용자가 보다 쉽게 이용할 수 있도록 준수해야 하는 지침

WCAG는 각 지침을 4가지 원칙의 범주로 분류하여 제공한다.

• 인식 Perceivable
• 운용 Operable
• 이해 Understandable
• 견고 Robust

 

 

✨ RIA (Rich Internet Applications)

: UI기술로써 플래쉬, 자바어플렛, AJAX 등을 사용한 어플리케이션
: 웹 페이지에서 다양한 기능과 사용자 환경을 제공할 수 있는 기술을 통칭

• 기존의 정적인 HTML과 단순한 자바스크립트 사용 환경에서 벗어나 한층 강력해진 자바스크립트와 Ajax 등의 기술을 활용하여 웹 애플리케이션을 제작하고 좀 더 향상된 UX를 제공할 수 있도록 한다.
• RIA를 사용하면 화려한 UI와 동적인 그래픽 처리를 할 수 있어 훨씬 다양한 웹 페이지와 웹 애플리케이션을 만들 수 있다.
• 웹 반응 속도도 빨라져 개발자 뿐만 아닌 기업, 고객들의 만족도가 높다.
• 그러나 스크린 리더 등 보조 기술을 사용하는 장애인이 RIA 기술로 제작된 웹 애플리케이션을 제대로 사용할 수 없다.

RIA 기술의 종류
분 류	기 술	설 명
런타임 및  플러그인	Sliverlight	비동기식 프로그래밍, 닷넷 언어 와 개발 도구 지원
	FLex	Flash Player기반, SDK 및 자체 개발도구 외 이클립스 지원
	OpenLazlo	LZX 언어 기반, OpenLazlo 서버 지원 Javascript, 런타임 설정에 따른 DHTML 구현 가능
	AIR	기존 웹기술(XHTML, CSS, Javascript) 및 랜더링 엔진
	JavaFX	서술형, 정적 자료형, 함수형, 리스트 내포의 스크립트 언어
	XAML	- Extensible Application Markup Language - Microsoft가 만든 Markup Language로 XML을 사용하여 모델을 기술(IE 전용) -  Flex에 비해 시장 점유율 낮음
웹표준	AJAX	XML + Javascript 을 이용한 웹 개발 기법
	eXria	HTML + CSS + XML + Javascript 와 이클립스 기반의 위지윅 통합 개발 환경 제공

 
 

---

 

📌 WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications)

WAI: W3C에서 웹 접근성을 담당하는 기관
ARIA: RIA 환경의 웹 접근성에 대한 표준 기술 규격

• 문서 간의 연결을 위해 설계됨
• 스크린 리더 및 보조 기기 등에서 웹 접근성과 상호 운용성을 향상시키기 위한 목적으로 탄생
• RIA의 단점인 웹 접근성 측면을 개선
• 태그(<div> 등)의 정보 전달에 부족함이 있다면 WAI-ARIA를 사용하기
  
  

✨ ARIA 3가지 기능

• 역할(Role): 유저 인터페이스(User Interface, UI)에 포함된 특정 컴포넌트의 역할을 정의
• 속성(Property): 해당 컴포넌트의 특징이나 상황을 정의, 속성명으로 “aria-*”라는 접두사를 사용
  - <input> 상자에 aria-required=”true”를 지정하면 스크린 리더 등의 보조 기기에서 해당 항목이 필수 항목(Require)임을 알 수 있도록 제공할 수 있다.
• 상태(State): 해당 컴포넌트의 상태 정보를 정의

 

 

📍 WAI-ARIA 작성 규칙

* HTML5의 섹션 관련 요소와 WAI-ARIA 규칙을 함께 사용할 경우 해당 기능이 무효화 되거나 충돌이 발생할 수 있으므로
중복해서 사용해서는 안된다❌

 

🔺role

: 태그의 역할을 알려주는 속성

• 기존의 시멘틱 태그들은 role이 정해져 있으나 그렇지 않은 태그들(<div> 등)은 role을 지정해줘야 한다.

ARIA Role과 HTML5 섹션 관련 요소 비교
랜드마크 Role	HTML5 섹션 관련 요소
role=“application”	동일한 역할의 요소 없음. 주로 <div> 요소와 같이 그룹 역할을 하는 요소로 대체할 수 있다.
role=“banner”	동일한 역할의 요소 없음. 비슷한 의미로 <header> 요소를 사용할 수 있으나 <header role=“banner”>로 사용하였다면 한 페이지에서 한 개의 <header> 요소만 사용하길 권장
role=“navigation”	<nav> 요소. 다른 페이지 또는 페이지 내 특정 영역으로 이동하는 링크 콘텐츠 영역 주로 메인 메뉴 및 서브 메뉴 등에 사용할 수 있다.
role=“main”	<main> 요소. 본문의 주요 콘텐츠 영역 한 페이지 내에 1개만 사용이 가능하며, <article>, <aside>, <footer> 의 하위 요소로 사용할 수 없다.
role=“complementary”	<aside> 요소. 주요 콘텐츠와 연관이 적은 의미있는 콘텐츠 영역으로 종종 사이드 바로 표현 <aside> 영역에는 현재 날씨, 관련된 기사 또는 주식 정보등의 부가 콘텐츠를 포함 할 수 있다.
role=“form”	<form> 요소. 폼과 관련된 요소의 모임을 표현하는 영역으로 서버에 전송될 수 있는 콘텐츠를 포함 할 수 있다.
role=“search”	동일한 역할의 요소 없음. 검색의 역할을 담당하는 서식 영역임을 의미 <div> 또는 <form> 요소를 사용하는 것을 권장한다.
role=“contentinfo”	동일한 역할의 요소 없음. 비슷한 의미로 <footer> 요소를 사용할 수 있으나 <footer role=“contentinfo”>로 사용하였다면 한 페이지에서 한 개의 <footer> 요소만 사용하길 권장
role="group"	해당 요소 내부에 그룹이 있음을 알리는 속성

 

- HTML5

<header>헤더</header>
<nav>네비게이션</nav>
<main>
  <section>
    <header>
      <h2>섹션 제목</h2>
    </header>
    섹션 컨텐츠...
    <footer>
      작성자: 권보령
    </footer>
  </section>
  <article></article>
</main>
<aside>부가정보</aside>
<footer>바닥글</footer>

 

- WAI-ARIA (역할 모델 부여한 버전)

<div role="banner">헤더</div>
<div role="navigation">네비게이션</div>
<div role="main">
  <div role="article">섹션 콘텐츠</div>
  <div role="group">섹션 콘텐츠</div>
</div>
<div role="complementary">부가 정보</div>
<div role="contentinfo">바닥글</div>

 

 

---

 

🔺 aria-hidden

: 화면에는 요소가 보이지만 스크린 리더로는 읽지 않는 속성

• 장식성 태그에 부여!

 

 

🔺 aria-label 

: 화면에 현재 요소를 설명할 텍스트가 없을 경우 사용하는 설명용 텍스트를 넣는 요소

• <img> 태그에는 사용 ❌
  (alt 속성과 함께 쓸 수 없음)

 

 

🔺 aria-labelledby

: 화면에 현재 요소를 설명할 텍스트가 있을 경우 해당 텍스트 영역과 요소를 연결하는 요소

<span
  role="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="tac"></span>
  
<span id="tac">I agree to the Terms and Conditions.</span>

 

 

🔺 aria-haspopup

: 서브 메뉴나 대화형 위젯을 표시할 수 있는지 여부를 나타내는 속성

• 펼쳐져 있지 않은 드롭다운 메뉴에 접근성 연결하는 법
• 어떤 종류의 팝업이 표시될 지를 설정
  
  
• false
  기본값
  (= menu)
• true: 팝업이 메뉴
• tree: 팝업은 트리
• dialog: 팝업은 대화창
• grid: 팝업은 그리드
• listbox: 팝업이 리스트 상자

 

 

🔺 aria-controls="id 값"

: 해당 패널이 어떤 요소에 대한 컨트롤인지 참조한다.

• 해당 요소와 id 값으로 연결

 

 

🔺 aria expanded

: 탭, 메뉴, 아코디언 등의 패널이 펼쳐진 상태(활성화) 라는 것을 알리는 속성

• true: 활성화
• false: 비활성화

 

 

🔺aria-orientation

: 탭,메뉴 등의 레이아웃 방향을 나타내는 속성

• undefined: 일반적으로 명시적인 방향이 필요하지 않을 때 사용 (기본값)
• horizontal: 요소가 수평으로 정렬된다는 것을 명시
  (수평으로 나열된 탭 또는 수평 슬라이더)
• vertical: 요소가 수직으로 정렬된다는 것을 명시
  (수직으로 나열된 메뉴 항목 또는 수직 슬라이더)

 

 

---

 

📍 WAI-ARIA 접근 가능한 이름(Accessible Name)

우선 순위

1. aria-label
2. aria-labelledby
3. aria-describedby
4. title: 제공되는 접근가능한 이름이 없을 때 최후의 수단으로 읽는 정보

title 보단 aria-label을 사용하는 것이 더 좋다.

다만, title 속성이 마우스를 사용하는 User 입장에서 정보를 식별하기 용이한 방법일 수 있다면 aria-label과 함께 제공할 수도 있다.

Providing Accessible Names and Descriptions

 

 

---

 

참고

 

aria-haspopup - Accessibility | MDN

 

aria-controls - Accessibility | MDN

 

aria-expanded - Accessibility | MDN

 

RIA 기술의 종류 및 특징, 활용분야