내용으로 건너뛰기 문서 내비게이션으로 건너뛰기
GitHub에서 보기

Accessibility(접근성)

접근성 컨텐츠 제작을 위한 Bootstrap의 기능화 제한 사항에 대한 간략한 설명입니다.

Bootstrap은 사전 제작된 스타일, 레이아웃 도구 및 대화형 구성요소로 이루어진 사용하기 쉬운 프레임워크를 제공하여 개발자가 시각적으로 매력적이고 기능이 풍부하며 즉시 액세스할 수 있는 웹사이트와 애플리케이션을을 만들 수 있도록 만들어줍니다.

Overview and limitations

Bootstrap으로 빌드된 프로젝트의 전반적인 접근성은 작성자가 추가한 마크업, 추가 스타일 및 스크립트에 큰 영향을 받습니다. 이 부분이 올바르게 구현되었다면 WCAG 2.1 (A/AA/AAA), Section 508 및 유사한 접근성 표준 및 요구 사항을 충족하는 Bootstrap을 사용하여 웹사이트와 애플리케이션을 만드는 것이 완벽하게 가능해야 합니다.

Structural markup

Bootstrap의 스타일과 레이아웃은 다양한 마크업 구조에 적용할 수 있습니다. 이 문서는 잠재적인 접근성 문제를 해결할 수 있는 방법을 포함하여 Bootstrap 자체의 사용을 보여주고 적절한 시멘틱 마크업을 설명하는 모범 사례 예제를 개발자에게 제공하는 것에 중점을 두고 있습니다.

Interactive components

Bootstrap의 모달 다이얼로그, 드롭다운 메뉴 및 커스텀 툴팁 같은 상호 작용이 가능한 컴포넌트는 터치, 마우스, 그리고 키보드 사용자들에게 최적화되어 있습니다. 관련 WAI-ARIA 역할 및 속성의 사용을 통해 이러한 구성 요소는 보조 기술 (예: 화면 리더기)을 사용하여 이해하고 작동할 수 있어야 합니다.

Bootstrap의 구성 요소는 상당히 일반적으로 설계되었으므로 작성자는 해당 구성 요소의 정확한 특성과 기능을 보다 정확하게 전달하기 위해 추가 ARIA 역할 및 속성은 외에 JavaScript 동작을 포함해야할 수도 있습니다. 이것은 일반적으로 문서에 명시되어 있습니다.

Color contrast

현재 Bootstrap의 기본 팔래트를 구성하는 일부 색상 조합 (단추 변형, 경고 변형, 양식 유효성 검사 표시기 등을 위해 프레임워크 전체에서 사용됨)의 색 대비가 불충분할 수 있습니다 (WCAG 2.1 글꼴 색 대비 4.5:1 미만 및 WCAG 2.1 글꼴 외 색 대비 3:1 미만이 권장됨). 이 부분은 밝은 배경에서 더 강하게 발생합니다. 작성자는 특성 색 사용을 테트스하고 필요한 경우 이러한 기본 색상을 수동으로 수정/확장하여 적절한 색 대비 비율을 확인하는 것이 좋습니다.

Visually hidden content

시각적으로 숨겨야 하지만 화면 리더기와 같은 보조 기술이 계속 접근해야 하는 콘텐츠는 .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>

Reduced motion

Bootstrap에는 prefers-reduced-motion 미디어 기능 지원이 포함되어 있습니다. 사용자가 감소된 모션에 대한 기본 설정을 지정할 수 있는 브라우저/환경에서 Bootstrap의 대부분의 CSS 전환 효과 (예: 모달 다이얼로그 상자가 열리거나 닫힐 때 또는 캐러셀의 슬라이딩 애니메이션)가 비활성화되고 의미 있는 애니메이션 (예: 스피너)의 속도가 느려집니다.

prefers-reduced-motion을 지원하는 브라우저와 사용자가 감소된 모션을 선호한다고 명시적으로 신호를 보내지 않은 경우 (예: prefers-reduced-motion: no-preference) Bootstrap은 scroll-behavior 속성을 사용하여 부드러운 스크롤을 가능하게 합니다.

Additional resources