ARIA

접근가능한 리치 인터넷 어플리케이션(ARIAAccessible Rich Internet Applications)은 웹 콘텐츠와 웹 어플리케이션(그 중에서도 특히 Ajax와 JavaScript를 사용하여 개발한 것들)을 제작할 때 적용할 수 있는 장애인을 위한 접근성 향상 방법을 정의합니다. ARIA를 사용함으로써 내비게이션 랜드마크, JavaScript 위젯, 서식(form) 힌트, 에러 메시지 그리고 실시간 콘텐츠 업데이트 등에 접근성을 부여할 수 있습니다.

ARIA는 일련의 특정한 접근성 관련 속성(attribute)로 이루어져 있으며 어떠한 마크업에도 적용가능하나, 특히 HTML에 최적화 되어 있습니다. role 속성을 사용하여 객체(article, alert, slider와 같은 것들)의 일반(general) 타입을 정의할 수 있습니다. 이 외에도 ARIA 속성을 추가로 사용하여 서식에 관한 설명이나 상태바(progressbar)의 현재 값을 제공하는 등 유용한 프로퍼티들을 제공할 수 있습니다.

대부분의 상용 브라우저들과 스크린리더 기기는 ARIA를 지원합니다. 그러나, 그 구현방식이 가지각색이며 설사 지원을 한다 하더라도, 오래된 기기 혹은 브라우저의 경우에는 제대로 되지 않습니다. 애플리케이션의 기능을 우아하게 저하시키는 (degrades gracefully) "안전한" ARIA를 사용하거나, 사용자에게 기기를 최신 버전으로 업그레이드할 것을 요청하십시오.

Note: 다음 사용자들을 위해 ARIA가 지금보다 좀 더 나아지도록 도와주세요! 시간이 별로 없다구요? 제안하고자 하는 것이 있으면 모질라 접근성 메일링 리스트나 #accessibility IRC channel로 메일 보내주세요!

ARIA 시작하기

ARIA 소개
동적인 컨텐츠를 ARIA를 적용해 접근성을 갖추도록 하는 방법에 대한 소개한 글입니다. Gez Lemon이 2008년에 쓴 ARIA 분야의 고전인 ARIA intro도 참조하십시오.
웹 애플리케이션과 ARIA에 대해 자주 묻는 질문 모음(FAQ)
WAI-ARIA와 이것이 웹 애플리케이션에 접근성을 부여하는 데 왜 필요한지 묻는 질문들에 대한 답을 모아놓은 글입니다.
스크린 리더기에서 ARIA를 어떻게 사용하는지에 대한 영상
ARIA "적용 전", "적용 후" 영상을 비롯하여, 웹에서 볼 수 있는 실제 사용 예제들과 그것보다 간략화된 예시들을 볼 수 있습니다.
HTML에서 ARIA 사용하기
개발자를 위한 실용 가이드를 제공하는 글입니다. HTML 요소에 어떤 ARIA 속성들을 써야 하는지에 대해 제안하는 내용을 담고 있습니다. 제안은 실제 구현 상황을 바탕으로 합니다.

AIRA 심화

ARIA 랜드마크를 사용하여 페이지 탐색 고도화
스크린 리더 사용자들을 위해 ARIA 랜드마크를 사용하여 웹 페이지의 탐색 기능을 향상시키는 법을 소개해주는 좋은 글입니다. 이와 더불어서 ARIA 구현 노트 및 실제 사이트에서의 활용 예시들을 참고하십시오 (2011년 7월에 업데이트 되었음).
서식 접근성 향상하기
동적인 콘텐츠만 ARIA를 사용할 수 있는것은 아닙니다! ARIA 속성을 추가하여 HTML 폼 접근성을 어떻게 향상시킬 수 있는지에 대해 알아봅시다.
활성 영역(Live regions) (개발 진행중)
활성 영역을 사용하면 스크린 리더기가 페이지 콘텐츠의 변경 내역을 다루는 데 도움이 됩니다.
ARIA 활성 영역을 사용하여 콘텐츠 변경 내역 알리기
JAWS 스크린 리더 소프트웨어 개발자들이 쓴 활성 영역에 대해 간략히 요약해놓은 글입니다. 파이어폭스에서 NVDA, 사파리에서 VoiceOver 사용시에도 활성 영역이 지원됩니다.

스크립트 처리된 위젯에 ARIA 적용하기

