ARIA: vai trò separator

Mô tả

Một separator là một vạch phân cách tách và phân biệt các phần nội dung hoặc các nhóm menu item. Có hai loại separator: một cấu trúc tĩnh cung cấp ranh giới hiển thị, tương tự phần tử HTML <hr>, và một widget có thể nhận focus, có thể di chuyển.

Các phần tử có vai trò separator có giá trị ngầm định của aria-orientation là horizontal.

Separator không thể nhận focus

Một separator không thể nhận focus là một phần tử cấu trúc tĩnh có thể được dùng để giúp phân chia trực quan hai nhóm menu item trong một menu hoặc để cung cấp một đường ngang giữa hai phần của trang. Các ngắt chủ đề không thể nhận focus vẫn có thể được người dùng trình đọc màn hình cảm nhận khi dùng con trỏ đọc không phụ thuộc vào focus.

<h2>My first blog post</h2>
…
<img src="blueline.gif" role="separator" alt="" />
<h2>Two years later, my second post</h2>
…

Trong ví dụ này, một hình ảnh tạo ra một vạch phân cách trực quan giữa hai bài blog. Tác giả có thể đã dùng phần tử ngắt chủ đề ngữ nghĩa <hr> và tạo kiểu bằng CSS để nó có màu xanh (và không phải thay đổi hình ảnh khi thay đổi chủ đề blog), hoặc tác giả có thể đã bao bọc mỗi bài trong phần tử <article> ngữ nghĩa, hoặc cả hai.

<section role="feed">
  <article>
    <h2>My first blog post</h2>
    …
  </article>
  <hr />
  <article>
    <h2>Two years later, my second post</h2>
    …
  </article>
</section>

[role="feed"] > hr {
  height: 3px;
  background-color: blue;
}

Không cần tên khả năng tiếp cận.

Separator có thể nhận focus

Vai trò separator có thể được dùng để xác định phần tử là một vạch phân cách trực quan giữa các nhóm mục trong một menu, chẳng hạn giữa các nhóm phần tử menuitemradio hoặc menuitemcheckbox.

Nếu separator có thể nhận focus, cung cấp một ranh giới hiển thị giữa hai phần nội dung và cho phép người dùng thay đổi kích thước tương đối của các phần nó ngăn cách bằng cách thay đổi vị trí của nó, giá trị aria-valuenow phải được đặt thành một số phản ánh vị trí hiện tại của separator và giá trị đó phải được cập nhật khi nó thay đổi. Các thuộc tính aria-valuemin và aria-valuemax cũng nên được bao gồm nếu chúng không được đặt theo giá trị mặc định là 0 và 100 tương ứng.

Nên có một tên khả năng tiếp cận, với aria-label, nếu có nhiều hơn một separator có thể nhận focus.

Tất cả phần tử con đều mang tính trình bày

Có một số loại thành phần giao diện người dùng, khi được biểu diễn trong một API khả năng tiếp cận của nền tảng, chỉ có thể chứa văn bản. Các API khả năng tiếp cận không có cách nào biểu diễn các phần tử ngữ nghĩa nằm trong separator. Để xử lý giới hạn này, trình duyệt tự động áp dụng vai trò presentation cho mọi phần tử con của bất kỳ phần tử separator nào, vì đây là vai trò không hỗ trợ phần tử con mang ngữ nghĩa.

Ví dụ, hãy xem phần tử separator sau, có chứa một tiêu đề.

<div role="separator"><h3>Title of my separator</h3></div>

Vì các phần tử con của separator mang tính trình bày, nên đoạn mã sau tương đương:

<div role="separator"><h3 role="presentation">Title of my separator</h3></div>

Từ góc nhìn của người dùng công nghệ hỗ trợ, tiêu đề không tồn tại vì các đoạn mã trước đó tương đương với đoạn sau trong cây khả năng tiếp cận:

<div role="separator">Title of my separator</div>

Các vai trò, trạng thái và thuộc tính WAI-ARIA liên quan

aria-orientation (mặc định là horizontal cho separator)

Theo mặc định, vạch phân cách cho các vai trò separator được giả định là horizontal. Giá trị có thể được bao gồm và đặt thành horizontal, undefined (mặc định cho các vai trò khác trừ khi có quy định khác), hoặc vertical.

aria-valuenow

Nếu separator có thể nhận focus và có giá trị đã biết, aria-valuenow xác định giá trị hiện tại. Nếu không thể nhận focus hoặc giá trị không xác định, đừng bao gồm thuộc tính này.

aria-valuemin (mặc định là 0)

Nếu separator có thể nhận focus, và giá trị tối thiểu không phải 0, hãy bao gồm giá trị tối thiểu với aria-valuemin. Nếu …

aria-valuemax (mặc định là 100)

Nếu separator có thể nhận focus, và giá trị tối đa không phải 100, hãy bao gồm aria-valuemax với giá trị bằng hoặc lớn hơn aria-valuemin.

aria-valuetext

Nếu separator có thể nhận focus, và aria-valuenow không tối ưu trong việc cung cấp thông tin hữu ích cho người dùng, nội dung aria-valuetext được bao gồm sẽ được đọc thay cho giá trị aria-valuenow.

Đặc tả

Xem thêm

• Phần tử ngắt chủ đề HTML <hr>
• Ví dụ separator trong menubar