Nhãn ARIA và mối quan hệ

Sử dụng nhãn ARIA để tạo nội dung mô tả phần tử dễ tiếp cận

Alice Boxhall

Dave Gash

Meggin Kearney

Nhãn

ARIA cung cấp một số cơ chế để thêm nhãn và nội dung mô tả cho các phần tử. Trên thực tế, ARIA là cách duy nhất để thêm nội dung mô tả hoặc nội dung trợ giúp hỗ trợ tiếp cận. Hãy cùng xem các thuộc tính mà ARIA dùng để tạo nhãn có thể truy cập.

nhãn aria

aria-label cho phép chúng ta chỉ định một chuỗi làm nhãn có thể truy cập. Thao tác này sẽ ghi đè mọi cơ chế gắn nhãn gốc khác, chẳng hạn như phần tử label – ví dụ: nếu button có cả nội dung văn bản và aria-label, thì chỉ giá trị aria-label được sử dụng.

Bạn có thể dùng thuộc tính aria-label khi có loại chỉ báo trực quan về mục đích của một phần tử, chẳng hạn như nút sử dụng hình ảnh đồ hoạ thay vì văn bản, nhưng vẫn cần làm rõ mục đích đó cho bất cứ ai không truy cập được chỉ báo trực quan, chẳng hạn như nút chỉ sử dụng hình ảnh để cho biết mục đích của nút đó.

aria-labelledby (được gắn nhãn aria)

aria-labelledby cho phép chúng ta chỉ định mã nhận dạng của một phần tử khác trong DOM làm nhãn của phần tử đó.

Việc này cũng giống như việc sử dụng phần tử label, nhưng có một số điểm khác biệt chính.

1. Bạn có thể dùng aria-labelledby trên mọi phần tử, chứ không chỉ những phần tử có thể gắn nhãn.
2. Mặc dù phần tử label đề cập đến nội dung được gắn nhãn, nhưng mối quan hệ bị đảo ngược trong trường hợp aria-labelledby — sự vật được gắn nhãn đề cập đến nội dung gắn nhãn phần tử đó.
3. Chỉ có thể liên kết một phần tử nhãn với một phần tử có thể gắn nhãn, nhưng aria-labelledby có thể lấy danh sách IDREF để tạo một nhãn từ nhiều phần tử. Nhãn này sẽ được nối với thứ tự IDREF.
4. Bạn có thể sử dụng aria-labelledby để tham chiếu đến các phần tử bị ẩn và nếu không sẽ không nằm trong cây hỗ trợ tiếp cận. Ví dụ: bạn có thể thêm span ẩn bên cạnh một phần tử bạn muốn gắn nhãn và tham chiếu đến phần tử đó bằng aria-labelledby.
5. Tuy nhiên, vì ARIA chỉ ảnh hưởng đến cây hỗ trợ tiếp cận, nên aria-labelledby không cung cấp cho bạn hành vi nhấp vào nhãn quen thuộc mà bạn nhận được khi dùng phần tử label.

Quan trọng là aria-labelledby sẽ ghi đè tất cả các nguồn tên khác cho một phần tử. Ví dụ: nếu một phần tử có cả aria-labelledby và aria-label hoặc aria-labelledby và một HTML gốc label, thì nhãn aria-labelledby sẽ luôn được ưu tiên.

Tình trạng hôn nhân

aria-labelledby là ví dụ về thuộc tính mối quan hệ. Thuộc tính mối quan hệ tạo ra mối quan hệ ngữ nghĩa giữa các phần tử trên trang bất kể mối quan hệ DOM. Trong trường hợp aria-labelledby, mối quan hệ đó là "phần tử này được gắn nhãn bởi phần tử đó".

Thông số kỹ thuật của ARIA liệt kê 8 thuộc tính mối quan hệ. Sáu trong số này, aria-activedescendant, aria-controls, aria-describedby, aria-labelledby và aria-owns, tham chiếu đến một hoặc nhiều phần tử để tạo mối liên kết mới giữa các phần tử trên trang. Trong từng trường hợp, sự khác biệt là ý nghĩa của đường liên kết và cách đường liên kết hiển thị với người dùng.

sở hữu aria

