WAI-ARIA

1. wai-aria

• Web Accessibility Initative-Accessible Rich Internet Application의 약자로
  웹 페이지, ajax, html, js 및 관련 기술로 개발된 사용자 인터페이스 구성요소의
  접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술 사양이다.
  • ARIA란 접근 가능한 리치 인터넷 어플리케이션을 말한다. 장애를 가진
    사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JAVASCRIPT를 사용하여
    개발한 경우)에서 더욱 쉽게 접근할 수 있는 방법을 정의하는 여러
    특성들을 말한다.
    ARIA는 HTML을 보충해 일반적으로 보조 기술이 알 수 없는 상호작용 및
    흔히 쓰이는 위젯에 필요한 정보를 제공한다.
    

2. 규칙

• 1) 요소의 용도를 변경하고 접근할 수 있도록 ARIA의 역할, 상태 또는 속성을 추가하는 대신 기본 제공되는 의미 체계 및 동작이 있는 기본 HTML 요소의 경우에는 HTML 속성을 사용한다.
• 2) 꼭 필요한 경우가 아니면 기본 의미를 변경하면 안된다.
• 3) 모든 대화형 ARIA 컨트롤은 키보드와 함께 사용할 수 있어야 한다.
  사용자가 클릭하거나 탭하거나 드래그, 드롭, 슬라이드, 스크롤 할 수 있는
  위젯을 생성하는 경우 사용자는 위젯을 탐색하고 키보드를 사용하여 동등한
  작업을 수행할 수도 있어야 한다.
• 4) 포커스 가능한 요소에 role=presentaition 또는 aria-hidden=true를 사용하면 안된다.
• 5) 모든 대화형 요소에는 액세스 가능한 이름이 있어야 한다.
  대화형 요소는 접근 가능한 이름(또는 이에 상응하는) 속성에 값이
  있는 경우에만 접근 가능한 이름을 갖는다.

3. 주의점

• 올바르게 사용하지 못한다면 ARIA를 사용하지 않는 것이 좋다.
• ARIA를 사용하기 전에 태그의 역할과 의미에 맞게 작성해야 한다.

  <div role="button">버튼</div>   --> xxx
   <button>버튼</button>           --> ooo

• 태그의 기본 의미를 중복해서 선언할 필요는 없다.

   <input type="checkbox" role="checkbox">   --> xxx
    <button role="button">버튼</button>       --> xxx

4. 태그별 역할(role)

• html 각 태그별로 암묵적으로 가지고 있는 role이 있다.
  그리고 각 태그별로 적용할 수 있는 역할도 존재한다.
• 주로 쓰이는 태그의 암묵적인 기본 역할

  <a href=""> - role="link"
   <article> - role="article"
   <header> - role="banner"
   <footer> - role="contentinfo"
   <section> - role="region"
   <aside> - role="complementary"
   <fieldset> - role="group"
   <h1>~<h6> - role="heading"
   <nav> - role="navigation"
   <ul> - role="list"
   <li> - role="listitem"
  

- 기본 역할이 있다면 적용 시킬 수 있는 역할도 존재한다.
  다음의 사이트를 참조하면 기본역할과 부여할 수 있는 역할들을
  볼 수 있다.
  
  https://www.w3.org/TR/html-aria/#docconformance
  
- 위의 사이트를 참고하여 aria의 역할에는 5가지 범주가 있다.

  - (1) 문서 구조 역할
  - (2) 위젯 역할
  - (3) 획기적인 역할
  - (4) 라이브 지역 역할
  - (5) 창(page) 역할
  
  자세한 역할에 대해서는 아래 사이트를 참조!
  
  https://blog.naver.com/tyeombi/222596976384