접근성
접근 가능한 콘텐츠 생성에 대한 부트스트랩의 기능 및 제한 사항에 대한 간략한 개요입니다.
Bootstrap은 기성품 스타일, 레이아웃 도구 및 대화형 구성 요소의 사용하기 쉬운 프레임워크를 제공하여 개발자가 시각적으로 매력적이고 기능이 풍부하며 즉시 액세스할 수 있는 웹 사이트 및 응용 프로그램을 만들 수 있도록 합니다.
부트스트랩으로 빌드된 모든 프로젝트의 전반적인 접근성은 대부분 작성자의 마크업, 추가 스타일 및 포함된 스크립팅에 따라 달라집니다. 그러나 이러한 기능이 올바르게 구현된 경우 WCAG 2.0 (A/AA/AAA), 섹션 508 및 유사한 접근성 표준 및 요구 사항을 충족하는 부트스트랩을 사용하여 웹 사이트 및 응용 프로그램을 완벽하게 만드는 것이 가능해야 합니다.
부트스트랩의 스타일과 레이아웃은 다양한 마크업 구조에 적용할 수 있습니다. 이 문서는 개발자에게 부트스트랩 자체의 사용을 보여주고 잠재적인 접근성 문제를 해결할 수 있는 방법을 포함하여 적절한 의미 체계를 설명하는 모범 사례 예제를 제공하는 것을 목표로 합니다.
모달 대화 상자, 드롭다운 메뉴 및 사용자 정의 도구 설명과 같은 부트스트랩의 대화형 구성 요소는 터치, 마우스 및 키보드 사용자를 위해 설계되었습니다. 관련 WAI - ARIA 역할 및 속성의 사용을 통해 이러한 구성 요소는 보조 기술(예: 화면 판독기)을 사용하여 이해하고 작동할 수 있어야 합니다.
Bootstrap의 구성 요소는 의도적으로 상당히 일반적으로 설계되었으므로 작성자는 구성 요소의 정확한 특성과 기능을 보다 정확하게 전달하기 위해 JavaScript 동작뿐만 아니라 추가 ARIA 역할 및 속성을 포함해야 할 수도 있습니다. 이것은 일반적으로 문서에 기록되어 있습니다.
현재 Bootstrap의 기본 팔레트를 구성하는 대부분의 색상(버튼 변형, 경고 변형, 양식 유효성 검사 표시기와 같은 프레임워크 전체에서 사용됨)은 다음에 대해 사용될 때 색상 대비가 충분하지 않습니다 (권장되는 WCAG 2.0 색상 대비 비율 4.5:1 미만 ) . 밝은 배경. 작성자는 적절한 색상 대비 비율을 보장하기 위해 이러한 기본 색상을 수동으로 수정/확장해야 합니다.
시각적으로 숨겨야 하지만 화면 판독기와 같은 보조 기술에 계속 액세스할 수 있는 콘텐츠는 .sr-only클래스를 사용하여 스타일을 지정할 수 있습니다. 이것은 추가 시각적 정보나 단서(예: 색상 사용을 통해 표시되는 의미)도 비시각적 사용자에게 전달해야 하는 상황에서 유용할 수 있습니다.
<p class="text-danger">
<span class="sr-only">Danger: </span>
This action is not reversible
</p>기존의 "건너뛰기" 링크와 같이 시각적으로 숨겨진 대화형 컨트롤을 클래스 .sr-only와 결합할 수 있습니다 . .sr-only-focusable이렇게 하면 초점이 맞춰지면 컨트롤이 표시됩니다(시각적인 키보드 사용자의 경우).
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>prefers-reduced-motion부트스트랩은 미디어 기능 에 대한 지원을 포함 합니다 . 사용자가 모션 감소에 대한 기본 설정을 지정할 수 있는 브라우저/환경에서 부트스트랩의 대부분의 CSS 전환 효과(예: 모달 대화 상자가 열리거나 닫힐 때)가 비활성화됩니다. 현재 지원은 macOS 및 iOS의 Safari로 제한됩니다.