ARIA làm cho người đọc đọc nội dung yếu tố không tập trung

Tôi có các yếu tố trên một trang "có thể tập trung" (các nút, các yếu tố với tabindex, v.v.) và trình đọc màn hình đọc nội dung tốt.

Tuy nhiên, tôi có một số yếu tố khác không thể tập trung (do thực tế có rất nhiều trong số chúng - kết quả danh sách thả xuống, v.v.), vì vậy tôi không muốn người dùng nhấp vào tab vô số lần, nhưng chúng có thể điều hướng qua trái / phải / các phím lên / xuống và chúng được chọn lớp CSS (mặc dù một số phần tử khác - cha mẹ của chúng - thực sự được tập trung)

Tôi muốn làm cho người đọc đọc những yếu tố cụ thể đó, với lớp "được chọn". Tôi phải làm nó như thế nào?

(Tôi đã thử áp dụng thuộc tính aria-nhãn = "đọc cái này" cho chúng, nhưng nó không hoạt động; nó chỉ hoạt động nếu phần tử thực sự được tập trung)

Dưới đây là chi tiết để giúp bạn hiểu những gì tôi muốn đạt được:

<div tabindex="0" >
  <span>title1</span>
  <ul>
    <li class="selected">item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

<div tabindex="0">
  <span>title2</span>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

Đây là câu đố: https://jsfiddle.net/d5gbjst1/1/

Bạn có thể chuyển qua lại giữa 2 div và bất kỳ trình đọc màn hình nào (tôi đã thử với Windows Narrator, NVDA và JAWS) sẽ đọc "title1" và tất cả các mục cho cái đầu tiên và "title2" và tất cả các mục cho cái thứ hai, tùy thuộc vào nơi tập trung .

Lớp thông báo "được chọn" trên mục đầu tiên trong ul đầu tiên. Bây giờ, tôi duyệt với các mũi tên lên / xuống thông qua danh sách ul của mình và lớp "được chọn" chuyển từ mục này sang mục tương ứng. (Đó là mã JS riêng biệt, không bao gồm trong ví dụ này vì mục đích đơn giản)

Khi lớp "được chọn" được áp dụng cho phần tử, tôi muốn buộc người đọc đọc nó. Có thể ở tất cả?

Chỉnh sửa: Tôi cũng đã thử thêm thuộc tính vào ul và li, vẫn không gặp may:

<ul role="list">
 <li role="listitem">

Tôi đã gặp vấn đề tương tự vào tuần trước, giải pháp tôi đã sử dụng là sử dụng aria-describedbyvà cũng aria-labelđể cung cấp thêm thông tin từ khắp nơi trên trang trong phần tử hiện đang tập trung.

Trong một trường hợp, chúng tôi thay đổi nội dung aria-labelđể chỉ cung cấp thêm chi tiết vào lần đầu tiên phần tử được tập trung.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-descripby_attribution

Tôi muốn làm cho người đọc đọc những yếu tố cụ thể đó, với lớp "được chọn". Tôi phải làm nó như thế nào?

Tôi không nghĩ bạn nên cố gắng làm điều đó. Trình đọc màn hình - đặc biệt là những trình bạn đã thử nghiệm - có các phím bấm phức tạp để cho phép người dùng điều hướng đến, từ và giữa các yếu tố cụ thể rồi nhảy vào và ra khỏi chúng.

Buộc một hành vi không chuẩn cho các công nghệ có thể truy cập có thể tạo ra trải nghiệm bực bội cho những người dùng đó.

Chỉnh sửa: Tôi cũng đã thử thêm thuộc tính vào ul và li, vẫn không gặp may:

<ul role="list"> <li role="listitem">

Tránh đặt vai trò cho danh sách, vì chúng có các vai trò được gán theo mặc định. Xem tại đây: https://www.w3.org/TR/html53/grouping-content.html#ref-for-allowed-aria-role-attribution-values%E2%91%A1%E2%91%A0

Lớp thông báo "được chọn" trên mục đầu tiên trong ul đầu tiên. Bây giờ, tôi duyệt với các mũi tên lên / xuống thông qua danh sách ul của mình và lớp "được chọn" chuyển từ mục này sang mục tương ứng. (Đó là mã JS riêng biệt, không bao gồm trong ví dụ này vì mục đích đơn giản)

Khi lớp "được chọn" được áp dụng cho phần tử, tôi muốn buộc người đọc đọc nó. Có thể ở tất cả?

Tôi đã thử nghiệm bằng trình tường thuật và Trình mô phỏng trình đọc màn hình cho Chrome bằng jsfiddle của bạn. Hành vi dự kiến, và những gì tôi đã quản lý để tái tạo, là những gì bạn đang hướng tới. Đúng nếu tôi đã sai lầm?

Đầu tiên, tôi nhấp vào tab và tập trung vào phần đánh dấu sau:

<div tabindex="0" >
  <span>title1</span>
  <ul>
    <li class="selected">item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

Kết quả nào khiến trình đọc màn hình quay trở lại

"title1, item1, item2, item3"

liên tiếp nhanh chóng. Như tôi mong đợi.

Tôi bấm vào tab một lần nữa để tập trung vào phần đánh dấu này:

<div tabindex="0">
  <span>title2</span>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

Và trình đọc màn hình trở lại

"tiêu đề 2, mục1, mục2, mục3"

liên tiếp nhanh chóng. Một lần nữa, như tôi mong đợi

Cuối cùng, tôi bấm vào tab một lần nữa để đặt tiêu điểm trở lại phần đánh dấu đầu tiên và sử dụng phím downarrow. Trình đọc màn hình trở lại

"Nhập danh sách. Một trong ba. Bullet. Mục 1"

Sau đó tôi nhấp vào phím downarrow một lần nữa để di chuyển đến viên đạn thứ hai.

"Hai trong số ba viên đạn. Mục 2."

Tôi bấm vào phím downarrow một lần nữa.

"Ba trong ba. Đạn. Mục 3".

Hành vi này là những gì tôi mong đợi và là - từ kinh nghiệm tôi có được khi trải qua hai đánh giá Double-A WCAG 2.1 - chuẩn mực.

Những hành vi bạn đang mong đợi. Cụ thể, bạn muốn trình đọc màn hình trở về / nói gì?

Gần đây tôi đã gặp vấn đề tương tự và trong quá trình nghiên cứu, tôi đã tìm thấy thông tin về thuộc tính aria-activedesant: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-acturedescendant_attribution

Trong trường hợp này, mọi thành phần danh sách nên có một attr id duy nhất. Khi phần tử danh sách được chọn, id của nó sẽ được cung cấp cho attr-arseensensant của cha mẹ tập trung.

<div tabindex="0" aria-activedescendant="Id1">
  <span>title1</span>
  <ul>
    <li class="selected" id="Id1">item1</li>
    <li id="Id2">item2</li>
    <li id="Id3">item3</li>
  </ul>
</div>

Bạn có thể thử thêm chỉ mục tab vào các yếu tố cụ thể đó, nhưng bạn nên cẩn thận khi sử dụng vì nó có thể dẫn đến các trang có thể rất khó điều hướng nếu bạn sử dụng các giá trị lớn hơn 0. Đây là một liên kết để có câu trả lời chi tiết hơn. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attribut/tabindex