aria-multiselectable

설명

aria-multiselectable="true"는 listbox, grid, tree, tablist(그리고 이를 상속하는 treegrid)에서 둘 이상의 항목을 동시에 선택할 수 있음을 알립니다. 화면낭독기는 “다중 선택 가능”처럼 읽어 사용자가 선택 방식을 미리 알 수 있게 합니다.

이 속성은 컨테이너(목록 상자 등)에 붙이고, 각 항목의 선택 여부는 aria-selected로 표시합니다. 다중 선택 목록에서는 선택되지 않은 항목에도 aria-selected="false"를 명시하는 것이 좋습니다. 그래야 화면낭독기가 “선택 안 됨”을 알려 항목이 선택 가능하다는 것을 전달합니다.

다중 선택은 키보드 동작이 단일 선택과 다릅니다. 단일 선택 목록은 보통 방향키로 이동하면 선택도 따라 바뀌지만(선택이 포커스를 따름), 다중 선택 목록에서는 포커스 이동과 선택을 분리합니다. APG는 방향키로 포커스를 옮기고 Space로 선택을 토글하는 방식, 또는 Shift+방향키로 범위를 선택하는 방식 등을 권장합니다. 선택 방법이 익숙하지 않을 수 있으므로 안내 문구를 함께 제공하면 좋습니다.

네이티브 <select multiple>은 이 정보가 자동으로 전달되지만, Ctrl+클릭에 익숙하지 않은 사용자에게는 체크 상자 목록(<fieldset> + 체크 상자)이 더 쉬운 대안일 수 있습니다.

테스트할 때는 목록에 들어갔을 때 다중 선택 가능 여부가 읽히는지, Space로 각 항목의 선택이 토글되고 즉시 읽히는지, 방향키 이동만으로 선택이 바뀌지 않는지 확인합니다.

값

사용 예

<p id="topic-label">관심 분야 (여러 개 선택 가능)</p>
<ul role="listbox" tabindex="0" aria-labelledby="topic-label" aria-multiselectable="true" aria-activedescendant="t-1">
  <li id="t-1" role="option" aria-selected="true">접근성</li>
  <li id="t-2" role="option" aria-selected="false">성능</li>
  <li id="t-3" role="option" aria-selected="false">보안</li>
</ul>

listbox.addEventListener('keydown', function (e) {
  if (e.key === ' ') {
    e.preventDefault();
    var opt = document.getElementById(listbox.getAttribute('aria-activedescendant'));
    opt.setAttribute('aria-selected', String(opt.getAttribute('aria-selected') !== 'true'));
  }
});

<ul role="listbox" aria-multiselectable="true" aria-label="관심 분야">
  <li role="option" aria-selected="true">접근성</li>
  <li role="option">성능</li>
</ul>

직접 해 보기

목록에 Tab으로 들어간 뒤 위·아래 방향키로 이동하고 Space로 선택을 토글하세요. 체크 상자로 다중 선택을 끄면 방향키 이동에 따라 선택이 바뀝니다.

화면낭독기에서는

사용 지침

사용할 수 있는 역할

관련 속성·패턴

이 속성을 쓰는 패턴

참고 자료

• WAI-ARIA 1.2 명세: aria-multiselectable (새 창)
• APG: Listbox 패턴 (새 창)
• MDN: aria-multiselectable (새 창)