Làm thế nào để thông báo cho người đọc màn hình bằng WAI-ARIA rằng div hiện có thể nhìn thấy

Question

Làm thế nào để bạn thông báo cho trình đọc màn hình bằng WAI-ARIA rằng div hiện có thể nhìn thấy?

Nếu chúng tôi đã nhận html

<div id="foo">Present main content</div> 
<div id="bar" style="display: none;">Hidden content</div> 

và sau đó chúng tôi

$('#foo').hide(); 
$('#bar').show(); 

làm thế nào để chúng tôi thông báo trình đọc màn hình rằng họ nên thông báo cho người dùng về các div nay có thể nhìn thấy (hoặc có thể tự động tập trung vào các bây giờ div có thể nhìn thấy)?

Answer 1

Bạn không cần phải thường nói với trình đọc màn hình mà nội dung bây giờ đã có thể nhìn thấy. Sử dụng aria-hidden không có sự khác biệt trong thực tế, vì vậy tôi sẽ đề nghị không sử dụng nó. Nếu bạn muốn nội dung văn bản của div ẩn được công bố bởi trình đọc màn hình, bạn có thể sử dụng role=alert hoặc aria-live=polite (ví dụ). Bạn sẽ sử dụng tính năng này cho nội dung cập nhật mà bạn muốn trình đọc màn hình nghe mà không phải di chuyển đến vị trí nội dung để khám phá nó. Ví dụ: một thông báo bật lên không nhận được tiêu điểm, nhưng chứa thông tin văn bản có liên quan đến người dùng sau một thao tác như nhấn nút.

cập nhật: Tôi đã thảo luận với một trong những người đã phát triển ARIA 1.0, ông đề xuất sử dụng HTML5 hidden thay vì aria-hidden làm dấu hiệu ngữ nghĩa. sử dụng nó cùng với CSS display:none cho các trình duyệt cũ hơn. Các trình duyệt hỗ trợ HTML5 hidden triển khai thực hiện bằng cách sử dụng display:none trong biểu định kiểu tác nhân người dùng.

Answer 2

Sử dụng aria-hidden

Chỉ ra rằng các yếu tố và tất cả các hậu duệ của nó là không thể nhìn thấy hoặc mà hiểu được đối với bất kỳ người sử dụng như thực hiện bởi tác giả. Xem liên quan đến aria-disabled.

Nếu phần tử chỉ hiển thị sau một số hành động của người dùng, tác giả PHẢI đặt thuộc tính ẩn aria thành true. Khi phần tử được trình bày, tác giả PHẢI thiết lập thuộc tính aria-hidden thành false hoặc loại bỏ thuộc tính, chỉ ra rằng phần tử có thể nhìn thấy. Một số công nghệ hỗ trợ truy cập trực tiếp thông tin WAI-ARIA thông qua DOM và không thông qua khả năng truy cập nền tảng được trình duyệt hỗ trợ. Tác giả PHẢI đặt aria-hidden = "true" trên nội dung không được hiển thị, bất kể cơ chế được sử dụng để ẩn nó. Điều này cho phép các công nghệ hỗ trợ hoặc tác nhân người dùng bỏ qua đúng các phần tử ẩn trong tài liệu.

do đó, mã của bạn có thể trở thành

$('#foo').hide().attr('aria-hidden', 'true'); 
$('#bar').show().attr('aria-hidden', 'false'); 

Answer 3

Gắn thẻ nội dung với role = "cảnh báo" sẽ gây ra nó để bắn một sự kiện cảnh báo mà trình đọc màn hình sẽ trả lời khi nó trở nên rõ ràng:

<div id="content" role="alert"> 
... 
</div> 

$("#content").show(); 

này sẽ cảnh báo cho người dùng khi # content trở nên rõ ràng.

bị ẩn sẽ được sử dụng khi có nội dung nào đó bạn muốn ẩn khỏi trình đọc màn hình, nhưng hiển thị nó cho người dùng được nhìn thấy. Sử dụng cẩn thận.Xem thêm tại đây: http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/

Answer 4

Tôi đã tạo mẫu cho biết bạn có thể sử dụng role = "alert" để thông báo cho người dùng trình đọc màn hình khi họ tiếp cận giới hạn ký tự của phần tử textarea, nếu bạn đang cố gắng hiểu cách sử dụng vai trò cảnh báo, nó có thể giúp:

có nhiều đến nó, nhưng đây là một phần nhỏ của mã mà tạo ra cảnh báo:

if (characterCount > myAlertTheshold) { 
     var newAlert = document.createElement("div"); /* using the native js because it's faster */ 
     newAlert.setAttribute("role", "alert"); 
     newAlert.setAttribute("id", "alert"); 
     newAlert.setAttribute("class","sr-only"); 
     var msg = document.createTextNode('You have ' + charactersRemaining +' characters of ' + myMaxLength + ' left'); 
     newAlert.appendChild(msg); 
     document.body.appendChild(newAlert); 
    } 

http://codepen.io/chris-hore/pen/emXovR