I have created a training module that has several slides where users click on terms to display additional information about each term. When the user clicks the button it shows a new text box with the information. Does anyone know of a way to get a screen reader to read this shown box after the user clicks on the button to display it? My current solution is to have text that would be available by clicking on the buttons hidden from view in one long list that a screen reader will read but sighted users will not see, but this is not an ideal solution. Thanks for any suggestions!
Users with screen readers should still be able to navigate this interaction – rather than clicking they’ll use the tab key to cycle through elements and the space bar to ‘click’. Check that the reading order (that is, the order of the elements in the sidebar) makes sense and JAWS users should be able to navigate it.
Another solution is to add an “Accessible Version” button which shows all of the revealed text on the page in an easy-to-read format. You can make this button transparent and very small so that sighted users won’t accidentally click it.
My understanding has been that any text that is hidden on page show won’t be picked up by screen reading software–the text has to be on the page on show for a screen reader to “see” it. I just checked a page we had using the WAVE toolbar and, when I viewed the page in “text only” format, the hidden text didn’t show on page load (as expected). However, it didn’t show when I clicked the button to show the text.
I agree with making an easy-to-read alternative page with the content laid out in a straight-forward manner.
Another alternative would be to copy the text that is hidden on show in a new text box and hide it on the page. The easiest way is to hide it behind an image by making it small or have it match the background. That way, the screen reader would read it when the page loads. However, you have to be careful that reading order is correct when you do this and that you don’t have the “hidden” text layered over the top of content on the page. Again, having a text-only alternative is the best way to go.