NVDA 不使用箭头键读取导航中的文本答案

【问题标题】：NVDA not reading text in navigation using arrow keysNVDA 不使用箭头键读取导航中的文本
【发布时间】：2019-11-20 01:34:52
【问题描述】：

我在使用 NVDA 屏幕阅读器时遇到了一个问题，它在导航时无法读取链接或文本。

My CodePen

HTML

<nav role="navigation">
        <ul class="list">
            <li class="list-item">
                <a class="link" href="#" aria-haspopup="true" aria-expanded="false">Home</a>
                <div class="sub-nav">
                    <ul class="sub-nav-list">
                        <li>
                            <a href="">First list item in home</a>
                        </li>
                        <li>
                            <a href="">Second</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="list-item">
                <a class="link" href="#" aria-haspopup="true" aria-expanded="false">About Us</a>
                <div class="sub-nav">
                    <ul class="sub-nav-list">
                        <li>
                            <a href="">First list item in about us</a>
                        </li>
                        <li>
                            <a href="">2nd</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="list-item">
                <a class="link" href="#" aria-haspopup="true" aria-expanded="false">Contact</a>
                <div class="sub-nav">
                    <ul class="sub-nav-list">
                        <li>
                            <a href="">First list item in contact</a>
                        </li>
                        <li>
                            <a href="">two</a>
                        </li>
                    </ul>
                </div>
            </li>

        </ul>
</nav>

CSS

.sub-nav {
       display:none;
       background: greenyellow;
   }

   li.hover .sub-nav {
    display:block;
   }



   .list > li {
       float:left;
       margin: 0;
       background: grey;
       text-align: center;
   }
   ul {
       margin: 0;
       padding: 0;
       list-style-type: none;
   }
   .list {
       margin:20px auto;
       padding: 0;
       list-style-type: none;
       width: 800px;
   }

   .sub-nav-list a {
       padding:20px 10px;
       margin-top:10px;
       display:inline-block;
       background: greenyellow;
   }

   .sub-nav-list a:first-child {
       margin-top: 0;
   }

   .list-item > a {
       display:block;
       padding: 20px;
       width: 200px;
       color: white;
   }

JS（使用 jQuery）

$(".list-item").mouseenter((e) => {
    $(e.currentTarget).addClass('hover')
    $(e.currentTarget).find('a.link').attr('aria-expanded',true)
})
$(".list-item").mouseleave((e) => {
    $(e.currentTarget).removeClass('hover')
    $(e.currentTarget).find('a.link').attr('aria-expanded', false)
})

$(".list-item").focusin((e) => {
    $(e.currentTarget).addClass('hover')
    $(e.currentTarget).find('a.link').attr('aria-expanded', true)
})

$(".list-item").focusout((e) => {
    if(e.currentTarget.contains(e.relatedTarget))
    {
        return
    }
    $(e.currentTarget).removeClass('hover')
    $(e.currentTarget).find('a.link').attr('aria-expanded', false)
})

我使用箭头键在 NVDA 中导航，如果我从子菜单移动到下一个菜单，例如，从“主页”移动到其子菜单，移动到“关于我们”菜单旁边，它不会阅读“关于我们”。相反，它会读取“关于我们”的子菜单项知道可能出了什么问题吗？

内容：

navigation landmark 
list  with 3 items
collapsed  visited  subMenu  link
Home
list  with 2 items
visited  link
First list item in home
visited  link
Second
out of list
list  with 2 items
visited  link
First list item in about us

【问题讨论】：

标签： html accessibility

【解决方案1】：

很抱歉帮不上忙，但对我有用：

Home
collapsed  visited  subMenu  link
list  with 2 items
First list item in home
visited  link
Second
visited  link
About Us
expanded  visited  subMenu  link

我正在使用 NVDA 2019.2.1

【讨论】：

这很奇怪，我也在使用相同的版本，但它对我来说缺少“关于我们”。刚刚将我的语音日志添加到我原来的问题中
另外，只是为了检查一下，您使用的是导航箭头键还是标签。使用选项卡它对我来说也很好，但是使用箭头键，它不会
标签。在我的配置中，箭头通常逐个字母地读取单词。现在，我很幸运拥有良好的视力，也许真正的 NVDA 用户配置不同。