speak-as

Cú pháp

/* Giá trị từ khóa */
speak-as: auto;
speak-as: bullets;
speak-as: numbers;
speak-as: words;
speak-as: spell-out;

/* Giá trị tên @counter-style */
speak-as: <counter-style-name>;

Giá trị

auto

Nếu giá trị của speak-as được chỉ định là auto, thì giá trị hiệu quả của speak-as sẽ được xác định dựa trên giá trị của descriptor system:

• Nếu giá trị của system là alphabetic, giá trị hiệu quả của speak-as sẽ là spell-out.
• Nếu system là cyclic, giá trị hiệu quả của speak-as sẽ là bullets.
• Nếu system là extends, giá trị của speak-as sẽ giống như khi speak-as: auto được chỉ định trên kiểu được mở rộng.
• Đối với tất cả các trường hợp khác, việc chỉ định auto có tác dụng tương tự như chỉ định speak-as: numbers.

bullets

Một cụm từ hoặc tín hiệu âm thanh do user agent định nghĩa để biểu diễn một mục danh sách không có thứ tự sẽ được đọc ra.

numbers

Giá trị số của bộ đếm sẽ được đọc ra bằng ngôn ngữ của tài liệu.

words

User agent sẽ tạo ra giá trị bộ đếm như bình thường và đọc nó ra như một từ trong ngôn ngữ của tài liệu.

spell-out

User agent sẽ tạo ra biểu diễn bộ đếm như bình thường và đọc nó từng chữ cái một. Nếu user agent không biết cách đọc một ký hiệu bộ đếm cụ thể, user agent có thể đọc nó như thể giá trị của speak-as là numbers.

<counter-style-name>

Tên của một kiểu bộ đếm khác, được chỉ định dưới dạng <custom-ident>. Nếu được bao gồm, bộ đếm sẽ được đọc theo dạng được chỉ định trong kiểu bộ đếm đó, tương tự như việc chỉ định descriptor fallback. Nếu kiểu được chỉ định không tồn tại, speak-as mặc định là auto.

Khả năng truy cập

Hỗ trợ công nghệ hỗ trợ cho thuộc tính speak-as rất hạn chế. Đừng dựa vào nó để truyền tải thông tin quan trọng để hiểu mục đích của trang.

Let's Talk About Speech CSS | CSS Tricks (2017)

Định nghĩa chính thức

Cú pháp chính thức

speak-as = 
  auto                  |
  bullets               |
  numbers               |
  words                 |
  spell-out             |
  <counter-style-name>  

<counter-style-name> = 
  <custom-ident>  

Ví dụ

Đặt dạng giọng nói cho bộ đếm

Trong ví dụ này, hệ thống bộ đếm là fixed với các ký hiệu không thể hiểu được dùng cho các marker trực quan. Tuy nhiên, descriptor speak-as được dùng để đặt các marker mục danh sách là số trong cây trợ năng. Khi được hỗ trợ, các số thay vì các marker trực quan sẽ được đọc bởi trình đọc màn hình.

Để trải nghiệm kết quả của descriptor speak-as, hãy dùng công nghệ hỗ trợ như VoiceOver hoặc trình đọc màn hình khác hoặc xem bảng trợ năng trong công cụ nhà phát triển của trình duyệt hỗ trợ speak-as.

HTML

<ul class="list">
  <li>I had one apple</li>
  <li>I ate two bananas</li>
  <li>I devoured three oranges</li>
  <li>I am not hungry for dinner</li>
  <li>But I'll have five scoops of ice cream for dessert</li>
</ul>

CSS

@counter-style speak-as-example {
  system: fixed;
  symbols:;
  suffix: " ";
  speak-as: numbers;
}

.list {
  list-style: speak-as-example;
}

Kết quả

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• Các descriptor khác của @counter-style: system, symbols, additive-symbols, negative, prefix, suffix, range, pad, và fallback
• list-style, list-style-image, list-style-position
• symbols(): ký hiệu hàm để tạo kiểu bộ đếm ẩn danh.
• Module CSS counter styles
• Module CSS lists and counters