How to use aria effectively in HTML5

ARIA is the abbreviation for Accessible Rich Internet application , which refers to barrier-free rich Internet applications. You can make some people with functional impairments (such as hearing, vision) use your website. Here's a look at what we do as developers, how to make them easier to use.

One way to use Aria is to add aria to our HTML. You may be familiar with the use of semantic elements in HTML, such as Nav,button,header. Using them, you can easily express the action of a block. These elements can better express the meaning of the content on the page, and we can use these elements in combination with ARIA. However, there are a couple of things to keep in mind when using them together.

Aria role

ARIA role can be added to HTML tags like attributes. Declares the element type and suggests the informational role it provides. The following is an example of identifying elements as banner:

The following example, which is usually put into a containing element, prompts for some information about the contents of the contained elements:

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

Using Alert with dynamic content, use role= "alert":

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

This is a character used to represent a simple demonstration of an element, imagine a person using a screen reader, considering some elements that they don't want to read. Here's an example where an element contains a dummy description, or an empty element simply provides a picture and background color.

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

Aria Properties

Aria properties and roles are slightly different and are added to HTML tags in the same way, but with a range of ARIA properties available. So the ARIA attributes are prefixed with aria-. There are two types of ARIA properties, state and attribute values, respectively.

• State values, which are necessary to be modified during user interaction.
• property value, which is less likely to be modified

Here is an example of the ARIA State attribute aria-checked, which simulates the state of the display elements of an interactive element, such as the checkbox and radio buttons, but they are not native elements themselves (e.g., using div and span tags to build custom UI elements)

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

Use the Aria property, where the property is named Aria-label . This is a label that is not displayed on the page (or can be displayed if the design requires display), but is used to represent the form element. When the label text is displayed, it is more appropriate to use the Aria-labelledby property.

You can also work 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>

To learn more about the status and properties of the information, you can refer to the relevant content.

The rules of Aria

When you really want to use it, keep in mind that we don't want you to add aria to every element for two reasons.

Use semantically HTML elements as much as you can

The semantic label of the browser has implicitly implied aria semantics, like Nav,article,button has implied Aria's role= "navigation", role= "article", role= "button" declaration. Before semantic tags come out, common elements such as <div class= "main-navigation" role= "Navigation" >. you can now use Nav instead of Div, and you no longer need to add role= "navigation". you can go to the catalog to see what elements have been implied by the ARIA attribute.

Element can have only one role

An element cannot have more than one ARIA role, and 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 so is consistent w ITH user expectations about and objects of that type.

HTML elements cannot have two characters, and all roles are made in one way or another, as defined above, where an element cannot be a two-type object. Can you imagine an element as both a button and a caption? No, they can only be selected. Select a role that can best reflect the functionality of the element.

Do not modify the original semantics

You should not define a different role for a semantic tag, and add role to redefine the semantic label.

<footer role="button">

Aria uses the second rule, but if you have to redefine it, use nested HTML elements instead

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

Other marks for accessibility reading use the elements of the element as much as possible

It is obvious that if you think you are going to build a function block, you can give it a better definition than directly using Div, span. In practice, you will constantly realize what elements are better used and are well acquainted with them.

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

• Q-Used to provide inline references, such as referencing someone directly in the text of a paragraph
• Cite--used to refer to a poem in a text, such as a quote

<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, to ensure that you know as much as possible about HTML elements.

ALT attribute

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

Text to 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. Whether the image is not loaded (processing limit), the user with poor eyesight actually has no preference. L By default, they simply can't see the image like normal people.

Although the specification does not mention accessibility terminology, it indicates that it is used instead when the image fails to load or when the user stops loading. Although we cannot put ourselves in the shoes of them, we cannot guarantee that all of our users do not have this requirement, so we should give the user an alternative.

For example, people often write the alt text of a picture of a dog playing in a park as "dog". Although this was written, it was not enough to provide the people with the information to understand the content of the picture.

Here's a better way:

Note that the Alt attribute and the Figcaption element do not work the same. The intention of ALT is to provide an alternative text for the image, while Figcaption provides the relevant caption for the figure. In the same example, when using figcaption, it should provide the following text:

<figcaption>小狗可爱不?</figcaption>

Use semantic HTML and aria to make it available to all users

If you look at the examples that are included in the article, you'll see that it contains the following:

• For the image and its caption, make the semantics of the HTML
• Use the cite element in the right place
• Alt text is provided locally
• Use one of the ARIA properties 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>

Summarize

ARIA roles and attributes can improve the readability of pages, such as on screen readers or other assistive technologies. As assistive technologies become more prevalent, it is necessary to integrate ARIA into the code as a regular item.

Original: How to use ARIA effectively with HTML5

Original Georgie Luhur

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

How to use aria effectively in HTML5