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