所属分类：web前端开发
从广义上讲，这是您的网站必须能够安全供所有用户导航的原则。这包括仅使用键盘即可访问整个网站的准则。此外，您的网站响应用户输入（通过键盘或其他方式）的方式应该是可预测的、清晰的和安全的。
最后一点主要是指确保默认情况下禁用网站上任何可能引起癫痫发作的功能，并在启用之前向用户发出警告。该原则还提供了为用户提供“足够的时间”来完成任务的指导原则，但我们在此不做介绍。
仅使用键盘即可导航和使用您的网站是可访问性最重要的方面之一。盲人用户几乎完全依赖键盘，而那些有运动障碍的用户可能难以控制鼠标，因此也依赖键盘访问。有些人可能很少或根本不使用双手，而是依赖较大的键盘、口棒、头棒、单开关或 Sip 'n' Puff。
您可以在 WebAIM 网站上找到这些设备的说明，但它们本质上都是将用户输入转化为键盘敲击。如果您的网站无法通过键盘访问，那么所有依赖这些设备的用户将无法使用您的网站。
幸运的是，使您的主题或插件键盘可访问相对简单。以下是一些要点：
许多主题依靠将鼠标悬停在菜单项上来显示任何子菜单。这很好，但通常如果父菜单项获得焦点（而不是悬停），则子菜单将不会出现。如果您复制 :hover 的任何相关规则并将其应用到 :focus ，这将让您成功一半：子菜单项将显示为整个菜单中的用户选项卡。但是，一旦用户向下切换到子菜单，父菜单就会失去焦点，子菜单也会消失。这可以使用 JavaScript 来纠正。本系列的下一篇文章将详细介绍这一点以及如何提供非 JavaScript 后备。
您不需要执行任何操作即可使“本机”表单输入（选择、输入、单选等）键盘可访问。但是，如果页面的任何方面（包括表单字段）获得焦点，必须仅使用键盘即可将其移开，否则用户实际上会陷入困境。这通常是默认行为，因此您应该避免覆盖它。
该指南有两种类型的建议：明确用户当前所在的位置，以及更轻松地到达他们想去的地方。
在执行此操作时遵循建议的一部分涉及许多主题已经做的事情：跨页面拥有一致的导航菜单，突出显示当前页面，并允许用户快速确定他们在网站上的位置（例如使用面包屑） .
能够使用键盘浏览网页的一个关键部分是能够准确地看到当前获得焦点的内容。当前获得焦点的元素应该明显不同，并且可以与页面的其余部分区分开来。因此，您应该避免 outline:none; 除非您要提供替代样式：
微博登录
QQ登录a:focus{
outline: none;
background: #ee7b00;
color: #fff;
}
键盘辅助功能的另一个重要部分是 Tab 键的行为可预测且自然。例如，如果焦点当前是表单字段，我希望下一个选项卡应该将我带到该表单中的下一个字段。如果按 Tab 键导致焦点在页面上不规则地上下跳跃，那么这会让用户感到沮丧和迷失方向。
避免使用 tabindex：tabindex 属性允许您更改通过 Tab 键访问元素的顺序。但是，如果您遵循本系列第 2 篇文章中有关 DOM 结构的建议，则 Tab 键顺序应反映页面的“自然”顺序。虽然 tabindex 有它的用途，但这些用途很少，而且它用于“修补”不良站点结构可能会产生更多问题。最好的方法是避免使用 tabindex，而是让您的主题生成逻辑 DOM 结构，并使用 CSS 来改变视觉呈现。
屏幕阅读器用户经常会在链接之间跳转，跳过其间的文本，并且在每个链接处屏幕阅读器都会读出“链接 [链接文本]”。因此，如果这些用户反复听到“链接阅读更多”、“链接点击此处”或“链接继续阅读”，这对他们来说是非常没有帮助的。在这种情况下，向链接添加上下文只需提供帖子的标题。因此，我们没有“继续阅读”，而是“继续阅读[帖子标题]”。
要在 WordPress 主题中执行此操作，我们只需连接 excerpt_more 过滤器并附加我们的“继续阅读”链接：
//Adds "continue reading X" link
function mytheme_continue_reading_link() {
return '<p class="read-more">'
. sprintf(
__( '<a href="%s">Continue reading %s</a>', 'mytheme' ),
esc_url( get_permalink() ),
esc_html( get_the_title() )
)
.'</p>';
}
//Replaces "[...]" (appended to automatically generated excerpts) with an ellipsis and mytheme_continue_reading_link().
function mytheme_auto_excerpt_more( $more ) {
return ' …' . mytheme_continue_reading_link();
}
add_filter( 'excerpt_more', 'mytheme_auto_excerpt_more' );
这为“阅读更多”链接提供了正确的上下文。不过，还可以进行一些改进。
首先，添加文章标题通常会破坏主题的美感，并且对于有视力的用户来说，这是多余的，因为“阅读更多”链接相对于文章标题和摘录的位置将使上下文显而易见。为了解决这些问题，我们可以“隐藏”文章标题，但屏幕阅读器仍然会阅读它们。
这意味着我们不能使用 display:none 或visibility:hidden; 作为屏幕-读者了解这些属性并会忽略内容。相反，我们可以将文本放置在屏幕外或使用 clip 属性：
.screen-reader {
position: absolute!important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
“屏幕阅读器类”有很多不同的示例；这个特定的类取自 Bootstrap 3。接下来，将适当的类添加到文章标题中，具体将上面的第 5 行替换为：
__( '<a href="%s">Continue reading <span class="screen-reader">%s</span></a>', 'mytheme' ),
其次，虽然这将为用户提供链接指向何处的指示，但他们仍然必须在到达帖子标题之前收听“链接继续阅读...”。理想情况下，您应该将冗余信息放在链接文本的末尾，或者从锚标记中完全省略它，以减少识别链接所需的时间。
对于屏幕阅读器用户来说，不在链接文本前面添加冗余信息的另一个好处是屏幕阅读器通常会在页面上生成链接列表。如果您的许多链接都以相同的文本开头，这可能会使找到所需链接变得更加困难，特别是如果您的联系页面的链接位于“H”下方，因为它显示“如何联系我们”。
<title> 标签应使用 <title> 标签来识别用户的当前位置。该信息由屏幕阅读器读出，并显示在搜索结果以及屏幕窗口和浏览器选项卡中。为了让用户轻松识别他们所在的位置（或搜索到的内容），此标题标签应包含页面的标题和网站名称。理想情况下，网站名称应该放在最后，这样使用屏幕阅读器的人就不必在每次页面加载时先听您网站的名称，然后才能听到页面标题。
标题标签可以添加到主题中：
<title><?php wp_title(); ?></title>
要添加网站标题：
/** * Append site title to page title */
function mytheme_wp_title( $title, $sep, $seplocation ){
return $title . ' | ' . get_bloginfo('name');
}
add_filter( 'wp_title', 'mytheme_wp_title', 10, 3 );
通常，网站会有一个通用的标题和导航菜单，除了突出显示用户当前位置之外，它们将保持完全相同。必须通过选项卡浏览所有这些链接，或者在每次页面加载时听屏幕阅读器重复它们，是乏味且令人沮丧的。我们这些拥有良好（足够）视力和运动技能的人可以立即跳转到内容，并且我们可以让那些没有良好视力和运动技能的人也能轻松完成此操作。
如果您在 WordPress 管理员中，并在页面加载后按 Tab，您会注意到顶部会出现一个链接，其中显示跳到主要内容 -left（如果再次按 Tab，将出现跳到工具栏链接）。该链接位于页面的最顶部，因此它是选项卡切换时获得焦点的第一个链接，也是屏幕阅读器读出的网站的第一个链接。通过该链接，用户可以直接跳转到主要内容，跳过中间所有不必要的链接和网站徽标。
创建跳转到内容是让您的网站更易于导航的好方法，而且非常简单，只需要少量 HTML 和一些 CSS。
首先是 HTML。该链接应位于页面的最顶部，紧邻 <body> 标签下方。在大多数主题中，这将是 header.php 文件：
</head>
<body>
<a class="skip-link" href="#main">
<?php _e( 'Skip to main content', 'mytheme' ); ?>
</a>
//Rest of page content
这里唯一需要注意的是：
关于 (1)，您的循环将类似于：
<div id="main" class="hfeed" role="main">
<?php if ( have_posts() ) : ?>
//The Loop
<?php else: ?>
//No posts found... display search
<?php endif; ?>
</div>
您的页面模板可能类似于：
<div id="main" role="main">
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"> <?php the_title(); ?> </h1>
<div class="entry-content">
<?php the_content(); ?>
</div>
</div>
</div>
现在剩下的就是向链接添加一些样式。
首先，我们希望链接隐藏，但不对屏幕阅读器隐藏，因此我们会将链接放置在屏幕外，而不是使用 display:none（在这种情况下，屏幕阅读器会忽略它）。
其次，当它获得焦点时，我们希望使链接变得明显，因此很明显以前隐藏的链接现在可见并具有焦点。
.skip-link {
position: absolute;
left:6px;
top:-100px; /* position offscreen so it's not visible, but can receive focus*/
z-index: 100000; /* Position above WordPress' toolbar */
font-size: 1em;
font-weight: bold;
display: block;
background: #ee7b00;
color: white; /*Style the link so that's clear*/
height: auto;
width: auto;
line-height: normal;
padding: 15px 25px;
text-decoration: none;
-webkit-transition: top 1s ease-out;
transition: top 1s ease-out;
}
.skip-link:focus {
top: 5px; /* Move onto screen */
-webkit-transition: right 0s;
transition: right 0s; /*Animate, to make its appearance obvious */
}
最后，请注意，有些人容易患光敏性癫痫发作。这可能是由闪烁或闪光效果引起的。去年 12 月，杰夫·钱德勒 (Jeff Chandler) 在一名访客警告杰夫·钱德勒 (Jeff Chandler) 取消了 WP Tavern 的“雪”效果可能引发癫痫发作后。
这不仅限于癫痫发作，它还可能引发某些人的偏头痛或惊恐发作。它也不限于雪花效果 - 视频、轮播或音频文件自动播放也可以触发这些效果。
虽然这主要是编辑的决定，并且作为开发者，阻止自动播放不是我们的工作，但我们至少可以通过默认禁用它来阻止它。 Jeff 在他的文章中提到，他找不到提供访问者自己可以玩的“雪”效果的插件。
