这是我们要看的最后一个原则。 从广义上讲,它指出网站的内容和导航必须易于理解。 尽管实施许多建议的责任在于插件或主题的“最终用户”(或发布内容的人),但仍有一些建议可供那些插件和主题的开发人员实施。
可读(3.1)
第一条准则规定内容应“可读易懂”。 许多建议与内容的阅读水平有关,并且与不寻常的单词,缩写和首字母缩略词的使用有关,这些都不与开发人员相关。
我们可以实施的一项建议是,应该能够以编程方式识别网页的人工语言。 为此,应通过lang
属性在<html>
元素上指定lang
。 另外,应使用dir
属性指示内容是否从右到左。
WordPress通过提供language_attributes()
来打印所需的属性,从而简化了这一过程。 在主题的header.php
中:
<html <?php language_attributes(); ?>>
language_attributes()
函数设置站点的语言,并在必要时设置方向,并过滤输出,从而允许插件(例如,多语言插件)适当地更改属性。
可预测的(3.2)
第二条准则指出,网站应该以可预测的方式呈现和表现。 通过确保主题HTML标记结构合理且合乎逻辑,可以实现许多建议。 随之而来的是许多“请勿做”的建议,即不要进行会破坏网页自然和逻辑行为的更改。
焦点行为
我们在本系列的第四篇文章(“可操作的”)中提到不使用tabindex
。 此建议基于此建议,即指出当某项获得焦点时,不应将其视为页面状态发生某些更改的触发因素。
例如,获得焦点的表单按钮不应引起该表单的提交,而获得焦点的链接不应引起该链接的激活。 这并不是说当适当的项目获得焦点时,不应出现工具提示或子菜单(如果是导航菜单)。 这些例子并不构成状态的改变。 松散地说,您可以将项目的关注点等同于将项目悬停。
不要阻止焦点
您应该避免将焦点从接收它的元素上移开。 例如,永远不要执行以下操作:
$('a').on('focus',function(){ $(this).blur(); });
需要用户输入时帮助用户(3.3)
确保已识别错误
默认情况下,与主题开发人员相关的唯一表格是登录/注册,搜索和评论表格。 在这些主题中,主题开发人员通常仅对后两个主题给予任何关注。 由于搜索表单永远不会导致“错误”,因此我们在本节中将重点放在注释表单上。
WordPress可以很好地通知用户错误,并准确告知他们该错误是什么。 但是,这样做是通过允许用户离开原始页面,并向他们显示“死角”错误页面来实现的。
![错误,请填写必填字段名称电子邮件](https://i-blog.csdnimg.cn/blog_migrate/e019feda8bcf2e3a200f0f56b5e15d70.png)
如果用户返回到原始页面,则表单将失去焦点,因此他们将不得不再次查找它。 更好的解决方案是阻止用户在正确填写表单之前提交表单。 但是,在执行此操作时,必须向用户传达输入的值无效,否则您将被困住。
有许多可用的客户端验证脚本,并且构建自己的简单验证脚本也非常容易。 重要的是:
- 用户离开具有无效值的字段(或尝试提交表单)后出现的错误消息应该传达出存在错误以及错误所在的位置(即,标识字段)。
- 应该使用ARIA属性将错误消息标识为警报:
role="alert"
。 - 在适当的情况下,错误消息应尽可能明确,以告知用户为什么不接受输入的值。
这是一个简单的示例,基于WebAIM自己的可访问表单验证示例 (我鼓励您阅读),如果name字段为空,则会添加一条错误消息。
jQuery(document).ready(function($) {
$('#author').on( 'blur', function( e ){
var value = $(this).val();
if( !value ){
if( $('#author-error').length > 0 ){
$('#author-error').remove();
}
$( '<p id="author-error" class="alert alert-error" role="alert"></p>' )
.insertAfter( $('#author') )
.text( 'Name field error: Please provide a name' );
}else if( $('#author-error').length > 0 ){
$('#author-error').remove();
}
});
});
WebAIM示例还可以防止用户使该字段无效,并将其返回到该字段以更正错误。 如果这样做,我建议您不要在该值为空的情况下将用户返回该字段,否则,您将使那些意外赋予该字段焦点但无意提交表单的用户感到沮丧。
如本系列前面所述,您不应仅依靠颜色或位置来传达含义。 在这种情况下,错误消息从文本来看应该很明显,与它们相关的字段也应该如此。
提供标签
主题仅应使用comment_form()
来显示评论表单,并且这将以可访问的方式处理标签。 同样,默认搜索表单也不需要进一步的工作。 但是,在自定义或样式化这些表单时,您应该:
确保标签始终可见
标签必须始终可见。 具体来说,这意味着占位符不构成标签,并且不应用作搜索。 有几个原因:
- 屏幕阅读器的支持不一致。
- 占位符通常为柔和的颜色,可能难以阅读。
- 由于占位符会在该领域获得关注时消失,因此它会给认知障碍者造成可用性问题。
在适当的地方,提供进一步的说明
如果表单字段需要进一步的说明,则可以在该字段之后提供这些说明,但仍可以使用aria-describedby
属性将其明确链接。 该属性引用的元素的内容在字段标签之后读出。
以W3C网站为例:
<form>
<label for="fname">First name</label>
<input name="" type="text" id="fname" aria-describedby="fname-description">
<p id="fname-description">A bit of instructions for this field linked with aria-describedby. </p>
</form>
但是,您应该注意,屏幕阅读器之间对此功能的支持不一致 。
识别必填字段
必填字段应使用aria-required="true"
属性进行标记。 由comment_form()
生成的默认WordPress注释表单已经可以处理此问题,因此您无需在此处采取任何操作。 但是,如果您选择自定义注释表单,则应注意这一点。
结论
本文总结了有关W3C可访问性原则以及如何实现这些原则的粗略主题开发人员指南。 在本系列的最后一篇文章中,我们将探讨一些简单的方法,以进一步发展,并积极鼓励和帮助主题(或插件)的最终用户产生可访问的内容。
翻译自: https://code.tutsplus.com/tutorials/accessibility-part-5-understandable--cms-21796