The alert role can be used to tell the user an element has been dynamically updated. Screen readers will instantly start reading out the updated content when the role is added. If the user is expected to close the alert, then the alertdialog role should be used instead.
@@ -71,3 +70,11 @@The application role indicates to assistive technologies that an element and all of its children should be treated similar to a desktop application, and no traditional HTML interpretation techniques should be used. This role should only be used to define very dynamic and desktop-like web applications.
<div role="application">...</div> @@ -109,3 +107,9 @@Precedence order
{{draft}}{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}
+{{draft}}
The timer role indicates to assistive technologies that an element is a numerical counter listing the amount of elapsed time from a starting point or the remaining time until an end point.
@@ -113,3 +113,11 @@Applying the timer role will cause this and all of the descendant elements of this element to be treated like XXX
The article role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website. It is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped together on one page.
<div role="article"> @@ -114,5 +112,12 @@See also
header elementThe cell value of the ARIA role attribute identifies an element as being a cell in a tabular container that does not contain column or row header information. To be supported, the cell must be nested in an element with the role of row.
<div role="row"> @@ -190,3 +188,9 @@See also
{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}
-The checkbox role is used for checkable interactive controls. Elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology.
<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"> @@ -143,3 +141,10 @@See also
The comment landmark role semantically denotes a comment/reaction to some content on the page, or to a previous comment.
The complementary landmark role is used to designate a supporting section that relates to the main content, yet can stand alone when separated. These sections are frequently presented as sidebars or call-out boxes. If possible, use the HTML <aside> element instead.
<div role="complementary"> @@ -114,3 +112,9 @@See also
The contentinfo landmark role is used to identify information repeated at the end of every page of a website, including copyright information, navigation links, and privacy statements. This section is commonly called a footer.
<div role="contentinfo"> @@ -145,3 +143,9 @@See also
{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}
-The dialog role is used to mark up an HTML based application dialog or window that separates content or UI from the rest of the web application or page. Dialogs are generally placed on top of the rest of the page content using an overlay. Dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with).
<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> @@ -143,3 +141,10 @@See also
Generally used in complex composite widgets or applications, the document role can inform assistive technologies to switch context to a reading mode: The document role tells assistive technologies with reading or browse modes to use the document mode to read the content contained within this element.
<div role="dialog"> @@ -20,7 +19,7 @@ </div>-
This example shows a dialog widget with some controls and a section with some informational text that the assistive technology user can read when tabbing to it.
+This example shows a dialog widget with some controls and a section with some informational text that the assistive technology user can read when tabbing to it.
{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}
-A feed is a dynamic scrollable list of articles in which articles are added to or removed from either end of the list as the user scrolls. A feed enables screen readers to use the browse mode reading cursor to both read and scroll through a stream of rich content that may continue scrolling infinitely by loading more content as the user reads.
<section role="feed" aria-busy="false"> @@ -113,3 +111,9 @@See also
The ARIA figure role can be used to identify a figure inside page content where appropriate semantics do not already exist. A figure is generally considered to be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text.
<div role="figure" aria-labelledby="caption"> @@ -145,3 +143,9 @@See also
The form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an HTML form.
<div role="form" id="contact-info" aria-label="Contact information"> @@ -153,3 +151,9 @@See also
{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}
-The grid role is for a widget that contains one or more rows of cells. The position of each cell is significant and can be focused using keyboard input.
<table role="grid" aria-labelledby="id-select-your-seat"> @@ -45,7 +43,7 @@Description
A grid widget contains one or more rows with one or more cells of thematically related interactive content. While it does not imply a specific visual presentation, it implies a relationship among elements. Uses fall into two categories: presenting tabular information (data grids) and grouping other widgets (layout grids). Even though both data grids and layout grids employ the same ARIA roles, states, and properties, differences in their content and purpose surface factors that are important to consider in keyboard interaction design. See ARIA Authoring practices for more details
-Cell elements have the role
+gridcell, unless they are a row or column header. Then the elements arerowheaderandcolumnheader, respectively. Cell elements need to be owned by elements with arowrole. Rows can be grouped usingrowgroups.Cell elements have the role
gridcell, unless they are a row or column header. Then the elements arerowheaderandcolumnheader, respectively. Cell elements need to be owned by elements with arowrole. Rows can be grouped usingrowgroups.If the grid is used as an interactive widget, keyboard interactions need to be implemented.
@@ -54,7 +52,7 @@Associated ARIA roles, stat
Roles
-
- treegrid (subclass)
+- treegrid (subclass)
- If a grid has columns that can expanded or collapsed, a treegrid can be used.
- row
- A row inside the grid.
@@ -687,16 +685,22 @@Screen reader support
See also
-
+ +- ARIA composite role
+- ARIA composite role
- ARIA table role
-- ARIA treegrid role
+- ARIA treegrid role
- ARIA row role
- ARIA rowgroup role
- ARIA: gridcell role
-- ARIA: rowheader role
-- ARIA: columnheader role
+- ARIA: rowheader role
+- ARIA: columnheader role
- HTML table element
- aria-level
- aria-multiselectable
- aria-readonly
+ diff --git a/files/en-us/web/accessibility/aria/roles/gridcell_role/index.html b/files/en-us/web/accessibility/aria/roles/gridcell_role/index.html index fd802b654c9342c..8353b21616fa471 100644 --- a/files/en-us/web/accessibility/aria/roles/gridcell_role/index.html +++ b/files/en-us/web/accessibility/aria/roles/gridcell_role/index.html @@ -5,8 +5,6 @@ - ARIA - HTML --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}
-The gridcell role is used to make a cell in a grid or treegrid. It is intended to mimic the functionality of the HTML
tdelement for table-style grouping of information.<div role="gridcell">Potato</div> @@ -174,3 +172,9 @@See also
The heading role defines this element as a heading to a page or section. To give the page more structure, a level should also be provided to indicate relationships between sections.
<div role="heading" aria-level="1">This is a main page heading</div> @@ -112,3 +110,9 @@+ +See also
The ARIA list role can be used to identify a list of items. It is normally used in conjunction with the listitem role, which is used to identify a list item contained inside the list.
<section role="list"> @@ -27,8 +25,9 @@Description
There are no hard and fast rules about which elements you should use to markup the list and list items, but you should make sure that the list items make sense in the context of a list, e.g. a shopping list, recipe steps, driving directions.
--Warning: If at all possible in your work, you should use the appropriate semantic HTML elements to mark up a list and its listitems — {{htmlelement("ul")}}/{{htmlelement("ol")}} and {{htmlelement("li")}}. See {{anch("Best practices")}} for a full example.
++Warning
+If at all possible in your work, you should use the appropriate semantic HTML elements to mark up a list and its listitems — {{htmlelement("ul")}}/{{htmlelement("ol")}} and {{htmlelement("li")}}. See {{anch("Best practices")}} for a full example.
Associated WAI-ARIA Roles, States, and Properties
@@ -38,7 +37,7 @@Associated WAI-ARIA Rol
- -
A single item in a list or directory. Elements with role listitem can only be found in an element with the role
listorgroup.- group
+- group
- @@ -114,5 +113,11 @@
A collection of related objects, limited to list items when nested in a list, not important enough to have their own place in a pages table of contents.
See also
- {{htmlelement("ol")}}
- {{htmlelement("li")}}
- ARIA: listitem role
-- ARIA: group role
+- ARIA: group role
+ ++ diff --git a/files/en-us/web/accessibility/aria/roles/listbox_role/index.html b/files/en-us/web/accessibility/aria/roles/listbox_role/index.html index db9fb81f16a6418..0caf09055edcb80 100644 --- a/files/en-us/web/accessibility/aria/roles/listbox_role/index.html +++ b/files/en-us/web/accessibility/aria/roles/listbox_role/index.html @@ -6,14 +6,6 @@ - Accessibility - NeedsContent --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}
- --
- --
-The
listboxrole is used for lists from which a user may select one or more items which are static and, unlike HTML <select> elements, may contain images.Description
@@ -33,7 +25,7 @@Associated ARIA roles, stat
Associated Roles
-
- option
+- option
- One or more nested options are required. All selected options have
aria-selectedset totrue. All options that are not selected havearia-selectedset tofalse. If an option is not selectable, omit thearia-selected.- list
- A section containing
@@ -180,7 +172,7 @@listitemelementsBest practices
- It is recommended that authors use different styling for the selection when the list is not focused, e.g. a non-active selection is often shown with a lighter background color.
- If the listbox is not part of another widget, it should have the
aria-labelledbyproperty set.- If one or more entries are not DOM children of listbox, additional aria-* properties will need to be set (see ARIA Best Practices).
-- If there is a valid reason to expand the listbox, the
+comboboxrole may be more appropriate.- If there is a valid reason to expand the listbox, the
comboboxrole may be more appropriate.Specifications
@@ -212,10 +204,16 @@See also
- HTML
<select>element- HTML
<label>element- HTML
-<option>element- ARIA:
-comboboxrole- ARIA:
+optionrole- ARIA:
+comboboxrole- ARIA:
optionrole- ARIA:
listrole- ARIA:
listitemrole- ARIA Best Practices – Listbox
- ARIA Role Model – Listbox
+ ++ diff --git a/files/en-us/web/accessibility/aria/roles/listitem_role/index.html b/files/en-us/web/accessibility/aria/roles/listitem_role/index.html index 28f20a18387e18d..61c85968666bf8c 100644 --- a/files/en-us/web/accessibility/aria/roles/listitem_role/index.html +++ b/files/en-us/web/accessibility/aria/roles/listitem_role/index.html @@ -10,8 +10,6 @@ - Role - listitem --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}-The ARIA
listitemrole can be used to identify an item inside a list of items. It is normally used in conjunction with thelistrole, which is used to identify a list container.<section role="list"> @@ -38,7 +36,7 @@Associated WAI-ARIA Rol
- -
A list of items. Elements with role
listmust have one or more elements with the rolelistitemas children, a one or more elements with the role ofgroupthat have one or more elements with thelistitemrole as children.- group
+- group
- @@ -112,5 +110,11 @@
A collection of related objects, limited to list items when nested in a list, not important enough to have their own place in a pages table of contents.
See also
- HTML
<ul>element- HTML
<ol>element- ARIA: list role
-- ARIA: group role
+- ARIA: group role
+ ++ \ No newline at end of file diff --git a/files/en-us/web/accessibility/aria/roles/main_role/index.html b/files/en-us/web/accessibility/aria/roles/main_role/index.html index 053778b57e4ddd5..8388d80e5fc7681 100644 --- a/files/en-us/web/accessibility/aria/roles/main_role/index.html +++ b/files/en-us/web/accessibility/aria/roles/main_role/index.html @@ -7,8 +7,6 @@ - Reference - role-main --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{draft}}{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}
-The
mainlandmark role is used to indicate the primary content of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.<div id="main" role="main"> @@ -129,3 +127,9 @@See also
- Accessible Landmarks | scottohara.me
- The main element | HTML5 Doctor
+ ++ \ No newline at end of file diff --git a/files/en-us/web/accessibility/aria/roles/mark_role/index.html b/files/en-us/web/accessibility/aria/roles/mark_role/index.html index 4570b27bf2bac79..d080cff31ab5c7a 100644 --- a/files/en-us/web/accessibility/aria/roles/mark_role/index.html +++ b/files/en-us/web/accessibility/aria/roles/mark_role/index.html @@ -8,8 +8,6 @@ - annotations - mark --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}-The
marklandmark role semantically denotes HTML elements containing text that is marked/highlighted for reference purposes. This is semantically equivalent to the HTML <mark> element. If possible, you should use this element instead.Examples
@@ -52,3 +50,9 @@See also
+ ++ \ No newline at end of file diff --git a/files/en-us/web/accessibility/aria/roles/navigation_role/index.html b/files/en-us/web/accessibility/aria/roles/navigation_role/index.html index 9cf835aca3028b8..eef7e3fe1b35846 100644 --- a/files/en-us/web/accessibility/aria/roles/navigation_role/index.html +++ b/files/en-us/web/accessibility/aria/roles/navigation_role/index.html @@ -7,8 +7,6 @@ - Reference - role-navigation --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}-The
navigationlandmark role is used to identify major groups of links used for navigating through a website or page content.<div role="navigation" aria-label="Main"> @@ -149,3 +147,10 @@See also
- Accessible Landmarks | scottohara.me
- Semantic navigation with the nav element | HTML5 Doctor
+ + ++ \ No newline at end of file diff --git a/files/en-us/web/accessibility/aria/roles/region_role/index.html b/files/en-us/web/accessibility/aria/roles/region_role/index.html index 2fe284f6a4fee26..23d453662eea1b8 100644 --- a/files/en-us/web/accessibility/aria/roles/region_role/index.html +++ b/files/en-us/web/accessibility/aria/roles/region_role/index.html @@ -9,8 +9,6 @@ - landmark role - role-region --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}-The
regionlandmark role is used to identify an area in the document that the author has identified as significant. It is used to provide a generic landmark for people to be able to navigate to easily when none of the other landmark roles are appropriate.<div role="region" aria-label="Example"> @@ -134,3 +132,10 @@See also
- Accessible Landmarks | scottohara.me
- The section element | HTML5 Doctor
+ + ++ \ No newline at end of file diff --git a/files/en-us/web/accessibility/aria/roles/role_img/index.html b/files/en-us/web/accessibility/aria/roles/role_img/index.html index 6420b3b906082aa..b8f458d69bb2299 100644 --- a/files/en-us/web/accessibility/aria/roles/role_img/index.html +++ b/files/en-us/web/accessibility/aria/roles/role_img/index.html @@ -10,8 +10,6 @@ - Role - figure --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}-The ARIA
imgrole can be used to identify multiple elements inside page content that should be considered as a single image. These elements could be images, code snippets, text, emojis, or other content that can be combined to deliver information in a visual manner.<div role="img" aria-label="Description of the overall image"> @@ -119,3 +117,10 @@See also
- Accessibility Object Model
- ARIA in HTML
+ + ++ \ No newline at end of file diff --git a/files/en-us/web/accessibility/aria/roles/row_role/index.html b/files/en-us/web/accessibility/aria/roles/row_role/index.html index f5bda9159fe87d9..485ba16ea5572a9 100644 --- a/files/en-us/web/accessibility/aria/roles/row_role/index.html +++ b/files/en-us/web/accessibility/aria/roles/row_role/index.html @@ -10,9 +10,7 @@ - Reference - Row Role --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}- -An element with
+role="row"is a row of cells within a tabular structure. A row contains one or more cells, grid cells or column headers, and possibly a row header, within agrid,tableortreegrid, and optionally within arowgroup.An element with
role="row"is a row of cells within a tabular structure. A row contains one or more cells, grid cells or column headers, and possibly a row header, within agrid,tableortreegrid, and optionally within arowgroup.<div role="table" aria-label="Populations" aria-describedby="country_population_desc"> <div id="country_population_desc">World Populations by Country</div> @@ -37,7 +35,7 @@Description
-The element
+role="row"is a row within agrid,tableortreegrid, and optionally within arowgroup, that is a container for one or morecells,gridcells,columnheaders, orrowheaderswithin a static tabular structure. Using native HTML<tr>elements, whenever possible, is strongly encouraged.The element
role="row"is a row within agrid,tableortreegrid, and optionally within arowgroup, that is a container for one or morecells,gridcells,columnheaders, orrowheaderswithin a static tabular structure. Using native HTML<tr>elements, whenever possible, is strongly encouraged.To create an ARIA row, add
@@ -45,7 +43,7 @@role="row"to the container element. That row should be nested within a grid, table or treegrid. A group of rows can be nested within a grid, table or treegrid directly, or within a rowgroup in one of those containers. Each row contains child cells. These cells can be of different types, depending on whether they are column or row headers, or grid or regular cells.Description
If the row is within a treegrid, rows can include the
-aria-expandedattribute, using the attribute to indicate the present status. This is not the case for an ordinary table or grid, in which the aria-expanded attribute is not present.To create an interactive widget that has a tabular structure, use the grid pattern instead. If the interaction provides for the selection state of individual cells, if left to right and top to bottom navigation is provided, or if the user interface allows the rearranging of cell order or otherwise changing individual cell order such as through drag and drop, use grid or treegrid instead.
+To create an interactive widget that has a tabular structure, use the grid pattern instead. If the interaction provides for the selection state of individual cells, if left to right and top to bottom navigation is provided, or if the user interface allows the rearranging of cell order or otherwise changing individual cell order such as through drag and drop, use grid or treegrid instead.
Note: Using the native HTML table element (<table>) along with the table row element (<tr>) whenever possible is strongly encouraged.
@@ -62,7 +60,7 @@Context roles
- One of the three possible contexts (along with grid and treegrid) in which you'll find a row, it identifies the row as being part of a non-interactive table structure containing data arranged in rows and columns, similar to the native <table> HTML element.
- role="grid"
- One of the three possible contexts (along with table and treegrid) in which you'll find a row, it identifies the row as being part of a non-interactive table structure containing data arranged in rows and columns, similar to the native <table> HTML element.
-- role="treegrid"
+- role="treegrid"
- Similar to a grid, but with rows that can be expanded and collapsed in the same manner as for a tree.
@@ -71,7 +69,7 @@Descendant roles
- role="cell"
- A cell in a row within a tabular container.
-- role="gridcell"
+- role="gridcell"
- A cell in a row within a grid or treegrid.
- role="columnheader"
- A header cell that is the structural equivalent of the HTML <th> element with a column scope. Unlike a plain cell, the columnheader role establishes a relationship between it and all cells in the corresponding column.
@@ -126,7 +124,7 @@Keyboard Interactions
Required JavaScript features
-None. For sortable columns, see the columnheader aria role.
+None. For sortable columns, see the columnheader aria role.
The first rule of ARIA use is you can use a native feature with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so. Employ the HTML <table> element instead of the ARIA role of table whenever possible.
@@ -227,3 +225,10 @@See also
+ + ++ diff --git a/files/en-us/web/accessibility/aria/roles/rowgroup_role/index.html b/files/en-us/web/accessibility/aria/roles/rowgroup_role/index.html index a44821dd0a9104c..c4ee7094d302799 100644 --- a/files/en-us/web/accessibility/aria/roles/rowgroup_role/index.html +++ b/files/en-us/web/accessibility/aria/roles/rowgroup_role/index.html @@ -8,8 +8,6 @@ - rowgroup - table --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}-An element with
role="rowgroup"is a group of rows within a tabular structure. Arowgroupcontains one or more rows of cells, grid cells, column headers, or row headers within agrid,tableortreegrid.<div role="table" aria-label="Populations" aria-describedby="country_population_desc"> @@ -60,7 +58,7 @@Descendant roles
- role="row"
-- A row of cells within a tabular structure. A row contains one or more cells, gridcell, or column headers, and sometimes a row header.
+- A row of cells within a tabular structure. A row contains one or more cells, gridcell, or column headers, and sometimes a row header.
Keyboard interactions
@@ -161,3 +159,9 @@See also
- HTML table footer
- HTML table header
+ ++ diff --git a/files/en-us/web/accessibility/aria/roles/search_role/index.html b/files/en-us/web/accessibility/aria/roles/search_role/index.html index 6c5737657363e49..008ce981b7da5c1 100644 --- a/files/en-us/web/accessibility/aria/roles/search_role/index.html +++ b/files/en-us/web/accessibility/aria/roles/search_role/index.html @@ -7,8 +7,6 @@ - Reference - role-search --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}-The
searchlandmark role is used to identify a section of the page used to search the page, site, or collection of sites.<form role="search"> @@ -120,3 +118,9 @@See also
- Using WAI-ARIA Landmarks – 2013 | The Paciello Group
- Accessible Landmarks | scottohara.me
+ ++ \ No newline at end of file diff --git a/files/en-us/web/accessibility/aria/roles/suggestion_role/index.html b/files/en-us/web/accessibility/aria/roles/suggestion_role/index.html index 209c0cecb3d3638..d4f95ef1ed767f2 100644 --- a/files/en-us/web/accessibility/aria/roles/suggestion_role/index.html +++ b/files/en-us/web/accessibility/aria/roles/suggestion_role/index.html @@ -8,8 +8,6 @@ - annotations - suggestion --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}-The
suggestionlandmark role semantically denotes a single proposed change to an editable document. This should be used on an element that wraps an element with aninsertionrole, and one with adeletionrole.Examples
@@ -59,3 +57,10 @@See also
+ + ++ \ No newline at end of file diff --git a/files/en-us/web/accessibility/aria/roles/switch_role/index.html b/files/en-us/web/accessibility/aria/roles/switch_role/index.html index bfd134fd648329c..1c8c77d4ba4b706 100644 --- a/files/en-us/web/accessibility/aria/roles/switch_role/index.html +++ b/files/en-us/web/accessibility/aria/roles/switch_role/index.html @@ -11,8 +11,6 @@ - a11y - toggle --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}-The ARIA
switchrole is functionally identical to the checkbox role, except that instead of representing "checked" and "unchecked" states, which are fairly generic in meaning, theswitchrole represents the states "on" and "off."This example creates a widget and assigns the ARIA
@@ -191,3 +189,10 @@switchrole to it.See also
- ARIA: checkbox role
- + + +
<input type="checkbox">+ \ No newline at end of file diff --git a/files/en-us/web/accessibility/aria/roles/tab_role/index.html b/files/en-us/web/accessibility/aria/roles/tab_role/index.html index 81e9816be69c29c..821798deea6a0f1 100644 --- a/files/en-us/web/accessibility/aria/roles/tab_role/index.html +++ b/files/en-us/web/accessibility/aria/roles/tab_role/index.html @@ -8,8 +8,6 @@ - ARIA widget - Reference --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}-The ARIA
tabrole indicates an interactive element inside atablistthat, when activated, displays its associatedtabpanel.<button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">Tab label</button>@@ -232,3 +230,11 @@Precedence order
Screen reader support
TBD
+ + ++ + diff --git a/files/en-us/web/accessibility/aria/roles/table_role/index.html b/files/en-us/web/accessibility/aria/roles/table_role/index.html index f06db7f6f39483f..7828b42fe506866 100644 --- a/files/en-us/web/accessibility/aria/roles/table_role/index.html +++ b/files/en-us/web/accessibility/aria/roles/table_role/index.html @@ -10,8 +10,6 @@ - Reference - Table Role --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}-The table value of the ARIA role attribute identifies the element containing the role as having a non-interactive table structure containing data arranged in rows and columns, similar to the native
<table>HTML element.<div role="table" aria-label="Semantic Elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> @@ -160,3 +158,10 @@See also
- HTML table element
- ARIA: grid role
+ + ++ \ No newline at end of file diff --git a/files/en-us/web/accessibility/aria/roles/tabpanel_role/index.html b/files/en-us/web/accessibility/aria/roles/tabpanel_role/index.html index b5baad2e0d66fa7..a709fa0d522ac19 100644 --- a/files/en-us/web/accessibility/aria/roles/tabpanel_role/index.html +++ b/files/en-us/web/accessibility/aria/roles/tabpanel_role/index.html @@ -9,13 +9,11 @@ - ARIA widget - Reference --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}-{{draft}}
The ARIA tabpanel role indicates
-+TBDDescription
@@ -109,3 +107,9 @@Precedence order
Screen reader support
TBD
+ ++ \ No newline at end of file diff --git a/files/en-us/web/accessibility/aria/roles/textbox_role/index.html b/files/en-us/web/accessibility/aria/roles/textbox_role/index.html index de5b84f9d7d4841..52f41c379284d25 100644 --- a/files/en-us/web/accessibility/aria/roles/textbox_role/index.html +++ b/files/en-us/web/accessibility/aria/roles/textbox_role/index.html @@ -6,8 +6,6 @@ - Accessibility - NeedsContent --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{Page("/en-US/docs/Web/Accessibility/ARIA/Roles", "Subnav")}}-The
textboxrole is used to identify an element that allows the input of free-form text. Whenever possible, rather than using this role, use an {{HTMLElement("input")}} element with type="text", for single-line input, or a {{HTMLElement("textarea")}} element for multi-line input.Description
@@ -120,5 +118,12 @@Best practices
See also
+ + ++ \ No newline at end of file diff --git a/files/en-us/web/xpath/comparison_with_css_selectors/index.html b/files/en-us/web/xpath/comparison_with_css_selectors/index.html index 98d122031ad3f45..32886635269b5c3 100644 --- a/files/en-us/web/xpath/comparison_with_css_selectors/index.html +++ b/files/en-us/web/xpath/comparison_with_css_selectors/index.html @@ -9,7 +9,7 @@ - Selectors - XPath --- -+
+- WAI-ARIA roles{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}
+{{XSLTRef}}{{Page("/en-US/docs/Web/XPath", "Subnav")}}{{Draft}}
+{{XSLTRef}}{{Draft}}
This article seeks to document the difference between CSS Selectors and XPath for web developers to be able to better choose the right tool for the right job.
@@ -47,3 +47,26 @@ + + ++ \ No newline at end of file+
+- XSLT
+- EXSLT
+- XPath
+- +
++Guides
+ +- +
++XPath Axes
{{ListSubpagesForSidebar("/en-US/docs/Web/XPath/Axes")}}- +
++XPath Functions
{{ListSubpagesForSidebar("/en-US/docs/Web/XPath/Functions")}}