Как сделать всплывающие подсказки Twitter Bootstrap доступными?

Question

Как вы, возможно, знаете, всплывающие подсказки в Twitter не доступны (I.E. они не читаются программами чтения с экрана). Чтобы это произошло, следующие вещи должны быть сделаны:

1. После вызова функции tooltip(), генерируемый текстовый элемент (тот, который содержит текст всплывающей подсказки) должен получить новый атрибут, добавленный к нему: aria-hidden="true".
2. Исходный элемент (тот, который был вызван tooltip()) должен получить добавленный к нему атрибут: aria-describedby="#<tooltip-id>", где tooltip-id ссылается на идентификатор нового элемента, который был только что создан выше.

С образом Javascript в настоящее время работает выбирает все элементы с классом .tooltip и применяя функцию tooltip() к нему, я задаюсь вопросом, как я могу сделать это без изменения исходного кода функции tooltip().

Ниже приведен пример кода для кнопки:

<span role="button" rel="tooltip" title="Add Youtube Video" class="fancyPostButton span1" tabindex="0" style="-webkit-user-select: none;padding-top: 10px"> 
    <div id="fancyPostVideoPicker" class="fancyPostAttachment videoAttachment glyphicons film centerMe"> 
     <i></i> 
    </div> 
</span> 

Answer 1

От взглядов на main example в документации Bootstrap они клавиатуры доступны (т.е. шоу только с клавиатуры пользователей) при использовании на natively- настраиваемые элементы, и они используют текстовое содержимое для кнопок.

Таким образом, примеры Bootstrap по умолчанию не так уж плохи, если текст подсказки был необходим для понимания кнопки (например, вашего примера), которая возникает, когда они создают проблему доступности.

Итак, главное, чтобы кнопка не содержала контента, поэтому программа чтения с экрана не будет знать, с чего начать. (NB: Некоторые читатели экрана могут вернуться к заголовку, если это была родная ссылка или кнопка, но вы не должны полагаться на это.)

Чтобы сделать кнопку, которая показывает значок шрифта, вам нужны контент и значок, поэтому два элемента:

<a href=”target.html”>
  
    <span class=”icon-home” aria-hidden="true"></span>
  
    <span class=”alt”>Add YouTube Video</span>
  
</a> 

Затем используйте CSS, чтобы скрыть текст за кадром. Скрытый ARIA означает, что символ шрифта не будет считан.

Я бы также рекомендовал использовать кнопку или ссылку, а не span или div, так как тогда вам не нужно использовать javascript для имитации onclick и т. Д. В этом случае у вас также есть встроенный элемент (span), обернутый вокруг элемента блока (div), который также недействителен HTML.

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

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

Answer 2

Можно посмотреть на W3C & ВСС для направления http://www.w3.org/WAI/PF/aria-practices/#tooltip