자주 사용하는 HTML ARIA 접근성 (accessibility)

접근성

 

Accessible Rich Internet Applications, ARIA

 

HTML의 접근성 문제를 보완하여

장애를 가진 사용자가 웹 콘텐츠에 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 의미한다.

 

 

aria-checked

요소가 선택(true)되었는지, 해제(false)되었는지, 상태가 결정되지 않았는지(mixed) 알린다.

input 태그를 사용하면 불필요한 옵션이지만 불가피하게 input 태그가 아닌 경우 사용한다.

# 요소가 선택되지 않았음을 알린다.
<span
  role="checkbox"
  id="checkBoxInput"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="chk15-label"></span>
<label id="chk15-label">Subscribe to the newsletter</label>

# aria-checked = (true, false, mixed)
# true = 선택
# false = 미선택
# mixed = 결정되지 않음

 

aria-expand

요소가 확장되거나 축소되거나, 보이거나, 보이지 않거나 여부를 나타낸다.

아코디언 요소에 자주 사용된다.

# 버튼을 통해 위젯이 확장할 수 있음(보일 수 있음)을 나타낸다. 
# 어느 요소가 동작하는지 aria-controls를 설정한다.
<button aria-expanded="false" aria-controls="widget1">Show widget</button>

# 반대
<button aria-expanded="true" aria-controls="widget1">Hide widget</button>

# aria-expand = (true, false)

 

aria-selected

 

 

aria-pressed

현재 버튼이 누름 상태인지 나타낸다.

현재 상태를 텍스트로 나타내지 않는, 이모지나 이미지 토글 버튼에 유효하다.

# button 태그가 활성화됨을 나타낸다.
<button aria-pressed="true">😍</button>

# 이미 텍스트로 눌린 상태를 전달하였음에도 접근성을 사용하면 혼란을 야기할 수 있다.
# 스크린 리더기 = "좋아요 눌림, 좋아요 눌림 누른 상태"
<button aria-pressed="true">좋아요 눌림</button>

# aria-pressed = (true, false, mixed)
# true = 눌림(할성화)
# false = 눌리지 않음(비활성화)
# mixed = 복합적 상태(활성화, 비활성화로만 나타낼 수 없는 요소)

 

aria-invalid

 

 

aria-controls

 

 

aria-current

현재 선택된, 활성화된, 결정된 요소를 나타낸다.

현재 선택된 페이지를 나타내는 항목에 보통은 볼드 처리하거나 디자인 처리를 하여 이 페이지에 있다는 것을 일반 사용자에게 알릴 수 있지만 시각 장애인은 이를 볼 수 없다. 이런 경우 사용한다.

# 현재 "./" 라우팅 페이지가 활성화되어 있다는 것을 알린다.
<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol>
    <li>
      <a href="../../">ARIA States and Properties</a>
    </li>
    <li>
      <a href="./" aria-current="page">ARIA: `aria-current` attribute</a>
    </li>
  </ol>
</nav>

# aria-current = (page, step, location, date, time, true, false)
# page = 현재 페이지
# step = 현재 단계
# location = 현재 위치
# date = 현재 활성화된 날짜
# time = 현재 활성화된 시간
# true = 현재 활성화된 항목
# false = 없음

 

aria-label

SVG 이미지를 시각 장애인들이 볼 수 없기 때문에 텍스트로 대체해서 읽어준다.

주로 SVG로 만들어진 글씨 벡터 이미지에 사용한다.

# SVG 이미지가 닫기 버튼임을 알린다.
<button aria-label="Close" onclick="myDialog.close()">
  <svg
    aria-hidden="true"
    focusable="false"
    width="17"
    height="17"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z"
      fill="#000" />
  </svg>
</button>

# aria-label = STRING

 

aria-labelledby

간단한 부가적 설명을 제공하는 속성이다.

참조할 영역을 선언하여 사용한다.

 

# "read more" 텍스트를 가진 a 태그는 
# "rm13", "attr" id를 가진 요소와 결합되어 리더기에 읽힌다. 
<h2 id="attr" class="article-title">13 ARIA attributes you need to know</h2>
<p>
  There are over 50 ARIA states and properties, but 13 of them stand out…
  <a href="13.html" id="rm13" aria-labelledby="rm13 attr">read more</a>
</p>

# aria-labelledby = ID

# 1. 우선 순위가 가장 높다.
# 아래 button 태그는 Yellow 와 결합된다.
<button aria-label="Blue" aria-labelledby="color">Red</button>
<span id="color">Yellow</span>

# 2. 중복은 한번만 처리된다.
# aria-labelledby="attr attr rm13 rm13"
# aria-labelledby="attr rm13"

# 3. hidden 처리된 요소에 접근할 수 있다.
# display: none 등 표시되지 말아야 할 요소와 결합된 경우 그 요소가 읽힐 수 있다.

# 4. 아래 태그는 지원하지 않는다.
# code
# caption
# deletion
# emphasis
# generic
# insertion
# mark
# paragraph
# presentaion
# string
# subscript
# superscript
# suggestion
# term
# time

 

aria-describedby

자세한 추가 설명이 필요할 때 사용한다.

참조할 영역을 선언하여 사용한다.

# button 태그가 아래 p 태그와 연관있음(설명문)을 알린다.
<button aria-describedby="trash-desc">Move to trash</button>
…
<p id="trash-desc">
  Items in the trash will be permanently removed after 30 days.
</p>

# aria-describedby = STRING

 

aria-hidden

보조 기술에서부터 요소(하위 요소 포함)를 숨긴다.

시각적으로는 보이지만 스크린 리더기에 읽히지 않아야 하는 경우(장식적인 컨텐츠, 반복된 텍스트)에 사용한다.

# 순전히 디자인 요소인(내용을 이해하는데 불필요한) ★를 제거한다. 
<button>
  <span class="color-blue" aria-hidden="true">★</span>
  <span class="label">select</span>
</button>

# aria-hidden = (false, true, undefined)
# false = 노출
# true = 숨김
# undefined = 렌더링 상태에 따라 결정

# 포커스가 가능한 요소에는 사용하면 안된다.
# HTML의 hidden 속성을 사용할 경우 추가할 필요가 없다.
# CSS의 display: none, visibility: hidden 에는 추가할 필요가 없다.

 

 

 

출처: https://developer.mozilla.org/