Доступность динамического контента

Question

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

Использование JAWS 19 с Chrome и IE.

Представление данных:

Тип платежа Значение
Проверка
Наличные 20
DD

Проблема: теперь проблема в том, что если есть значение, например, 20 для Денежных средств, оно фокусируется и объявляется Но если нет значения, как для Check и DD, оно полностью пропускается JAWS. Я хочу, чтобы JAWS читал его как пустое / пустое, когда значение будет отсутствовать.

Тип и стоимость платежа заключены в теги dl, dt и dd. Невозможно поделиться действительным кодом из-за соображений безопасности. Надеюсь, вы понимаете.

Answer 1

Если его динамическое значение, вы можете просто запустить функцию javascript, которая будет снабжать пустой тег фиктивным контентом, говоря, что контента нет.

Если есть значение:

<dl>
  <dt>Name</dt>
  <dd>John Snow</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>Gender</dt>
  <dd>Male</dd>
</dl>

Если значение отсутствует

<dl>
  <dt>Name</dt>
  <dd>John Snow</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>Gender</dt>
  <dd>Value not Present</dd>
</dl>

Обязательно присоедините aria-describedby attirbute к родительским элементам, привязав его класс, чтобы убедиться, что содержимое в теге <dt> интерпретируется программой чтения с экрана.

Answer 2

Мне кажется, я понимаю, о чем ты сейчас просишь. Ваше дополнительное объяснение не имеет ничего общего с динамическими значениями. Звучит так, как будто вы хотите, чтобы пустые значения читались как «пустые» или «отсутствующие» или какой-то текст вместо просто молчания. И ваши значения - это просто текст (в списке определений <dl>).

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

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

Так у вас есть что-то подобное?

<dl>
  <dt>payment type</dt>
  <dd>value</dd>
  <dt>cheque</dt>
  <dd></dd>
  <dt>cash</dt>
  <dd>20</dd>
  <dt>dd</dt>
  <dd></dd>
</dl>

Опять же, для вашего простого примера, и если ваш реальный код похож, следует использовать таблицу:

<table>
  <tr>
    <th scope="col">payment type</th>
    <th scope="col">value</th>
  </tr>
  <tr>
    <th scope="row">cheque</th>
    <td></td>
  </tr>
  <tr>
    <th scope="row">cash</th>
    <td>20</td>
  </tr>
  <tr>
    <th scope="row">dd</th>
    <td></td>
  </tr>
</table>

В любом случае, если вы хотите, чтобы пустой <dd> или пустой <td> что-то читал программой чтения с экрана, используйте класс, который визуально скрывает текст. См. Что такое sr-only в Bootstrap 3?

  <dt>dd</dt>
  <dd><span class="sr-only">empty</span></dd>

или

  <tr>
    <th scope="row">dd</th>
    <td><span class="sr-only">missing</span></td>
  </tr>

В WebAIM есть хорошая статья на тему " Невидимый контент только для пользователей программ чтения с экрана ".