NVDA无法使用箭头键在导航中读取文本

本文介绍了NVDA无法使用箭头键在导航中读取文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am facing an issue with the NVDA screen reader where it's not reading the links or text while navigating.

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，并且如果我从子菜单移至下一个菜单，例如，从首页转到其子菜单，移至关于我们菜单旁边，则不会显示关于我们。相反，它会读取关于我们的子菜单项
知道什么地方可能出问题了吗？

I am using arrow keys to navigate with NVDA, and if I move from a sub menu to the next menu, e.g., going from "home" to its sub menu, moving next to the "About us" menu, it wont read "About us". Instead it reads the sub menu items of "About us"Any idea what could be going wrong?

读取内容：

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

NVDA

NVDA无法使用箭头键在导航中读取文本

问题描述

推荐答案