An element whose implicit native role semantics will not be mapped to the accessibility API.
A message with important, and usually time-sensitive, information.
Note that I've included both role="alert" and aria-live="assertive" at the same time. These are synonymous attributes, but some screen readers only support one or the other. By using both simultaneously we, therefore, maximize the chances that the live region will function as expected. Source - Heydon Pickering 'Some practical ARIA examples'
A type of dialog that contains an alert message, where initial focus goes to an element within the dialog.
A region declared as a web application, as opposed to a web document. In this example, the application is a simple calculator that might add two numbers together.
A section of a page that consists of a composition that forms an independent part of a document, page, or site.
You would use role=article on non-semantic elements (not recommended, invalid)
A region that contains mostly site-oriented content, rather than page-specific content.
An input that allows for user-triggered actions when clicked or pressed.
A cell in a tabular container.
A checkable input that has three possible values: true, false, or mixed.
A cell containing header information for a column.
A presentation of a select; usually similar to a textbox where users can type ahead to select an option or type to enter the arbitrary text as a new item in the list.
A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.
A large perceivable region that contains information about the parent document.
A definition of a term or concept.
A dialog is an application window that is designed to interrupt the current processing of an application in order to prompt the user to enter information or require a response.
A list of references to members of a group, such as a static table of contents.
A region containing related information that is declared as document content, as opposed to a web application.
A landmark region that contains a collection of items and objects that, as a whole, combine to create a form. Using the semantically correct HTML element <form> implies default ARIA semantics, meaning role=form is not required as you should not apply a contrasting role to an element that is already semantic, as adding a role overrides the native semantics of an element. Setting an ARIA role and/or aria-* attribute that matches the default implicit ARIA semantics is unnecessary and is not recommended as these properties are already set by the browser.
You would use role=form on non-semantic elements (not recommended, invalid)
A grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table.
A cell in a grid or treegrid.
A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies.
A heading for a section of the page.
A container for a collection of elements that form an image.
An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource. 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.
A group of non-interactive list items.
A widget that allows the user to select one or more items from a list of choices.
A single item in a list or directory.
ATutorialHub Related Guide
HTML Tutorials Comments (8)
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website