Есть ли эквивалент атрибута 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>

javascript html css accessibility screen-readers
person Kode_12    schedule 14.07.2016    source источник
comment
как насчет названия?   -  person singe batteur    schedule 14.07.2016
comment
@singebatteur: Вы уверены, что атрибут title читается программами чтения с экрана? HTML5 spec явно не рекомендует использовать его для обеспечения доступности.   -  person rvighne    schedule 14.07.2016
comment
Я рекомендую вам ознакомиться с одним из методов вне экрана, специально разработанных для предоставления дополнительного контента пользователям программ чтения с экрана, скрывая их от зрячих пользователей. Также, пожалуйста, не помещайте tabindex на все, что не является реальным контролем.   -  person aardrian    schedule 15.07.2016
comment
@ Kode_12 вы используете Bootstrap? Вы можете использовать класс sr-only для своих целей.   -  person    schedule 17.07.2016
comment
Программа чтения с экрана не читает ваш aria-label, потому что DIV не имеет ARIA по умолчанию role. Вы должны установить role, чтобы атрибуты aria-* активировались.   -  person Radek Pech    schedule 18.07.2016

Ответы (10)


arrow_upward
15
arrow_downward

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

  1. Все, что имеет роль ARIA img, может (ДОЛЖНО) иметь атрибут alt. См. роль img WAI-ARIA.

    <div role="img" alt="heart">
♥︎
</div>

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

  1. Если элемент содержит фактический текст, который просто требует другого чтения, вы должны установить роль ARIA в text и добавить aria-label с тем, что вы хотите, чтобы программа чтения с экрана прочитала. См. текстовую роль WAI-ARIA.

    <div role="text" aria-label="Rating: 60%">
Rating: ★★★☆☆︎
</div>

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

  1. Вы можете объединить два предыдущих случая в один, используя две роли 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">
person Radek Pech    schedule 18.07.2016
comment
Значения ролей ARIA никогда не представляют собой список, разделенный пробелами. Причина, по которой используется первый элемент в списке, заключается в том, что остальные недействительны. Каждому элементу может быть назначена только одна роль, без исключений, AFAIK. - person zer00ne; 20.07.2016
comment
@ zer00ne Атрибут роли принимает в качестве значения один или несколько разделенных пробелами TERMorCURIEorAbsIRIs, которые определены в RDFa Core 1.1. См. атрибут роли WAI-ARIA 1.0 - person Radek Pech; 21.07.2016
comment
Я согласен, сэр. Понятия не имею, что это за первая ссылка, но вторую я понимаю. - person zer00ne; 21.07.2016
comment
При тестировании role = text отлично работала с NVDA в Chrome. Не работал с NVDA в Firefox. - person cjaube; 07.11.2017

arrow_upward
10
arrow_downward

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

ОБНОВЛЕНИЕ 2

Добавьте aria-readonly=true role=textbox, если вы используете ввод. Если есть сомнения, использовать ли aria-label или aria-labelledby, прочтите это статья. В документации для 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, наверное, придется немного настроить:

  1. Щелкните пункт меню Утилиты.
  2. Затем Центр настроек.
  3. Схемы речи и звуков
  4. Схема Modiy ...
  5. 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>
person zer00ne    schedule 14.07.2016
comment
Какой браузер используете с JAWS? Я добавил обновление по JAWS. - person zer00ne; 15.07.2016
comment
Internet Explorer 11 - person Kode_12; 15.07.2016
comment
Атрибут aria-labeledby является ссылкой на связанный элемент метки. Фактической меткой является атрибут aria-label. - person Radek Pech; 18.07.2016
comment
Обратите внимание, что пользователи не будут изменять свою конфигурацию JAWS для чтения вашего контента. Я знаю это по опыту. - person aardrian; 20.07.2016
comment
@aardrian, значит, вы говорите от лица слабовидящих? OP запросил JAWS как название игры и использует div. Мой опыт показывает, что клиентам с особыми потребностями оказывается помощь в эксплуатации предоставленного оборудования, подготовленного для надлежащего использования. - person zer00ne; 20.07.2016
comment
Конечно, нет, но предположение, что пользователь JAWS изменит конфигурацию программного обеспечения для использования веб-сайта, не подтверждается опытом пользователей JAWS (например, просьба пользователя перенастроить свой собственный браузер для покупки обуви), даже если вам помогут предложить. Однако я провел тестирование с пользователями, которые устанавливают и настраивают программное обеспечение самостоятельно. Кроме того, OP не указывает JAWS в вопросе, только то, что ваша опция не работает в JAWS. - person aardrian; 20.07.2016
comment
›Это, к сожалению, не читается программой чтения с экрана (JAWS)‹ это просьба и требование, вот и все. - person zer00ne; 20.07.2016
comment
OP указал в вопросе (и теге) программу чтения с экрана, которая, конечно же, включает JAWS (и, надеюсь, экранный диктор, TalkBack, NVDA, Orca и VoiceOver). OP только отметил JAWS как комментарий о том, как это решение там не работает. Тогда решение должно работать во всех. - person aardrian; 20.07.2016

arrow_upward
5
arrow_downward

Вы можете просто поместить тег title в div, который будет делать то же самое, что и тег alt, например:

<div title="I AM HELLO WORLD">HELLO WORLD</div>

I AM HELLO WORLD будет напечатан, когда вы наведете на него курсор в браузере.

person Serge Gavrilov    schedule 25.05.2020

arrow_upward
3
arrow_downward

Если вы используете Bootstrap Framework, есть быстрое и простое решение. Вы должны использовать классы в 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>

