Tiếp cận: sr-only hay aria-nhãn

Question

From MDN:

Trong ví dụ dưới đây, một nút được phong cách để trông giống như một nút điển hình "gần", với X ở giữa. Vì không có gì chỉ ra rằng mục đích của nút là để đóng hộp thoại, thuộc tính aria-label được sử dụng để cung cấp nhãn cho bất kỳ công nghệ hỗ trợ nào.

<button aria-label="Close" onclick="myDialog.close()">X</button> 

Theo Tài liệu Bootstrap:

Hide một yếu tố cho tất cả các thiết bị ngoại trừ trình đọc màn hình với .sr chỉ

Vì vậy, tôi đoán tôi cũng có thể viết:

<button onclick="myDialog.close()"><span class="sr-only">Close</span>X</button> 

Trong chương trình Bootstrap pro ject, làm thế nào tôi có thể chọn cái nào để thích?

Answer 1

Trong ví dụ MDN, trình đọc màn hình sẽ chỉ nói từ "đóng" vì aria-label ghi đè văn bản trong nút. Điều này sẽ làm việc ngay cả khi bạn sử dụng lại mã mà không có Bootstrap.

Trong ví dụ của bạn, trình đọc màn hình sẽ nói "đóng x" vì bạn không làm gì để ẩn dấu "x" khỏi trình đọc màn hình. Bạn cũng đang thêm một nút văn bản để ẩn nó bằng một lớp.

Tôi sẽ sử dụng ví dụ từ MDN.