ARIA: vai trò listitem
Vai trò ARIA listitem có thể được dùng để xác định một mục bên trong danh sách các mục. Nó thường được dùng cùng với vai trò list, được dùng để xác định một vùng chứa danh sách.
<section 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>
</section>
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.
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:
Nếu có thể trong công việc của bạn, bạn nên dùng các phần tử HTML ngữ nghĩa phù hợp để đánh dấu một danh sách và các listitem của nó — <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
list-
Một danh sách các mục. Các phần tử có vai trò
listphải có một hoặc nhiều phần tử có vai tròlistitemlàm phần tử con, hoặc một hay nhiều phần tử có vai trògroupcó một hoặc nhiều phần tử có vai tròlistitemlàm phần tử con. group-
Một tập hợp các đối tượng liên quan, bị giới hạn thành các mục danh sách khi lồng trong một danh sách, không đủ quan trọng để có vị trí riêng trong mục lục của trang.
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 đó.
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 một danh sách và listitem — <ol>, <ul> và <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ự.
Note:
Việc tạo kiểu cho một danh sách bằng list-style: none; trong CSS sẽ loại bỏ ngữ nghĩa danh sách. Thêm role="listitem" sẽ khôi phục ngữ nghĩa.
Đặc tả
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # listitem |
Xem thêm
- Phần tử HTML
<li> - Phần tử HTML
<ul> - Phần tử HTML
<ol> - vai trò
list - vai trò
group - Accessibility Object Model
- ARIA in HTML
- Ví dụ danh sách ARIA - bởi Scott O'Hara