Điều gì được ẩn trực quan trong Bootstrap?

Question

.visually-hidden を使って、補助技術 (スクリーンリーダなど) を利用できるようにしながら、要素を視覚的に隠すことができます。 .visually-hidden-focusable を使うと、デフォルトでは要素を視覚的に非表示にすることができますが、 (キーボードのみのユーザなど) フォーカスされたときに表示することができます。 :focus-within のおかげで、コンテナの子要素がフォーカスを受け取ったときにコンテナが表示されます。

Nội dung chính Show

Title for screen readers
Những gì được ẩn trực quan?
Các cách khác nhau để ẩn nội dung một cách trực quan và chỉ cung cấp nội dung đó cho trình đọc màn hình) là gì?
Lớp ẩn phần tử trong bootstrap là gì?
Làm cách nào để ẩn nội dung nhưng vẫn giúp công nghệ hỗ trợ như trình đọc màn hình có thể truy cập nội dung đó?

Title for screen readers
Skip to main content
A container with a focusable element.

Cả visually-hidden và visually-hidden-focusable cũng có thể được sử dụng làm mixin

// Usage as a mixin

.visually-hidden-title {
  @include visually-hidden;
}

.skip-navigation {
  @include visually-hidden-focusable;
}

Một thẻ đã tồn tại với tên chi nhánh được cung cấp. Nhiều lệnh Git chấp nhận cả tên thẻ và tên nhánh, vì vậy việc tạo nhánh này có thể gây ra hành vi không mong muốn. Bạn có chắc chắn muốn tạo nhánh này không?

Bootstrap 5 Ẩn trực quan

Cải thiện bài viết

Lưu bài viết

Thích bài viết

Cập nhật lần cuối. 03 tháng 1 năm 2023

Đọc

Bàn luận

khóa học

Luyện tập

Băng hình

Cải thiện bài viết

Lưu bài viết

Bootstrap 5 Ẩn trực quan được sử dụng để ẩn một phần tử một cách trực quan để phần tử đó không hiển thị trên trang trong khi vẫn cho phép phần tử đó hiển thị với các công nghệ hỗ trợ. . Lớp ẩn trực quan ẩn phần tử theo mặc định và lớp ẩn trực quan có thể lấy nét trực quan ẩn một phần tử nhưng hiển thị nó khi nó được đặt tiêu điểm. Lớp có thể đặt tiêu điểm ẩn trực quan cũng có thể được áp dụng cho vùng chứa bằng cách sử dụng. focus-within, vùng chứa sẽ được hiển thị khi bất kỳ phần tử con nào của vùng chứa nhận được tiêu điểm. Dưới đây là các lớp được sử dụng để ẩn trực quan

Bootstrap 5 Các lớp ẩn trực quan

ẩn trực quan. Lớp này ẩn một phần tử một cách trực quan
trực quan-ẩn-tiêu điểm. Lớp này ẩn một phần tử một cách trực quan nhưng hiển thị nó khi nó được tập trung

cú pháp

<h2 class="Visually hidden Class">. . .</h2>

ví dụ 1. Trong ví dụ này, chúng ta sẽ sử dụng lớp ẩn trực quan

HTML

________số 8_______

<html lang="en">

<head>

<!DOCTYPE html>1<<!DOCTYPE html>3 <!DOCTYPE html>4=

<!DOCTYPE html>6

<!DOCTYPE html>7<!DOCTYPE html>8=<0

<!DOCTYPE html>7<2=

<4

<!DOCTYPE html>7<6=___<8>

<!DOCTYPE html>1<html2 html3=

html5

<!DOCTYPE html>7<2=

html9

<!DOCTYPE html>7<6=___<8>

<!DOCTYPE html>1lang6html2>

lang6_______16_______>

<=3>

<!DOCTYPE html>1<=7 =8=13_______0>

"en"2_______9__________"en"4 =8=13_______7"en"8"en"4>

"en"2_______9_______>3>4>3>

"en"2_______9_______>9<0

"en"2_______9__________<3 <4=___<6>

<8<9

"en"2_______11_______6<3>

<!DOCTYPE html>1lang6=7>

lang6_______12_______3>

lang6_______10_______>

đầu ra

Bootstrap 5 Ẩn trực quan

ví dụ 2. Trong ví dụ này, chúng ta sẽ sử dụng lớp visual-hidden-focusable

HTML

________số 8_______

<html lang="en">

<head>

<!DOCTYPE html>1<<!DOCTYPE html>3 <!DOCTYPE html>4=

<!DOCTYPE html>6

<!DOCTYPE html>7<!DOCTYPE html>8=<0

<!DOCTYPE html>7<2=

<4

<!DOCTYPE html>7<6=___<8>

<!DOCTYPE html>1<html2 html3=

html5

<!DOCTYPE html>7<2=

html9

<!DOCTYPE html>7<6=___<8>

<!DOCTYPE html>1lang6html2>

<!DOCTYPE html>1<=8>

"en"2____8_______57

<!DOCTYPE html>7<!DOCTYPE html>59

"en"2____8_______61

<!DOCTYPE html>1lang6=8>

lang6_______16_______>

<=3>

<!DOCTYPE html>1<<!DOCTYPE html>74>

"en"2_______9_______=7>

<8<"en"4 <4=___<!DOCTYPE html>85"en"8"en"4>

<8<___<3>4<3<!DOCTYPE html>94>9<!DOCTYPE html>94>9>

<8<<01>

<03<<05_______9_______06<05>

<03<___<11 <12_______12__________<14 <4=___<17>

Những gì được ẩn trực quan?

định nghĩa lớp ẩn trực quan là một cách để ẩn nội dung văn bản một cách trực quan khỏi người dùng có thể nhìn thấy, tuy nhiên, nội dung vẫn có sẵn cho người dùng trình đọc màn hình . Điều này đôi khi còn được gọi là chỉ sr, khả năng truy cập hoặc các tên lớp liên quan khác.

Các cách khác nhau để ẩn nội dung một cách trực quan và chỉ cung cấp nội dung đó cho trình đọc màn hình) là gì?

Cách thông thường là sử dụng CSS ( display. không ai; . ẩn giấu; . Các thuộc tính này không chỉ ẩn các thành phần trên màn hình mà còn cho người dùng trình đọc màn hình. Do đó, các yếu tố này sẽ không hiển thị cũng như không phát ra âm thanh bằng các công nghệ Hỗ trợ (AT). . These properties hide elements not only on the screen, but also for screen reader users. Thus, these elements will not be visible nor vocalized by Assistive technologies (AT).