Ẩn và cập nhật nội dung

Ẩn nội dung khỏi công nghệ hỗ trợ

Alice Boxhall

Dave Gash

Meggin Kearney

ẩn aria

Một kỹ thuật quan trọng khác trong việc tinh chỉnh trải nghiệm cho người dùng công nghệ hỗ trợ là việc đảm bảo rằng công nghệ hỗ trợ chỉ hiển thị những phần liên quan của trang. Có một số cách để đảm bảo một phần của DOM không tiếp xúc với các API hỗ trợ tiếp cận.

Trước tiên, mọi nội dung bị ẩn một cách rõ ràng khỏi DOM cũng sẽ không được đưa vào cây hỗ trợ tiếp cận. Vì vậy, mọi nội dung có kiểu CSS là visibility: hidden hoặc display: none hoặc sử dụng thuộc tính HTML5 hidden cũng sẽ bị ẩn đối với người dùng công nghệ hỗ trợ.

Tuy nhiên, một phần tử không được kết xuất hình ảnh nhưng không bị ẩn rõ ràng vẫn sẽ có trong cây hỗ trợ tiếp cận. Một kỹ thuật phổ biến là đưa "văn bản chỉ dành cho trình đọc màn hình" vào một phần tử được đặt ở vị trí tuyệt đối ngoài màn hình.

.sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

Ngoài ra, như chúng ta đã thấy, bạn có thể chỉ cung cấp văn bản cho trình đọc màn hình thông qua thuộc tính aria-label, aria-labelledby hoặc aria-describedby tham chiếu đến một phần tử bị ẩn.

Hãy xem bài viết WebAIM này về Kỹ thuật ẩn văn bản để biết thêm thông tin về cách tạo văn bản "chỉ trình đọc màn hình".

Cuối cùng, ARIA cung cấp cơ chế để loại trừ nội dung khỏi công nghệ hỗ trợ không bị ẩn bằng hình ảnh, bằng cách sử dụng thuộc tính aria-hidden. Khi áp dụng thuộc tính này cho một phần tử, phần tử đó sẽ bị xoá và mọi con cháu của nó khỏi cây hỗ trợ tiếp cận. Trường hợp ngoại lệ duy nhất là các phần tử do thuộc tính aria-labelledby hoặc aria-describedby tham chiếu đến.

<div class="deck">
    <div class="slide" aria-hidden="true">
    Sales Targets
    </div>
    <div class="slide">
    Quarterly Sales
    </div>
    <div class="slide" aria-hidden="true">
    Action Items
    </div>
</div>

Ví dụ: bạn có thể sử dụng aria-hidden nếu đang tạo một số giao diện người dùng phương thức chặn quyền truy cập vào trang chính. Trong trường hợp này, người dùng bình thường có thể thấy một loại lớp phủ bán trong suốt cho biết rằng không thể sử dụng hầu hết nội dung của trang, nhưng người dùng trình đọc màn hình vẫn có thể khám phá các phần khác của trang. Trong trường hợp này, cũng như khi tạo bẫy bàn phím đã giải thích trước đó, bạn cần đảm bảo rằng các phần của trang hiện nằm ngoài phạm vi cũng là aria-hidden.

Giờ đây, khi bạn đã nắm được những kiến thức cơ bản về ARIA, cách dùng ARIA này với ngữ nghĩa HTML gốc và cách dùng nó để thực hiện những phép toán khá lớn đối với cây hỗ trợ tiếp cận cũng như thay đổi ngữ nghĩa của một phần tử. Hãy cùng tìm hiểu cách dùng ARIA để truyền tải thông tin cần xử lý kịp thời.

aria-live

aria-live cho phép nhà phát triển đánh dấu một phần của trang là "đang hoạt động" theo nghĩa là nội dung cập nhật cần được thông báo cho người dùng ngay lập tức bất kể vị trí của trang, thay vì chỉ tình cờ khám phá phần đó của trang. Khi một phần tử có thuộc tính aria-live, phần trên trang chứa thuộc tính đó và các phần tử con sẽ được gọi là khu vực trực tiếp.

Ví dụ: khu vực trực tiếp có thể là một thông báo trạng thái xuất hiện sau khi người dùng thực hiện thao tác. Nếu thông điệp đủ quan trọng để thu hút sự chú ý của người dùng sáng mắt thì điều quan trọng là phải thu hút sự chú ý của người dùng công nghệ hỗ trợ đến thông báo đó bằng cách đặt thuộc tính aria-live. So sánh div thuần tuý này

