(自定义) WAI-ARIA角色

Question

我对ARIA及其提供的角色、状态和属性非常陌生。我知道有不同类型的角色(例如地标、区域等)，但它们都不代表“登录区域”或类似的区域。我想知道是否有方法指定此信息的分组，以便屏幕阅读器可以为用户读出此信息？例如。“登录区域。用户名...密码...”

如果使用ARIA不能做到这一点，那么在HTML中实现这一点的一般方法是什么？

提前感谢

Answer 1

WAI-ARIA通常适用于动态内容，如新闻标题滚动条，而不适用于静态内容，如登录表单。静态内容最好使用普通HTML实现。

假设您有一个始终显示登录表单的页面，下面的内容应该会有所帮助。

对于登录表单，从可访问性的角度来看，您应该首先确保表单域的标签正确。字段集\图例对于这样的小表单来说确实是可选的。

正确编码标签意味着对\id属性使用匹配，例如

<label for="loginName">Login name</label>
<input type="text" id="loginName" name="loginName" size="30" />
<label for="loginPassword">Login password</label>
<input type="password" id="loginPassword" name="loginPassword" size="10" />

这保证了屏幕阅读器(盲人)用户可以正确地听到表单字段中对应标签的读出。对于其他表单元素，例如复选框和单选按钮，使用这样的正确标签允许有灵活性问题的用户单击文本标签来切换表单输入(复选框\单选按钮)，这意味着他们在页面上有更大的目标区域可供单击。

要让用户知道他们将要访问登录表单，您可以使用标题或fieldset\legendf组合框。

<h2>Login form</h2>
<FORM HERE>

或

<fieldset>
<legend>Login form</legend>
<FORM HERE>
</fieldset>

这两种方法都可以，尽管标题方法会为屏幕阅读器用户创建稍微少一点的音频混乱(WIth a fieldset\ legend，在每个表单域之前读出图例)

Answer 2

是也不是。表单应该被赋予“表单”的标志性角色。这允许辅助技术为了导航目的而看到地标。

请参阅spec。

虽然使用地标可以帮助导航页面，但地标本身不会读取表单本身中的项。遵循前面提到的已知的HTML实践，就可以解决剩下的问题。