ARIA: vai trò list
Vai trò ARIA list có thể được dùng để xác định một danh sách các mục. Nó thường được dùng cùng với vai trò listitem, được dùng để xác định một mục danh sách nằm bên trong danh sách.
<div role="list">
<div role="listitem">Mục danh sách 1</div>
<div role="listitem">Mục danh sách 2</div>
<div role="listitem">Mục danh sách 3</div>
</div>
Mô tả
Bất kỳ nội dung nào gồm một vùng chứa bên ngoài với một danh sách các phần tử bên trong đều có thể được xác định cho công nghệ hỗ trợ bằng các vùng chứa list và listitem tương ứng. Một list chỉ có thể chứa từ 0 trở lên các phần tử con listitem.
Không có quy tắc cứng nhắc nào về việc nên dùng phần tử nào để đánh dấu danh sách và các mục danh sách, nhưng bạn nên bảo đảm các mục danh sách có ý nghĩa trong ngữ cảnh của một danh sách, ví dụ danh sách mua sắm, các bước công thức, hướng dẫn đường đi.
Note:
Thực hành tốt nhất khuyên dùng các phần tử HTML ngữ nghĩa phù hợp thay vì vai trò ARIA để đánh dấu danh sách và các listitem - <ul>, <ol> và <li>. Xem Thực hành tốt nhất để xem ví dụ đầy đủ.
Các vai trò, trạng thái và thuộc tính WAI-ARIA liên quan
- vai trò
listitem -
Một mục đơn lẻ trong danh sách. Các phần tử có vai trò
listitemchỉ có thể xuất hiện trong một phần tử có vai tròlist.
Thực hành tốt nhất
Chỉ dùng role="list" và role="listitem" nếu bạn buộc phải làm vậy - ví dụ nếu bạn không kiểm soát HTML nhưng vẫn có thể cải thiện trợ năng động bằng JavaScript sau đó.
Không giống HTML <ol> và <ul>, vai trò ARIA list không phân biệt giữa danh sách có thứ tự và không có thứ tự. Nếu có thể, bạn nên dùng các phần tử HTML ngữ nghĩa phù hợp để đánh dấu danh sách (<ol> và <ul>) và các mục danh sách (<li>). Ví dụ, phần trên của chúng ta nên được viết lại như sau:
<ul>
<li>Mục danh sách 1</li>
<li>Mục danh sách 2</li>
<li>Mục danh sách 3</li>
</ul>
hoặc dùng danh sách có thứ tự nếu thứ tự của các mục danh sách là quan trọng:
<ol>
<li>Mục danh sách 1</li>
<li>Mục danh sách 2</li>
<li>Mục danh sách 3</li>
</ol>
Note:
Các vai trò ARIA list / listitem không phân biệt giữa danh sách có thứ tự và không có thứ tự.
Ngoài ra, hãy lưu ý rằng nếu bạn dùng các phần tử HTML ngữ nghĩa <ol> hoặc <ul> và áp dụng vai trò presentation, mỗi phần tử <li> con sẽ kế thừa vai trò presentation vì ARIA yêu cầu các phần tử listitem phải có phần tử cha list. Vì vậy, các phần tử <li> không được công nghệ hỗ trợ bộc lộ, nhưng các phần tử nằm bên trong những <li> đó, bao gồm cả danh sách lồng nhau, vẫn hiển thị với công nghệ hỗ trợ.
Đặc tả
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # list |
Xem thêm
- Phần tử
<ul> - Phần tử
<ol> - Phần tử
<li> - vai trò
listitem - Ví dụ danh sách ARIA - bởi Scott O'Hara
- Accessibility Object Model
- ARIA in HTML