Bootstrap

Bootstrap Basic tut 8: Khả năng tiếp cận , RFS và RTL

DragonKnightMT0
0
(0)

I.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.Ưu đãi trong thời gian có hạn: Nhận 10 hình ảnh Adobe Stock miễn phí.quảng cáo qua CarbonTrê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 ra 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 nhiều loại 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 hành 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 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 sắc

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 được khuyến nghị 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 ẩn trực quan

Nội dung cần được ẩn trực quan, nhưng vẫn có thể truy cập được với 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 chuyển tải đến người dùng không nhìn thấy.Sao chép

<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ư các 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). Xem ra, 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.Sao chép

<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 đa phương tiện . Trong các trình duyệt / môi trường cho phép người dùng chỉ định tùy chọn của họ để giảm chuyển động, 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.

Các nguồn bổ sung

II.RFS

Công cụ thay đổi kích thước của Bootstrap chia tỷ lệ các thuộc tính CSS phổ biến một cách nhạy bén để tận dụng tốt hơn không gian có sẵn trên các khung nhìn và thiết bị.Triển khai ứng dụng của bạn nhanh hơn trên Máy chủ chuyên dụng an toàn, đáng tin cậy và giá cả phải chăng | Châu Á – Thái Bình Dương đăng caiquảng cáo qua CarbonTrên trang này

RFS là gì?

Dự án phụ của Bootstrap RFS là một công cụ thay đổi kích thước đơn vị ban đầu được phát triển để thay đổi kích thước phông chữ (do đó là chữ viết tắt của nó cho Kích thước phông chữ đáp ứng). Ngày nay RFS có khả năng rescaling nhất thuộc tính CSS với giá trị đơn vị như margin, padding, border-radius, hoặc thậm chí box-shadow.

Cơ chế tự động tính toán các giá trị thích hợp dựa trên kích thước của khung nhìn trình duyệt. Nó sẽ được biên dịch thành các calc()hàm với sự kết hợp của remvà các đơn vị khung nhìn để cho phép hành vi mở rộng quy mô đáp ứng.

Sử dụng RFS

Các mixin được bao gồm trong Bootstrap và có sẵn sau khi bạn đưa vào Bootstrap scss. RFS cũng có thể được cài đặt độc lập nếu cần.

Sử dụng mixin

Các rfs()mixin có shorthands cho font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, và padding-left. Xem ví dụ bên dưới về nguồn Sass và CSS đã biên dịch.Sao chép

.title {
  @include font-size(4rem);
}

Sao chép

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

Bất kỳ thuộc tính nào khác có thể được chuyển đến rfs()mixin như sau:Sao chép

.selector {
  @include rfs(4rem, border-radius);
}

!important cũng có thể được thêm vào bất kỳ giá trị nào bạn muốn:Sao chép

.selector {
  @include padding(2.5rem !important);
}

Sử dụng các chức năng

Khi bạn không muốn sử dụng bao gồm, cũng có hai chức năng:

  • rfs-value()chuyển đổi một giá trị thành một remgiá trị nếu một pxgiá trị được chuyển, trong các trường hợp khác, nó trả về cùng một kết quả.
  • rfs-fluid-value() trả về phiên bản linh hoạt của một giá trị nếu thuộc tính cần thay đổi tỷ lệ.

Trong ví dụ này, chúng tôi sử dụng một trong các kết hợp điểm ngắt đáp ứng được tích hợp sẵn của Bootstrap để chỉ áp dụng kiểu bên dưới lgđiểm ngắt.Sao chép

.selector {
  @include media-breakpoint-down(lg) {
    padding: rfs-fluid-value(2rem);
    font-size: rfs-fluid-value(1.125rem);
  }
}

Sao chép

@media (max-width: 991.98px) {
  .selector {
    padding: calc(1.325rem + 0.9vw);
    font-size: 1.125rem; /* 1.125rem is small enough, so RFS won't rescale this */
  }
}

