aria-flowto

설명

aria-flowto는 "이 요소 다음에는 저 요소를 읽을 수 있습니다"라는 대체 읽기 경로를 제공합니다. 화면낭독기는 기본적으로 DOM 순서대로 읽는데, 이 속성은 사용자가 원할 때만 그 순서를 건너뛰어 지정한 요소로 이동하도록 돕습니다. ID를 여러 개 넣으면 보조기술은 이를 갈림길 선택지로 제시해야 합니다.

원래 의도한 쓰임은 신문 지면처럼 기사가 여러 단에 걸쳐 이어지거나, 순서도·다이어그램처럼 공간 배치가 읽기 순서를 결정하는 콘텐츠입니다. 이 속성은 탭 이동 순서(포커스 순서)를 바꾸지 않습니다. 오직 보조기술의 읽기 명령에만 영향을 줍니다.

지원 현황이 가장 큰 문제입니다. JAWS는 Windows 브라우저에서 흐름(flow)을 따라 이동하는 기능을 제공하지만, NVDA·VoiceOver·TalkBack·Narrator는 사실상 이 속성을 사용하지 않습니다. 따라서 대부분의 사용자에게는 아무 효과가 없습니다.

그래서 실무에서는 aria-flowto에 기대기보다 DOM 순서를 논리적인 읽기 순서와 일치시키는 것이 원칙입니다(WCAG 1.3.2 의미 있는 순서). CSS Grid·Flexbox의 order, 절대 위치 지정으로 화면 순서만 바꾸는 방식은 이 원칙을 깨기 쉬우므로 주의합니다. 순서를 바꿀 수 없는 특수한 경우에만 보조 수단으로 덧붙입니다.

검수할 때는 이 속성이 있다면 가리키는 ID가 존재하는지 확인하고, 그보다 먼저 DOM 순서만으로 읽었을 때 내용이 자연스럽게 이어지는지 확인합니다. aria-flowto가 있다는 이유로 순서 문제를 통과시키지 않습니다.

값

사용 예

<div class="col" id="part-1" aria-flowto="part-2">
  <p>기사 첫 부분...</p>
</div>
<aside class="ad">광고</aside>
<div class="col" id="part-2">
  <p>기사 이어지는 부분...</p>
</div>

<div id="step-check" aria-flowto="step-yes step-no">재고가 있습니까?</div>
<div id="step-yes" aria-label="예: 결제로 이동">결제</div>
<div id="step-no" aria-label="아니요: 입고 알림 신청">입고 알림 신청</div>

<!-- 권장: 기사를 이어서 쓰고, 광고는 기사 뒤로 -->
<article>
  <p>기사 첫 부분...</p>
  <p>기사 이어지는 부분...</p>
</article>
<aside class="ad">광고</aside>

화면낭독기에서는

사용 지침

사용할 수 있는 역할

전역 속성이므로 모든 역할과 HTML 요소에 쓸 수 있습니다. 특히 다음 역할과 자주 함께 씁니다.

관련 속성·패턴

참고 자료

• WAI-ARIA 1.2 명세: aria-flowto (새 창)
• WCAG 2.2 이해하기: 1.3.2 의미 있는 순서 (새 창)
• MDN: aria-flowto (새 창)
• a11ysupport.io: aria-flowto 지원 현황 (새 창)