Есть ли стандартный способ предоставить alt = text для программ чтения с экрана в рекламе / анимации HTML5?

Существует ли при создании анимации HTML5 метод, который можно использовать для «синхронизации» альтернативного текста, чтобы средства чтения с экрана читали данный элемент, который появляется в момент его появления (или запускается событием / временной шкалой)?

В идеале, что-то, что я мог бы вызвать с помощью GSAP (используя его как библиотеку анимации для своих проектов).

Или такая вещь может просто заставить программу чтения с экрана слишком часто говорить и останавливаться, что в конечном итоге будет казаться более разочаровывающим, чем на самом деле улучшая впечатление пользователя? Может, мне лучше просто вставить «сценарий» всей анимации, которая происходит, в одну строку в атрибуте alt="..."?

РЕДАКТИРОВАТЬ:

Этот вопрос в основном нацелен на рекламу HTML5, поэтому я предполагаю, что должен существовать неинвазивный способ считывания с экрана событий, происходящих в анимации, не требуя от пользователя фактического щелчка по рекламе, чтобы получить фокус (которая непроизвольно открылась бы вверх по ссылке, на которую ссылается объявление). В то же время, не будет ли нарушением пользователя «принудительно сфокусироваться» на динамическом тексте объявления, если пользователь во время чтения статьи / интересуется только другой областью страницы? Это вызывает множество других вопросов!


person bigp    schedule 18.12.2015    source источник
comment
Я никогда не использовал настоящую программу чтения с экрана, но согласно fangs надстройка эмулятора программы чтения с экрана, элементы холста просто не поддерживаются, а внутренний HTML-код холста будет читаться как обычный HTML. Итак, вы можете просто обновить canvas.innerHTML, чтобы добавить альтернативный контент. Но что касается того, как заставить программу чтения с экрана знать, что она обновлена, у меня действительно нет опыта работы с ней ...   -  person Kaiido    schedule 18.12.2015
comment
У меня нет опыта работы с GSAP, чтобы ответить, но я бы использовал некоторый JavaScript и добавлял слушателей к различным событиям анимации. Например, element.addEventListener('animationEnd',function... см. developer.mozilla.org/en-US/docs. / Web / API / AnimationEvent /, чтобы начать работу   -  person Blindman67    schedule 18.12.2015
comment
возможно, посмотрите это для части обновления, не проверенной stackoverflow.com/questions/3670570/   -  person Kaiido    schedule 18.12.2015
comment
@Kaiido: Хм, так что простое обновление innerHTML не вызовет клыков, чтобы перечитать его? Я протестирую и посмотрю, так ли это. Я могу представить, что это было бы проблемой, если бы его нужно было запускать с помощью какого-либо взлома.   -  person bigp    schedule 18.12.2015
comment
@Kaiido: Ах, извините, только что заметил вашу ссылку. Посмотрим на это решение, чтобы запустить программу чтения с экрана.   -  person bigp    schedule 18.12.2015
comment
@bigp, я не думаю, что это можно назвать взломом, поскольку в спецификациях определено, что UA, который не поддерживает элемент холста, должен видеть его как любой неподдерживаемый элемент и просто отображать его как своего рода <div> . Не знаю, нужно ли вам устанавливать атрибут aria-live на самом холсте или во внутреннем элементе.   -  person Kaiido    schedule 18.12.2015
comment
@Kaiido, извините, я не называл это решение взломом (не читал его до того, как сделал это заявление, подумал, что мне придется использовать какой-то полифилл, чтобы подключиться к некоторым специальным событиям браузера / prevent-default, которые Такие вещи). Это может быть проще, чем я думал, если дело просто в изменении содержимого элемента.   -  person bigp    schedule 18.12.2015
comment
@Kaiido. (продолжение) что, как говорится ... будет ли это подходящим подходом для, скажем, ... рекламы HTML5? Нужно ли мне сначала вызывать что-то вроде этого: $("#adDynamicText").focus(), чтобы объявление действительно считывалось с экрана во время воспроизведения?   -  person bigp    schedule 18.12.2015
comment
Боюсь, что это станет вопросом, основанным на мнении людей ... ИМО, для рекламы использование этих атрибутов как-то навязчиво ... Я не уверен, что хочу принять в этом участие :-)   -  person Kaiido    schedule 18.12.2015
comment
Учитывая, что анимация рассчитана по времени и (я предполагаю) у пользователя не будет возможности отрегулировать скорость, я бы поместил aria-hidden="true" на элемент холста, добавил визуально скрытый элемент, который имеет соответствующую информацию из объявления, и связал их с _ 2_.   -  person steveax    schedule 18.12.2015
comment
@steveax некоторые программы чтения с экрана не рассматривают холст как неподдерживаемый элемент? В противном случае, просто установить соответствующую информацию как внутренние элементы было бы достаточно, нет?   -  person Kaiido    schedule 18.12.2015
comment
Я предполагаю, что вы хотите, чтобы пользователь программы чтения с экрана мог взаимодействовать с рекламой. Установка aria-live на нем будет просто раздражать, и без этого, если он динамически обновляется, программы чтения с экрана не улавливают изменения, поэтому я рекомендовал поместить весь соответствующий контент, который будет отображаться на протяжении всей анимации, в визуально скрытый элемент.   -  person steveax    schedule 18.12.2015
comment
Разве это не лучше подходит для скрытых субтитров? Альтернативный текст должен быть не чем иным, как объявлением ____ или ____ анимации или кратким изложением их содержания.   -  person BoltClock    schedule 14.11.2018


