Skip Main Navigation link 专注于页面的主要内容然后忽略页脚中的内容是否可以接受？

Question

在使用 NVDA 测试我的一个网站时，我意识到当我单击“跳过主导航”link 时，NVDA 仅读取 link 指向的主容器内的内容。由于 Footer 紧随其后，NVDA 不会读取其中的任何内容。在页脚中添加了额外的 links 以及一些重要的政策 links，我想知道这是否会给屏幕 reader 用户带来任何问题。我知道他们可以继续使用标题、制表符和使用箭头键进行导航，但我想知道是否有人知道这是否会给他们带来糟糕的用户体验，以及是否有人有任何建议。

Answer 1

不，这不是问题。他们会在任何屏幕中使用导航键（接下来阅读）reader。

在 NVDA 中，这通常是 NVDA 键和向下箭头。

这是预期的行为。（假设您的页面使用了正确的标记并且没有问题，没有看到页面是不可能分辨的）。

一个建议是使用多个跳过 link 以允许人们直接访问页脚（特别是如果它包含重要信息）。您可以通过简单地包括多个跳过 links 并让它们出现在焦点上来做到这一点。

例子

多次跳过 link 的快速示例。根据您在 window.

.skiplink {
    padding:6px;
    position: absolute;
    top:-40px;
    left:0px;
    color:#000000;
    border-right:1px solid white;
    border-bottom:1px solid white;
    border-bottom-right-radius:8px;
    background:transparent;
    -webkit-transition: top 1s ease-out, background 1s linear;
    transition: top 1s ease-out, background 1s linear;
    z-index: 100
}
.skiplink:focus {
    position:absolute;
    left:0px;
    top:0px;
    background:#F1B82D;
    outline:0;
    -webkit-transition: top .1s ease-in, background .5s linear;
    transition: top .1s ease-in, background .5s linear
}
nav{
   padding-bottom: 50px;
}
main{
margin-top: 200px;
}
li {
    display:inline-block;
    float:left;
    width:20%;
    background-color:#000;
    padding:5px;
    text-align:center;
    border:1px solid #fff;
}
li a {
    color:#fff;   
}

li a:hover, li a:focus {
    color:#ccc;   
}

#mainContent {
    clear:both;   
}

h2 {
    margin-top:15px;            
}

footer{
  margin-bottom: 300px;
  background-color: #ccc;
  padding: 30px;
}

<a href="#mainContent" class="skiplink">Skip to Main Content</a>
<a href="#footer" class="skiplink">Skip to Footer</a>
<nav>
<ul>
    <li><a href="#">First</a>
    </li>
    <li><a href="#">Second</a>
    </li>
    <li><a href="#">Third</a>
    </li>
    <li><a href="#">Fourth</a>
    </li>
    <li><a href="#">Fifth</a>
    </li>
    <li><a href="#">Sixth</a>
    </li>
    <li><a href="#">Seventh</a>
    </li>
    <li><a href="#">Eighth</a>
    </li>
</ul></nav>
<main id="mainContent">
<h1>Main Content</h1>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jf
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
<p> 
fjdsk jflk;dsj lk;gfdjlk; fjds;lk jgdlfk;hg kljdsah foiwjrvoienmiu pjgoidfj foipje fgds;lk jlk;fdgajlk;f jsl;kgj s;lka jgl;kdfasj glk;dsa jl;k fjdsal;ka 
</p>
</main>
<footer id="footer">
 SKIPPED TO FOOTER
</footer>

Answer 2

此行为没有问题。

WCAG 2.1 中处理此主题的部分是 Success Criteria 2.4.1, Bypass Blocks。

“跳过链接”或“bypass blocks”的目的是：

to bypass blocks of content that are repeated on multiple Web pages

页脚内容符合在每个页面上重复的内容。

Skip Main Navigation link 专注于页面的主要内容然后忽略页脚中的内容是否可以接受？

Is it acceptable that the Skip Main Navigation link focuses on a page's main content and then ignores what is in the footer?

accessibility

nvda

例子