Screen Reader hidden text for links

web-foley
web-foley Community Member Posts: 55 ✶ Headliner ✶
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 <div id="description">This link opens in a new browser window</div> exists. Then, within the anchor tag

... However, in Lectora we're only able to associate by Class and not ID.

Alternatively, a Title may work,  a href="..."
title="This link opens in a new browser window">My link</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

Comments

  • carlfink
    carlfink Community Member Posts: 968 ✭ Legend ✭
    @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.
  • web-foley
    web-foley Community Member Posts: 55 ✶ Headliner ✶
    Hmmm, the invisible object on text wouldn't actually read in sequence by a screen reader or meet any accessibility standards.
  • comalley5856
    comalley5856 Community Member Posts: 75 ☆ Roadie ☆
    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.
  • carlfink
    carlfink Community Member Posts: 968 ✭ Legend ✭
    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.
  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 595 eLearning ROCKSTAR Admin Team
    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$(&#039;[id*=text] a&#039;, getDisplayDocument()).attr(&#039;title&#039;,&#039;This link opens in a new browser window.&#039;)

    For Lectora Online it would be a little different:
    triv$(&#039;[name*=dcon2] a&#039;, getDisplayDocument()).attr(&#039;title&#039;,&#039;This link opens in a new browser window.&#039;)

    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!
  • web-foley
    web-foley Community Member Posts: 55 ✶ Headliner ✶
    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.

     
  • wheels
    wheels Florida USACommunity Member, Administrator, Moderator, Rockstar Manager Posts: 595 eLearning ROCKSTAR Admin Team
    Hi Darrell (@Web-Foley)

    For v18 (that's what I was calling Desktop) you should try this scripting:

    triv$(&#039;[id*=text] a&#039;, getDisplayDocument()).attr(&#039;title&#039;,&#039;This link opens in a new browser window.&#039;)
  • web-foley
    web-foley Community Member Posts: 55 ✶ Headliner ✶
    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.
  • comalley5856
    comalley5856 Community Member Posts: 75 ☆ Roadie ☆
    @ 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!