Question

我遇到了以下问题：

我有一个列表UL，其中每个LI都有自己的删除按钮。

如果我点击第一个LI并删除它，使用屏幕阅读器JAWS 18，Jaws会跳转到列表中的THIRD元素。有时在删除其他LI之后，它可以直接跳转到UL。

的末尾

以下是我的标记https://jsfiddle.net/dogusev/w1xLo7uv/

的简单示例

谁遇到过这样的问题？它是如何解决的？

<!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：一步一步：

打开页面
运行JAWS
使用KEY DOWN导航到第一个列表项
读取其中的内容并通过KEY DOWN移动到此项目中的REMOVE BUTTON
点击REMOVE BUTTON
删除列表项后，通过KEY DOWN导航到下一个列表项
如果我们删除了第一个项目，导航后JAWS将专注于OLD第三个元素，而不是旧的第二个或第一个新项目，而不是新的第二个

从列表

0 个答案: