HTML ARIA-1

HTML ARIA-1
Nikhil
Published on 2021-07-02 08:45:01

role="log"


A type of live region where new information is added in meaningful order and old information may disappear.

<!DOCTYPE html>
<html>

<head>
        <title>HTML atutorialhub</title>
</head>

<body>
        <ul role="log">
            <li>User 1 logged in.</li>
            <li>User 2 logged in.</li>
            <li>User 1 logged out.</li>
    </ul>
</body>

</html>

 

role="main"


The main content of a document.

<!DOCTYPE html>
<html>

<head>
            <title>HTML atutorialhub</title>
</head>

<body>
         
    <!-- header & nav here -->
    <div role="main">
        <p>Lorem ipsum...</p>
    </div>
    <!-- footer here -->
</body>

</html>

 

role="marquee"


A type of live region where non-essential information changes frequently.

<!DOCTYPE html>
<html>

<head>
            <title>HTML atutorialhub</title>
</head>

<body>
         
    <ul role="marquee">
        <li>Dow +0.26%</li>
        <li>Nasdaq +0.54%</li>
        <li>S&amp;P +0.44%</li>
    </ul>
</body>

</html>

 

role="math"


Content that represents a mathematical expression.

<img role="math" alt="y=mx+b" src="slope.png">

 

role="menu"


A type of widget that offers a list of choices to the user.

<!DOCTYPE html>
<html>

<head>
            <title>HTML atutorialhub</title>
</head>

<body>
         
    <ul role="menu">
        <li role="menuitem">New</li>
        <li role="menuitem">Open</li>
        <li role="menuitem">Save</li>
        <li role="menuitem">Close</li>
    </ul>
</body>

</html>

 

role="menubar"


A presentation of menu that usually remains visible and is usually presented horizontally.

<!DOCTYPE html>
<html>

<head>
            <title>HTML atutorialhub</title>
</head>

<body>
    <ul role="menubar">
        <li role="menuitem">File</li>
        <li role="menuitem">Edit</li>
        <li role="menuitem">View</li>
        <li role="menuitem">Help</li>
    </ul>
</body>

</html>

 

role="menuitem"


An option in a group of choices contained by a menu or menubar.

<!DOCTYPE html>
<html>

<head>
            <title>HTML atutorialhub</title>
</head>

<body>
    <ul role="menubar">
        <li role="menuitem">File</li>
        <li role="menuitem">Edit</li>
        <li role="menuitem">View</li>
        <li role="menuitem">Help</li>
    </ul>
</body>

</html>

 

role="menuitemcheckbox"


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

<!DOCTYPE html>
<html>

<head>
            <title>HTML atutorialhub</title>
</head>

<body>
    <ul role="menu">
        <li role="menuitem">Console</li>
        <li role="menuitem">Layout</li>
        <li role="menuitemcheckbox" aria-checked="true">Word wrap</li>
    </ul>
</body>

</html>

 

role="menuitemradio"


A checkable menuitem in a group of menuitemradio roles, only one of which can be checked at a time.

<!DOCTYPE html>
<html>

<head>
            <title>HTML atutorialhub</title>
</head>

<body>
    <ul role="menu">
        <li role="menuitemradio" aria-checked="true">Left</li>
        <li role="menuitemradio" aria-checked="false">Center</li>
        <li role="menuitemradio" aria-checked="false">Right</li>
    </ul>
</body>

</html>

 

role="navigation"


A collection of navigational elements (usually links) for navigating the document or related documents.

<!DOCTYPE html>
<html>

<head>
            <title>HTML atutorialhub</title>
</head>

<body>
    <ul role="navigation">
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</body>

</html>

 

role="note"


A section whose content is parenthetic or ancillary to the main content of the resource.

<!DOCTYPE html>
<html>

<head>
    <title>HTML atutorialhub</title>
</head>

<body>
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
    <p role="note">Lorem ipsum...</p>
</body>

</html>

 

role="option"


A selectable item in a select list.

<!DOCTYPE html>
<html>

<head>
    <title>HTML atutorialhub</title>
</head>

