Quick Guide: ARIA Web Standards & HTML Apps Accessibility

Example of ARIA landmark roles

Hello friends today we gonna learn about Quick Guide: ARIA Web Standards & HTML Apps Accessibility. So read this article, Quick Guide: ARIA Web Standards & HTML Apps Accessibility step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: Quick Guide: ARIA Web Standards & HTML Apps Accessibility

A truly open and inclusive Internet needs technologies that allow disabled users who rely on assistive technologies to enjoy dynamic web content and modern web apps. W3C’s accessibility web standards aim to fill the web with accessible rich Internet applications (ARIA) that users with disabilities can use efficiently.

ARIA is one of the many accessibility standards and guidelines published by the Web Accessibility Initiative (WAI). It provides additional formatting that can be easily inserted into HTML documents. WAI-ARIA is a cross-platform and cross-device solution that focuses on the Open Web Platform, so don’t just think about websites, but also games, digital entertainment, healthcare, mobile and other types of apps.

In this post, we will take a look at how to add accessibility to your HTML documents using WAI-ARIA standards.

back to menu ↑

The ARIA framework

HTML syntax does not always allow developers to correctly describe elements, identify their roles and specify the relationships between them. While that is rarely a problem for visitors who have full control of their senses, it can keep assistive technology users from understanding what is happening on the screen and exploring their options.

This is the point where ARIA comes to our rescue, as it allows to define the purpose of different elements using historical roles, and describe their nature with attributes with prefix ariaAria prefix attributes have two types: properties that describe features that are less likely to change over the life cycle of the page, and states that provide information about things that can often change as a result of user interaction.

back to menu ↑

Important roles

Important roles are the most well-known forms of ARIA’s Roles Model (others are the abstract roles, the widget roles, and the document structure roles). Landmark roles allow developers to identify major ones observable regions on the web page that assistive technology users may want to access quickly.

There are 8 types of ARIA landmark roles, and they must be added as attributes to the related HTML tags.

back to menu ↑

role = “banner”

The banner roll is intended to be used primarily for content that pertains to the entire site, not just individual pages. It is usually added as an attribute to the main site header for the logo and other important site-wide information. It is important that you can only use the banner role once in HTML documents or apps.

back to menu ↑

role = “main”

The main role is related to the main content of the document. It cannot be used more than once on an HTML page. It usually follows the

syntax, or in HTML5 the more semantic
. The latter has been added to the W3C specifications for the purpose of the head ARIA milestone role for a semantic HTML element.

back to menu ↑

role = “navigation”

The navigation role is intended to be used to indicate an area that contains navigation elements such as links and lists on a site.

back to menu ↑

role = “complementary”

The additional milestone role describes additional content related to the main content of the site. It must be placed at the same level in the DOM hierarchy as role = ”main”. Related posts, popular articles, latest comments are typical examples of autonomous complementary content.

back to menu ↑

role = “contentinfo”

The content info role informs user agents of the presence of a region where different types of metadata, such as copyright info, legal and privacy notices, can be found. It is usually used for the footer of a site.

back to menu ↑

role = “form”

The role of the form landmark indicates a form waiting for user input. For search forms, you should use role = “search” instead.

back to menu ↑

role = “search”

The search function is self-explanatory, it is intended to help assistive technologies identify the search functionality of a website.

back to menu ↑

role = “application”

You can use the application landmark role for a region that you want to declare as a web app instead of a web document. It is not recommended to include it in traditional websites as it refers to assistive technologies to switch from normal browsing mode to application browsing mode. Only use this important role with great care.

IMAGE: Sky.com Accessibility Sources

back to menu ↑

States and properties

While roles allow you to define the meaning of HTML tags, states and properties provide the user with additional information about how to interact with them. Both states and properties are marked with attributes with prefix aria with the syntax aria-*

Probably the most famous ARIA attributes are the aria prerequisite property and the aria controlled state. Aria requires one property because it is permanent feature of an input element (ie the user must fill it in), while aria-checked one state because a check box can often change its value due to user interaction.

back to menu ↑

The syntax of Aria prefixes

States and properties sometimes take token values ​​(a limited set of predefined values), for example the aria-live property can have 3 different values: off, polite, assertive. The syntax in this example looks like this:


In other cases, the values ​​of aria prefixed attributes are represented by strings, numbers, integers, id references, or true / false values.

back to menu ↑

How to Make Use of ARIA States and Properties

back to menu ↑

1. Build relationships between elements with relationship characteristics

Use relationship attributes to indicate relationships between different elements on your site that cannot be otherwise determined based on the document structure. For example, the aria-labeledby property identifies the element that labels the current element.

aria-labelledby – among many other things – can bind headings to ARIA landmarks in the following way:

This is a rubric

Main content …

back to menu ↑

2. Synchronize states and properties with the life cycle of the element

After you set up an ARIA recognition role for an observable area on your HTML page, it can be of great help to assistive technologies if you change the ARIA prefixes and child element properties in accordance with events happening on the screen. This can be crucial when users need to interact with the site, such as filling out a form or performing a search.

back to menu ↑

3. Match the visual and the accessible interfaces

The general rule of thumb for accessibility design is that the current state of the user interface should always be discernible by assistive technologies. For example, if the user chooses an option in a form, it should also appear selected for assistive technologies. This can be easily achieved by using the aria selected state with the following syntax:.

The W3C WAI-ARIA Authoring Practices guideline can give you many other great ideas about it how to well harmonize the visual and accessible interfaces of your site.

back to menu ↑

Don’t overuse ARIA

Using ARIA roles and attributes can sometimes be redundant. When using HTML5 semantic tags such as or

, modern web browsers add the correct ARIA semantics by default. In this case, it makes no sense to set the ARIA landmark roles separately.

For example, it is not necessary to use the form landmark scroll to it

element. Instead of the

syntax is perfect enough to just

to use. There is also no need to use HTML native attributes in conjunction with the correct ARIA attribute.

So if you have the hidden HTML attribute to a form input, no need to add the aria-hidden as the browser includes it by default.

back to menu ↑

Quick Guide: ARIA Web Standards & HTML Apps Accessibility: benefits

  • The Quick Guide: ARIA Web Standards & HTML Apps Accessibility tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the Quick Guide: ARIA Web Standards & HTML Apps Accessibility guide is free.

back to menu ↑


Tutorial summary of Quick Guide: ARIA Web Standards & HTML Apps Accessibility

In this guide, we told you about the Quick Guide: ARIA Web Standards & HTML Apps Accessibility; please read all steps so that you understand Quick Guide: ARIA Web Standards & HTML Apps Accessibility in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the Quick Guide: ARIA Web Standards & HTML Apps Accessibility, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the Quick Guide: ARIA Web Standards & HTML Apps Accessibility tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop

back to menu ↑

Final note

I hope you like the guide Quick Guide: ARIA Web Standards & HTML Apps Accessibility. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the Quick Guide: ARIA Web Standards & HTML Apps Accessibility, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “Quick Guide: ARIA Web Standards & HTML Apps Accessibility”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide Quick Guide: ARIA Web Standards & HTML Apps Accessibility, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Shopping cart