2

I faced the following issue:

I have a list UL, each LI in it has it's own remove button.

Using screen reader JAWS 18 if I click the first LI and remove it, Jaws jumps to the THIRD element in a list. Sometimes after removing some other LI it can jump directly to the end of the UL.

Here is the simple example of my markup https://jsfiddle.net/dogusev/w1xLo7uv/

Who faced such a problem? And how was it solved?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul id="theList">
    <li><span>1</span>  <ul> <li><button onclick="removeItem(this)">remove me</button></li> </ul> </li>
    <li><span>2</span>  <ul> <li><button onclick="removeItem(this)">remove me</button></li> </ul> </li>
    <li><span>3</span>  <ul> <li><button onclick="removeItem(this)">remove me</button></li> </ul> </li>
    <li><span>4</span>  <ul> <li><button onclick="removeItem(this)">remove me</button></li> </ul> </li>
    <li><span>5</span>  <ul> <li><button onclick="removeItem(this)">remove me</button></li> </ul> </li>
    <li><span>6</span>  <ul> <li><button onclick="removeItem(this)">remove me</button></li> </ul> </li>
    <li><span>7</span>  <ul> <li><button onclick="removeItem(this)">remove me</button></li> </ul> </li>
    <li><span>8</span>  <ul> <li><button onclick="removeItem(this)">remove me</button></li> </ul> </li>
    <li><span>9</span>  <ul> <li><button onclick="removeItem(this)">remove me</button></li> </ul> </li>
    <li><span>10</span>  <ul> <li><button onclick="removeItem(this)">remove me</button></li> </ul> </li>
    <li><span>11</span>  <ul> <li><button onclick="removeItem(this)">remove me</button></li> </ul> </li>
    <li><span>12</span>  <ul> <li><button onclick="removeItem(this)">remove me</button></li> </ul> </li>
</ul>

<script>
    var removeItem = function removeItem(el) {
        var theList = document.getElementById('theList'),
                liElement = el.parentElement.parentElement.parentElement;

        theList.removeChild(liElement);
    }
</script>


</body>
</html>

UPD: step by step:

  • Open page

  • Run JAWS

  • navigate with KEY DOWN to the first list item

  • Read content in it and move via KEY DOWN to the REMOVE BUTTON in this item

  • Click on REMOVE BUTTON

  • After list item removed navigate via KEY DOWN to the next list item

  • If we removed the first item, after navigation JAWS will be focused on the OLD third element, NOT ON THE OLD SECOND, or NEW FIRST ITEM, NOT ON THE NEW SECOND

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
dmitriy.g
  • 101
  • 1
  • 5
  • Personally I don't see such a behavior. I'm using JAWS 18 and IE 11, and clicking the "Remove me" buttons in your fiddle correctly removes the corresponding items. What is not obvious however is why do you wrap your buttons in separate `ul`s? This is not very good accessibility-wise, since you multiply the amount of lists to navigate. – Andre Polykanine Nov 25 '16 at 20:33
  • 1
    You have no focus management in your script. Whenever you are removing something that currently has focus you should move the focus somewhere, otherwise it jumps to the window (as it does for me using JAWS 17 / IE11). You are experiencing an issue you should not be experiencing because you should be managing focus. – aardrian Nov 26 '16 at 01:20
  • @aardrian, agreed. JAWS 18, however, moves me to the next "Remove me" button upon a button click. – Andre Polykanine Nov 26 '16 at 13:46
  • @AndrePolykanine The problem is not in which item removed. Let me explain step by step: 1) Open page 2) Run JAWS 3) navigate with KEY DOWN to the first list item 4) Read content in it and move via KEY DOWN to the REMOVE BUTTON in this item 5) Click on REMOVE BUTTON 6) After list item removed navigate via KEY DOWN to the next list item 7) If we removed the first item, after navigation JAWS will be focused on the OLD third element, NOT ON THE OLD SECOND, or NEW FIRST ITEM, NOT ON THE NEW SECOND – dmitriy.g Nov 28 '16 at 12:51
  • @aardrian added reproduce steps – dmitriy.g Nov 28 '16 at 12:57
  • Yep. I experience it now (upgraded to JAWS 18). Sounds like worth a bug report to FS since 17 did not do that. In the meantime I think you maybe try to work around this with focus management. Since you are allowing deletion of a node, you are responsible for managing focus after it is deleted, particularly if the AT gets it wrong. – aardrian Nov 28 '16 at 14:41
  • @aardrian, I still don't get it: I remove the first item, *just* after that my focus lands on the Remove button of the old second (new first), i.e., the very next item. So yes, Dmitriy, when you press Down Arrow, you are on the old third, new second item. Is this an erroneous behavior? Where should JAWS be after removing the item? Thanks! And yes, if it is a JAWS bug, I'll definitely report it to FS. – Andre Polykanine Nov 28 '16 at 23:07
  • @AndrePolykanine Yeap, the bug is that i expect JAWS to be at the beginning of the next items, which was after removed one. Not the next after it – dmitriy.g Nov 29 '16 at 10:24
  • @dmitriy.g, well, I'm not sure if it is a JAWS bug, but I'd manage focus as suggested in the previous comments. – Andre Polykanine Dec 01 '16 at 15:34

0 Answers0