Есть ли эквивалент атрибута "alt" для элементов div?

Экранные программы будут читать любую строку, установленную в атрибуте "alt". Использование этого атрибута предназначено специально для тегов изображений.

Если у меня есть div так:

<div id=myCoolDiv tabindex="0"> 2 <div>

Есть ли способ заставить считыватель экрана воспринимать атрибут для чтения строки так же, как используется тег alt?

Итак, для раздела div, указанного ниже, сканер экрана скажет, например: "пункты корзины покупок 2"?

Я пробовал использовать aria-label, но программа чтения с экрана не забирала его:

<div id=myCoolDiv tabindex="0" aria-label="shopping cart items"> 2 <div>

Ответы

Ответ 1

Попробуйте role="listitem" или role="group" и aria-labelledby="shopping cart items". См. Пример 1. 2 - это текстовое содержимое, которое должно быть прочитано программой чтения с экрана уже с атрибутом, считанным контекстом для содержимого. Обратитесь к разделу .

ОБНОВЛЕНИЕ 2

Добавьте aria-readonly=true role=textbox, если вы используете ввод. Если есть сомнения, следует ли использовать aria-label или aria-labelledby, прочитайте эту статью . В documentation для JAWS и тестирования он сам поддерживает тот факт, что aria-label игнорируется. Кроме того, семантика очень важна, когда вас интересует доступность. Использование div, когда вы можете использовать вход, не является семантически звуковым и, как я уже говорил, JAWS будет принимать элемент формы более легко, чем div. Я предполагаю, что эта "корзина покупок" является формой или частью формы, и если вам не нравятся ее границы, input {border: 0 none transparent} или используйте <output> *, который будет A + в отношении семантики.

Извините, @RadekPech напомнил мне; Я забыл добавить, что использование aria-labelledby требует видимого текста и что для текста нужен идентификатор, который также указан как значение aria-labelledby. Если вы не хотите текст из-за эстетики, используйте color: transparent, line-height: 0 или color:<same as background>. Это должно удовлетворять наглядности в отношении DOM * и оставаться невидимым для невооруженного глаза. Имейте в виду, что эти меры связаны с тем, что JAWS игнорирует aria-label.

* непроверенный

ПРИМЕР 3

<span id="shopping">Shopping</span>&nbsp;
<span id="cart">Cart</span>&nbsp;
<span id="items">Items</span>&nbsp;
<input id='cart' tabindex="0" aria-readonly=true readonly role="textbox" aria-labelledby="shopping cart items" value='2'>

ОБНОВЛЕНИЕ 1

Для JAWS вам, вероятно, придется немного его настроить:

Выберите пункт меню Utilities.
Затем Settings Center.
Speech and Sounds Schemes
Modiy Scheme...
HTML Вкладка

В этом конкретном диалоговом окне вы можете добавлять определенные атрибуты и то, что сказано, когда элемент привязан. JAWS будет легче реагировать на элементы формы, поскольку они могут запускать событие focus. Вам будет проще выполнять Пример 2:

ПРИМЕР 1

<div id=myCoolDiv tabindex="0" role="listitem" aria-labelledby="shopping cart items"> 2 <div>

ПРИМЕР 2

<input id='semantic' tabindex="0" role="listitem" aria-labelledby="shopping cart items" value='2' readonly>

Ответ 2

Есть два способа (которые можно объединить), чтобы программа чтения с экрана могла читать альтернативный текст:

Все с ролью ARIA img может (ДОЛЖНО) иметь атрибут alt. Смотрите роль WAI-ARIA img.
```
<div role="img" alt="heart">
♥︎
</div>
```

Однако это следует использовать только в том случае, если элемент действительно представляет изображение (например, символ Юникода сердца).

Если элемент содержит фактический текст, который просто требует другого чтения, вам следует установить для роли ARIA значение text и добавить aria-label с тем, что вы хотите прочитать с помощью программы чтения с экрана. Смотрите текстовую роль WAI-ARIA.
```
<div role=text aria-label="Rating: 60%">
Rating: ★★★☆☆︎
</div>
```

Не сравнивайте его с aria-labeledby, который должен содержать идентификатор связанного элемента.

Вы можете объединить два предыдущих случая в одно, используя две роли ARIA и добавив оба alt и aria-label:
```
<div role="img text" alt="heart" aria-label="heart">
♥︎
</div>
```

Когда определено больше ролей ARIA, браузер должен использовать первую поддерживаемую роль и обработать элемент с этой ролью.

Еще одна важная вещь: вы должны установить тип страницы в HTML5 (который поддерживает ARIA по своему дизайну).

<!DOCTYPE html>

