접근성 유틸리티
접근성 유틸리티 (Accessibility)
요소가 보조 기술(assistive technologies)과 상호작용하는 방식을 수정하는 유틸리티 클래스예요. 화면 낭독기 전용·표시·숨김 클래스의 사용법을 정리해 드릴게요.
출처: 문서
본문
예시 (Examples)
화면 낭독기 전용 (Screen reader only)
Content available only to screen reader, open inspector to investigate
이 콘텐츠는 보조 기술에 의해 전달(announce)되도록 의도되었지만, 시각적으로는 표시되지 않아요.
표시 (Visible)
이 클래스는 .pf-v6-u-screen-reader와 .pf-v6-screen-reader를 해제(unset)해요. 이 요소는 보이게 됩니다.
숨김 (Hidden)
The text underneath is hidden. → 아래의 텍스트는 숨겨져 있어요.
This text is hidden. → 이 텍스트는 숨겨져 있어요.
문서 (Documentation)
개요 (Overview)
브레이크포인트는 선택 사항이에요. 브레이크포인트 옵션은 base(브레이크포인트 값 없음), -on-sm, -on-md, -on-lg, -on-xl이에요. 예시: .pf-v6-u-screen-reader-on-lg
사용법 (Usage)
| 클래스 (Class) | 적용 대상 (Applied to) | 결과 (Outcome) |
|---|---|---|
.pf-v6-u-screen-reader{-on-[breakpoint]} |
* | 요소를 시각적으로 숨기지만, 보조 기술에는 접근 가능하게 남겨 둬요. |
.pf-v6-u-visible{-on-[breakpoint]} |
* | .pf-v6-u-screen-reader와 .pf-v6-screen-reader를 해제해요. |