{"id":474,"date":"2021-07-19T10:37:16","date_gmt":"2021-07-19T05:07:16","guid":{"rendered":"https:\/\/wpproonline.com\/?p=474"},"modified":"2026-02-26T10:42:05","modified_gmt":"2026-02-26T10:42:05","slug":"chapter-41-aria","status":"publish","type":"post","link":"https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/","title":{"rendered":"Chapter 41: ARIA"},"content":{"rendered":"\n

role=”presentation”<\/h2>\n\n

An element whose implicit native role semantics will not be mapped to the accessibility API.<\/p>\n\n

<div style=\"float:left;\">Some content on the left.<\/div>\n<div style=\"float:right;\">Some content on the right<\/div>\n<div role=\"presentation\" style=\"clear:both;\"><\/div> <!-- Only used to clear floats --><\/pre>\n\n
<\/p>\n\n
role=”alert”<\/h2>\n\n
A message with important, and usually time-sensitive, information.<\/p>\n\n
<div role=\"alert\" aria-live=\"assertive\">Your session will expire in 60 seconds.<\/div><\/pre>\n\n
\n
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.<\/p>\n
Source – Heydon Pickering ‘Some practical ARIA examples’<\/a><\/p>\n<\/blockquote>\n\n
role=”alertdialog”<\/h2>\n\n
A type of dialog that contains an alert message, where initial focus goes to an element within the dialog.<\/p>\n\n
<div role=\"alertdialog\">\n <h1>Warning<\/h1>\n <div role=\"alert\">Your session will expire in 60 seconds.<\/div>\n<\/div><\/pre>\n\n
role=”application”<\/h2>\n\n
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.<\/p>\n\n
<div role=\"application\">\n <h1>Calculator<\/h1>\n <input id=\"num1\" type=\"text\"> + <input id=\"num2\" type=\"text\"> =\n <span id=\"result\"><\/span>\n<\/div><\/pre>\n\n
role=”article”<\/h2>\n\n
A section of a page that consists of a composition that forms an independent part of a document, page, or site.<\/p>\n\n
\n
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.<\/a><\/p>\n<\/blockquote>\n\n
<article>\n <h1>My first article<\/h1>\n <p>Lorem ipsum...<\/p>\n<\/article><\/pre>\n\n
You would use role=article on non-semantic elements (not recommended, invalid)<\/p>\n\n
<div role=\"article\">\n <h1>My first article<\/h1>\n <p>Lorem ipsum...<\/p>\n<\/div><\/pre>\n\n
W3C Entry for role=article<\/a><\/em><\/p>\n\n
role=”banner”<\/h2>\n\n
A region that contains mostly site-oriented content, rather than page-specific content.<\/p>\n\n
<div role=\"banner\">\n <h1>My Site<\/h1>\n <ul>\n <li><a href=\"\/\">Home<\/a><\/li>\n <li><a href=\"\/about\">About<\/a><\/li>\n <li><a href=\"\/contact\">Contact<\/a><\/li>\n <\/ul>\n<\/div><\/pre>\n\n
role=”button”<\/h2>\n\n
An input that allows for user-triggered actions when clicked or pressed.<\/p>\n\n
<button role=\"button\">Add<\/button><\/pre>\n\n
role=”cell”<\/h2>\n\n
A cell in a tabular container.<\/p>\n\n
<table>\n <thead>\n <!-- etc -->\n <\/thead>\n <tbody>\n <td role=\"cell\">95<\/td>\n <td role=\"cell\">14<\/td>\n <td role=\"cell\">25<\/td>\n <\/tbody>\n<\/table><\/pre>\n\n
role=”checkbox”<\/h2>\n\n
A checkable input that has three possible values: true, false, or mixed.<\/p>\n\n
<p>\n <input type=\"checkbox\" role=\"checkbox\" aria-checked=\"false\">\n I agree to the termsGoalKicker.com \u2013 HTML5 Notes for Professionals 100\n<\/p><\/pre>\n\n
role=”columnheader”<\/h2>\n\n
A cell containing header information for a column.<\/p>\n\n
<table role=\"grid\">\n <thead>\n <tr>\n <th role=\"columnheader\">Day 1<\/th>\n <th role=\"columnheader\">Day 2<\/th>\n <th role=\"columnheader\">Day 3<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <!-- etc -->\n <\/tbody>\n<table><\/pre>\n\n
role=”combobox”<\/h2>\n\n
A presentation of a select; usually similar to a textbox where users can type ahead to select an option, or type to
enter arbitrary text as a new item in the list.<\/p>\n\n
<input type=\"text\" role=\"combobox\" aria-expanded=\"false\"><\/pre>\n\n
Typically, you would use JavaScript to build the rest of the typeahead or list select functionality.<\/p>\n\n
role=”complementary”<\/h2>\n\n
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.<\/p>\n\n
<div role=\"complementary\">\n <h2>More Articles<\/h2>\n <ul>\n <!-- etc -->\n <\/ul>\n<\/div><\/pre>\n\n
role=”contentinfo”<\/h2>\n\n
A large perceivable region that contains information about the parent document.<\/p>\n\n
<p role=\"contentinfo\">\n Author: Albert Einstein<br>\n Published: August 15, 1940\n<\/p><\/pre>\n\n
role=”definition”<\/h2>\n\n
A definition of a term or concept.<\/p>\n\n
<span role=\"term\" aria-labelledby=\"def1\">Love<\/span>\n<span id=\"def1\" role=\"definition\">an intense feeling of deep affection.<\/span><\/pre>\n\n
role=”dialog”<\/h2>\n\n
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.<\/p>\n\n
<div role=\"dialog\">\n <p>Are you sure?<\/p>\n <button role=\"button\">Yes<\/button>\n <button role=\"button\">No<\/button>\n<\/div><\/pre>\n\n
role=”directory”<\/h2>\n\n
A list of references to members of a group, such as a static table of contents.<\/p>\n\n
<ul role=\"directory\">\n <li><a href=\"\/chapter-1\">Chapter 1<\/a><\/li>\n <li><a href=\"\/chapter-2\">Chapter 2<\/a><\/li>\n <li><a href=\"\/chapter-3\">Chapter 3<\/a><\/li>\n<\/ul><\/pre>\n\n
role=”document”<\/h2>\n\n
A region containing related information that is declared as document content, as opposed to a web application.<\/p>\n\n
<div role=\"document\">\n <h1>The Life of Albert Einstein<\/h1>\n <p>Lorem ipsum...<\/p>\n<\/div><\/pre>\n\n
role=”form”<\/h2>\n\n
A landmark region that contains a collection of items and objects that, as a whole, combine to create a form.<\/p>\n\n
Using the semantically correct HTML element <form><\/em><\/strong> 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.<\/p>\n\n
\n
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.<\/a><\/p>\n<\/blockquote>\n\n
<form action=\"\">\n <fieldset>\n <legend>Login form<\/legend>\n <div>\n <label for=\"username\">Your username<\/label>\n <input type=\"text\" id=\"username\" aria-describedby=\"username-tip\" required \/>\n <div role=\"tooltip\" id=\"username-tip\">Your username is your email address<\/div>\n <\/div>\n <div>\n <label for=\"password\">Your password<\/label>\n <input type=\"text\" id=\"password\" aria-describedby=\"password-tip\" required \/>GoalKicker.com \u2013 HTML5 Notes for Professionals 102\n <div role=\"tooltip\" id=\"password-tip\">Was emailed to you when you signed up<\/div>\n <\/div>\n <\/fieldset>\n<\/form><\/pre>\n\n
You would use role=form on non-semantic elements (not recommended, invalid)<\/p>\n\n
<div role=form>\n <input type=\"email\" placeholder=\"Your email address\">\n <button>Sign up<\/button>\n<\/div><\/pre>\n\n
role=”grid”<\/h2>\n\n
A grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table.<\/p>\n\n
<table role=\"grid\">\n <thead>\n <!-- etc -->\n <\/thead>\n <tbody>\n <!-- etc -->\n <\/tbody>\n<\/table><\/pre>\n\n
role=”gridcell”<\/h2>\n\n
A cell in a grid or treegrid.<\/p>\n\n
<table role=\"grid\">\n <thead>\n <!-- etc -->\n <\/thead>\n <tbody>\n <tr>\n <td role=\"gridcell\">17<\/td>\n <td role=\"gridcell\">64<\/td>\n <td role=\"gridcell\">18<\/td>\n <\/tr>\n <\/tbody>\n<table><\/pre>\n\n
role=”group”<\/h2>\n\n
A set of user interface objects which are not intended to be included in a page summary or table of contents by
assistive technologies.<\/p>\n\n
<div role=\"group\">\n <button role\"button\">Previous<\/button>\n <button role\"button\">Next<\/button>\n<\/div><\/pre>\n\n
role=”heading”<\/h2>\n\n
A heading for a section of the page.<\/p>\n\n
<h1 role=\"heading\">Introduction<\/h1>\n<p>Lorem ipsum...<\/p><\/pre>\n\n
role=”img”<\/h2>\n\n
A container for a collection of elements that form an image.<\/p>\n\n
<figure role=\"img\">\n <img alt=\"A cute cat.\" src=\"albert.jpg\">\n <figcaption>This is my cat, Albert.<\/figcaption>\n<figure><\/pre>\n\n
role=”link”<\/h2>\n\n
An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate
to that resource.<\/p>\n\n
\n
In the majority of cases setting an ARIA role and\/or aria-* attribute that matches the default implicit ARIA
semantics<\/a> is unnecessary and not recommended as these properties are already set by the browser.<\/p>\n
Source – https:\/\/www.w3.org\/TR\/html5\/dom.html#aria-usage-note<\/a><\/p>\n<\/blockquote>\n\n
role=”list”<\/h2>\n\n
A group of non-interactive list items.<\/p>\n\n
<ul role=\"list\">\n <li role=\"listitem\">One<\/li>\n <li role=\"listitem\">Two<\/li>\n <li role=\"listitem\">Three<\/li>\n<\/ul><\/pre>\n\n
role=”listbox”<\/h2>\n\n
A widget that allows the user to select one or more items from a list of choices.<\/p>\n\n
<ul role=\"listbox\">\n <li>One<\/li>\n <li>Two<\/li>\n <li>Three<\/li>\n<\/ul><\/pre>\n\n
Typically, you would use JavaScript to build the multiple-selection functionality.<\/p>\n\n
role=”listitem”<\/h2>\n\n
A single item in a list or directory.<\/p>\n\n
<ul role=\"list\">\n <li role=\"listitem\">One<\/li>\n <li role=\"listitem\">Two<\/li>\n <li role=\"listitem\">Three<\/li>\n<\/ul><\/pre>\n\n
role=”log”<\/h2>\n\n
A type of live region where new information is added in meaningful order and old information may disappear.<\/p>\n\n
<ul role=\"log\">\n <li>User 1 logged in.<\/li>\n <li>User 2 logged in.<\/li>\n <li>User 1 logged out.<\/li>\n<\/ul><\/pre>\n\n
role=”main”<\/h2>\n\n
The main content of a document.<\/p>\n\n
<!-- header & nav here -->\n<div role=\"main\">\n <p>Lorem ipsum...<\/p>\n<\/div>\n<!-- footer here --><\/pre>\n\n
role=”marquee”<\/h2>\n\n
A type of live region where non-essential information changes frequently.<\/p>\n\n
<ul role=\"marquee\">\n <li>Dow +0.26%<\/li>\n <li>Nasdaq +0.54%<\/li>\n <li>S&amp;P +0.44%<\/li>\n<\/ul><\/pre>\n\n
role=”math”<\/h2>\n\n
Content that represents a mathematical expression.<\/p>\n\n
<img role=\"math\" alt=\"y=mx+b\" src=\"slope.png\"><\/pre>\n\n
role=”menu”<\/h2>\n\n
A type of widget that offers a list of choices to the user.<\/p>\n\n
<ul role=\"menu\">\n <li role=\"menuitem\">New<\/li>\n <li role=\"menuitem\">Open<\/li>\n <li role=\"menuitem\">Save<\/li>\n <li role=\"menuitem\">Close<\/li>\n<\/ul><\/pre>\n\n
role=”menubar”<\/h2>\n\n
A presentation of menu that usually remains visible and is usually presented horizontally.<\/p>\n\n
<ul role=\"menubar\">\n <li role=\"menuitem\">File<\/li>\n <li role=\"menuitem\">Edit<\/li>\n <li role=\"menuitem\">View<\/li>GoalKicker.com \u2013 HTML5 Notes for Professionals 105\n <li role=\"menuitem\">Help<\/li>\n<\/ul><\/pre>\n\n
role=”menuitem”<\/h2>\n\n
An option in a group of choices contained by a menu or menubar.<\/p>\n\n
<ul role=\"menubar\">\n <li role=\"menuitem\">File<\/li>\n <li role=\"menuitem\">Edit<\/li>\n <li role=\"menuitem\">View<\/li>\n <li role=\"menuitem\">Help<\/li>\n<\/ul><\/pre>\n\n
role=”menuitemcheckbox”<\/h2>\n\n
A checkable menuitem that has three possible values: true, false, or mixed.<\/p>\n\n
<ul role=\"menu\">\n <li role=\"menuitem\">Console<\/li>\n <li role=\"menuitem\">Layout<\/li>\n <li role=\"menuitemcheckbox\" aria-checked=\"true\">Word wrap<\/li>\n<\/ul><\/pre>\n\n
role=”menuitemradio”<\/h2>\n\n
A checkable menuitem in a group of menuitemradio roles, only one of which can be checked at a time.<\/p>\n\n
<ul role=\"menu\">\n <li role=\"menuitemradio\" aria-checked=\"true\">Left<\/li>\n <li role=\"menuitemradio\" aria-checked=\"false\">Center<\/li>\n <li role=\"menuitemradio\" aria-checked=\"false\">Right<\/li>\n<\/ul><\/pre>\n\n
role=”navigation”<\/h2>\n\n
A collection of navigational elements (usually links) for navigating the document or related documents.<\/p>\n\n
<ul role=\"navigation\">\n <li><a href=\"\/\">Home<\/a><\/li>\n <li><a href=\"\/about\">About<\/a><\/li>\n <li><a href=\"\/contact\">Contact<\/a><\/li>\n<\/ul><\/pre>\n\n
role=”note”<\/h2>\n\n
A section whose content is parenthetic or ancillary to the main content of the resource.<\/p>\n\n
<p>Lorem ipsum...<\/p>\n<p>Lorem ipsum...<\/p>\n<p role=\"note\">Lorem ipsum...<\/p><\/pre>\n\n
role=”option”<\/h2>\n\n
A selectable item in a select list.<\/p>\n\n
<ul role=\"listbox\">\n <li role=\"option\">Option 1<\/li>\n <li role=\"option\">Option 2<\/li>\n <li role=\"option\">Option 3<\/li>\n<\/ul><\/pre>\n\n
role=”progressbar”<\/h2>\n\n
An element that displays the progress status for tasks that take a long time.<\/p>\n\n
<progress role=\"progressbar\" value=\"25\" max=\"100\">25%<\/progress><\/pre>\n\n
role=”radio”<\/h2>\n\n
A checkable input in a group of radio roles, only one of which can be checked at a time.<\/p>\n\n
<div role=\"radiogroup\">\n <input role=\"radio\" type=\"radio\" aria-checked=\"true\"> One<br>\n <input role=\"radio\" type=\"radio\" aria-checked=\"false\"> Two<br>\n <input role=\"radio\" type=\"radio\" aria-checked=\"false\"> Three\n<\/div><\/pre>\n\n
role=”region”<\/h2>\n\n
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.<\/p>\n\n
<div role=\"region\">\n Home team: 4<br>\n Away team: 2\n<\/div><\/pre>\n\n
role=”radiogroup”<\/h2>\n\n
A group of radio buttons<\/p>\n\n
<div role=\"radiogroup\">\n <input role=\"radio\" type=\"radio\" aria-checked=\"true\"> One<br>\n <input role=\"radio\" type=\"radio\" aria-checked=\"false\"> Two<br>\n <input role=\"radio\" type=\"radio\" aria-checked=\"false\"> Three\n<\/div><\/pre>\n\n
role=”row”<\/h2>\n\n
A row of cells in a tabular container.<\/p>\n\n
<table>\n <thead>\n <!-- etc -->\n <\/thead>\n <tbody>\n <tr role=\"row\">\n <!-- etc -->\n <\/tr>\n <\/tbody>GoalKicker.com \u2013 HTML5 Notes for Professionals 107\n<\/table><\/pre>\n\n
role=”rowgroup”<\/h2>\n\n
A group containing one or more row elements in a grid.<\/p>\n\n
<table>\n <thead role=\"rowgroup\">\n <!-- etc -->\n <\/thead>\n <tbody role=\"rowgroup\">\n <!-- etc -->\n <\/tbody>\n<\/table><\/pre>\n\n
role=”rowheader”<\/h2>\n\n
A cell containing header information for a row in a grid.<\/p>\n\n
<table role=\"grid\">\n <thead>\n <!-- etc -->\n <\/thead>\n <tbody>\n <tr>\n <th role=\"rowheader\">Day 1<\/th>\n <td>65<\/td>\n <\/tr>\n <tr>\n <th role=\"rowheader\">Day 2<\/th>\n <td>74<\/td>\n <\/tr>\n <\/tbody>\n<\/table><\/pre>\n\n
role=”scrollbar”<\/h2>\n\n
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.<\/p>\n\n
<div id=\"content1\">Lorem ipsum...<\/div>\n<div\n role=\"scrollbar\"\n aria-controls=\"content1\"\n aria-orientation=\"vertical\"\n aria-valuemax=\"100\"\n aria-valuemin=\"0\"\n aria-valuenow=\"25\">\n <div><\/div>\n<\/div><\/pre>\n\n
role=”search”<\/h2>\n\n
A landmark region that contains a collection of items and objects that, as a whole, combine to create a search
facility.<\/p>\n\n
<div role=\"search\">GoalKicker.com \u2013 HTML5 Notes for Professionals 108\n <input role=\"searchbox\" type=\"text\">\n <button role=\"button\">Search<\/button>\n<\/div><\/pre>\n\n
role=”searchbox”<\/h2>\n\n
A type of textbox intended for specifying search criteria.<\/p>\n\n
<div role=\"search\">\n <input role=\"searchbox\" type=\"text\">\n <button role=\"button\">Search<\/button>\n<\/div><\/pre>\n\n
role=”separator”<\/h2>\n\n
A divider that separates and distinguishes sections of content or groups of menuitems.<\/p>\n\n
<p>Lorem ipsum...<\/p>\n<hr role=\"separator\">\n<p>Lorem ipsum...<\/p><\/pre>\n\n
role=”slider”<\/h2>\n\n
A user input where the user selects a value from within a given range.<\/p>\n\n
<div\n role=\"slider\"\n aria-valuemax=\"100\"\n aria-valuemin=\"0\"\n aria-valuenow=\"25\">\n <div><\/div>\n<\/div><\/pre>\n\n
role=”spinbutton”<\/h2>\n\n
A form of range that expects the user to select from among discrete choices.<\/p>\n\n
<input\n role=\"spinbutton\"\n aria-valuemax=\"100\"\n aria-valuemin=\"0\"\n aria-valuenow=\"25\"\n type=\"number\"\n value=\"25\"><\/pre>\n\n
role=”status”<\/h2>\n\n
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.<\/p>\n\n
<div role=\"status\">Online<\/div><\/pre>\n\n
role=”switch”<\/h2>\n\n
A type of checkbox that represents on\/off values, as opposed to checked\/unchecked values.<\/p>\n\n
<select role=\"switch\" aria-checked=\"false\">\n <option>On<\/option>\n <option selected>Off<\/option>\n<\/select><\/pre>\n\n
role=”tab”<\/h2>\n\n
A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user.<\/p>\n\n
<ul role=\"tablist\">\n <li role=\"tab\">Introduction<\/li>\n <li role=\"tab\">Chapter 1<\/li>\n <li role=\"tab\">Chapter 2<\/li>\n<\/ul><\/pre>\n\n
role=”table”<\/h2>\n\n
A section containing data arranged in rows and columns. The table role is intended for tabular containers which are
not interactive.<\/p>\n\n
<table role=\"table\">\n <thead>\n <!-- etc -->\n <\/thead>\n <tbody>\n <!-- etc -->\n <\/tbody>\n<\/table><\/pre>\n\n
role=”tablist”<\/h2>\n\n
A list of tab elements, which are references to tabpanel elements.<\/p>\n\n
<ul role=\"tablist\">\n <li role=\"tab\">Introduction<\/li>\n <li role=\"tab\">Chapter 1<\/li>\n <li role=\"tab\">Chapter 2<\/li>\n<\/ul><\/pre>\n\n
role=”tabpanel”<\/h2>\n\n
A container for the resources associated with a tab, where each tab is contained in a tablist.<\/p>\n\n
<ul role=\"tablist\">\n <li role=\"tab\">Introduction<\/li>\n <li role=\"tab\">Chapter 1<\/li>\n <li role=\"tab\">Chapter 2<\/li>\n<\/ul>\n<div role=\"tabpanel\">\n <!-- etc -->\n<\/div><\/pre>\n\n
role=”textbox”<\/h2>\n\n
Input that allows free-form text as its value.<\/p>\n\n
<textarea role=\"textbox\"><\/textarea><\/pre>\n\n
role=”timer”<\/h2>\n\n
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>\n\n
<p>\n <span role=\"timer\">60<\/span> seconds remaining.\n<\/p><\/pre>\n\n
role=”toolbar”<\/h2>\n\n
A collection of commonly used function buttons represented in compact visual form.<\/p>\n\n
<ul role=\"toolbar\">\n <li><img alt=\"New\" src=\"new.png\"><\/li>\n <li><img alt=\"Open\" src=\"open.png\"><\/li>\n <li><img alt=\"Save\" src=\"save.png\"><\/li>\n <li><img alt=\"Close\" src=\"close.png\"><\/li>\n<\/ul><\/pre>\n\n
role=”tooltip”<\/h2>\n\n
A contextual popup that displays a description for an element.<\/p>\n\n
<span aria-describedby=\"slopedesc\">Slope<\/span>\n<div role=\"tooltip\" id=\"slopedesc\">y=mx+b<\/div><\/pre>\n\n
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.<\/p>\n\n
role=”tree”<\/h2>\n\n
A type of list that may contain sub-level nested groups that can be collapsed and expanded.<\/p>\n\n
<ul role=\"tree\">\n <li role=\"treeitem\">\n Part 1\n <ul>\n <li role=\"treeitem\">Chapter 1<\/li>\n <li role=\"treeitem\">Chapter 2<\/li>\n <li role=\"treeitem\">Chapter 3<\/li>\n <\/ul>\n <\/li>\n <li role=\"treeitem\">\n Part 2\n <ul>\n <li role=\"treeitem\">Chapter 4<\/li>\n <li role=\"treeitem\">Chapter 5<\/li>\n <li role=\"treeitem\">Chapter 6<\/li>\n <\/ul>\n <\/li>\n <li role=\"treeitem\">\n Part 3\n <ul>\n <li role=\"treeitem\">Chapter 7<\/li>\n <li role=\"treeitem\">Chapter 8<\/li>\n <li role=\"treeitem\">Chapter 9<\/li>\n <\/ul>\n <\/li>\n<\/ul><\/pre>\n\n
role=”treegrid”<\/h2>\n\n
A grid whose rows can be expanded and collapsed in the same manner as for a tree.<\/p>\n\n
role=”treeitem”<\/h2>\n\n
An option item of a tree. This is an element within a tree that may be expanded or collapsed if it contains a sub\u0002level group of treeitems.<\/p>\n\n
<ul role=\"tree\">\n <li role=\"treeitem\">\n Part 1\n <ul>\n <li role=\"treeitem\">Chapter 1<\/li>\n <li role=\"treeitem\">Chapter 2<\/li>\n <li role=\"treeitem\">Chapter 3<\/li>\n <\/ul>\n <\/li>\n <li role=\"treeitem\">\n Part 2\n <ul>\n <li role=\"treeitem\">Chapter 4<\/li>\n <li role=\"treeitem\">Chapter 5<\/li>\n <li role=\"treeitem\">Chapter 6<\/li>\n <\/ul>\n <\/li>\n <li role=\"treeitem\">\n Part 3\n <ul>\n <li role=\"treeitem\">Chapter 7<\/li>\n <li role=\"treeitem\">Chapter 8<\/li>\n <li role=\"treeitem\">Chapter 9<\/li>\n <\/ul>\n <\/li>\n<\/ul><\/pre>\n","protected":false},"excerpt":{"rendered":"
role=”presentation” An element whose implicit native role semantics will not be mapped to the accessibility API.<\/p>\n","protected":false},"author":1,"featured_media":582,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[73,76,111,77],"tags":[110,112,136,154,113],"class_list":["post-474","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-html-5-notes-for-professional","category-javascript","tag-html-5-notes","tag-html-5-tutorial","tag-html-resources","tag-html-with-css","tag-html5"],"yoast_head":"\nChapter 41: ARIA - DigitalHubZ<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chapter 41: ARIA\" \/>\n<meta property=\"og:description\" content=\"role=”presentation” An element whose implicit native role semantics will not be mapped to the accessibility API.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/\" \/>\n<meta property=\"og:site_name\" content=\"DigitalHubZ\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-19T05:07:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-26T10:42:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2021\/07\/HTML-5-Notes-For-Professional-Chapter-41.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"945\" \/>\n\t<meta property=\"og:image:height\" content=\"394\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DigitalHubZ\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DigitalHubZ\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-41-aria\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-41-aria\\\/\"},\"author\":{\"name\":\"DigitalHubZ\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/person\\\/5a4074d837d6e5d22d665e5b7ca9e873\"},\"headline\":\"Chapter 41: ARIA\",\"datePublished\":\"2021-07-19T05:07:16+00:00\",\"dateModified\":\"2026-02-26T10:42:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-41-aria\\\/\"},\"wordCount\":1405,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-41-aria\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/HTML-5-Notes-For-Professional-Chapter-41.jpg\",\"keywords\":[\"HTML 5 Notes\",\"HTML 5 Tutorial\",\"HTML Resources\",\"HTML with CSS\",\"HTML5\"],\"articleSection\":[\"CSS\",\"HTML\",\"HTML 5 Notes For Professional\",\"Javascript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-41-aria\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-41-aria\\\/\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-41-aria\\\/\",\"name\":\"Chapter 41: ARIA - DigitalHubZ\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-41-aria\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-41-aria\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/HTML-5-Notes-For-Professional-Chapter-41.jpg\",\"datePublished\":\"2021-07-19T05:07:16+00:00\",\"dateModified\":\"2026-02-26T10:42:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-41-aria\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-41-aria\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-41-aria\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/HTML-5-Notes-For-Professional-Chapter-41.jpg\",\"contentUrl\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/HTML-5-Notes-For-Professional-Chapter-41.jpg\",\"width\":945,\"height\":394},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/chapter-41-aria\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chapter 41: ARIA\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/\",\"name\":\"DigitalHubZ\",\"description\":\"Future-Ready Digital Solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#organization\",\"name\":\"DigitalHubZ\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/digitalhubz.webp\",\"contentUrl\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/digitalhubz.webp\",\"width\":1232,\"height\":369,\"caption\":\"DigitalHubZ\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/person\\\/5a4074d837d6e5d22d665e5b7ca9e873\",\"name\":\"DigitalHubZ\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g\",\"caption\":\"DigitalHubZ\"},\"sameAs\":[\"https:\\\/\\\/digitalhubz.com\"],\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/author\\\/digi_v1_wp\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Chapter 41: ARIA - DigitalHubZ","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/","og_locale":"en_US","og_type":"article","og_title":"Chapter 41: ARIA","og_description":"role=”presentation” An element whose implicit native role semantics will not be mapped to the accessibility API.","og_url":"https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/","og_site_name":"DigitalHubZ","article_published_time":"2021-07-19T05:07:16+00:00","article_modified_time":"2026-02-26T10:42:05+00:00","og_image":[{"width":945,"height":394,"url":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2021\/07\/HTML-5-Notes-For-Professional-Chapter-41.jpg","type":"image\/jpeg"}],"author":"DigitalHubZ","twitter_card":"summary_large_image","twitter_misc":{"Written by":"DigitalHubZ","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/#article","isPartOf":{"@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/"},"author":{"name":"DigitalHubZ","@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/person\/5a4074d837d6e5d22d665e5b7ca9e873"},"headline":"Chapter 41: ARIA","datePublished":"2021-07-19T05:07:16+00:00","dateModified":"2026-02-26T10:42:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/"},"wordCount":1405,"commentCount":1,"publisher":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2021\/07\/HTML-5-Notes-For-Professional-Chapter-41.jpg","keywords":["HTML 5 Notes","HTML 5 Tutorial","HTML Resources","HTML with CSS","HTML5"],"articleSection":["CSS","HTML","HTML 5 Notes For Professional","Javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/","url":"https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/","name":"Chapter 41: ARIA - DigitalHubZ","isPartOf":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/#primaryimage"},"image":{"@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2021\/07\/HTML-5-Notes-For-Professional-Chapter-41.jpg","datePublished":"2021-07-19T05:07:16+00:00","dateModified":"2026-02-26T10:42:05+00:00","breadcrumb":{"@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/#primaryimage","url":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2021\/07\/HTML-5-Notes-For-Professional-Chapter-41.jpg","contentUrl":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2021\/07\/HTML-5-Notes-For-Professional-Chapter-41.jpg","width":945,"height":394},{"@type":"BreadcrumbList","@id":"https:\/\/www.digitalhubz.com\/blog\/chapter-41-aria\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.digitalhubz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Chapter 41: ARIA"}]},{"@type":"WebSite","@id":"https:\/\/www.digitalhubz.com\/blog\/#website","url":"https:\/\/www.digitalhubz.com\/blog\/","name":"DigitalHubZ","description":"Future-Ready Digital Solutions","publisher":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.digitalhubz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.digitalhubz.com\/blog\/#organization","name":"DigitalHubZ","url":"https:\/\/www.digitalhubz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2023\/03\/digitalhubz.webp","contentUrl":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2023\/03\/digitalhubz.webp","width":1232,"height":369,"caption":"DigitalHubZ"},"image":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/person\/5a4074d837d6e5d22d665e5b7ca9e873","name":"DigitalHubZ","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g","caption":"DigitalHubZ"},"sameAs":["https:\/\/digitalhubz.com"],"url":"https:\/\/www.digitalhubz.com\/blog\/author\/digi_v1_wp\/"}]}},"_links":{"self":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts\/474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/comments?post=474"}],"version-history":[{"count":4,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts\/474\/revisions"}],"predecessor-version":[{"id":54784,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts\/474\/revisions\/54784"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/media\/582"}],"wp:attachment":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/media?parent=474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/categories?post=474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/tags?post=474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}