Использование HTML4 или XHTML требует специального DTD для включения поддержки ARIA.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN"
   "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">

Ответ 3

Если вы используете Bootstrap Framework, вы получите быстрое и простое решение. Вы должны использовать sr-only или sr-only sr-only-focusable Bootstrap CSS classes в элементе span, где будет записан текст screen-reader-only,

В следующем примере используется элемент span с классом glyphicon glyphicon-shopping-cart.

<div id="myCoolDiv">
<h5>
<span class="glyphicon glyphicon-shopping-cart"></span> 2  
<span class="sr-only sr-only-focusable" tabindex="0">shopping cart items</span>
</h5>
<div>

Считыватель экрана: "две позиции корзины покупок"

предоставлено Fangs Screen Reader Emulator Аддон для Firefox

Вы можете найти приведенный выше рабочий пример: Fiddle

Как предложено Oriol, если вы не используете Bootstrap Framework, просто добавьте в свой CSS файл следующее.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

Ответ 4

Нет, нет эквивалента атрибуту alt для элементов <div>.

Для того, что вы пытаетесь сделать, решение на основе ARIA является излишним. Вы не только сталкиваетесь с проблемами совместимости с программой чтения с экрана, вы применяете атрибуты ARIA, где они не нужны (и, возможно, не принадлежат к чему-то вроде <div>).

Вместо этого рассмотрите возможность использования вне экрана (например, из группы Paciello или этого из WebAIM). Контент, спрятанный с использованием этой техники, по-прежнему будет считываться с экрана, но будет визуально скрыт.

Отчитывая свой вопрос, я думаю, что это то, что вы после.

Я сделал ручку, демонстрирующую эту технику. Это может быть проще проверить в полностраничной версии.

Edit: добавлен HTML и CSS из примера, но обратите внимание, что с течением времени спецификации и поддержка браузеров/вспомогательных технологий меняются со временем, поэтому, если вы читаете это через год, вы должны продолжать использовать приведенные выше ссылки, чтобы проверить это CSS по-прежнему является лучшей практикой.

HTML

 <div tabindex="0">
  <span class="offscreen">Items in shopping cart: </span>2
 </div>

CSS

.offscreen {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  /* for Internet Explorer */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

Ответ 5

В соответствии с текстовым альтернативным алгоритмом вычисления W3C и Доступное имя и описание: Computation и API Mappings 1.1, вы определенно должны использовать aria-label.

Говоря это, он не работает с Jaws, это позор для такого дорогого инструмента.

Остальная опция - использовать ссылку, которая перейдет на страницу вашей корзины, используя как title, так и aria-label, чтобы удовлетворить всех:

<a href="#cart" title="2 shopping cart items" aria-label="2 shopping cart items">2</a>

Вы также можете использовать прозрачную 1 пиксельную опцию:

2 <img src="pixel.png" height="1" width="1" alt="shopping cart items" />

Ответ 6

Используйте изображение внутри div, которое имеет метку в качестве атрибута alt. Таким образом, те, у кого нет программ чтения с экрана, видят только число и изображение, тогда как те, у кого есть программы чтения с экрана, слышат целое предложение:

<div>
    <img src="http://tny.im/57j" alt="Shopping cart items" />
    2
</div>

Seen as: 2

Read as: "Shopping cart items: 2"

Атрибут alt существует для изображений, потому что нет способа "прочитать вслух" содержимое изображения, поэтому вместо него используется предоставленный текст. Но для div, он уже содержит текст и изображения. Поэтому, если вы хотите, чтобы он читался программой чтения с экрана, вам нужно включить текст и альтернативный текст в содержимое div.

Ответ 7

Try:

HTML

<div id=myCoolDiv tabindex="0"><span class="aria-hidden">shopping cart items</span>2<div>

CSS

.aria-hidden {
  position: absolute;
  left: -100000px;
}

Это объявит текст внутри диапазона. И родительский div не потеряет визуальный фокус. Скрытый класс Aria скроет диапазон от видимой области экрана, но будет читать его как внутри div, который имеет фокус.

Ответ 8

Вы можете создать класс, такой как экран-ридер-текст, со следующим css:

.screen-reader-text { 
   clip: rect(1px, 1px, 1px, 1px); 
   height: 1px; 
   width: 1px; 
   overflow: hidden; 
   position: absolute !important;
}

Затем в вашем коде вы можете просто добавить <span> с текстом прокрутчика так:

<div>
I am a div!
<span class="screen-reader-text">This is my screen reader text</span> 
</div>

См. пример здесь: https://jsfiddle.net/zj1zuk9y/

(Источник: http://www.coolfields.co.uk/2016/05/text-for-screen-readers-only-updated/)