了解辅助功能：第 5 部分-html教程-PHP中文网

可读（3.1）

可预测 (3.2)

焦点行为

不要妨碍焦点

在需要用户输入时帮助用户 (3.3)

确保识别错误

提供标签

确保标签始终可见

在适当的情况下提供进一步说明

确定必填字段

结论

首页

web前端

html教程

了解辅助功能：第 5 部分

PHPz

Aug 31, 2023 pm 08:33 PM

这是我们要讨论的最后一个原则。从广义上讲，它规定网站的内容和导航必须易于理解。虽然实施许多这些建议的责任在于插件或主题的“最终用户”（或发布内容的任何人），但这些插件和主题的开发人员可以实施一些建议。

可读（3.1）

第一条准则指出内容应该“可读且易于理解”。许多建议与内容的阅读水平以及不常用单词、缩写词和首字母缩略词的使用有关，这些都与开发人员无关。

我们可以实施的一项建议是网页的人类语言应该能够以编程方式识别。为此，应通过 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 在通知用户错误以及确切地告知他们错误是什么方面做得非常好。然而，它是通过允许用户离开原始页面并向他们呈现“死胡同”错误页面来实现这一点的。

了解辅助功能：第 5 部分

如果用户返回到原始页面，表单将失去焦点，他们将不得不再次找到它。更好的解决方案是阻止用户在正确填写表单之前提交表单。但是，在执行此操作时，必须向用户传达输入的值无效的信息，否则您实际上已经将他们困住了。

有大量可用的客户端验证脚本，并且构建您自己的简单验证脚本也非常容易。重要的是：

用户离开具有无效值的字段（或尝试提交表单）后出现的错误消息应传达存在错误以及错误所在的位置（即标识字段）。
应使用 ARIA 属性将错误消息识别为警报：role="alert"。
在适当的情况下，错误消息应尽可能明确地告知用户输入的值未被接受的原因。

这是一个简单的示例，基于 WebAIM 自己的可访问表单验证示例（我鼓励您阅读），如果名称字段为空，它会添加一条错误消息。

    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-scribedby 属性显式链接到该字段。该属性引用的元素的内容在field的标签后面读出。

以 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>

登录后复制

但是，您应该注意，屏幕阅读器对此的支持并不一致。