<body>
    <ul role="listbox">
        <li role="option">Option 1</li>
        <li role="option">Option 2</li>
        <li role="option">Option 3</li>
    </ul>
</body>

</html>

 

role="progressbar"


An element that displays the progress status for tasks that take a long time.

<progress role="progressbar" value="25" max="100">25%</progress>

 role="radio"


A checkable input in a group of radio roles, only one of which can be checked at a time.

<!DOCTYPE html>
<html>

<head>
    <title>HTML atutorialhub</title>
</head>

<body>
    <div role="radiogroup">
        <input role="radio" type="radio" aria-checked="true"> One<br>
        <input role="radio" type="radio" aria-checked="false"> Two<br>
        <input role="radio" type="radio" aria-checked="false"> Three
    </div>
</body>

</html>

 

role="region"


A large perceivable section of a web page or document, that the author feels is important enough to be included in a page summary or table of contents, for example, an area of the page containing live sporting event statistics.

<!DOCTYPE html>
<html>

<head>
    <title>HTML atutorialhub</title>
</head>

<body>
    <div role="region">
        Home team: 4<br>
        Away team: 2
    </div>
</body>

</html>

 

role="radiogroup"


A group of radio buttons.

<!DOCTYPE html>
<html>

<head>
    <title>HTML atutorialhub</title>
</head>

<body>
    <div role="radiogroup">
        <input role="radio" type="radio" aria-checked="true"> One<br>
        <input role="radio" type="radio" aria-checked="false"> Two<br>
        <input role="radio" type="radio" aria-checked="false"> Three
    </div>
</body>

</html>

 

role="row"


A row of cells in a tabular container.

<!DOCTYPE html>
<html>

<head>
    <title>HTML atutorialhub</title>
</head>

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

</html>

 

role="rowgroup"


A group containing one or more row elements in a grid.

<!DOCTYPE html>
<html>

<head>
    <title>HTML atutorialhub</title>
</head>

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

</html>

 

role="rowheader"


A cell containing header information for a row in a grid.

<!DOCTYPE html>
<html>

<head>
    <title>HTML atutorialhub</title>
</head>

<body>
    <table role="grid">
        <thead>
            <!-- etc -->
        </thead>
        <tbody>
            <tr>
                <th role="rowheader">Day 1</th>
                <td>65</td>
            </tr>
            <tr>
                <th role="rowheader">Day 2</th>
                <td>74</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

 

role="scrollbar"


A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area.

<!DOCTYPE html>
<html>

<head>
    <title>HTML atutorialhub</title>
</head>

<body>
    <div id="content1">Lorem ipsum...</div>
    <div role="scrollbar" aria-controls="content1" aria-orientation="vertical" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25">
        <div class="scrollhandle"></div>
    </div>
</body>

</html>

 

role="search"


A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility.

<!DOCTYPE html>
<html>

<head>
    <title>HTML atutorialhub</title>
</head>

<body>
    <div role="search"><input role="searchbox" type="text">
        <button role="button">Search</button>
    </div>
</body>

</html>

 

role="searchbox"


A type of textbox intended for specifying search criteria.

<!DOCTYPE html>
<html>

<head>
    <title>HTML atutorialhub</title>
</head>

<body>
    <div role="search">
        <input role="searchbox" type="text">
        <button role="button">Search</button>
    </div>
</body>

</html>

 

role="separator"


A divider that separates and distinguishes sections of content or groups of menuitems.

<p>Lorem ipsum...</p>
<hr role="separator">
<p>Lorem ipsum...</p>

 

role="slider"


A user input where the user selects a value from within a given range.

<!DOCTYPE html>
<html>

<head>
    <title>HTML atutorialhub</title>
</head>

<body>
    <div role="slider" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25">
        <div class="sliderhandle"></div>
    </div>
</body>

</html>

 

role="spinbutton"


A form of range that expects the user to select from among discrete choices.

<!DOCTYPE html>
<html>

<head>
    <title>HTML atutorialhub</title>
</head>

<body>
    <input role="spinbutton" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" type="number" value="25">
</body>

</html>

 