Ответы (1)


Если вы создадите живой регион с помощью aria-live вот так,

<div role="region" id="announce" aria-live="polite">

И обновляйте содержимое внутри с помощью JavaScript в нужное время, программа чтения с экрана будет объявлять содержимое всякий раз, когда оно обновляется.

Вот дополнительная информация о живом регионе.

https://www.w3.org/TR/2008/WD-wai-aria-practices-20080204/#LiveRegions

Если вы хотите скрыть контент для пользователей, находящихся на сайте, вы можете использовать эту технику.

https://webaim.org/techniques/css/invisiblecontent/

Возможно, вы также можете создать кнопку для включения / выключения объявления, чтобы пользователи программ чтения с экрана могли выбирать, хотят они слышать описание в реальном времени или нет.

person jl303    schedule 14.11.2018
comment
Согласились, что aria-live - лучший способ заставить программы чтения с экрана читать новую информацию, но в приведенном выше фрагменте кода role="region" не требуется. Это заставляет <div> стать ориентиром, который вам не нужен. - person slugolicious; 15.11.2018
comment
Хорошая точка зрения. Тем не менее, я нашел довольно много примеров, конкретно устанавливающих роль региона. Я мог придумать две причины ... 1. Когда вы устанавливаете aria-live = polite, иногда пользователи могут пропустить объявление, когда программа чтения с экрана читает другую информацию. Тогда роль = регион может оказаться полезным, чтобы пользователи программ чтения с экрана могли легко найти конкретный регион с помощью функции ориентира и просмотреть содержимое вручную. 2. Может потому, что в народе это называют живым регионом? - person jl303; 16.11.2018
comment
Живой регион редко бывает областью, куда вам нужно ориентироваться. Он используется для оповещения о вещах для программ чтения с экрана. И указание role="region" - это только половина рецепта для создания ориентира. Также нужна метка (aria-label или aria-labelledby). См. w3.org/TR/wai-aria-1.1/#region, Авторы ДОЛЖНЫ дать каждому элементу с ролевой областью краткую метку, описывающую цель контента в регионе, и [регион] достаточно важен, чтобы пользователи, вероятно, захотели иметь возможность переходить к раздел легко и чтобы он был указан в сводке страницы - person slugolicious; 16.11.2018