Khả năng tiếp cận

Tổng quan ngắn gọn về các tính năng và hạn chế của Bootstrap đối với việc tạo nội dung có thể truy cập.

Trên trang này

Bootstrap cung cấp một khuôn khổ dễ sử dụng gồm các kiểu, công cụ bố cục và các thành phần tương tác được tạo sẵn, cho phép các nhà phát triển tạo các trang web và ứng dụng hấp dẫn về mặt hình ảnh, giàu chức năng và có thể truy cập ngay lập tức.

Tổng quan và hạn chế

Khả năng tiếp cận tổng thể của bất kỳ dự án nào được xây dựng bằng Bootstrap phụ thuộc phần lớn vào đánh dấu của tác giả, kiểu bổ sung và tập lệnh mà họ đã đưa vào. Tuy nhiên, với điều kiện là những điều này đã được triển khai chính xác, bạn hoàn toàn có thể tạo các trang web và ứng dụng với Bootstrap đáp ứng WCAG 2.1 (A / AA / AAA), Mục 508 , cũng như các tiêu chuẩn và yêu cầu về khả năng truy cập tương tự.

Đánh dấu cấu trúc

Kiểu dáng và bố cục của Bootstrap có thể được áp dụng cho một loạt các cấu trúc đánh dấu. Tài liệu này nhằm mục đích cung cấp cho các nhà phát triển các ví dụ thực tiễn tốt nhất để chứng minh việc sử dụng chính Bootstrap và minh họa đánh dấu ngữ nghĩa thích hợp, bao gồm các cách giải quyết các mối quan tâm tiềm ẩn về khả năng truy cập.

Các thành phần tương tác

Các thành phần tương tác của Bootstrap — chẳng hạn như hộp thoại phương thức, menu thả xuống và chú giải công cụ tùy chỉnh — được thiết kế để hoạt động cho người dùng cảm ứng, chuột và bàn phím. Thông qua việc sử dụng các vai trò và thuộc tính WAI - ARIA có liên quan , các thành phần này cũng phải dễ hiểu và có thể hoạt động được bằng cách sử dụng các công nghệ hỗ trợ (chẳng hạn như trình đọc màn hình).

Vì các thành phần của Bootstrap được thiết kế có chủ đích để khá chung chung, các tác giả có thể cần bao gồm thêm các vai trò và thuộc tính ARIA , cũng như hành vi JavaScript, để truyền đạt chính xác hơn bản chất và chức năng chính xác của thành phần của chúng. Điều này thường được ghi chú trong tài liệu.

Độ tương phản màu

Một số kết hợp màu hiện tạo nên bảng màu mặc định của Bootstrap — được sử dụng xuyên suốt khuôn khổ cho những thứ như biến thể nút, biến thể cảnh báo, chỉ báo xác thực biểu mẫu - có thể dẫn đến độ tương phản màu không đủ (dưới tỷ lệ tương phản màu văn bản WCAG 2.1 đề xuất là 4,5: 1 và tỷ lệ tương phản màu không phải văn bản WCAG 2.1 là 3: 1 ), đặc biệt khi được sử dụng trên nền sáng. Các tác giả được khuyến khích thử nghiệm cách sử dụng màu cụ thể của họ và khi cần thiết, sửa đổi / mở rộng các màu mặc định này theo cách thủ công để đảm bảo tỷ lệ tương phản màu phù hợp.

Nội dung cần được ẩn trực quan, nhưng vẫn có thể truy cập vào các công nghệ hỗ trợ như trình đọc màn hình, có thể được tạo kiểu bằng cách sử dụng .visually-hiddenlớp. Điều này có thể hữu ích trong các tình huống mà thông tin hoặc tín hiệu trực quan bổ sung (chẳng hạn như ý nghĩa được biểu thị thông qua việc sử dụng màu sắc) cũng cần được truyền đạt đến người dùng không nhìn thấy.

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

Đối với các điều khiển tương tác ẩn trực quan, chẳng hạn như liên kết “bỏ qua” truyền thống, hãy sử dụng .visually-hidden-focusablelớp. Điều này sẽ đảm bảo rằng điều khiển sẽ hiển thị sau khi được lấy nét (đối với người dùng bàn phím có mắt). Hãy chú ý, so với các lớp tương đương .sr-onlyvà .sr-only-focusablecác lớp trong các phiên bản trước, Bootstrap 5's .visually-hidden-focusablelà một lớp độc lập và không được sử dụng kết hợp với .visually-hiddenlớp này.

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

Giảm chuyển động

Bootstrap bao gồm hỗ trợ cho prefers-reduced-motiontính năng media . Trong các trình duyệt / môi trường cho phép người dùng chỉ định tùy chọn giảm chuyển động của họ, hầu hết các hiệu ứng chuyển tiếp CSS trong Bootstrap (ví dụ: khi hộp thoại phương thức được mở hoặc đóng hoặc hoạt ảnh trượt trong băng chuyền) sẽ bị tắt và các hoạt ảnh có ý nghĩa ( chẳng hạn như con quay) sẽ bị chậm lại.

Trên các trình duyệt hỗ trợ prefers-reduced-motionvà nơi người dùng không báo hiệu rõ ràng rằng họ muốn giảm chuyển động (tức là ở đâu prefers-reduced-motion: no-preference), Bootstrap cho phép cuộn trơn tru bằng cách sử dụng thuộc scroll-behaviortính.