role="status"


A container whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily presented as a status bar.

<div role="status">Online</div>

 

role="switch"


A type of checkbox that represents on/off values, as opposed to checked/unchecked values.

<!DOCTYPE html>
<html>

<head>
    <title>HTML atutorialhub</title>
</head>

<body>
    <select role="switch" aria-checked="false">
        <option>On</option>
        <option selected>Off</option>
    </select>
</body>

</html>

 

role="tab"


A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.

<!DOCTYPE html>
<html>

<head>
    <title>HTML atutorialhub</title>
</head>

<body>
    <ul role="tablist">
        <li role="tab">Introduction</li>
        <li role="tab">Chapter 1</li>
        <li role="tab">Chapter 2</li>
    </ul>
</body>

</html>

 

role="table"


A section containing data arranged in rows and columns. The table role is intended for tabular containers which are not interactive.

<!DOCTYPE html>
<html>

<head>
    <title>HTML atutorialhub</title>
</head>

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

</html>

 

role="tablist"


A list of tab elements, which are references to tabpanel elements.

<ul role="tablist">
    <li role="tab">Introduction</li>
    <li role="tab">Chapter 1</li>
    <li role="tab">Chapter 2</li>
</ul>

 

role="tabpanel"


A container for the resources associated with a tab, where each tab is contained in a tablist.

<ul role="tablist">
    <li role="tab">Introduction</li>
    <li role="tab">Chapter 1</li>
    <li role="tab">Chapter 2</li>
</ul>
<div role="tabpanel">
    <!-- etc -->
</div>

 

role="textbox"


Input that allows free-form text as its value.

<textarea role="textbox"></textarea>

 

role="timer"


A type of live region containing a numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point.

<p>
<span role="timer">60</span> seconds remaining.
</p>

 

role="toolbar"


A collection of commonly used function buttons represented in compact visual form.

<ul role="toolbar">
    <li><img alt="New" src="new.png"></li>
    <li><img alt="Open" src="open.png"></li>
    <li><img alt="Save" src="save.png"></li>
    <li><img alt="Close" src="close.png"></li>
</ul>

 

role="tooltip"


A contextual popup that displays a description for an element.

<span aria-describedby="slopedesc">Slope</span>
<div role="tooltip" id="slopedesc">y=mx+b</div>

Typically, the tooltip would be hidden. Using JavaScript, the tooltip would be displayed after a delay when the user hovers over the element that it describes.

 

role="tree"


A type of list that may contain sub-level nested groups that can be collapsed and expanded.

<ul role="tree">
<li role="treeitem">

Part 1

<ul>
    <li role="treeitem">Chapter 1</li>
    <li role="treeitem">Chapter 2</li>
    <li role="treeitem">Chapter 3</li>
</ul>
</li>
<li role="treeitem">

Part 2

<ul>
<li role="treeitem">Chapter 4</li>
<li role="treeitem">Chapter 5</li>
<li role="treeitem">Chapter 6</li>
</ul>
</li>
<li role="treeitem">

Part 3

<ul>

<li role="treeitem">Chapter 7</li>
<li role="treeitem">Chapter 8</li>
<li role="treeitem">Chapter 9</li>
</ul>
</li>
</ul>

role="treegrid"


A grid whose rows can be expanded and collapsed in the same manner as for a tree.

An option item of a tree. This is an element within a tree that may be expanded or collapsed if it contains a sublevel group of treeitems.

<ul role="tree">
<li role="treeitem">

Part 1

<ul>
<li role="treeitem">Chapter 1</li>
<li role="treeitem">Chapter 2</li>
<li role="treeitem">Chapter 3</li>
</ul>
</li>
<li role="treeitem">

Part 2

<ul>
<li role="treeitem">Chapter 4</li>
<li role="treeitem">Chapter 5</li>
<li role="treeitem">Chapter 6</li>
</ul>
</li>
<li role="treeitem">

Part 3

<ul>
<li role="treeitem">Chapter 7</li>
<li role="treeitem">Chapter 8</li>
<li role="treeitem">Chapter 9</li>
</ul>
</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