Tài liệu mở rộng

RFS là một dự án riêng biệt thuộc tổ chức Bootstrap. Có thể tìm thấy thêm về RFS và cấu hình của nó trên kho lưu trữ GitHub .

III.RTL

Tìm hiểu cách bật hỗ trợ cho văn bản từ phải sang trái trong Bootstrap trên bố cục, thành phần và tiện ích của chúng tôi.Ưu đãi trong thời gian có hạn: Nhận 10 hình ảnh Adobe Stock miễn phí.quảng cáo qua CarbonTrên trang này

Làm quen

Chúng tôi khuyên bạn nên làm quen với Bootstrap trước bằng cách đọc qua trang Giới thiệu Bắt đầu của chúng tôi . Khi bạn đã chạy qua nó, hãy tiếp tục đọc ở đây để biết cách bật RTL.

Bạn cũng có thể muốn đọc về dự án RTLCSS , vì nó hỗ trợ cách tiếp cận RTL của chúng tôi.

Tính năng thử nghiệm

Tính năng RTL vẫn đang thử nghiệm và có thể sẽ phát triển theo phản hồi của người dùng. Phát hiện một cái gì đó hoặc có một cải tiến để đề xuất? Mở một vấn đề , chúng tôi muốn có được thông tin chi tiết của bạn.

HTML bắt buộc

Có hai yêu cầu nghiêm ngặt để bật RTL trong các trang hỗ trợ Bootstrap.

  1. Đặt dir="rtl"trên <html>phần tử.
  2. Thêm một langthuộc tính thích hợp , chẳng hạn như lang="ar", trên <html>phần tử.

Từ đó, bạn sẽ cần bao gồm phiên bản RTL của CSS của chúng tôi. Ví dụ: đây là biểu định kiểu cho CSS đã biên dịch và rút gọn của chúng tôi có bật RTL:Sao chép

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

Mẫu dành cho người mới bắt đầu

Bạn có thể thấy các yêu cầu trên được phản ánh trong mẫu khởi động RTL đã sửa đổi này.Sao chép

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

    <title>مرحبا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبا بالعالم!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Ví dụ RTL

Bắt đầu với một trong một số ví dụ RTL của chúng tôi .

Cách tiếp cận

Cách tiếp cận của chúng tôi để xây dựng hỗ trợ RTL vào Bootstrap đi kèm với hai quyết định quan trọng ảnh hưởng đến cách chúng tôi viết và sử dụng CSS của mình:

  1. Đầu tiên, chúng tôi quyết định xây dựng nó bằng dự án RTLCSS . Điều này cung cấp cho chúng tôi một số tính năng mạnh mẽ để quản lý các thay đổi và ghi đè khi chuyển từ LTR sang RTL. Nó cũng cho phép chúng tôi xây dựng hai phiên bản Bootstrap từ một cơ sở mã.
  2. Thứ hai, chúng tôi đã đổi tên một số lớp định hướng để áp dụng cách tiếp cận thuộc tính logic. Hầu hết các bạn đã tương tác với các thuộc tính logic nhờ các tiện ích linh hoạt của chúng tôi — chúng thay thế các thuộc tính hướng như leftvà có rightlợi startvà end. Điều đó làm cho các tên và giá trị của lớp phù hợp với LTR và RTL mà không có bất kỳ chi phí nào.

Ví dụ, thay vì .ml-3for margin-left, hãy sử dụng .ms-3.

Làm việc với RTL, thông qua Sass nguồn hoặc CSS đã biên dịch của chúng tôi, không nên khác nhiều so với LTR mặc định của chúng tôi.

Tùy chỉnh từ nguồn

Khi nói đến tùy chỉnh , cách ưu tiên là tận dụng các biến, bản đồ và mixin. Cách tiếp cận này hoạt động tương tự đối với RTL, ngay cả khi nó được xử lý sau từ các tệp đã biên dịch, nhờ vào cách RTLCSS hoạt động .

