Hướng dẫn aria selected css - aria đã chọn css

Sự mô tả

Đôi khi tên có thể truy cập mặc định của một phần tử bị thiếu hoặc không mô tả chính xác nội dung của nó và không có nội dung nào có thể nhìn thấy trong DOM có thể được liên kết với đối tượng để mang lại ý nghĩa. Một ví dụ phổ biến là một nút chứa phông chữ SVG hoặc biểu tượng (mà bạn không nên sử dụng) mà không cần bất kỳ văn bản nào.

Trong trường hợp một phần tử tương tác không có tên có thể truy cập hoặc tên có thể truy cập không chính xác và không có nội dung nào có thể hiển thị trong DOM có thể được tham chiếu thông qua thuộc tính

<button aria-label="Close" onclick="myDialog.close()">
  <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000"/>svg>
button>

Lưu ý: aria-label được sử dụng để sử dụng cho các yếu tố tương tác hoặc các yếu tố được thực hiện để được tương tác thông qua các khai báo ARIA khác, khi không có văn bản thích hợp nào có thể nhìn thấy trong DOM có thể được tham chiếu như một nhãn aria-label is intended for use on interactive elements, or elements made to be interactive via other ARIA declarations, when there is no appropriate text visible in the DOM that could be referenced as a label

Hầu hết nội dung có một tên có thể truy cập được tạo từ nội dung văn bản của yếu tố gói ngay lập tức. Tên có thể truy cập cũng có thể được tạo bởi một số thuộc tính hoặc các yếu tố liên quan.

Theo mặc định, tên có thể truy cập của nút là nội dung giữa các thẻ mở và đóng

Nếu không có tùy chọn nào trong số này có sẵn hoặc nếu tên có thể truy cập mặc định là không phù hợp, hãy sử dụng thuộc tính aria-label để xác định tên có thể truy cập của một phần tử.

aria-label có thể được sử dụng trong trường hợp văn bản có thể nhìn thấy phần tử không hiển thị. Nếu có văn bản có thể nhìn thấy nhãn một phần tử, hãy sử dụng

Mục đích của aria-label giống như

Thuộc tính aria-label có thể được sử dụng với các phần tử HTML thông thường, ngữ nghĩa; Nó không giới hạn ở các yếu tố có ARIA

x

Đừng "lạm dụng" aria-label. Ví dụ: sử dụng văn bản hiển thị với

Không phải tất cả các yếu tố có thể được đặt một tên có thể truy cập. Cả aria-label và

Nếu bạn cung cấp cho

  
Welcome to our team

Lưu ý: aria-label chỉ "hiển thị" để hỗ trợ các công nghệ. Nếu thông tin đủ quan trọng để thêm vào người dùng, hãy xem xét việc hiển thị nó cho tất cả người dùng. The aria-label is only "visible" to assistive technologies. If the information is important enough to add for AT users, consider making it visible for all users.

Giá trị

  
Welcome to our team

Một chuỗi văn bản sẽ là tên có thể truy cập cho đối tượng.

API Ariamixin

  
Welcome to our team

Thuộc tính

  
Welcome to our team

  
Welcome to our team

Types

Thuộc tính

  
Welcome to our team

Types

Vai trò liên quan

Được sử dụng trong hầu hết các vai trò ngoại trừ các vai trò không thể được cung cấp một tên có thể truy cập của tác giả.except roles that can not be provided an accessible name by the author.

Thuộc tính aria-label không được hỗ trợ trong

Types

Types

<button aria-label="Close" onclick="myDialog.close()">
  <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000"/>svg>
button>

<button aria-label="Close" onclick="myDialog.close()">
  <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000"/>svg>
button>

<button aria-label="Close" onclick="myDialog.close()">
  <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000"/>svg>
button>

<button aria-label="Close" onclick="myDialog.close()">
  <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000"/>svg>
button>

Types

Types

<button aria-label="Close" onclick="myDialog.close()">
  <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000"/>svg>
button>

<button aria-label="Close" onclick="myDialog.close()">
  <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000"/>svg>
button>

<button aria-label="Close" onclick="myDialog.close()">
  <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000"/>svg>
button>

<button aria-label="Close" onclick="myDialog.close()">
  <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000"/>svg>
button>

<button aria-label="Close" onclick="myDialog.close()">
  <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000"/>svg>
button>

<button aria-label="Close" onclick="myDialog.close()">
  <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000"/>svg>
button>

<button aria-label="Close" onclick="myDialog.close()">
  <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000"/>svg>
button>

<button aria-label="Close" onclick="myDialog.close()">
  <svg aria-hidden="true" focusable="false" width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z" fill="#000"/>svg>
button>

Lưu ý: Thuộc tính aria-label chỉ dành cho các phần tử tương tác. Khi được đặt trên các yếu tố không tương tác, chẳng hạn như các yếu tố được liệt kê ở trên, nó có thể không được đọc hoặc có thể gây nhầm lẫn cho người dùng của bạn như một yếu tố không tương tác hoạt động như một yếu tố tương tác. The aria-label attribute is intended for interactive elements only. When placed on non-interactive elements, such as those listed above, it may not be read or may confuse your users as a non-interactive element that acts like an interactive one.

Xem thêm