aria-owns là một trong những mối quan hệ ARIA được sử dụng rộng rãi nhất. Thuộc tính này cho phép chúng tôi thông báo cho công nghệ hỗ trợ rằng một phần tử riêng biệt trong DOM nên được coi là phần tử con của phần tử hiện tại hoặc sắp xếp lại các phần tử con hiện có theo một thứ tự khác. Ví dụ: nếu trình đơn phụ bật lên được định vị gần trình đơn mẹ, nhưng không thể là con DOM của trình đơn mẹ vì điều này sẽ ảnh hưởng đến hình ảnh, thì bạn có thể sử dụng aria-owns để hiển thị trình đơn phụ dưới dạng phần tử con của trình đơn mẹ cho trình đọc màn hình.

aria-active tôn vinh

aria-activedescendant đóng một vai trò có liên quan. Tương tự như phần tử đang hoạt động của một trang là phần tử có tâm điểm, việc đặt thành phần con đang hoạt động của một phần tử cho phép chúng ta cho công nghệ hỗ trợ biết rằng một phần tử sẽ được hiển thị cho người dùng dưới dạng phần tử được lấy làm tâm điểm khi phần tử mẹ thực sự được lấy tiêu điểm. Ví dụ: trong hộp danh sách, bạn có thể để tiêu điểm trang ở vùng chứa hộp danh sách, nhưng vẫn cập nhật thuộc tính aria-activedescendant của vùng chứa thành mục danh sách hiện được chọn. Thao tác này làm cho mục đang được chọn xuất hiện với công nghệ hỗ trợ như thể đó là mục được lấy làm tâm điểm.

aria-mô tả theo

aria-describedby cung cấp nội dung mô tả có thể truy cập, giống như cách aria-labelledby cung cấp nhãn. Giống như aria-labelledby, aria-describedby có thể tham chiếu đến các phần tử không hiển thị, dù bị ẩn khỏi DOM hoặc bị ẩn đối với người dùng công nghệ hỗ trợ. Đây là một kỹ thuật hữu ích khi có một số văn bản giải thích bổ sung mà người dùng có thể cần, cho dù kỹ thuật đó chỉ áp dụng cho người dùng công nghệ hỗ trợ hay cho tất cả người dùng.

Một ví dụ phổ biến là trường nhập mật khẩu đi kèm với một số văn bản mô tả giải thích các yêu cầu tối thiểu đối với mật khẩu. Không giống như nhãn, nội dung mô tả này có thể hiển thị hoặc không bao giờ hiển thị cho người dùng; họ có thể có lựa chọn truy cập vào nội dung đó, hay nội dung có thể xuất hiện sau tất cả thông tin khác, hoặc nội dung mô tả này có thể bị một nội dung khác giành trước. Ví dụ: nếu người dùng đang nhập thông tin, thì thông tin mà họ nhập sẽ được lặp lại và có thể làm gián đoạn nội dung mô tả của phần tử. Do đó, nội dung mô tả là một cách hiệu quả để truyền đạt thông tin bổ sung nhưng không thiết yếu. Nội dung mô tả sẽ không ảnh hưởng đến các thông tin quan trọng khác (chẳng hạn như vai trò của phần tử).

aria-posinset và aria-setsize

Các thuộc tính mối quan hệ còn lại hơi khác một chút và hoạt động cùng nhau. aria-posinset ("vị trí trong tập hợp") và aria-setsize ("kích thước của tập hợp") xoay quanh việc xác định mối quan hệ giữa các phần tử đồng cấp trong một tập hợp, chẳng hạn như một danh sách.

Khi không thể xác định kích thước của một tập hợp bằng các phần tử có trong DOM – chẳng hạn như khi sử dụng tính năng kết xuất từng phần để tránh việc có tất cả một danh sách lớn trong DOM cùng một lúc – aria-setsize có thể chỉ định kích thước tập hợp thực tế và aria-posinset có thể chỉ định vị trí của phần tử trong tập hợp. Ví dụ: trong một tập hợp có thể chứa 1.000 phần tử, bạn có thể nói rằng một phần tử cụ thể có aria-posinset là 857 mặc dù phần tử đó xuất hiện đầu tiên trong DOM, sau đó sử dụng các kỹ thuật HTML động để đảm bảo rằng người dùng có thể khám phá toàn bộ danh sách theo yêu cầu.