보조 기술에서 콘텐츠 숨기기
aria-hidden
보조 기술 사용자의 환경을 세부적으로 조정하는 데 있어 중요한 또 다른 기술은 페이지의 관련 부분만 보조 기술에 노출시키는 것입니다. DOM 섹션이 접근성 API에 노출되지 않도록 하는 방법에는 여러 가지가 있습니다.
첫째, DOM에서 명시적으로 숨겨진 항목은 접근성 트리에도 포함되지 않습니다. 따라서 CSS 스타일이 visibility:
hidden 또는 display: none이거나 HTML5 hidden 속성을 사용하는 항목도
보조 기술 사용자에게 표시되지 않습니다.
그러나 시각적으로 렌더링되지 않지만 명시적으로 숨겨지지는 않는 요소는 여전히 접근성 트리에 포함됩니다. 한 가지 일반적인 방법은 절대적으로 화면 밖에 있는 요소에 '스크린 리더 전용 텍스트'를 포함하는 것입니다.
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
또한 살펴본 바와 같이 달리 숨겨진 요소를 참조하는 aria-label, aria-labelledby 또는 aria-describedby 속성을 통해 스크린 리더 전용 텍스트를 제공할 수 있습니다.
'스크린 리더 전용' 텍스트를 만드는 방법에 관한 자세한 내용은 텍스트 숨기기 기술의 WebAIM 도움말을 참고하세요.
마지막으로 ARIA는 aria-hidden 속성을 사용하여 시각적으로 숨겨지지 않는 보조 기술에서 콘텐츠를 제외하는 메커니즘을 제공합니다.
이 속성을 요소에 적용하면 접근성 트리에서 해당 요소와 모든 하위 요소가 효과적으로 삭제됩니다. aria-labelledby 또는 aria-describedby 속성에서 참조하는 요소는 예외입니다.
<div class="deck">
<div class="slide" aria-hidden="true">
Sales Targets
</div>
<div class="slide">
Quarterly Sales
</div>
<div class="slide" aria-hidden="true">
Action Items
</div>
</div>
예를 들어 기본 페이지에 대한 액세스를 차단하는 모달 UI를 만드는 경우 aria-hidden를 사용할 수 있습니다. 이 경우 시각 장애인에게는 현재 페이지 대부분을 사용할 수 없음을 나타내는 일종의 반투명 오버레이가 표시될 수 있지만 스크린 리더 사용자는 여전히 페이지의 다른 부분을 탐색할 수 있습니다. 이 경우 앞에서 설명한 키보드 트랩을 만들 뿐만 아니라 페이지에서 현재 범위를 벗어난 부분도 aria-hidden인지 확인해야 합니다.
이제 ARIA의 기본 사항, 네이티브 HTML 시맨틱스와 작동하는 방식, 접근성 트리에서 상당히 중대한 수술을 수행하는 데 사용되고 단일 요소의 시맨틱스를 변경하는 데 ARIA가 어떻게 사용될 수 있는지 이해했으므로, ARIA를 사용하여 시간에 민감한 정보를 전달하는 방법을 살펴보겠습니다.
aria-live
aria-live를 사용하면 개발자가 페이지의 일부를 '라이브'로 표시할 수 있습니다. 즉, 사용자가 우연히 페이지의 특정 부분을 탐색하는 것이 아니라 페이지 위치에 관계없이 사용자에게 업데이트를 즉시 전달해야 합니다. 요소에 aria-live 속성이 있는 경우 페이지에서 요소와 그 하위 요소를 포함하는 부분을 라이브 영역이라고 합니다.
예를 들어 라이브 지역은 사용자 작업의 결과로 표시되는 상태 메시지일 수 있습니다. 시력이 정상인 사용자의 주의를 끌 만큼 중요한 메시지라면 aria-live 속성을 설정하여 보조 기술 사용자의 주의를 끌 수 있어야 합니다. 이 일반 div 비교
<div class="status">Your message has been sent.</div>
'라이브' 대응 함수와 함께 사용할 수 있습니다.
<div class="status" aria-live="polite">Your message has been sent.</div>
aria-live에는 polite, assertive, off의 3가지 값이 허용됩니다.
aria-live="polite"는 보조 기술이 현재 진행 중인 작업을 완료하면 이 변경사항을 사용자에게 알리도록 지시합니다. 중요하지만 긴급하지 않은 중요한 사안일 때 매우 유용하며aria-live에서 주로 사용됩니다.aria-live="assertive"는 보조 기술에 실행 중인 작업을 중단하고 이 변경사항을 즉시 사용자에게 알리도록 지시합니다. 이는 '서버 오류가 발생하여 변경사항이 저장되지 않습니다. 페이지를 새로고침하세요.'와 같은 상태 메시지나 스테퍼 위젯의 버튼과 같은 사용자 작업의 직접적인 결과로 입력 필드를 업데이트하는 등 중요하고 긴급한 업데이트에만 적용됩니다.aria-live="off"는 보조 기술에aria-live방해를 일시적으로 정지하도록 알립니다.
라이브 영역이 제대로 작동하는지 확인하기 위한 몇 가지 유용한 정보가 있습니다.
첫째, 초기 페이지 로드 시 aria-live 영역을 설정해야 합니다.
이는 엄격한 규칙은 아니지만 aria-live 리전에 문제가 있다면 문제가 될 수 있습니다.
둘째, 스크린 리더마다 다양한 유형의 변경사항에 다르게 반응합니다. 예를 들어 하위 요소의 hidden 스타일을 true에서 false로 전환하여 일부 스크린 리더에서 알림을 트리거할 수 있습니다.
aria-live와 함께 작동하는 다른 속성을 사용하면 라이브 영역이 변경될 때 사용자에게 전달되는 내용을 미세 조정할 수 있습니다.
aria-atomic는 업데이트를 전달할 때 전체 리전을 전체로 간주해야 하는지 여부를 나타냅니다. 예를 들어 일, 월, 연도로 구성된 날짜 위젯에 aria-live=true 및 aria-atomic=true가 있고 사용자가 스테퍼 컨트롤을 사용하여 월 값만 변경하는 경우 날짜 위젯의 전체 콘텐츠가 다시 읽힙니다. aria-atomic의 값은 true 또는 false (기본값)일 수 있습니다.
aria-relevant는 사용자에게 표시해야 하는 변경사항의 유형을 나타냅니다.
별도로 사용하거나 토큰 목록으로 사용할 수 있는 몇 가지 옵션이 있습니다.
- additions는 라이브 영역에 추가되는 모든 요소가 중요하다는 의미입니다. 예를 들어 상태 메시지의 기존 로그에 스팬을 추가하면 스팬이 사용자에게 공지됩니다 (
aria-atomic가false라고 가정). - text: 하위 노드에 추가되는 텍스트 콘텐츠가 관련이 있음을 의미합니다. 예를 들어 맞춤 텍스트 필드의
textContent속성을 수정하면 수정된 텍스트가 사용자에게 읽어옵니다. - removals: 텍스트 또는 하위 노드의 삭제를 사용자에게 전달해야 합니다.
- all: 모든 변경사항이 관련성이 있음을 의미합니다. 그러나
aria-relevant의 기본값은additions text입니다. 즉,aria-relevant를 지정하지 않으면 사용자가 원하는 대로 요소를 추가할 수 있습니다.
마지막으로 aria-busy를 사용하면 로드 중일 때와 같이 요소의 변경사항을 일시적으로 무시해야 한다고 보조 기술에 알릴 수 있습니다. 모든 설정이 완료되면 aria-busy를 false로 설정하여 리더의 작업을 정규화해야 합니다.