HTML ARIA

HTML ARIA
Nikhil
Published on 2021-07-02 08:34:05

role="presentation"


An element whose implicit native role semantics will not be mapped to the accessibility API.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Iframes</title>
</head>

<body>
    <div style="float:left;">Some content on the left.</div>
    <div style="float:right;">Some content on the right</div>
    <div role="presentation" style="clear:both;"></div> <!-- Only used to clear floats -->
</body>

</html>


role="alert"


A message with important, and usually time-sensitive, information.

<div role="alert" aria-live="assertive">Your session will expire in 60 seconds.</div>

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'

 

role="alertdialog"


A type of dialog that contains an alert message, where initial focus goes to an element within the dialog.

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub demo title</title>
</head>

<body>
    <div role="alertdialog">
        <h1>Warning</h1>
        <div role="alert">Your session will expire in 60 seconds.</div>
    </div>

</body>

</html>

 

role="application"


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.

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub demo title</title>
</head>

<body>
    <div role="application">
        <h1>Calculator</h1>
        <input id="num1" type="text"> + <input id="num2" type="text"> =
        <span id="result"></span>
    </div>
</body>

</html>

 

role="article"


A section of a page that consists of a composition that forms an independent part of a document, page, or site.

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub demo title</title>
</head>

<body>
    <article>
        <h1>My first article</h1>
        <p>Lorem ipsum...</p>
    </article>
</body>

</html>

You would use role=article on non-semantic elements (not recommended, invalid)

<div role="article">
<h1>My first article</h1>
<p>Lorem ipsum...</p>
</div>

 

role="banner"


A region that contains mostly site-oriented content, rather than page-specific content.

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub demo title</title>
</head>

<body>
    <div role="banner">
        <h1>My Site</h1>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </div>
</body>

</html>

 

role="button"


An input that allows for user-triggered actions when clicked or pressed.

<button role="button">Add</button>

role="cell"

A cell in a tabular container.

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub demo title</title>
</head>

<body>
    <table>
        <thead>
            <!-- etc -->
        </thead>
        <tbody>
            <td role="cell">95</td>
            <td role="cell">14</td>
            <td role="cell">25</td>
        </tbody>
    </table>
</body>

</html>

 

role="checkbox"


A checkable input that has three possible values: true, false, or mixed.

<p><input type="checkbox" role="checkbox" aria-checked="false">I agree to the terms</p>

role="columnheader"


A cell containing header information for a column.

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub demo title</title>
</head>

<body>
    <table role="grid">
        <thead>
            <tr>
                <th role="columnheader">Day 1</th>
                <th role="columnheader">Day 2</th>
                <th role="columnheader">Day 3</th>
            </tr>
        </thead>
        <tbody>
            <!-- etc -->
        </tbody>
        <table>
</body>

</html>

 

role="combobox"


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.

<input type="text" role="combobox" aria-expanded="false">

Typically, you would use JavaScript to build the rest of the typeahead or list select functionality.

 

role="complementary"


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.

<div role="complementary">
<h2>More Articles</h2>
<ul>
<!-- etc -->
</ul>
</div>

 

role="contentinfo"


A large perceivable region that contains information about the parent document.

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub demo title</title>
</head>

<body>
    <p role="contentinfo">
        Author: Albert Einstein<br>
        Published: August 15, 1940
    </p>
</body>

</html>

 

role="definition"


A definition of a term or concept.

<span role="term" aria-labelledby="def1">Love</span><span id="def1" role="definition">an intense feeling of deep affection.</span>

 

role="dialog"


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.

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub demo title</title>
</head>

<body>
    <div role="dialog">
        <p>Are you sure?</p>
        <button role="button">Yes</button>
        <button role="button">No</button>
    </div>
</body>

</html>

 

role="directory"


A list of references to members of a group, such as a static table of contents.

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub demo title</title>
</head>

<body>
    <ul role="directory">
        <li><a href="/chapter-1">Chapter 1</a></li>
        <li><a href="/chapter-2">Chapter 2</a></li>
        <li><a href="/chapter-3">Chapter 3</a></li>
    </ul>
</body>

</html>

 

role="document"


A region containing related information that is declared as document content, as opposed to a web application.

<div role="document">
<h1>The Life of Albert Einstein</h1>
<p>Lorem ipsum...</p>
</div>

 

role="form"


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.

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub demo title</title>
</head>

<body>
    <form action="">
        <fieldset>
            <legend>Login form</legend>
            <div>
                <label for="username">Your username</label>
                <input type="text" id="username" aria-describedby="username-tip" required />
                <div role="tooltip" id="username-tip">Your username is your email address</div>
            </div>
            <div>
                <label for="password">Your password</label>
                <input type="text" id="password" aria-describedby="password-tip" required />
                <div role="tooltip" id="password-tip">Was emailed to you when you signed up</div>
            </div>
        </fieldset>
    </form>
</body>

</html>

You would use role=form on non-semantic elements (not recommended, invalid)

<div role=form>
<input type="email" placeholder="Your email address">
<button>Sign up</button>
</div>

 

role="grid"


A grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table.

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub demo title</title>
</head>

<body>
    <table role="grid">
        <thead>
            <!-- etc -->
        </thead>
        <tbody>
            <!-- etc -->
        </tbody>
    </table>
</body>

</html>

 

role="gridcell"


A cell in a grid or treegrid.

<!DOCTYPE html>
<html>

<head>
    <title>Atutorialhub demo title</title>
</head>

<body>
    <table role="grid">
        <thead>
            <!-- etc -->
        </thead>
        <tbody>
            <tr>
                <td role="gridcell">17</td>
                <td role="gridcell">64</td>
                <td role="gridcell">18</td>
            </tr>
        </tbody>
        <table>
</body>

</html>

 

role="group"


A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies.

<div role="group">
<button role"button">Previous</button>
<button role"button">Next</button>
</div>

 

role="heading"


A heading for a section of the page.

<h1 role="heading">Introduction</h1>
<p>Lorem ipsum...</p>

 

role="img"


A container for a collection of elements that form an image.

<figure role="img">
<img alt="A cute cat." src="albert.jpg">
<figcaption>This is my cat, Albert.</figcaption>
<figure>

 

role="link"


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.

Source - https://www.w3.org/TR/html5/dom.html#aria-usage-note

 

role="list"


A group of non-interactive list items.

<ul role="list">
<li role="listitem">One</li>
<li role="listitem">Two</li>
<li role="listitem">Three</li>
</ul>

 

role="listbox"


A widget that allows the user to select one or more items from a list of choices.

<ul role="listbox">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

Typically, you would use JavaScript to build the multiple-selection functionality.

 

role="listitem"


A single item in a list or directory.

<ul role="list">
<li role="listitem">One</li>
<li role="listitem">Two</li>
<li role="listitem">Three</li>
</ul>

ATutorialHub Related Guide

HTML Tutorials Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website