[Translation] how to effectively use ARIA in HTML5

[Translation] how to effectively use ARIA in HTML5

ARIAYesAccessible Rich Internet ApplicationReferred to as accessibility-rich Internet applications. You can use your website for groups with functional impairment (such as hearing and vision. The following describes how to make it easier for developers to use.

One way to use ARIA is to add ARIA to our html. You may be familiar with semantic elements in HTML, suchNav, button, header. Using them can easily express the effect of blocks. These elements can better express the meaning of the content on the page. We can combine these elements with ARIA. However, when using them together, there are several things to remember.

ARIA role

ARIA role can be added to the HTML tag like an attribute. Declare the element type and recommend the information it provides. The following is an example of identifying the banner element:

The following example is usually put into a containing element, prompting its content to provide information about the content of the contained element:

<div role="contentinfo">    This website was built by Georgie.</div>

Use alert of dynamic content, useRole = "alert ":

<div role="alert">    Please upgrade to the latest version of your browser for the best experience.</div>

This is a role used to represent elements that are just a simple demonstration. Imagine that a person uses a screen reader and does not want to read some elements. Here is an example where an element contains a virtual description, or an empty element simply provides an image and background color.

<a href="aria.html" role="presentation">  </a>

ARIA attributes

The ARIA attribute is slightly different from the role. The method added to the HTML Tag is the same, but there is a fixed range of ARIA attributes available. Therefore, all the ARIA attributes contain the aria-prefix. There are two types of ARIA attributes: Status and attribute value.

• The status value must be modified during user interaction.
• Attribute value, which is unlikely to be modified

Here is an example of the ARIA-checked state attribute. Here we simulate the display element status of interaction elements, such as the checkbox and radio buttons, but they are not native elements themselves (for example: use div and span labels to build custom UI elements)

<span role="checkbox"       aria-checked="true"      tabindex="0"      id="simulatedcheckbox"></span>

Use the ARIA attribute, where the attribute name isAria-label. This is a label that is not displayed on the page (it can be displayed if the design requirements are met) but used to represent the form element. When the label text is displayed, useAria-labelledbyAttribute is more appropriate.

It can also be used with the figure element as follows.

<figure aria-labelledby="operahouse_1" role="group">        <figcaption id="operahouse_1">            We saw the opera <cite>Barber of Seville</cite> here!    </figcaption></figure>

For more information about status and attributes, refer to W3C.

ARIA rules

Remember that we don't want you to add ARIA to every element for two reasons.

Use semantic HTML elements as much as possible

The Semantic tag of the browser has hidden the ARIA semantics by default, likeNav, article, buttonThe hidden parts of ARIARole = "navigation", role = "article", role = "button"Statement. Before semantic tags are created, common elements such<Div class = "main-navigation" role = "navigation">.Now you can use nav to replace div, and do not need to addRole = "navigation ".You can go to the W3C directory to check which elements have hidden the ARIA attribute.

The element can have only one role.

An element cannot have multiple ARIA roles. The role is defined as follows:

Main indicator of type. This semantic association allows tools to present and support interaction with the object in a manner that is consistent with user expectations about other objects of that type.

HTML elements cannot have two roles. All roles are post-written in one way or another. as defined above, an element cannot be two types of objects. Can you imagine that an element is both a button and a title? No. You can only choose one of them. Select a role that best reflects the element function.

Do not modify original Semantics

Different roles should not be defined for a semantic tag, and semantic tags should not be redefined by adding role.

<footer role="button">

ARIA uses the second rule, but if it must be redefined, it uses Nested HTML elements to replace

<footer><button>Purchase this e-book</button></footer>

Other markup on barrier-free reading should use the elements as much as possible.

This is an obvious practice. If you think you are building a function block, you can define it with better elements than using div and span directly. In practice, you will constantly realize what elements are better used and are familiar with them.

Here is an example of blockquote usage (which is often misused ). There are other similar elements that serve special purposes.

• Q -- used to provide in-row references. For example, you can directly reference a person in a paragraph.
• Cite-used to reference a work in the text, such as a poem referenced

<p>In <cite>The Love Song of J. Alfred Prufock</cite> by T.S. Eliot, the clinical imagery of the line <q>Like a patient etherized upon a table</q> suggests themes of loneliness.</p>

There are many HTML elements that you may not notice, including some newly introduced ones, to ensure that you know as much HTML elements as possible.

Alt attribute

This is a frequently forgotten attribute, which can greatly increase the accessibility of marking, especially for screen readers. It has actually been introduced from HTML2 and is described as follows:

text to use in place of the referenced image resource, for example due to processing constraints or user preference.

Text is used to replace referenced image resources, such as processing restrictions or user preferences.

Due to processing restrictions or user preferences. No matter whether the image is not loaded (processing restrictions), users with poor eyesight actually have no preference. L by default, they cannot watch images just like normal people.

Although there is no standard term for accessibility, it indicates that it is used in place when the image cannot be loaded or the user stops loading. Although we cannot put ourselves into consideration for them, we cannot ensure that all of our users do not have this requirement. Therefore, we should give users an alternative choice.

For example, people often write "dog" in alt text of photos of dogs playing in the park ". Despite writing this, it cannot provide enough information to the people with obstacles to understand the content of the picture.

The following is a better method:

Note that the alt attribute and the figcaption element have different roles. The intention of alt is to provide an alternative text for the image, while figcaption is to provide the relevant title for figure. When figcaption is used in the same example, it should provide the following text:

<Figcaption> are puppies cute? </Figcaption>

Use semantic HTML and ARIA so that all users can use

If you look at the examples in the previous article, you will see the following content:

• Use semantic HTML for the image and its title
• Use the cite element where appropriate
• Properly provide alt text
• Use the ARIA attribute mentioned above

<figure aria-labelledby="operahouse_1" role="group">        <figcaption id="operahouse_1">We saw the opera     <cite>Barber of Seville</cite> here!    </figcaption></figure>

Summary

ARIA roles and attributes can improve page readability, such as on screen readers or other auxiliary technologies. As auxiliary technologies become more common, you need to integrate ARIA into your code as a general item.

Original article: How to Use ARIA extends tively with HTML5

Author: Georgie Luhur

Link: https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/