Mouse over to reveal and keyboard accessibility

klytrinh Community Member Posts: 1
Hi there,

Are buttons that have a mouse over to reveal text, accessible by keyboard?

In other words, can I activate the button with the keyboard so that the text to shows?

This is my first time on this forum - hope I've posted in the right place.

- Karen Trinh


  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    I don't think there is a button shortcut but you could create one using JavaScript. Something like this (incomplete, just off top of my head):

    document.addEventListener("keydown", keyDownPressed, false);
    function keyDownPressed(e) {
    var keyCode = e.keyCode;
    if(keyCode==18) { //alt key
    var trgt = document.activeElement;
    //get the element name, e.g. button38btn
    //construct the onMouseEnter function's name, e.g. button38onOver
    //fire the function

    Alternatively, you could bind onfocus and onblur events to Lectora's Mouse Enter and Mouse Exit events, so that when learner uses Tab to select a button, the hover action fires, and when they use Tab to move on to the next button, the mouse-out action fires. Something like this (for every button on the page):
    document.getElementById('button38btn').onfocus = button38onOver
    document.getElementById('button38btn').onblur = button38onOut
  • lsilver
    lsilver Community Member Posts: 80
    Hi Karen - Welcome to the forum! This is definitely the right place to ask and answer questions related to accessibility.

    Keep in mind that any actions that require the use of a keyboard (like on Mouse Enter or on Mouse Exit) aren't accessible in that they cannot be recognized by assistive technology like screen readers, and they require the use of a mouse. One option then is to add an additional Mouse Click action to the button with duplicate actions to perform the same functionality.

    However, also keep in mind that any text that is shown or displayed on the page after the page loads also cannot be read by assistive technology. So if you have text that is initially hidden, and a button to then show that text, screen readers won't pick it up.

    One approach to work around these challenges is to add the mouse-over reveal interaction, but also add duplicate text on the page that isn't visible to a sighted user. Just layer the text such that assistive technology can read the text to any non-sighted user. You are essentially creating two versions of the text - one that is revealed through the mouse-over, and one that only AT users will access.

    I picked up this tip from these recorded webinars hosted by Lectora users:

    Built it 508 Compliant in Lectora:

    How to Put the Zing in Accessible eLearning:

    I've also attached an example I built in Lectora that you can take a look at. It's a library object, so just drag and drop it onto an open title.

    I hope this helps!