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