dstat wai_在HTML页面中避免使用WAI-ARIA进行冗余

dstat wai

Life’s been easy since we’ve started integrating ARIA roles in HTML code. ARIA has been providing additional semantics to help assistive technologies (ATs) and making it possible for developers to enhance the usability of web applications for people with disabilities. The fundamental question remains to date — do HTML elements need ARIA role attributes to expose their semantics?

自从我们开始将ARIA角色集成到HTML代码中以来，生活一直很轻松。 ARIA一直在提供其他语义来帮助辅助技术(AT)，并使开发人员有可能增强残疾人对Web应用程序的可用性。 迄今为止，仍然存在一个基本问题-HTML元素是否需要ARIA角色属性来公开其语义？

In this article, I will cover this subject along with the new HTML5 structural elements with default implicit semantics that contest ARIA roles.

在本文中，我将讨论该主题以及具有挑战ARIA角色的具有默认隐式语义的新HTML5结构元素。

ARIA基础知识和一般认识 (ARIA Basics and General Perceptions)

WAI-ARIA (commonly known as ARIA) is a set of attributes that you can add to your HTML elements. The purpose of these attributes is simple — to communicate role, property, and state semantics to ATs by means of accessibility APIs that are present in web browsers. Stephan’s post An Introduction to WAI-ARIA is a must-read for those of you who are new to ARIA.

WAI-ARIA(通常称为ARIA)是可以添加到HTML元素的一组属性。 这些属性的目的很简单-通过Web浏览器中存在的可访问性API将角色，属性和状态语义传达给AT。 Stephan的帖子“ WAI-ARIA简介”对于那些刚接触ARIA的读者来说是必读的。

The general perception about ARIA in the HTML community is “don’t use ARIA code if HTML has got you covered”. The same thing can be said a little more clearly: If your HTML element is already implemented but does not have accessibility support yet, use ARIA.

HTML社区对ARIA的普遍看法是“如果HTML覆盖了您，请不要使用ARIA代码”。 可以更清楚地说出同一件事：如果您HTML元素已经实现，但尚不支持可访问性，请使用ARIA。

ARIA角色对大多数元素的影响 (Effect of ARIA Roles on Most Elements)

There are some general cases in which the semantics of an HTML element can be exposed by use of an ARIA role, property, or state. A bit perplexing at first, this is known in the HTML community as the HTML element’s default implicit ARIA semantics.

在某些一般情况下，可以使用ARIA角色，属性或状态来公开HTML元素的语义。 首先有点困惑，这在HTML社区中被称为HTML元素的默认隐式ARIA语义 。

However, when coding in HTML it is best to write semantically correct HTML (and thus make use of its native semantics) before setting out to integrate ARIA attributes.

但是，当使用HTML进行编码时，最好在着手集成ARIA属性之前编写语义正确HTML(从而利用其本机语义)。

ARIA roles do not add anything to the default semantics of most HTML elements.

ARIA角色不会为大多数HTML元素的默认语义添加任何内容。

The rule is to keep it simple — if the semantics are included in the HTML element by default then do not use ARIA. Integrating ARIA where it isn’t necessary makes for redundant code.

规则是保持简单—如果默认情况下HTML元素中包含语义，则不要使用ARIA。 在不必要的地方集成ARIA可以得到冗余代码。

HTML4是否需要ARIA角色？ (Does HTML4 Need ARIA Roles?)

As explained by accessibility expert Steve Faulkner, all of the HTML elements that were defined in HTML4 (and earlier HTML versions) do not require ARIA roles added to uncover their default semantics because they have already been mapped.

正如可访问性专家Steve Faulkner 所解释的那样 ，HTML4(以及更早HTML版本)中定义的所有HTML元素都不需要添加ARIA角色来揭示其默认语义，因为它们已被映射。

In fact, using ARIA roles in such situations and with elements defined in HTML4 will not make a difference. If ARIA roles are used in HTML4-based code, this will necessitate extra work by you by someone reviewing your code. Therefore, it is generally advisable to not add ARIA roles to HTML elements if it can be avoided.

实际上，在这种情况下使用ARIA角色以及HTML4中定义的元素不会产生任何影响。 如果在基于HTML4的代码中使用了ARIA角色，则必须由他人来检查您的代码，这需要您进行额外的工作。 因此，通常建议不要避免将ARIA角色添加到HTML元素中。

HTML5的新功能 (New Features in HTML5)

According to the HTML5 Specification:

根据HTML5规范 ：

In the majority of cases setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA semantics is unnecessary and not recommended as these properties are already set by the browser.

在大多数情况下，不需要设置与默认隐式ARIA语义相匹配的ARIA角色和/或aria- *属性，并且不建议这样做，因为浏览器已经设置了这些属性。

This means that new features that have been defined in HTML5 have default implicit ARIA semantics exposed by most web browsers. Despite this fact, it cannot be assumed that the HTML element you’re using is already mapped to ARIA without looking it up first. Keeping this in mind, I suggest that you add the ARIA roles for the time being to stay on the safer side of the scale — even if it means having to write redundant code.

这意味着HTML5中定义的新功能具有大多数Web浏览器公开的默认隐式ARIA语义。 尽管如此，不能假设您正在使用HTML元素已经映射到ARIA，而不先查找它。 牢记这一点，我建议您暂时添加ARIA角色，以保持规模更安全-即使这意味着必须编写冗余代码。

