Accesibility dynamic content issue

Question

Is there any possible way to make dynamic values accessible for screen readers? The problem is if there is a value, it is read out but if there is no value, it is completely skipped by the screen-readers. However I want to read it out either as no value or null or something similar that could indicate disabled user that a particular value is not present or missing.

Using JAWS 19 with Chrome and IE.

Data Representation:

Payment Type Value
Cheque
Cash 20
DD

Issue: Now the issue is if there is value like 20 for Cash it is focused and announced. But if there is no value like for Cheque and DD it is completely skipped by JAWS.

I want JAWS to read it as blank/empty when the value will be not there.

Payment type and value are enclosed in a dl, dt and dd tags. Cannot share the actual code due to security reasons.

More info please, and a code sample would help. What do you mean by dyanmic values? Are the values changing and the new values need to be announced? Are you using elements? — slugolicious, Mar 08 '19 at 22:31
@slugolicious I modified my question a lil bit to answer your doubt. — Ramneek Singh, Mar 11 '19 at 09:15
If you can supply the JavaScript you are using and any type of sample HTML it would greatly help with supplying a solution. If this is entirely not possible, you should apply the same DOM update you make when the element has value to an element that is empty. Perhaps if the element has no value pass a "0" to it. — user1725382, Mar 11 '19 at 20:21

score 0 · Answer 1 · answered Mar 14 '19 at 08:22

I think I understand what you're asking for now. Your extra explanation has nothing to do with dynamic values. It sounds like you want blank values read as "blank" or "missing" or some kind of text instead of just silence. And your values are just plain text (inside a definition list, <dl>).

If that's a correct interpretation of your question then you can do what you want with visibly hidden text. That's text the sighted user can't see but is still available for a screen reader to read.

Your simple example should really be a table with two column headers, "payment type" and "value", and then "cheque", "cash", and "dd" should be row headers. Using a definition list doesn't really make sense for your example but perhaps it makes sense in your real code.

So do you have something like this?

<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>

Again, for your simple example, and if your real code is similar, a table should be used:

<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>

In either case, if you want the empty <dd> or the empty <td> to have something read by a screen reader, use a class that visually hides the text. See What is sr-only in Bootstrap 3?

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

or

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

WebAIM has a good article on "Invisible Content Just for Screen Reader Users".

score 0 · Answer 2 · edited Apr 26 '19 at 06:53

If its dynamic value, you can simply fire a javascript function that will supply the empty tag with a dummy content saying that there is no content.

If there is a value:

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

If there is no value

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

Make sure to attach aria-describedby attirbute to it parent elements, anchoring its class to make sure that contents in the <dt> tag are interpreted by the screen reader.

Accesibility dynamic content issue

2 Answers2