접근성
접근성 (Accessibility)
접근 가능한 콘텐츠 생성을 위한 Bootstrap의 기능과 한계에 대한 간략한 개요예요.
출처: 문서
본문
Bootstrap은 바로 사용할 수 있는 스타일, 레이아웃 도구, 상호작용 컴포넌트의 사용하기 쉬운 프레임워크를 제공해서, 개발자가 시각적으로 매력적이고 기능적으로 풍부하며 처음부터 접근 가능한 웹사이트와 애플리케이션을 만들 수 있게 해 줘요.
개요와 한계 (Overview and limitations)
Bootstrap으로 빌드된 프로젝트의 전반적인 접근성은 대부분 작성자의 마크업, 추가 스타일링, 포함된 스크립팅에 크게 의존해요. 하지만 이것들이 올바르게 구현된다면 WCAG 2.2(A/AA/AAA), Section 508, 그리고 유사한 접근성 표준과 요구 사항을 충족하는 웹사이트와 애플리케이션을 Bootstrap으로 만드는 것이 완전히 가능해야 해요.
구조적 마크업 (Structural markup)
Bootstrap의 스타일링과 레이아웃은 다양한 마크업 구조에 적용될 수 있어요. 이 문서는 Bootstrap 자체의 사용을 보여주고 잠재적인 접근성 문제를 해결할 수 있는 방법을 포함해 적절한 의미론적 마크업을 설명하는 모범 사례 예시를 개발자에게 제공하는 것을 목표로 해요.
상호작용 컴포넌트 (Interactive components)
Bootstrap의 상호작용 컴포넌트—modal 대화상자, 드롭다운 메뉴, 커스텀 툴팁 등—는 터치, 마우스, 키보드 사용자를 위해 작동하도록 설계돼요. 관련 WAI-ARIA 역할과 속성을 사용함으로써, 이 컴포넌트들은 보조 기술(스크린 리더 등)로도 이해하고 조작할 수 있어야 해요.
Bootstrap의 컴포넌트는 의도적으로 상당히 일반적(generic)으로 설계되었기 때문에, 작성자는 컴포넌트의 정확한 본질과 기능을 더 정확히 전달하기 위해 추가 ARIA 역할과 속성, 그리고 JavaScript 동작을 포함해야 할 수도 있어요. 이는 보통 문서에 명시돼 있어요.
색상 대비 (Color contrast)
현재 Bootstrap 기본 팔레트를 구성하는 일부 색상 조합—버튼 변형, 경고 변형, 폼 검증 표시기 등 프레임워크 전반에 사용—은 특히 라이트 배경에 대비해 사용될 때 충분하지 않은 색상 대비(WCAG 2.2 텍스트 색상 대비 비율 4.5:1과 WCAG 2.2 비텍스트 색상 대비 비율 3:1 아래)로 이어질 수 있어요. 작성자는 자신의 특정 색상 사용을 테스트하고, 필요할 때 적절한 색상 대비 비율을 보장하기 위해 이러한 기본 색상을 수동으로 수정/확장하는 것이 권장돼요.
시각적으로 숨겨진 콘텐츠 (Visually hidden content)
시각적으로 숨겨야 하지만 스크린 리더 같은 보조 기술에는 접근 가능하게 남아야 하는 콘텐츠는 .visually-hidden 클래스로 스타일링할 수 있어요. 이는 추가 시각 정보나 단서(색상 사용으로 전달되는 의미 등)를 비시각적 사용자에게도 전달해야 하는 상황에서 유용할 수 있어요.
<p class="text-danger">
<span class="visually-hidden">Danger: </span>
This action is not reversible
</p>
전통적인 "skip" 링크 같은 시각적으로 숨겨진 상호작용 컨트롤에는 .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 전환 효과(예: modal 대화상자가 열리거나 닫힐 때, 캐러셀의 슬라이딩 애니메이션)가 비활성화되고, 의미 있는 애니메이션(스피너 등)은 느려져요.
prefers-reduced-motion을 지원하고 사용자가 축소 모션을 명시적으로 선호하지 않는 브라우저(즉 prefers-reduced-motion: no-preference)에서는, Bootstrap이 scroll-behavior 속성으로 부드러운 스크롤(smooth scrolling)을 활성화해요.
추가 자료 (Additional resources)
- Web Content Accessibility Guidelines (WCAG) 2.2
- The A11Y Project
- MDN accessibility documentation
- Color Contrast Analyser (CCA)
- "HTML Codesniffer" bookmarklet for identifying accessibility issues
- Microsoft Accessibility Insights
- Deque Axe testing tools
- Introduction to Web Accessibility