ARIA中的冗余 (Redundancy in ARIA)

Interactive elements in HTML5 are those that are categorically intended for user interaction (e.g. most form elements or the button element). Adding default implicit ARIA roles to HTML5 interactive elements would not have any effect on them. Doing so will not have a detrimental effect thought but, as mentioned, not adding the ARIA roles wouldn’t put it in harm’s way. Interactive elements do not require ARIA roles and it is suggested that you do not add them so as to save development time.

HTML5中的交互式元素是那些专门用于用户交互的元素(例如，大多数表单元素或button元素)。 将默认的隐式ARIA角色添加到HTML5交互式元素不会对其产生任何影响。 这样做不会产生有害的影响，但是，如上所述，不增加ARIA角色并不会危害社会。 交互式元素不需要ARIA角色，建议不要添加它们以节省开发时间。

Interactive elements must have accessible names. This means you must give its accessibility API accessible name property some value. This can be explained better with code:

交互式元素必须具有可访问的名称。 这意味着您必须为其可访问性API 可访问名称属性提供一些值。 这可以用代码更好地解释：

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

The above code can be written more appropriately as:

上面的代码可以更恰当地写为：

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

In the second line of code, both the visible and accessible labels are mentioned. Inclusion of the for and id attributes makes it apparent that the label applies to the input.

在第二行代码中，同时提到了可见标签和可访问标签。 包含for和id属性可以使标签明显适用于输入。

冗余示例 (Examples of Redundancy)

Let’s look at some examples of redundancy when using ARIA. And please keep in mind that the examples below are examples of code you should avoid using.

让我们看一下使用ARIA时的一些冗余示例。 并且请记住，以下示例是应避免使用的代码示例。

交互元素的默认隐式角色 (Default implicit roles to Interactive Elements)

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

In this case, the role is unnecessary. The button element itself is enough.

在这种情况下，该role是不必要的。 button元素本身就足够了。

ARIA角色以及本机HTML副本 (ARIA role along with native HTML counterparts)

<div hidden aria-hidden="true">

This example uses HTML’s hidden attribute, so the aria-hidden feature is not needed.

本示例使用HTML的hidden属性，因此不需要aria-hidden功能。

将ARIA添加到长期实施的结构元素中 (ARIA added to long implemented structural elements)

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

In this case, both the role and the aria-level attributes are unnecessary.

在这种情况下， role和aria-level属性都是不必要的。

具有HTML5结构元素的ARIA (ARIA with HTML5 Structural Elements)

The advent of HTML5 brought forth an all new set of structural elements and sectioning elements that have default implicit semantics mapping to the ARIA roles.

HTML5的出现带来了一组全新的结构元素和分段元素，这些元素具有默认的隐式语义映射到ARIA角色。

For example:

例如：

• aside maps to role=complementary

  aside映射到role=complementary

• article maps to role=article

  article映射到role=article

• main maps to role=main

  main映射到role=main

It is important to note here that some of these aforementioned elements only map to ARIA roles under certain conditions. For example, footer maps to role=contentinfo provided that it is not within an article or section element. Similarly, header maps to role=banner provided that` it is not within an article or section element.

重要的是，在某些情况下，上述某些元素仅映射到ARIA角色。 例如，如果footer不在article或section元素中，则footer将映射到role=contentinfo 。 类似地，只要header不在article或section元素内， header映射到role=banner 。

From these examples, it is evident that the browser will expose the default implicit semantics by itself wherever they are implemented.

从这些示例中可以明显看出，无论在何处实现，浏览器都会自行公开默认的隐式语义。

浏览器支持 (Browser Support)

The structural and sectioning elements that have newly been added to HTML5 are in a good place. Most widely used browsers implement default implicit semantics — or in the case of Internet Explorer, are in the process of implementation.

新添加到HTML5中的structure和sectioning元素很好。 使用最广泛的浏览器会实现默认的隐式语义-或在Internet Explorer的情况下正在实施中。

For more info on browser implementation of ARIA features in HTML5, HTML5 Accessibility is a great resource to get you started.

有关HTML5中ARIA功能的浏览器实现的更多信息， HTML5可访问性是一个很好的入门资源。

结语 (Wrapping It Up)

To conclude this article, I’d like to leave you with a quick summary:

结束语，我想向您简要介绍一下：

• Do not use ARIA roles, properties, or states if the feature is defined in the HTML5 Recommendation
  如果在HTML5建议书中定义了功能，请不要使用ARIA角色，属性或状态
• Many HTML5 elements have default implicit ARIA semantics.
  许多HTML5元素具有默认的隐式ARIA语义。
• With the exception of Internet Explorer, ARIA support is very good among modern browsers.
  除了Internet Explorer外，现代浏览器对ARIA的支持非常好。

What are your thoughts on adding ARIA attributes to HTML elements? If there’s anything I’ve left out, please leave your suggestions in the comments.

您对将ARIA属性添加到HTML元素有什么想法？ 如果我有什么遗漏，请在评论中留下您的建议。

翻译自: https://www.sitepoint.com/avoiding-redundancy-wai-aria-html-pages/

dstat wai