Trang này được dịch bởi Cloud Translation API.

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

Đang ẩn nội dung khỏi công nghệ hỗ trợ

Alice Boxhall

Dave Gash

Meggin Kearney

aria bị ẩn

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

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

Tuy nhiên, một phần tử không được hiển thị trực quan nhưng không bị ẩn một cách rõ ràng lại vẫn được đưa vào cây hỗ trợ tiếp cận. Một kỹ thuật phổ biến là thêm "văn bản chỉ dành cho trình đọc màn hình" trong một phần tử được định vị 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, có thể cung cấp văn bản chỉ dành 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 bị ẩn.

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

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

<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 giao diện người dùng phụ không cho phép truy cập vào trang chính. Trong trường hợp này, người dùng nhìn thấy có thể thấy kiểu nào đó của lớp phủ bán trong suốt cho biết rằng hầu hết trang hiện không thể được sử dụng, 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ư việc tạo bẫy bàn phím được giải thích sớm hơn, 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.

Bây giờ, bạn đã hiểu được các khái niệm cơ bản về ARIA, cách hoạt động của ARIA với HTML gốc ngữ nghĩa và cách nó có thể được dùng để thực hiện một ca phẫu thuật khá lớn trên 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 hãy xem xét cách chúng ta có thể dùng công cụ này để truyền tải thông tin cần thao tác 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 cách mà nội dung cập nhật phải được thông báo cho người dùng ngay lập tức, bất kể trang thay vì chỉ khám phá phần đó của trang. Thời gian một phần tử có thuộc tính aria-live, là một phần của trang chứa thuộc tính này và các thành phần con cháu của nó được gọi là khu vực trực tiếp.

ARIA trực tiếp thiết lập một khu vực trực tiếp.

Ví dụ: khu vực trực tiếp có thể là thông báo trạng thái xuất hiện do một hành động của người dùng. Nếu thông điệp đó đủ quan trọng để thu hút điều quan trọng là cần thu hút người dùng sử dụng công nghệ hỗ trợ hãy chú ý đến thuộc tính này 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 "live" ("trực tiếp") đối tác.

<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ề điều này thay đổi khi hoàn tất mọi việc hiện đang làm. Thật hữu ích khi sử dụng nếu việc gì đó quan trọng nhưng không khẩn cấp và chiếm phần lớn 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ỳ nội dung nào đang mở thực hiện và thông báo cho người dùng về thay đổi này ngay lập tức. Nội dung nà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ư "Có 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ác cập nhật đối với trường nhập dữ liệu do kết quả trực tiếp từ hành động của người dùng, chẳng hạn như trên tiện ích bước.
aria-live="off" yêu cầu công nghệ hỗ trợ tạm ngưng aria-live gián đoạn.

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

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

Thứ hai, các trình đọc màn hình khác nhau phản ứng khác nhau với các loại thay đổi. Ví dụ: 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 chuyển đổi 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 sẽ giúp bạn tinh chỉnh đối tượng thông báo cho người dùng khi khu vực trực tiếp thay đổi.

aria-atomic cho biết liệu toàn bộ khu vực có được coi là một khi truyền đạt thông tin cập nhật. Ví dụ: nếu tiện ích ngày bao gồm ngày, tháng và năm có aria-live=true và aria-atomic=true, người dùng sử dụng điều khiển bước để chỉ thay đổi giá trị của tháng, toàn bộ nội dung tiện ích ngày sẽ được đọc to lại. 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ẽ được hiển thị cho người dùng. Có một số lựa chọn có thể được dùng riêng hoặc dưới dạng danh sách mã thông báo.

bổ sung, nghĩa là bất kỳ phần tử nào được thêm vào khu vực trực tiếp đáng kể. Ví dụ: thêm span vào nhật ký trạng thái hiện có thì có nghĩa là khoảng thời gian đó 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 nào sẽ phù hợp. Ví dụ: sửa đổi thuộc tính textContent của một trường văn bản tuỳ chỉnh sẽ đọc văn bản được sửa đổi cho người dùng.
xoá, nghĩa là việc xoá mọi văn bản hoặc các nút con phải được truyền tải đến người dùng.
all (tất cả), nghĩa là mọi thay đổi đều có 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ử, đây là điều bạn muốn có nhất.

Cuối cùng, aria-busy cho phép bạn thông báo cho công nghệ hỗ trợ biết rằng tạm thời bỏ qua những thay đổi đối với một phần tử, chẳng hạn như khi nội dung đang tải. Một lần mọi thứ đều diễn ra, bạn nên đặt aria-busy thành false để chuẩn hoá hoạt động của độc giả.