-1

When visually challenged user click on the product link ,

  • A new tab gets loaded in the same page however screen reader remains silent A new tab contains table records with column header product id, product name, product description, etc.

  • when user click on show here link , another table gets loaded in the same page and same tab however screen reader does not read out anything. table contains column header product id, product name, product description, etc.

so what should be the expected result? What could be the defect fix needed ?

enter image description here

Victor
  • 17
  • 5

1 Answers1

1

When new content is added to the page, it's considered dynamic content and typically falls under 4.1.3 Status Messages. That guideline defines "status messages" as:

change in content that is not a change of context, and that provides information to the user on the success or results of an action, on the waiting state of an application, on the progress of a process, or on the existence of errors

In your case, clicking on the link adds another table to the page so it's the "result of an action".

(As a separate note, if the product is truly a link, then using a link to perform an action is not the right element to use. A <button> is for actions. A link is for navigating to another location.)

When new content is added to the page, you should tell the screen reader user about it. You don't necessarily have to read all the content that was added, especially if there's a lot of data such as a table, but minimally you need to let the user know new content was added and preferably, how to find the new content.

This is typically done with live regions. See aria-live. There's a nice talk on live regions on the "Accessibility Talks" page.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • suppose when a user clicks on the link, a table is loaded, so screen reader announcement should be a new content is added or a table is added. which could be the correct message ? – Victor Mar 16 '23 at 03:35
  • Yes, that was one of my suggestions. – slugolicious Mar 16 '23 at 18:33
  • so if user clicks on product id link then screen reader should announce a table is added. if user clicks on show here link then screen reader should announce a new tab is added. is it fine ? any changes required apart from this ? – Victor Mar 18 '23 at 05:21
  • Sounds like it should work. But I can’t say for sure without seeing the website. – slugolicious Mar 18 '23 at 22:11
  • I have another doubt, when I click on search button, a table is added in the page. how the screen reader announcement should be ? search successfully completed. or table with #rows is displayed. pls provide your suggestion ? – Victor Mar 19 '23 at 08:51
  • can you pls share any example site that when user click on search button, there is a table is added in the page. screen reader should be announced table with no of rows are available. – Victor Mar 21 '23 at 16:44
  • I have clients that pay me for accessibility work so they are my first priority. When I have time, I give free advice on stackoverflow. Perhaps someone else will read this and provide an example. I've already spent more than enough pro bono time on several of your postings so I'm staying silent for a bit while I do other work. – slugolicious Mar 21 '23 at 22:48
  • I'm really sorry. I hope you can answer my question. – Victor Mar 22 '23 at 03:45
  • I have posted new question https://stackoverflow.com/questions/75814242/screen-reader-does-not-announes-the-table-with-no-of-rows-are-available. can you pls answer actually i could not get any answer till now – Victor Mar 22 '23 at 15:55
  • Could you please share any example site for the reference as I was not getting – Victor Mar 26 '23 at 04:28
  • I found this url https://www.w3.org/WAI/tutorials/forms/notifications/#after-submit when i reads through NVDA, not reading the success message. – Victor Mar 26 '23 at 04:37