How to override jaws screen reader keystoke

Question

I would like to implement one particular key combination(Ctrl + Alt + Arrow keys) for navigating the cells in a table. But the issue that I am facing is that it is conflicting with the table navigation keystroke of Jaws.

I have tried various roles to get the event into the javascript that I want to use to enable the navigation but nothing works out.

Here is a snippet of the code:

<body>
    <button>test</button>

    <div class="wrapper">
        <table role="application" tabindex="0">
            <tr>
                <th tabindex="0">First Name</th>
                <th tabindex="0">Last Name</th>
                <th tabindex="0">Points</th>
            </tr>
            <tr>
                <td tabindex="0">somen</td>
                <td tabindex="0">Smith</td>
                <td tabindex="0">50</td>
            </tr>
            <tr>
                <td tabindex="0">Eve</td>
                <td tabindex="0">Jackson</td>
                <td tabindex="0">94</td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        $('body').on('keydown', function (event) {
            var code = event.keyCode || event.which;
            var ctrlAltPressed = event.ctrlKey === true && event.altKey === true;
            console.log('KEYDOWN: ' + code + ', ' + ctrlAltPressed);
        });
        $('body').on('keyup', function (event) {
            var code = event.keyCode || event.which;
            var ctrlAltPressed = event.ctrlKey === true && event.altKey === true;
            console.log('KEYUP: ' + code + ', ' + ctrlAltPressed);
        });
    </script>
</body>

I am not getting an event logged, when i press 'Ctrl + Alt + Arrow Key'.

I am using Jaws 17.0.1010 on Internet Explorer 11 on Windows 7. Any help in this would be greatly appreciated.

Here is the plunker link.

Update The console should give:

37, true // On pressing Ctrl+Alt+LEFT arrow

38, true // On pressing Ctrl+Alt+UP arrow

39, true // On pressing Ctrl+Alt+RIGHT arrow

40, true // On pressing Ctrl+Alt+DOWN arrow

But currently I am not getting anything logged when any arrow key is pressed along with Ctrl and Alt.

Can you explain why you want to override how JAWS users normally navigate tables? As in, have you done some user testing or research to warrant this? Is it a feature request from your JAWS users? — aardrian
My suggestion is to push back on the client. Without context (which would probably require NDA violations), this is probably going to end poorly for the client (worse for users). Particularly if the client does not test with real SR users early. — aardrian
I agree with @aardrian. As a JAWS user/tester, I have an expectation to be able to hit T to get to a table then ctrl+alt+arrow to navigate around the table. If you take that away from me to perform a different function, I'm going to think your website is broken and not accessible. Depending on the severity, it could result in a lawsuit. That being said, given your example, have you tried going into table layer mode (ins+space, then T) and then seeing if you get events for ctrl+alt+arrow? In table layer mode, you use just arrows to navigate through the table so ctrl+alt isn't needed. — slugolicious
@slugolicious I tried using table layer mode as mentioned by you. But not getting events here too. — jsbisht

Da Mahdi03 Da Mahdi03 · Accepted Answer · 2018-11-19T04:11:05

Simply use the event object passed with the keydown event. No need for external libraries:

var editable = document.querySelector("#editable");
var keysPressed = document.querySelector("#keysPressed")
editable.onkeydown = function(event) {
  if ([event.ctrlKey, event.altKey, event.metaKey].includes(true) === true) {
    //Cancel what was supposed to happen if, Ctrl, Alt, or Meta (Start key or Search key) are detected
    event.preventDefault();
  }
  //Print the Associated Information With The Keydown Event
  keysPressed.innerHTML = `Key Pressed: ${event.key}<br />ctrlKey Pressed: ${event.ctrlKey}<br />altKey Pressed: ${event.altKey}<br />shiftKey Pressed: ${event.shiftKey}<br />metaKey Pressed: ${event.metaKey}`
};

#editable {
  border: 2px solid;
}

<div id="editable" contenteditable="true"></div>
<div id="keysPressed"></div>
<br />
<ol>
  <li>Simply start typing anything (Including Shortcuts) into the textbox (Content-Editable Div) and the information will appear below.</li>
  <li>For the purpose of this demo, most keyboard shorcuts will not have any effect within the textbox.</li>
  <li>Go ahead, try them!!!</li>
  <ul>
      <li>Copy, Cut, Paste</li>
      <li>Ctrl+S</li>
      <li>Ctrl+P</li>
      <li>Ctrl+Alt+Del</li>
  </ul>
</ol>

How to override jaws screen reader keystoke

1 Answers