NVDA无法使用箭头键在导航中读取文本 [英] NVDA not reading text in navigation using arrow keys

问题描述

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

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

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

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

推荐答案

对不起，帮助不大，但对我有用：

Sorry to be of little help, but works for me:

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

I'm using NVDA 2019.2.1

这篇关于NVDA无法使用箭头键在导航中读取文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！