DIV ARIA-LABEl не читается JAWS

У меня есть приложение angular2, и я связываю некоторый динамический текст с ARIA-LABEl для вложенного DIV. Но когда я использую JAWS-ридер для поиска DIV на странице, он не читает назначенный текст. Это текст, который я пытаюсь прочитать - attr.aria-label="Сведения о продукте {{productDetails?.ProductName}}"

Также, если я назначу роль заголовка этому div, он читает динамический текст, но не ставит префикс "Сведения о продукте" перед текстом.

<div [ngClass]="getDescClass()" class="prdDetails-div" aria-label="some text">
<div autofocus attr.aria-label="Product details for {{productDetails?.ProductName}}" class="productDetails-name" style="cursor:default!important" role="heading" >{{productDetails?.ProductName}}   </div>
        <div autofocus class="products-result-compare">
            <!--{{getDescription(productDetails?.Description)}}-->
            Small description
        </div>
Источник

3 ответа

Решение

В вашем описании нет подробностей или рабочего примера, поэтому вместо того, чтобы пытаться предложить решение, я могу предложить следующее: aria-label не работает на <div> ни <span>,

<div> а также <span> не являются ни ориентирами, ни интерактивным контентом. aria-label не будет читаться программой чтения с экрана (и это правильно).

Не зная использования, у меня есть два предложения, которые могут помочь:

  1. Положить aria-label непосредственно на элементе управления (зная, что он переопределит текст элемента управления).

  2. Используйте текст вне экрана, если вы хотите, чтобы его видели только пользователи программы чтения с экрана.

Используйте внеэкранную технику:

<div class="sr-only">
Here be redundant or extraneous content
</div>

CSS может выглядеть так (учитывая также языки RTL):

.SRonly {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  top: auto;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

html[dir=rtl] .SRonly {
  left: inherit;
  left: unset;
  right: -9999px;
}

Существуют и другие методы, но их ценность зависит от вашей аудитории и ее технологического профиля.

Ваше использование autofocus на тех <div> заставляет меня нервничать Я надеюсь, что вы не используете их как интерактивные элементы управления (например, кнопки). В идеале никогда не используйте div как интерактивный контент.

Источник

Сказанное выше верно, НО есть правильное решение:

А <div> а также <span>не являются ни достопримечательностями, ни интерактивным контентом. Anaria-label не будет прочитан программой чтения с экрана (и это правильно).

Правильное решение для чтения, например JAWS или NVDA, для чтения <div> путем добавления role тег вместе с aria-label.

Пример:
<div role=navigation" aria-label="Main">
  <!-- list of links to main website locations -->
</div>

Вот 2 ссылки с широким списком различных ролей, которые ДОЛЖНЫ быть добавлены:

  1. MDN - WAI-ARIA роли
  2. Мы - ARIA в HTML: #allowed-aria-roles-states-and-properties
Источник

Я нашел ответ на этот вопрос, который сработал для меня намного лучше без какого-либо пользовательского CSS, поэтому я хотел поделиться:

      <div role="heading" aria-level="1">
    <span aria-label="This is what screen-reader will say">
        <!-- no content shown, but is a heading for screen reader -->
    </span>
</div>

Метка арии не читается в заголовке, но читается, если она находится внутри заголовка.

Источник
Другие вопросы по тегам