<div class="status">Your message has been sent.</div>

với phiên bản "trực tiếp".

<div class="status" aria-live="polite">Your message has been sent.</div>

aria-live có ba giá trị được phép: polite, assertive và off.

• aria-live="polite" yêu cầu công nghệ hỗ trợ cảnh báo người dùng về thay đổi này khi nó hoàn tất bất kỳ thao tác nào đang thực hiện. Bạn nên sử dụng nếu có việc gì quan trọng nhưng không khẩn cấp và chiếm phần lớn việc sử dụng aria-live.
• aria-live="assertive" yêu cầu công nghệ hỗ trợ làm gián đoạn bất kỳ hoạt động nào nó đang thực hiện và thông báo cho người dùng về thay đổi này ngay lập tức. Đây chỉ dành cho các nội dung cập nhật quan trọng và khẩn cấp, chẳng hạn như thông báo trạng thái như "Đã xảy ra lỗi máy chủ và các thay đổi của bạn chưa được lưu; vui lòng làm mới trang" hoặc cập nhật một trường nhập dữ liệu dưới dạng kết quả trực tiếp của hành động của người dùng, chẳng hạn như các nút trên tiện ích bước.
• aria-live="off" yêu cầu công nghệ hỗ trợ tạm ngưng hoạt động gây gián đoạn aria-live.

Có một số thủ thuật để đảm bảo các khu vực trực tiếp của bạn hoạt động chính xác.

Trước tiên, khu vực aria-live của bạn có thể phải được thiết lập trong lần tải trang đầu tiên. Đây không phải là một quy tắc cố định, nhưng nếu bạn đang gặp khó khăn với khu vực aria-live thì đây có thể là vấn đề.

Thứ hai, các trình đọc màn hình khác nhau phản ứng theo cách khác nhau với các loại thay đổi khác nhau. Ví dụ: bạn có thể kích hoạt cảnh báo trên một số trình đọc màn hình bằng cách bật/tắt kiểu hidden của phần tử con từ true sang false.

Các thuộc tính khác hoạt động với aria-live giúp bạn tinh chỉnh những nội dung được giao tiếp với người dùng khi khu vực trực tiếp thay đổi.

aria-atomic cho biết liệu có nên coi toàn bộ khu vực là tổng thể khi truyền đạt thông tin cập nhật hay không. Ví dụ: nếu một tiện ích ngày bao gồm ngày, tháng và năm có aria-live=true và aria-atomic=true, đồng thời người dùng sử dụng một chế độ điều khiển bước để thay đổi giá trị của chỉ tháng, thì toàn bộ nội dung của tiện ích ngày sẽ được đọc to lần nữa. Giá trị của aria-atomic có thể là true hoặc false (mặc định).

aria-relevant cho biết những loại thay đổi nào sẽ hiển thị với người dùng. Có một số tuỳ chọn có thể được dùng riêng lẻ hoặc dưới dạng danh sách mã thông báo.

• các thành phần bổ sung, nghĩa là bất kỳ phần tử nào được thêm vào khu vực đang hoạt động đều quan trọng. Ví dụ: việc thêm một span vào nhật ký thông báo trạng thái hiện có có nghĩa là span đó sẽ được thông báo cho người dùng (giả sử aria-atomic là false).
• text (văn bản), nghĩa là nội dung văn bản được thêm vào bất kỳ nút con cháu nào đều liên quan. Ví dụ: việc sửa đổi thuộc tính textContent của trường văn bản tuỳ chỉnh sẽ đọc văn bản đã sửa đổi cho người dùng.
• xoá, tức là việc xoá mọi văn bản hoặc nút con cháu phải được truyền đạt đến người dùng.
• all (tất cả), nghĩa là mọi thay đổi đều liên quan. Tuy nhiên, giá trị mặc định cho aria-relevant là additions text, nghĩa là nếu bạn không chỉ định aria-relevant, thì hệ thống sẽ cập nhật cho người dùng mọi thao tác bổ sung vào phần tử mà bạn rất muốn có.

Cuối cùng, aria-busy cho phép bạn thông báo cho công nghệ hỗ trợ rằng công nghệ này nên tạm thời bỏ qua các thay đổi đối với một phần tử, chẳng hạn như khi mọi thứ đang tải. Sau khi mọi thứ đã sẵn sàng, bạn nên đặt aria-busy thành false để chuẩn hoá hoạt động của trình đọc.