4

So the HTML code is this:

<div style="visibility: hidden; display: none; right: 0px;"> 
<img id="processing" src="PT_LOADING.gif" alt="Processing... please wait" title=""> </div>

Even though the ALT text is provided, upon changing the style to show the icon (visibility:visible), it is not read in the time gap when the loading icon appears.

role=alert is not a feasible solution since this is not an alert

KannarKK
  • 1,593
  • 20
  • 35

2 Answers2

6

You need to add the following attributes to your DIV attributes role="alertdialog" aria-busy="true" aria-live="assertive"

<div style="visibility: hidden; display: none; right: 0px;" role="alertdialog" aria-busy="true" aria-live="assertive"> 
<img id="processing" src="PT_LOADING.gif" alt="Processing... please wait" title="" />
</div>
Kevin Damen
  • 97
  • 6
  • What if I had to read out the message only if it takes too long to load? How do I poll without using AJAX? – KannarKK Nov 17 '15 at 05:00
  • 3
    Please provide an explanation or source on why we should be adding all of those attributes. – Ralph David Abernathy Jul 05 '16 at 20:39
  • 4
    it should be `role=alert` not `role=alertdialog`. From the MDN docs "Unlike regular alerts, an alert dialog must have at least one focusable control and focus must be moved to that control when the alert dialog appears" https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role. Its also unnecessary to have `aria-live=assertive` because that is set by using `role=alert` – Justin Kahn Jan 30 '19 at 03:43
  • 1
    You should use both aria-live="assertive" and role="alert" because readers support one or the other. Using both just keeps extra protection that way. – Schw2iizer Jun 11 '19 at 17:01
  • 2
    Why aria-busy is used here? According to MDN, aria-busy state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update. Here, we don't need to wait for the loader to finish loading, instead we are interested in informing the user that we are loading something at the moment. – Ankit Choudhary Nov 08 '21 at 18:08
  • @AnkitChoudhary is correct. The aria-busy attribute is not a state for loading messages in the content; it is used to indicate to assistive technology software that the content it is applied to is in the process of being dynamically updated and should be ignored until it is ready. However, seemingly few screen readers actually honour the aria-busy attribute anyway. https://www.tpgi.com/short-note-on-being-busy/ – Jon Gibbins Feb 03 '23 at 14:46
1

After a day of fiddling with a similar issue, I was able to finally get this working with a lot of reading and experimenting. I'm using NVDA for a screen reader.

<div class="loader" show.bind="isLoading" role="alert" aria-label="Loading"></div>

The following attributes were key: role and aria-label. Above example makes NVDA announce "Loading alert" once isLoading becomes true. Important to note is that NVDA pronounces the aria-label value, followed by "alert". Using roles "log" or "status" did not end up in any announcement.

Asen Tahchiyski
  • 89
  • 2
  • 7
  • 1
    Thanks for sharing. How did you handle the end of loading, as it will never be announced? – Andy Aug 27 '21 at 16:16