Программа чтения с экрана всплывающей подсказки будет читать текст, но текст останется скрытым - PullRequest
Новая
       6

Программа чтения с экрана всплывающей подсказки будет читать текст, но текст останется скрытым

0 голосов
/ 24 сентября 2018

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

Так вот, что у меня есть: 

<div class="sub-item content-spaced">
  <span class="text">{{translations.taxEstLabel}}</span>
  {{#hasEstimatedTax}}
  <span class="value">{{totalEstimatedTax}}</span>
  {{/hasEstimatedTax}}
  {{^hasEstimatedTax}}
  <div aria-live="polite" class="tooltip" role="tooltip" tabindex="0" data-info-text="{{translations.taxEstMessage}}"><span
      style="display:none">{{translations.taxEstMessage}}</span></div>
  {{/hasEstimatedTax}}
</div>

Я просто хочу, чтобы программа чтения с экрана читала, что внутри атрибута data-info-text, но выглядит как программа чтения с экранане работает таким образом.Поэтому я попытался создать элемент span с текстом внутри, но визуально скрывая элемент span, но он скрывает сообщение от программы чтения с экрана и, следовательно, не может его прочитать.

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

1 Ответ

0 голосов
/ 24 сентября 2018

Рассматривали ли вы использование aria-labelledby вместо data-* атрибутов?Возможно, вам придется присвоить атрибут role, так как вы используете элементы div и span.

В этой статье дается обзор функциональности и использования aria-labelledby: https://developer.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria-describedby/

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

/* -- HTML --*/

<div class="hidden-text">Some Hidden Text.</div>

/* --- CSS --- */

.hidden-text { 
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
...