자바스크립트 위젯에 키보드 탐색 및 초점 적용하기
자바스크립트 위젯에 접근성을 부여하기 하기 위해서 해야 하는 가장 첫번째 일은 키보드를 사용하여 위젯을 탐색 가능하게 만드는 것입니다. 이 글은 키보드 탐색 가능한 위젯을 만들기 위해 거쳐야 하는 단계들에 대해 설명하는 글입니다. Yahoo!에서 게시한 초점 관리 가이드 또한 좋은 참고 자료입니다.
키보드 탐색 적용을 위한 스타일 가이드
ARIA를 적용하다 보면 항상 일관성 있는 동작을 구현하는 것이 중요하다는 것을 깨닫게 됩니다. 일관성 있는 동작을 구현해놓으면 명백하게 사용자에게 최상의 환경을 제공해 줄 수 있습니다. 이 글은 공통 위젯에서 사용하는 키보드 인터페이스에 대해 설명해주는 스타일 가이드 입니다.

ARIA 자료

위젯 관련 테크닉, 튜토리얼 및 예시 모음
슬라이더나 메뉴 혹은 다른 위젯이 필요하시나요? 이 문서에서 관련 자료를 찾아보세요.
ARIA 사용이 가능한 자바스크립트 UI 라이브러리
새로운 프로젝트를 시작해야 한다면 ARIA 지원 기능이 들어 있는 UI 위젯 라이브러리를 사용해보세요. 주의할 점은 2009년에 쓴 글이므로 만약 업데이트가 발생한다면 컨텐츠를 MDN 페이지로 옮겨야 합니다.

메일링 리스트

Free ARIA 구글 그룹 
ARIA에 대해 궁금한 점과 ARIA 문서 내용을 보완하기 위한 제안을 낼 수 있는 곳입니다.

블로그

각종 블로그에 게시된 ARIA 관련 정보는 조금만 시간이 지나도 예전 내용이 되어버리는 경향이 있습니다. 그런가하면 오늘날의 ARIA를 위해 일하는 개발자들이 쓴 훌륭한 글도 있습니다.

버그 수집하기

브라우저, 스크린 리더기, 자바스크립트 라이브러리에서 발생한 ARIA 버그를 모아주세요.

예시

ARIA 예시 라이브러리
ARIA 학습 첫걸음을 떼기에 좋은, 가장 기본이 되면서도 중요한 예시 파일들을 모아놓았습니다.
접근성을 보유한 JS 위젯 라이브러리 데모
jQuery, YUI
Yahoo! 메일
데스크탑 앱과 거의 유사한 메일 앱인 Yahoo! 메일은 접근성 구현이 아주 충실하게 되어 있습니다. 스크린 리더기 사용자인 마르코는 Yahoo! 메일 사용후기에서 앞으로도 이렇게 훌륭한 접근성 구현을 지속해달라는 바람을 표현했습니다.
Yahoo! 검색
Yahoo! 개발팀은 ARIA가 가진 기능을 최대한 활용하고 그들만의 테크닉을 공유함으로써 고급 ARIA 기능 적용 사례에 한 획을 그었습니다. ARIA 랜드마크, 활성 영역 및 위젯을 적절히 조합하여 Yahoo! 검색 기능에 적용했습니다.

표준화를 위한 노고

W3C WAI-ARIA 활동 개요
웹 접근성 개선안(WAI)을 따라서 그동안 이루어진 WAI-ARIA 표준화 과정에 대해 서술한 검수판 개요 문서입니다.
WAI-ARIA 스펙 문서
참고용으로 삼기 좋은 W3C 스펙 문서입니다. 지금 단계에서는 스펙 구현 상황이 불안정하기에 호환성 검사를 꼭 해야 합니다.
WAI-ARIA 사용 가이드

W3C WAI-ARIA 스펙 문서와 더불어, 다양한 브라우저 및 스크린 리더기 사용 환경에서 항상 동일한 ARIA 지원이 이루어지는 장밋빛 미래를 표상하는 모범 사례 모음 문서입니다. ARIA를 심층적으로 분석하는 내용을 포함하고 있습니다.

지금으로써는 ARIA 구현을 위해 호환성을 최대로 고려해야 합니다. 현재 ARIA 구현 상태를 바탕으로 하는 모범 사례에 관한 문서와 예시들을 사용하십시오.

Open AJAX Accessibility Task Force
Open AJAX 개발은 ARIA를 위한 개발자 도구, 샘플 파일 및 자동화 테스트를 중심적으로 다룹니다.
수정중: WCAG 2.0 ARIA 테크닉
WAI-ARIA 사용자들은 WCAG의 HTML & WAI-ARIA 사용 테크닉에 대해 전부 알려 달라고 요청하는데, 그렇게 함으로써 각 단체별로 ARIA를 적용한 자신들의 콘텐츠가 WCAG를 준수한다고 자신있게 주장할 수 있기 때문입니다. 법률이나 정책이 WCAG를 바탕으로 하고 있을 때 중요하게 살펴볼 만한 문서입니다.

Accessibility, AJAX, JavaScript

문서 태그 및 공헌자

 이 페이지의 공헌자: young-gratia, teoli, Cho.Eun
 최종 변경: young-gratia,