Screen Reader hidden text for links
July 23, 2020 12:00 AM
My Lectora 18 courses are not passing my accessibility reviews due to the fact that the standards my corporate client require is that links read instructive text for the link in question (only for screen readers).
This could normally be done via a aria-describedby="description" where something like a hidden undefined/a
... However, in Lectora text blocks are not given this attribute, let alone one that could be used only by that specific anchor (think, a paragraph that contains two separate links in different places within the paragraph).
Has anyone come across this and/or a potential workaround? Again, having a solution that could use a hidden text instance for multiple links within a paragraph is ideal. I'll be adding this to the suggestion thread for the Lectora "Add hyperlink" dialog box as this really should be a property available to Lectora developers and is best suited to be incorporated by Trivantis (as this is now a requirement for many companies going forward).
-Darrell
Discussion (9)
The hidden text should read by a screen reader. it depends upon it's location in the title explorer. Darrell, If you can attend the LAUG meeting next week and share your screen, the other Lectora developers can try to assist you.
Hmmm, the invisible object on text wouldn't actually read in sequence by a screen reader or meet any accessibility standards.
@Web-foley, I haven't had this specific issue. One thought is to make the links be an invisible object on top of the text, rather than actual link text. If necessary you could actually use a Web Window and just code up something yourself.
If the link is meant to be text in the middle of a paragraph, then you are correct, the invisible rectangle or whatever would not work.
Hi Darrell (@Web-Foley)
According to the WCAG techniques I found here: https://www.w3.org/TR/WCAG20-TECHS/H30.html
It looks like the text inside the A tag is typically descriptive enough. Thanks for letting us know about this, interesting!
If your example description applies for all hyperlinks inside text blocks you can add the title attribute this way:
Page Level add an On Show Action to Run JavaScript with this scripting:
For Lectora Publisher, Inspire, or Desktop:
triv$(';[id*=text] a';, getDisplayDocument()).attr(';title';,';This link opens in a new browser window.';)
For Lectora Online it would be a little different:
triv$(';[name*=dcon2] a';, getDisplayDocument()).attr(';title';,';This link opens in a new browser window.';)
Hope that helps for now, but let's talk at the LAUG meeting!
We did open a ticket to look into adding to the hyperlink dialog as you suggest, thanks again!
Thanks Joe! Your solution sounds like it would work perfectly for my clients situation, as all of the links in their courses open in a new browser window.
I published an HTML with your Online script at page level, however, when testing it with NVDA reader and JAWS reader it did not include any title text. I forgot to mention I'm developing with Lectora 18, does that make a difference?
triv$('[name*=dcon2] a', getDisplayDocument()).attr('title','This link opens in a new browser window.')
-Darrell.
undefined
Hi Darrell (@Web-Foley)
For v18 (that's what I was calling Desktop) you should try this scripting:
triv$(';[id*=text] a';, getDisplayDocument()).attr(';title';,';This link opens in a new browser window.';)
That seemed to work. it seems to read the Title during link opening (I think I was expecting it on the initial reading of the link — a learning curve for me).
Thanks again Joe! Sent off to accessibility review, fingers crossed :)
-Darrell.
@ Joe - I received the attached code from Bill G. today. It sounds like you were able to address Darrell's question but I'm wondering how Bill's solution compares. Yes, let's discuss during tomorrow's LAUG meetup.
Thanks!
Discussions have been disabled for this post