Вывод программы чтения с экрана: "два товара в корзине"

Вы можете найти приведенный выше рабочий пример здесь: 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;
}
person Community    schedule 17.07.2016
comment
Если вы не используете бутстрап, вы можете перейти к его таблице стилей и скопировать .sr-only стили. - person Oriol; 17.07.2016
comment
Я знаю об атрибуте sr-only, но он скроет div. Для моих целей мне нужен визуальный индикатор, показывающий div, который читается программой чтения с экрана. - person Kode_12; 17.07.2016
comment
@ Kode_12, вы можете комбинировать sr-only sr-only-focusable классы, чтобы отображать текст в фокусе - person ; 18.07.2016

arrow_upward
3
arrow_downward

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

При этом он не работает с Jaws. Альтернативный текст вычисляется только для элементов, имеющих роль ARIA.

Остающийся вариант - использовать ссылку, которая перейдет на страницу вашей корзины, используя как 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" />
person Adam    schedule 17.07.2016

arrow_upward
2
arrow_downward

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

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

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

Читая ваш вопрос, я думаю, что это то, что вам нужно.

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

Изменить: добавлены 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;
}
person aardrian    schedule 19.07.2016
comment
Я знаю о скрытых div для этого, но мне это не помогает. Программа чтения с экрана должна читать, что находится в элементе FOCUSED. Поэтому, если у меня есть скрытый div, программа чтения с экрана не будет иметь визуального индикатора того, что читается. - person Kode_12; 20.07.2016
comment
Я не понимаю, что вы подразумеваете под визуальным индикатором? Речь идет о программе чтения с экрана, значит, этот визуальный индикатор предназначен для разработчика? - person aardrian; 20.07.2016
comment
Когда фокусируемый элемент получает фокус, собственный визуальный индикатор браузера должен обернуть этот div пунктирной рамкой. Итак, если у меня есть div, который выдает, скажем, число, программа чтения с экрана прочитает это число, когда будет в фокусе. Но если бы я включил скрытый div для программы чтения с экрана, который включает более подробное описание того, что представляет собой это число, потребовалось бы перейти к этому div (хотя он остается скрытым), чтобы программа чтения с экрана могла его прочитать. Для моих целей я ищу способ включить описание div ВНУТРИ фокусируемого элемента, а не создавать дополнительный. Я надеюсь, что это проясняет ситуацию - person Kode_12; 20.07.2016
comment
Этот визуальный индикатор ничего не делает для пользователей программ чтения с экрана. В любом случае считывается визуально скрытый вложенный дочерний элемент <div>. Если вы чувствуете, что он должен получить фокус, чтобы программа чтения с экрана могла его услышать, в этом нет необходимости. Однако, если вы непреклонны, просто поставьте tabindex=0 на <div>. Тем не менее, я добавил tabindex. Вы тестировали его в JAWS? Он работает так, как вы указываете. Объявляет вложенный текст. - person aardrian; 20.07.2016
comment
Некоторых незрячих пользователей программ чтения с экрана может беспокоить потеря индикатора зрительного фокуса (когнитивные проблемы, дислексия, слабовидящие люди). - person Adam; 21.07.2016
comment
Я согласен, удаление индикаторов визуального фокуса - всегда плохая идея (и нарушение WCAG, поэтому я должен был сказать, что это слепые пользователи SR). Однако контент находится в <div>, а не в элементе с исходной фокусировкой. Если необходимо сфокусировать контент (например, с помощью клавиши табуляции), tabindex=0 сделает это, как я сказал выше. Или поместите контент в элемент с исходной фокусировкой. В любом случае, закадровый прием по-прежнему работает. Опять же, пример CodePen показывает, что это работает и настраивается. - person aardrian; 21.07.2016
comment
Приложите свой пример к ответу для сообщества stackoverflow, спасибо - person Kode_12; 25.07.2016

arrow_upward
0
arrow_downward

Пытаться:

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-hidden скроет диапазон из видимой области экрана, но будет читать его как находящийся внутри div, у которого есть фокус.

person UIPassion    schedule 20.07.2016
comment
Почему бы не использовать {display: none; говорите: normal;}? (Вместо вывода элемента за пределы экрана) - person miguel-svq; 20.07.2016
comment
Это хорошее предложение. Но элемент с отображением: нет; не будут прочитаны некоторыми программами чтения с экрана. Например, я попробовал этот подход в chrome с расширением Vox reader. Его не читали, и спрятать его с экрана - верный способ. Чтобы скрыть, мы также можем использовать скрытый атрибут в диапазоне .. Но даже это не было прочитано NVDA. - person UIPassion; 21.07.2016

arrow_upward
0
arrow_downward

Вы можете создать класс, например текст для чтения с экрана, с помощью следующего 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/).

person Ashwin Ramaswami    schedule 21.07.2016

arrow_upward
0
arrow_downward

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

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

Видно: Товары в тележке2

Читается как: «Товаров в корзине: 2»

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

person rvighne    schedule 14.07.2016
comment
я просто использовал корзину в качестве примера, мне нужен простой div без изображений для рендеринга - person Kode_12; 14.07.2016
comment
@ Kode_12: Понятно. Если вам не нужно изображение, то, вероятно, вам нужен ответ @ zer00ne; в противном случае это простейшее решение - person rvighne; 14.07.2016

arrow_upward
0
arrow_downward

Доступность (программы чтения с экрана) можно обеспечить с помощью тегов role и aria-label на div. Это может быть очень полезно при использовании svg.

<div role="img" aria-label="I can speak the text">
  <svg>...</svg>
</div>
person Akhil Ramani    schedule 30.06.2021