Screen Reader hidden text for links

web-foleyweb-foley Community Member Posts: 33 ♪ Opening Act ♪
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

  • carlfinkcarlfink Community Member Posts: 695 ✶ Headliner ✶
    @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-foleyweb-foley Community Member Posts: 33 ♪ Opening Act ♪
    Hmmm, the invisible object on text wouldn't actually read in sequence by a screen reader or meet any accessibility standards.
  • comalley5856comalley5856 Community Member Posts: 76
    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.
  • carlfinkcarlfink Community Member Posts: 695 ✶ Headliner ✶
    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.
  • wheelswheels Administrator Posts: 476 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-foleyweb-foley Community Member Posts: 33 ♪ Opening Act ♪
    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.

     
  • wheelswheels Administrator Posts: 476 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-foleyweb-foley Community Member Posts: 33 ♪ Opening Act ♪
    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.
  • comalley5856comalley5856 Community Member Posts: 76
    @ 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!
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!

The Big Launch - Exciting News From eLearning Brothers


eLearning Brothers is all set to rock the eLearning world in 2021, and we want to let you in on the plans! Join us for The Big Launch event, where you’ll hear from company leaders like Andrew Scivally, Co-founder and CEO, Christian Weibell, CPO, and more special guest stars. We’ve got a lot of eLearning awesomeness up our sleeve—you won’t want to miss The Big Launch.

REGISTER NOW