避免使用HTML页面的Wai-Aria冗余

以来，由于将ARIA角色纳入HTML，因此Web开发变得更加容易。 ARIA通过为辅助技术（ATS）提供额外的语义信息来增强对残疾人的Web应用可用性。 但是，一个关键问题仍然存在：当HTML元素已经具有固有的语义时，ARIA角色属性是否需要？

>本文探讨了这个问题，重点介绍了具有隐式语义的新的HTML5结构元素如何与ARIA角色相互作用。

密钥点：

如果HTML元素已经提供了必要的语义，则

避免使用ARIA角色。 不必要的ARIA属性创建冗余代码。 HTML5元素具有默认的隐式ARIA语义；因此，添加匹配的ARIA角色或属性通常是多余的。
• 尽管这些隐式语义，即使它导致冗余，也可能会考虑出于兼容原因添加ARIA角色。
• aria-* ARIA的基本原理和常见误解：
>
• > WAI-ARIA（可访问的富互联网应用程序）包括增强HTML元素的属性。 这些属性通过浏览器可访问性API将角色，属性和状态信息传达给ATS。 对于Aria Newcomer来说，Stephan的“ Wai-Aria介绍”是推荐的资源。
> HTML社区中普遍的视图是：“如果HTML已经处理，请不要使用Aria。” 更准确地说：仅在实现的HTML元素缺乏可访问性支持时才使用ARIA。

ARIA角色和大多数元素：> ARIA角色，属性和状态可以揭示HTML元素的语义。 这被称为元素的默认隐式aria语义

。

。 在添加ARIA属性之前，

优先考虑语义上正确的HTML（利用天然语义）。 ARIA角色通常不会增加大多数HTML元素的默认语义。 保持简单：如果HTML元素固有地提供了语义，请不要使用ARIA；这样做会创建冗余代码。

ARIA角色和HTML4：>

>可访问性专家史蒂夫·福克纳（Steve Faulkner）解释说，html4（及更早的）元素不需要其他ARIA角色即可公开其默认语义，因为它们已经被映射。 在此上下文中添加ARIA角色是毫无意义的，并且为代码评论添加了不必要的复杂性。

html5增强：

> HTML5规范指出：“在大多数情况下，设置与默认隐式aria语义匹配的ARIA角色和/或

属性是不必要的，不建议使用的。”

> HTML5元素具有默认的隐式ARIA语义，但不能保证每个元素在没有验证的情况下映射。 因此，可以考虑添加ARIA角色作为预防措施，接受冗余。

ARIA中的冗余： 在交互式HTML5元素（例如形式元素或>）中添加默认隐式ARIA角色没有效果。 虽然没有危害，但这是不必要的，并且浪费了开发时间。 交互式元素需要可访问的名称（为可访问性API的可访问名称属性提供值）。 例如：

<button></button>效率较低：

更有效：

<label>Title</label><input type="text">

第二个示例使用和

>属性，显然将标签与输入相关联。

<label for="title">Title</label><input type="text" id="title">

>

for冗余的示例（避免）：id>

>交互式元素上的冗余角色：

>

• 是不必要的。

<button role="button">Submit</button>

ARIA角色与本机HTML对应物： role="button"

• html属性冗余。
>

<div hidden aria-hidden="true"></div>

aria在既定的结构元素上：hidden> aria-hidden

• 和>不必要。 带有HTML5结构元素的
ARIA：

> HTML5引入了带有默认隐式ARIA语义映射的结构元素（例如，

<h1 role="heading" aria-level="1">I am a Heading</h1>

，

，role）。 但是，有些映射是有条件的。例如，仅当不在aria-level>或

内时，

映射到>。 浏览器固有地揭示了这些默认语义。

浏览器支持： <aside></aside> <article></article>>大多数现代浏览器都支持HTML5结构和切片元素的默认隐式语义。 （Internet Explorer的实现可能会有所不同。） <main></main><footer></footer>结论： role=contentinfo <article></article> <section></section>避免ARIA角色，属性和声明HTML5规范是否已经定义了该功能。

许多HTML5元素具有默认的隐式ARIA语义。 在现代浏览器中，ARIA支持通常非常出色（例外）。

考虑将ARIA属性添加到HTML元素并在评论中分享您的想法的含义。

常见问题（常见问题解答）：

> >（原始输入的FAQ部分保留在此处，因为它直接与主题相关，并且不需要修改伪 - 原始性。）

>

在HTML页面中Wai-aria的目的是什么？财团（W3C）。它提供了一个框架来改善网络内容和应用程序的可访问性和互操作性，尤其是对于残疾人。它通过定义使残疾人更容易访问Web内容的方法来实现此目的，例如提供其他语义来帮助辅助技术（例如屏幕阅读者）了解Web内容的结构和功能。

>

> WAI-ARIA和HTML页面？

>

> WAI-ARIA和HTML页面中的冗余，当提供相同的信息或功能多次时，可能会发生HTML页面。例如，如果HTML元素已经具有由HTML规范定义的隐式角色，并且开发人员添加了与隐式角色相匹配的ARIA角色，则会创建冗余。这可能会混淆辅助技术和依靠它们的用户。

>

> HTML隐藏和ARIA隐藏属性有什么区别？以略有不同的方式工作。 HTML隐藏属性隐藏了所有用户的元素，而ARIA隐藏属性专门隐藏了辅助技术的元素。如果隐藏了一个元素，则不使用辅助技术的用户仍然可以看到它。

>

>在使用html中的ListItem角色时，我如何避免冗余？对于HTML中的“ LI”元素，角色是不必要的，因为它已经具有ListItem的隐含作用。将ListItem的ARIA角色添加到“ LI”元素中会产生冗余。为避免这种情况，只需使用“ li”元素，而不必添加ARIA角色。

>冗余对可访问性审核的影响是什么？

冗余可以导致可访问性失败审核。这是因为冗余的ARIA角色会混淆辅助技术，从而导致访问较低的用户体验。通过避免冗余，您可以提高网络内容的可访问性并增加通过可访问性审核的机会。

>

>我如何有效地使用ARIA角色来增强可访问性？在HTML规范没有提供的情况下提供其他语义。它们不应用于复制HTML已经提供的语义。通过明智地使用ARIA角色并避免冗余，您可以增强Web内容的可访问性。

使用ARIA角色时，有什么常见的错误？

>使用ARIA角色时避免的一些常见错误包括冗余使用它们，错误地使用它们并过度使用它们。冗余的咏叹调角色可能会混淆辅助技术，而错误的使用可能会导致语义不正确。过度使用ARIA角色可能会使您的Web内容过于复杂且难以导航。

>我如何检查我的HTML和ARIA代码中的冗余？

>使用可访问性审核工具的咏叹调代码。这些工具可以识别代码中冗余的咏叹调角色和其他可访问性问题。通过解决这些问题，您可以改善网络内容的可访问性。

>辅助技术在Web可访问性中的作用是什么？

>

>辅助技术在Web可访问性中起着至关重要的作用。他们帮助残疾人访问并与Web内容互动。辅助技术的示例包括屏幕读取器，屏幕读取器读取了视觉障碍者的Web内容和语音识别软件，这些软件使具有移动性障碍的人可以用声音控制计算机。辅助技术的功能吗？ Web内容的功能。这使辅助技术可以为其用户提供更准确和有用的Web内容表示。

以上是避免使用HTML页面的Wai-Aria冗余的详细内容。更多信息请关注PHP中文网其他相关文章！