Giá trị RTL tùy chỉnh

Sử dụng chỉ thị giá trị RTLCSS , bạn có thể tạo một đầu ra biến trở thành một giá trị khác cho RTL. Ví dụ: để giảm trọng lượng $font-weight-boldtrong toàn bộ cơ sở mã, bạn có thể sử dụng /*rtl: {value}*/cú pháp:Sao chép

$font-weight-bold: 700 #{/* rtl:600 */} !default;

Cái nào sẽ xuất ra như sau cho CSS và RTL CSS mặc định của chúng tôi:Sao chép

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

Ngăn xếp phông chữ thay thế

Trong trường hợp bạn đang sử dụng phông chữ tùy chỉnh, hãy lưu ý rằng không phải tất cả các phông chữ đều hỗ trợ bảng chữ cái không phải Latinh. Để chuyển từ họ Liên Châu Âu sang họ Ả Rập, bạn có thể cần sử dụng /*rtl:insert: {value}*/ngăn xếp phông chữ của mình để sửa đổi tên của họ phông chữ.

Ví dụ: để chuyển từ Helvetica Neue WebfontLTR sang Helvetica Neue ArabicRTL, mã Sass của bạn trông như sau:Sao chép

$font-family-sans-serif:
  Helvetica Neue #{"/* rtl:insert:Arabic */"},
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  Arial,
  // Linux
  "Noto Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

LTR và RTL cùng một lúc

Cần cả LTR và RTL trên cùng một trang? Nhờ Bản đồ chuỗi RTLCSS , điều này khá đơn giản. Bao bọc các @imports của bạn bằng một lớp và đặt quy tắc đổi tên tùy chỉnh cho RTLCSS:Sao chép

/* rtl:begin:options: {
  "autoRename": true,
  "stringMap":[ {
    "name": "ltr-rtl",
    "priority": 100,
    "search": ["ltr"],
    "replace": ["rtl"],
    "options": {
      "scope": "*",
      "ignoreCase": false
    }
  } ]
} */
.ltr {
  @import "../node_modules/bootstrap/scss/bootstrap";
}
/*rtl:end:options*/

Sau khi chạy Sass rồi đến RTLCSS, mỗi bộ chọn trong các tệp CSS của bạn sẽ được thêm vào trước .ltrvà .rtlđối với các tệp RTL. Giờ đây, bạn có thể sử dụng cả hai tệp trên cùng một trang và chỉ cần sử dụng .ltrhoặc .rtltrên trình bao bọc các thành phần của bạn để sử dụng một hoặc hướng khác.

Các trường hợp cạnh và các hạn chế đã biết

Mặc dù cách tiếp cận này có thể hiểu được, nhưng hãy chú ý đến những điều sau:

  1. Khi chuyển đổi .ltrvà .rtl, hãy đảm bảo bạn thêm dirvà langcác thuộc tính cho phù hợp.
  2. Việc tải cả hai tệp có thể là một nút cổ chai hiệu suất thực sự: hãy xem xét một số tối ưu hóa và có thể thử tải một trong những tệp đó không đồng bộ .
  3. Việc lồng các kiểu theo cách này sẽ ngăn không cho form-validation-state()mixin của chúng ta hoạt động như dự kiến, do đó yêu cầu bạn phải tự mình chỉnh sửa nó một chút. Xem # 31223 .

Hộp đựng breadcrumb

Dấu phân tách breadcrumb là trường hợp duy nhất yêu cầu biến hoàn toàn mới của chính $breadcrumb-divider-flippednó— cụ thể là —defaults to $breadcrumb-divider.

Các nguồn bổ sung

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Related posts

Bootstrap tut 7 : Sử dụng Parcel

Bootstrap Basic tut 6: Webpack và các gói ( bundlers)

Bootstrap Basic tut 5: Xây dựng công cụ với các lệnh npm

Add Comment