- From: WCAG 2.0 Techniques Submission Form <nobody@w3.org>
- Date: Mon, 24 Nov 2014 19:00:10 +0000
- To: public-wcag2-techs@w3.org
Submitter's Name: Frank M. Palinkas
Submitter's Email: fmpalinkas@gmail.com
Technique ID: UNKNOWN
Short Name: Using W3C WAI-ARIA Roles with JSON-LD
Technique Category: ARIA Techniques
Success Criterion Reference: UNKNOWN
Applicability:
HTML, XHTML, JSON, JSON Schema, JSON-LD
Write W3C WAI-ARIA Roles in JSON-LD (JSON for Linked Data) and add it within the metadata section (<code>&lt;head&gt;&lt;/head&gt;</code> element) of web pages.
UA Issues:
None.
Description:
This technique enables accessible HTML web pages and other mediums whose markup is annotated with WAI-ARIA Role attributes and values the following advantages:
- To be easily identified by search engines for indexing as sources of accessible linked data, thus raising the SEO of the documents.
- To establish an accessible JSON-LD Linked Data capability as used by other ontology/vocabulary types like schema.org properties and values.
- To aid modern assistive technology devices with the programmatic identification and use of WAI-ARIA Roles throughout a web document.
Each role is broken down into the following JSON-LD "keyname" : "value" pairs:
- "@type" : "the name of the role"
- "@value" : "a link to the role in the W3C WAI-ARIA Recommendation"
- "category" : "a link to the role's category in the W3C WAI-ARIA Recommendation, i.e., Landmark, Widget, Document Structure, and Abstract role categories
- "description" : "a short description of the role"
Each role is directly linked to its specific place within the W3C WAI-ARIA Recommendation. This Recommendation accordingly serves as the W3C WAI-ARIA Roles ontology/vocabulary.
Including this WAI-ARIA Roles JSON-LD data island in the metadata of a web page will:
Immediately identify it to search engine crawlers as an accessible document.
Be indexed by search engines as an accessible document.
Its relationship via embedded WAI-ARIA Roles with the W3C WAI-ARIA Recommendation will be pointed to and recorded for future reference by search engines.
A web author can use all of it, or edit and limit it to the specific roles they are using throughout the DOM of the page.
Note the "application/ld+json" Internet media type declaration to be used for JSON-LD.
The JSON Schema and JSON-LD code examples have been tested and validate as semantically correct.
The following code examples illustrate the format and structure used in building the JSON Schema and JSON-LD.
Example 1: This is the JSON Schema used to programmatically define the structure the JSON-LD WAI-ARIA Roles data island.
Example 2: This is the JSON-LD data island containing the WAI-ARIA Landmark Role model. WAI-ARIA Landmark roles are listed in alphabetical order in a JSON-LD data island within the HTML5 <head> element of a web page.
Example 3: This is the JSON-LD data island containing all of the WAI-ARIA Roles. All WAI-ARIA roles are listed in alphabetical order in a JSON-LD data island within the HTML5 <head> element of a web page.
Example 1 Head: JSON Schema for WAI-ARIA Roles in JSON-LD
Example 1 Description:
This is the JSON Schema that specifies the programmatic structure of the JSON-LD used in the following Example 2 and 3.
Example 1
{
"$schema": "http://json-schema.org/schema#",
"type": "object",
"required": false,
"properties": {
"@context": {
"type": "string",
"id": "http://jsonschema.net/@context",
"required": false
},
"@type": {
"type": "string",
"id": "http://jsonschema.net/@type",
"required": false
},
"@value": {
"type": "string",
"id": "http://jsonschema.net/@value",
"required": false
},
"category": {
"type": "string",
"id": "http://jsonschema.net/category",
"required": false
},
"role": {
"type": "array",
"id": "http://jsonschema.net/role",
"required": false,
"items": {
"type": "object",
"id": "http://jsonschema.net/role/0",
"required": false,
"properties": {
"@type": {
"type": "string",
"id": "http://jsonschema.net/role/0/@type",
"required": false
},
"@value": {
"type": "string",
"id": "http://jsonschema.net/role/0/@value",
"required": false
},
"category": {
"type": "string",
"id": "http://jsonschema.net/role/0/category",
"required": false
},
"description": {
"type": "string",
"id": "http://jsonschema.net/role/0/description",
"required": false
}
}
}
}
}
}
Example 2 Head: WAI-ARIA Roles in JSON-LD: Specific roles and all Roles
Example 2 Description:
Example 2 - WAI-ARIA Roles in JSON-LD - Using Specific Roles
As mentioned earlier, a web author does not need to include all of the roles; only those roles used throughout the scope of the page's DOM. For example, if a web author is only adding WAI-ARIA Landmark Role attributes and values to a DOM, i.e., role="main", role="navigation", role="banner", etc., then they can eliminate all other roles in the JSON-LD "role": object array that are not being used.
<!DOCTYPE html>
<html lang="en">
<head>
<title>WAI-ARIA Roles in JSON-LD</title>
<script type="application/ld+json">
{
"@context": "http://www.w3.org/TR/wai-aria/",
"@type": "WAI-ARIA Roles",
"@value": "http://www.w3.org/TR/wai-aria/roles",
"category": "http://www.w3.org/TR/wai-aria/roles#roles_categorization",
"role": [
{
"@type": "application",
"@value": "http://www.w3.org/TR/wai-aria/roles#application",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A region declared as a web application, as opposed to a web document."
},
{
"@type": "banner",
"@value": "http://www.w3.org/TR/wai-aria/roles#banner",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A region that contains mostly site-oriented content, rather than page-specific content."
},
{
"@type": "complementary",
"@value": "http://www.w3.org/TR/wai-aria/roles#complementary",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "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."
},
{
"@type": "contentinfo",
"@value": "http://www.w3.org/TR/wai-aria/roles#contentinfo",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A large perceivable region that contains information about the parent document."
},
{
"@type": "form",
"@value": "http://www.w3.org/TR/wai-aria/roles#form",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A landmark region that contains a collection of items and objects that, as a whole, combine to create a form."
},
{
"@type": "main",
"@value": "http://www.w3.org/TR/wai-aria/roles#main",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "The main content of a document."
},
{
"@type": "navigation",
"@value": "http://www.w3.org/TR/wai-aria/roles#navigation",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A collection of navigational elements (usually links) for navigating the document or related documents."
},
{
"@type": "search",
"@value": "http://www.w3.org/TR/wai-aria/roles#search",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility."
}
]
}
</script>
</head>
<body>
</body>
</html>
Example 3 - WAI-ARIA Roles in JSON-LD - Using All Roles
This is the complete WAI-ARIA Roles in JSON-LD code example whose structure programmatically maps to the preceding JSON Schema in Example 1. For reference purposes, all of the WAI-ARIA Roles are included in this example.
Example 3
<!DOCTYPE html>
<html lang="en">
<head>
<title>WAI-ARIA Roles in JSON-LD</title>
<script type="application/ld+json">
{
"@context": "http://www.w3.org/TR/wai-aria/",
"@type": "WAI-ARIA Roles",
"@value": "http://www.w3.org/TR/wai-aria/roles",
"category": "http://www.w3.org/TR/wai-aria/roles#roles_categorization",
"role": [
{
"@type": "alert",
"@value": "http://www.w3.org/TR/wai-aria/roles#alert",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A message with important, and usually time-sensitive, information."
},
{
"@type": "alertdialog",
"@value": "http://www.w3.org/TR/wai-aria/roles#alertdialog",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A type of dialog that contains an alert message, where initial focus goes to an element within the dialog."
},
{
"@type": "application",
"@value": "http://www.w3.org/TR/wai-aria/roles#application",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A region declared as a web application, as opposed to a web document."
},
{
"@type": "article",
"@value": "http://www.w3.org/TR/wai-aria/roles#article",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A section of a page that consists of a composition that forms an independent part of a document, page, or site."
},
{
"@type": "banner",
"@value": "http://www.w3.org/TR/wai-aria/roles#banner",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A region that contains mostly site-oriented content, rather than page-specific content."
},
{
"@type": "button",
"@value": "http://www.w3.org/TR/wai-aria/roles#button",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "An input that allows for user-triggered actions when clicked or pressed."
},
{
"@type": "checkbox",
"@value": "http://www.w3.org/TR/wai-aria/roles#checkbox",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A checkable input that has three possible values: true, false, or mixed."
},
{
"@type": "columnheader",
"@value": "http://www.w3.org/TR/wai-aria/roles#columnheader",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A cell containing header information for a column."
},
{
"@type": "combobox",
"@value": "http://www.w3.org/TR/wai-aria/roles#combobox",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "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."
},
{
"@type": "command",
"@value": "http://www.w3.org/TR/wai-aria/roles#command",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "A form of widget that performs an action but does not receive input data."
},
{
"@type": "complementary",
"@value": "http://www.w3.org/TR/wai-aria/roles#complementary",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "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."
},
{
"@type": "composite",
"@value": "http://www.w3.org/TR/wai-aria/roles#composite",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "A widget that may contain navigable descendants or owned children."
},
{
"@type": "contentinfo",
"@value": "http://www.w3.org/TR/wai-aria/roles#contentinfo",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A large perceivable region that contains information about the parent document."
},
{
"@type": "definition",
"@value": "http://www.w3.org/TR/wai-aria/roles#definition",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A definition of a term or concept."
},
{
"@type": "dialog",
"@value": "http://www.w3.org/TR/wai-aria/roles#dialog",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "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."
},
{
"@type": "directory",
"@value": "http://www.w3.org/TR/wai-aria/roles#directory",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A list of references to members of a group, such as a static table of contents."
},
{
"@type": "document",
"@value": "http://www.w3.org/TR/wai-aria/roles#document",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A region containing related information that is declared as document content, as opposed to a web application."
},
{
"@type": "form",
"@value": "http://www.w3.org/TR/wai-aria/roles#form",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A landmark region that contains a collection of items and objects that, as a whole, combine to create a form."
},
{
"@type": "grid",
"@value": "http://www.w3.org/TR/wai-aria/roles#grid",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table."
},
{
"@type": "gridcell",
"@value": "http://www.w3.org/TR/wai-aria/roles#gridcell",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A cell in a grid or treegrid."
},
{
"@type": "group",
"@value": "http://www.w3.org/TR/wai-aria/roles#group",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies."
},
{
"@type": "heading",
"@value": "http://www.w3.org/TR/wai-aria/roles#heading",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A heading for a section of the page."
},
{
"@type": "img",
"@value": "http://www.w3.org/TR/wai-aria/roles#img",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A container for a collection of elements that form an image."
},
{
"@type": "input",
"@value": "http://www.w3.org/TR/wai-aria/roles#input",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "A generic type of widget that allows user input."
},
{
"@type": "link",
"@value": "http://www.w3.org/TR/wai-aria/roles#link",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource."
},
{
"@type": "list",
"@value": "http://www.w3.org/TR/wai-aria/roles#list",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A group of non-interactive list items."
},
{
"@type": "listbox",
"@value": "http://www.w3.org/TR/wai-aria/roles#listbox",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A widget that allows the user to select one or more items from a list of choices."
},
{
"@type": "listitem",
"@value": "http://www.w3.org/TR/wai-aria/roles#listitem",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A single item in a list or directory."
},
{
"@type": "log",
"@value": "http://www.w3.org/TR/wai-aria/roles#log",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A type of live region where new information is added in meaningful order and old information may disappear."
},
{
"@type": "main",
"@value": "http://www.w3.org/TR/wai-aria/roles#main",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "The main content of a document."
},
{
"@type": "marquee",
"@value": "http://www.w3.org/TR/wai-aria/roles#marquee",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A type of live region where non-essential information changes frequently."
},
{
"@type": "math",
"@value": "http://www.w3.org/TR/wai-aria/roles#math",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "Content that represents a mathematical expression."
},
{
"@type": "menu",
"@value": "http://www.w3.org/TR/wai-aria/roles#menu",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A type of widget that offers a list of choices to the user."
},
{
"@type": "menubar",
"@value": "http://www.w3.org/TR/wai-aria/roles#menubar",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A presentation of menu that usually remains visible and is usually presented horizontally."
},
{
"@type": "menuitem",
"@value": "http://www.w3.org/TR/wai-aria/roles#menuitem",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "An option in a set of choices contained by a menu or menubar."
},
{
"@type": "menuitemcheckbox",
"@value": "http://www.w3.org/TR/wai-aria/roles#menuitemcheckbox",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A menuitem with a checkable state whose possible values are true, false, or mixed."
},
{
"@type": "menuitemradio",
"@value": "http://www.w3.org/TR/wai-aria/roles#menuitemradio",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A checkable menuitem in a set of elements with role menuitemradio, only one of which can be checked at a time."
},
{
"@type": "navigation",
"@value": "http://www.w3.org/TR/wai-aria/roles#navigation",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A collection of navigational elements (usually links) for navigating the document or related documents."
},
{
"@type": "note",
"@value": "http://www.w3.org/TR/wai-aria/roles#note",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A section whose content is parenthetic or ancillary to the main content of the resource."
},
{
"@type": "option",
"@value": "http://www.w3.org/TR/wai-aria/roles#option",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A selectable item in a select list."
},
{
"@type": "presentation",
"@value": "http://www.w3.org/TR/wai-aria/roles#presentation",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "An element whose implicit native role semantics will not be mapped to the accessibility API."
},
{
"@type": "progressbar",
"@value": "http://www.w3.org/TR/wai-aria/roles#progressbar",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "An element that displays the progress status for tasks that take a long time."
},
{
"@type": "radio",
"@value": "http://www.w3.org/TR/wai-aria/roles#radio",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A checkable input in a group of radio roles, only one of which can be checked at a time."
},
{
"@type": "radiogroup",
"@value": "http://www.w3.org/TR/wai-aria/roles#radiogroup",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A group of radio buttons."
},
{
"@type": "range",
"@value": "http://www.w3.org/TR/wai-aria/roles#range",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "An input representing a range of values that can be set by the user."
},
{
"@type": "region",
"@value": "http://www.w3.org/TR/wai-aria/roles#region",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A large perceivable section of a web page or document, that 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."
},
{
"@type": "roletype",
"@value": "http://www.w3.org/TR/wai-aria/roles#roletype",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "The base role from which all other roles in this taxonomy inherit."
},
{
"@type": "row",
"@value": "http://www.w3.org/TR/wai-aria/roles#row",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A row of cells in a grid."
},
{
"@type": "rowgroup",
"@value": "http://www.w3.org/TR/wai-aria/roles#rowgroup",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A group containing one or more row elements in a grid."
},
{
"@type": "rowheader",
"@value": "http://www.w3.org/TR/wai-aria/roles#rowheader",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A cell containing header information for a row in a grid."
},
{
"@type": "scrollbar",
"@value": "http://www.w3.org/TR/wai-aria/roles#scrollbar",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "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."
},
{
"@type": "search",
"@value": "http://www.w3.org/TR/wai-aria/roles#search",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility."
},
{
"@type": "section",
"@value": "http://www.w3.org/TR/wai-aria/roles#section",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "A renderable, structural containment unit in a document or application."
},
{
"@type": "sectionhead",
"@value": "http://www.w3.org/TR/wai-aria/roles#sectionhead",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "A structure that labels or summarizes the topic of its related section."
},
{
"@type": "select",
"@value": "http://www.w3.org/TR/wai-aria/roles#select",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "A form widget that allows the user to make selections from a set of choices."
},
{
"@type": "separator",
"@value": "http://www.w3.org/TR/wai-aria/roles#separator",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A divider that separates and distinguishes sections of content or groups of menuitems."
},
{
"@type": "slider",
"@value": "http://www.w3.org/TR/wai-aria/roles#slider",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A user input where the user selects a value from within a given range."
},
{
"@type": "spinbutton",
"@value": "http://www.w3.org/TR/wai-aria/roles#spinbutton",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A form of range that expects the user to select from among discrete choices."
},
{
"@type": "status",
"@value": "http://www.w3.org/TR/wai-aria/roles#status",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "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."
},
{
"@type": "structure",
"@value": "http://www.w3.org/TR/wai-aria/roles#structure",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "A document structural element."
},
{
"@type": "tab",
"@value": "http://www.w3.org/TR/wai-aria/roles#tab",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user."
},
{
"@type": "tablist",
"@value": "http://www.w3.org/TR/wai-aria/roles#tablist",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A list of tab elements, which are references to tabpanel elements."
},
{
"@type": "tabpanel",
"@value": "http://www.w3.org/TR/wai-aria/roles#tabpanel",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A container for the resources associated with a tab, where each tab is contained in a tablist."
},
{
"@type": "textbox",
"@value": "http://www.w3.org/TR/wai-aria/roles#textbox",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "Input that allows free-form text as its value."
},
{
"@type": "timer",
"@value": "http://www.w3.org/TR/wai-aria/roles#timer",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "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."
},
{
"@type": "toolbar",
"@value": "http://www.w3.org/TR/wai-aria/roles#toolbar",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A collection of commonly used function buttons or controls represented in compact visual form."
},
{
"@type": "tooltip",
"@value": "http://www.w3.org/TR/wai-aria/roles#tooltip",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A contextual popup that displays a description for an element."
},
{
"@type": "tree",
"@value": "http://www.w3.org/TR/wai-aria/roles#tree",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A type of list that may contain sub-level nested groups that can be collapsed and expanded."
},
{
"@type": "treegrid",
"@value": "http://www.w3.org/TR/wai-aria/roles#treegrid",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A grid whose rows can be expanded and collapsed in the same manner as for a tree."
},
{
"@type": "treeitem",
"@value": "http://www.w3.org/TR/wai-aria/roles#treeitem",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "An option item of a tree. This is an element within a tree that may be expanded or collapsed if it contains a sub-level group of treeitem elements."
},
{
"@type": "widget",
"@value": "http://www.w3.org/TR/wai-aria/roles#widget",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "An interactive component of a graphical user interface (GUI)."
},
{
"@type": "window",
"@value": "http://www.w3.org/TR/wai-aria/roles#window",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "A browser or application window."
}
]
}
</script>
</head>
<body>
</body>
</html>
Resource 1 Title: W3C: Accessible Rich Internet Applications (WAI-ARIA) 1.0
Resource 1 URI: http://www.w3.org/TR/wai-aria/
Resource 2 Title: W3C: JSON-LD 1.0 A JSON-based Serialization for Linked Data
Resource 2 URI: http://www.w3.org/TR/2014/REC-json-ld-20140116/
Related Techniques:
H
Test Procedure:
1. Apply WAI-ARIA Role attributes and values to elements of a web page.
2. Write and validate the WAI-ARIA Role attributes and values in JSON-LD.
3. Place the JSON-LD within the <head></head> element of the web page.
4. eload or upload the accessible web page to its website.
5. Allow sufficient time for search engine crawlers to discover, then index the accessible web page.
Expected Result:
True - The web page's accessibility is now enhanced to assistive technologies by the WAI-ARIA Roles exposed in the JSON-LD data island.
True - The web page with its accessibility features identified in JSON-LD is now part of universal Linked-Data.
True - The accessible web page's Search Engine Optimization and visibility should improve via crawling and indexing of the JSON-LD by search engines.
Test File 1 Pass/Fail: pass
Test File 2 Pass/Fail: pass
Additional Notes:
This technique has been tested, validated, and will meet all success criteria that it relates to.
Additional resources:
No guidelines reference was submitted!
No test file 1 was submitted!
No test file 2 was submitted!
------------------------------------------------
<technique id="UNKNOWN">
<short-name>Using W3C WAI-ARIA Roles with JSON-LD</short-name>
<applies-to>
<guideline idref="" />
<success-criterion idref="UNKNOWN" />
</applies-to>
<applicability>
HTML, XHTML, JSON, JSON Schema, JSON-LD
Write W3C WAI-ARIA Roles in JSON-LD (JSON for Linked Data) and add it within the metadata section (<code>&lt;head&gt;&lt;/head&gt;</code> element) of web pages.
</applicability>
<ua_issues>
None.
</ua_issues>
<description>
This technique enables accessible HTML web pages and other mediums whose markup is annotated with WAI-ARIA Role attributes and values the following advantages:
- To be easily identified by search engines for indexing as sources of accessible linked data, thus raising the SEO of the documents.
- To establish an accessible JSON-LD Linked Data capability as used by other ontology/vocabulary types like schema.org properties and values.
- To aid modern assistive technology devices with the programmatic identification and use of WAI-ARIA Roles throughout a web document.
Each role is broken down into the following JSON-LD "keyname" : "value" pairs:
- "@type" : "the name of the role"
- "@value" : "a link to the role in the W3C WAI-ARIA Recommendation"
- "category" : "a link to the role's category in the W3C WAI-ARIA Recommendation, i.e., Landmark, Widget, Document Structure, and Abstract role categories
- "description" : "a short description of the role"
Each role is directly linked to its specific place within the W3C WAI-ARIA Recommendation. This Recommendation accordingly serves as the W3C WAI-ARIA Roles ontology/vocabulary.
Including this WAI-ARIA Roles JSON-LD data island in the metadata of a web page will:
Immediately identify it to search engine crawlers as an accessible document.
Be indexed by search engines as an accessible document.
Its relationship via embedded WAI-ARIA Roles with the W3C WAI-ARIA Recommendation will be pointed to and recorded for future reference by search engines.
A web author can use all of it, or edit and limit it to the specific roles they are using throughout the DOM of the page.
Note the "application/ld+json" Internet media type declaration to be used for JSON-LD.
The JSON Schema and JSON-LD code examples have been tested and validate as semantically correct.
The following code examples illustrate the format and structure used in building the JSON Schema and JSON-LD.
Example 1: This is the JSON Schema used to programmatically define the structure the JSON-LD WAI-ARIA Roles data island.
Example 2: This is the JSON-LD data island containing the WAI-ARIA Landmark Role model. WAI-ARIA Landmark roles are listed in alphabetical order in a JSON-LD data island within the HTML5 <head> element of a web page.
Example 3: This is the JSON-LD data island containing all of the WAI-ARIA Roles. All WAI-ARIA roles are listed in alphabetical order in a JSON-LD data island within the HTML5 <head> element of a web page.
</description>
<examples>
<ex_head_1>
JSON Schema for WAI-ARIA Roles in JSON-LD
</ex_head_1>
<ex_desc_1>
This is the JSON Schema that specifies the programmatic structure of the JSON-LD used in the following Example 2 and 3.
Example 1
{
"$schema": "http://json-schema.org/schema#",
"type": "object",
"required": false,
"properties": {
"@context": {
"type": "string",
"id": "http://jsonschema.net/@context",
"required": false
},
"@type": {
"type": "string",
"id": "http://jsonschema.net/@type",
"required": false
},
"@value": {
"type": "string",
"id": "http://jsonschema.net/@value",
"required": false
},
"category": {
"type": "string",
"id": "http://jsonschema.net/category",
"required": false
},
"role": {
"type": "array",
"id": "http://jsonschema.net/role",
"required": false,
"items": {
"type": "object",
"id": "http://jsonschema.net/role/0",
"required": false,
"properties": {
"@type": {
"type": "string",
"id": "http://jsonschema.net/role/0/@type",
"required": false
},
"@value": {
"type": "string",
"id": "http://jsonschema.net/role/0/@value",
"required": false
},
"category": {
"type": "string",
"id": "http://jsonschema.net/role/0/category",
"required": false
},
"description": {
"type": "string",
"id": "http://jsonschema.net/role/0/description",
"required": false
}
}
}
}
}
}
</ex_desc_1>
<ex_head_2>
WAI-ARIA Roles in JSON-LD: Specific roles and all Roles
</ex_head_2>
<ex_desc_2>
Example 2 - WAI-ARIA Roles in JSON-LD - Using Specific Roles
As mentioned earlier, a web author does not need to include all of the roles; only those roles used throughout the scope of the page's DOM. For example, if a web author is only adding WAI-ARIA Landmark Role attributes and values to a DOM, i.e., role="main", role="navigation", role="banner", etc., then they can eliminate all other roles in the JSON-LD "role": object array that are not being used.
<!DOCTYPE html>
<html lang="en">
<head>
<title>WAI-ARIA Roles in JSON-LD</title>
<script type="application/ld+json">
{
"@context": "http://www.w3.org/TR/wai-aria/",
"@type": "WAI-ARIA Roles",
"@value": "http://www.w3.org/TR/wai-aria/roles",
"category": "http://www.w3.org/TR/wai-aria/roles#roles_categorization",
"role": [
{
"@type": "application",
"@value": "http://www.w3.org/TR/wai-aria/roles#application",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A region declared as a web application, as opposed to a web document."
},
{
"@type": "banner",
"@value": "http://www.w3.org/TR/wai-aria/roles#banner",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A region that contains mostly site-oriented content, rather than page-specific content."
},
{
"@type": "complementary",
"@value": "http://www.w3.org/TR/wai-aria/roles#complementary",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "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."
},
{
"@type": "contentinfo",
"@value": "http://www.w3.org/TR/wai-aria/roles#contentinfo",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A large perceivable region that contains information about the parent document."
},
{
"@type": "form",
"@value": "http://www.w3.org/TR/wai-aria/roles#form",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A landmark region that contains a collection of items and objects that, as a whole, combine to create a form."
},
{
"@type": "main",
"@value": "http://www.w3.org/TR/wai-aria/roles#main",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "The main content of a document."
},
{
"@type": "navigation",
"@value": "http://www.w3.org/TR/wai-aria/roles#navigation",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A collection of navigational elements (usually links) for navigating the document or related documents."
},
{
"@type": "search",
"@value": "http://www.w3.org/TR/wai-aria/roles#search",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility."
}
]
}
</script>
</head>
<body>
</body>
</html>
Example 3 - WAI-ARIA Roles in JSON-LD - Using All Roles
This is the complete WAI-ARIA Roles in JSON-LD code example whose structure programmatically maps to the preceding JSON Schema in Example 1. For reference purposes, all of the WAI-ARIA Roles are included in this example.
Example 3
<!DOCTYPE html>
<html lang="en">
<head>
<title>WAI-ARIA Roles in JSON-LD</title>
<script type="application/ld+json">
{
"@context": "http://www.w3.org/TR/wai-aria/",
"@type": "WAI-ARIA Roles",
"@value": "http://www.w3.org/TR/wai-aria/roles",
"category": "http://www.w3.org/TR/wai-aria/roles#roles_categorization",
"role": [
{
"@type": "alert",
"@value": "http://www.w3.org/TR/wai-aria/roles#alert",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A message with important, and usually time-sensitive, information."
},
{
"@type": "alertdialog",
"@value": "http://www.w3.org/TR/wai-aria/roles#alertdialog",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A type of dialog that contains an alert message, where initial focus goes to an element within the dialog."
},
{
"@type": "application",
"@value": "http://www.w3.org/TR/wai-aria/roles#application",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A region declared as a web application, as opposed to a web document."
},
{
"@type": "article",
"@value": "http://www.w3.org/TR/wai-aria/roles#article",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A section of a page that consists of a composition that forms an independent part of a document, page, or site."
},
{
"@type": "banner",
"@value": "http://www.w3.org/TR/wai-aria/roles#banner",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A region that contains mostly site-oriented content, rather than page-specific content."
},
{
"@type": "button",
"@value": "http://www.w3.org/TR/wai-aria/roles#button",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "An input that allows for user-triggered actions when clicked or pressed."
},
{
"@type": "checkbox",
"@value": "http://www.w3.org/TR/wai-aria/roles#checkbox",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A checkable input that has three possible values: true, false, or mixed."
},
{
"@type": "columnheader",
"@value": "http://www.w3.org/TR/wai-aria/roles#columnheader",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A cell containing header information for a column."
},
{
"@type": "combobox",
"@value": "http://www.w3.org/TR/wai-aria/roles#combobox",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "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."
},
{
"@type": "command",
"@value": "http://www.w3.org/TR/wai-aria/roles#command",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "A form of widget that performs an action but does not receive input data."
},
{
"@type": "complementary",
"@value": "http://www.w3.org/TR/wai-aria/roles#complementary",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "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."
},
{
"@type": "composite",
"@value": "http://www.w3.org/TR/wai-aria/roles#composite",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "A widget that may contain navigable descendants or owned children."
},
{
"@type": "contentinfo",
"@value": "http://www.w3.org/TR/wai-aria/roles#contentinfo",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A large perceivable region that contains information about the parent document."
},
{
"@type": "definition",
"@value": "http://www.w3.org/TR/wai-aria/roles#definition",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A definition of a term or concept."
},
{
"@type": "dialog",
"@value": "http://www.w3.org/TR/wai-aria/roles#dialog",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "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."
},
{
"@type": "directory",
"@value": "http://www.w3.org/TR/wai-aria/roles#directory",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A list of references to members of a group, such as a static table of contents."
},
{
"@type": "document",
"@value": "http://www.w3.org/TR/wai-aria/roles#document",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A region containing related information that is declared as document content, as opposed to a web application."
},
{
"@type": "form",
"@value": "http://www.w3.org/TR/wai-aria/roles#form",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A landmark region that contains a collection of items and objects that, as a whole, combine to create a form."
},
{
"@type": "grid",
"@value": "http://www.w3.org/TR/wai-aria/roles#grid",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A grid is an interactive control which contains cells of tabular data arranged in rows and columns, like a table."
},
{
"@type": "gridcell",
"@value": "http://www.w3.org/TR/wai-aria/roles#gridcell",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A cell in a grid or treegrid."
},
{
"@type": "group",
"@value": "http://www.w3.org/TR/wai-aria/roles#group",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A set of user interface objects which are not intended to be included in a page summary or table of contents by assistive technologies."
},
{
"@type": "heading",
"@value": "http://www.w3.org/TR/wai-aria/roles#heading",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A heading for a section of the page."
},
{
"@type": "img",
"@value": "http://www.w3.org/TR/wai-aria/roles#img",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A container for a collection of elements that form an image."
},
{
"@type": "input",
"@value": "http://www.w3.org/TR/wai-aria/roles#input",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "A generic type of widget that allows user input."
},
{
"@type": "link",
"@value": "http://www.w3.org/TR/wai-aria/roles#link",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "An interactive reference to an internal or external resource that, when activated, causes the user agent to navigate to that resource."
},
{
"@type": "list",
"@value": "http://www.w3.org/TR/wai-aria/roles#list",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A group of non-interactive list items."
},
{
"@type": "listbox",
"@value": "http://www.w3.org/TR/wai-aria/roles#listbox",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A widget that allows the user to select one or more items from a list of choices."
},
{
"@type": "listitem",
"@value": "http://www.w3.org/TR/wai-aria/roles#listitem",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A single item in a list or directory."
},
{
"@type": "log",
"@value": "http://www.w3.org/TR/wai-aria/roles#log",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A type of live region where new information is added in meaningful order and old information may disappear."
},
{
"@type": "main",
"@value": "http://www.w3.org/TR/wai-aria/roles#main",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "The main content of a document."
},
{
"@type": "marquee",
"@value": "http://www.w3.org/TR/wai-aria/roles#marquee",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A type of live region where non-essential information changes frequently."
},
{
"@type": "math",
"@value": "http://www.w3.org/TR/wai-aria/roles#math",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "Content that represents a mathematical expression."
},
{
"@type": "menu",
"@value": "http://www.w3.org/TR/wai-aria/roles#menu",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A type of widget that offers a list of choices to the user."
},
{
"@type": "menubar",
"@value": "http://www.w3.org/TR/wai-aria/roles#menubar",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A presentation of menu that usually remains visible and is usually presented horizontally."
},
{
"@type": "menuitem",
"@value": "http://www.w3.org/TR/wai-aria/roles#menuitem",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "An option in a set of choices contained by a menu or menubar."
},
{
"@type": "menuitemcheckbox",
"@value": "http://www.w3.org/TR/wai-aria/roles#menuitemcheckbox",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A menuitem with a checkable state whose possible values are true, false, or mixed."
},
{
"@type": "menuitemradio",
"@value": "http://www.w3.org/TR/wai-aria/roles#menuitemradio",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A checkable menuitem in a set of elements with role menuitemradio, only one of which can be checked at a time."
},
{
"@type": "navigation",
"@value": "http://www.w3.org/TR/wai-aria/roles#navigation",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A collection of navigational elements (usually links) for navigating the document or related documents."
},
{
"@type": "note",
"@value": "http://www.w3.org/TR/wai-aria/roles#note",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A section whose content is parenthetic or ancillary to the main content of the resource."
},
{
"@type": "option",
"@value": "http://www.w3.org/TR/wai-aria/roles#option",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A selectable item in a select list."
},
{
"@type": "presentation",
"@value": "http://www.w3.org/TR/wai-aria/roles#presentation",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "An element whose implicit native role semantics will not be mapped to the accessibility API."
},
{
"@type": "progressbar",
"@value": "http://www.w3.org/TR/wai-aria/roles#progressbar",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "An element that displays the progress status for tasks that take a long time."
},
{
"@type": "radio",
"@value": "http://www.w3.org/TR/wai-aria/roles#radio",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A checkable input in a group of radio roles, only one of which can be checked at a time."
},
{
"@type": "radiogroup",
"@value": "http://www.w3.org/TR/wai-aria/roles#radiogroup",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A group of radio buttons."
},
{
"@type": "range",
"@value": "http://www.w3.org/TR/wai-aria/roles#range",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "An input representing a range of values that can be set by the user."
},
{
"@type": "region",
"@value": "http://www.w3.org/TR/wai-aria/roles#region",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A large perceivable section of a web page or document, that 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."
},
{
"@type": "roletype",
"@value": "http://www.w3.org/TR/wai-aria/roles#roletype",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "The base role from which all other roles in this taxonomy inherit."
},
{
"@type": "row",
"@value": "http://www.w3.org/TR/wai-aria/roles#row",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A row of cells in a grid."
},
{
"@type": "rowgroup",
"@value": "http://www.w3.org/TR/wai-aria/roles#rowgroup",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A group containing one or more row elements in a grid."
},
{
"@type": "rowheader",
"@value": "http://www.w3.org/TR/wai-aria/roles#rowheader",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A cell containing header information for a row in a grid."
},
{
"@type": "scrollbar",
"@value": "http://www.w3.org/TR/wai-aria/roles#scrollbar",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "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."
},
{
"@type": "search",
"@value": "http://www.w3.org/TR/wai-aria/roles#search",
"category": "http://www.w3.org/TR/wai-aria/roles#landmark_roles",
"description": "A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility."
},
{
"@type": "section",
"@value": "http://www.w3.org/TR/wai-aria/roles#section",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "A renderable, structural containment unit in a document or application."
},
{
"@type": "sectionhead",
"@value": "http://www.w3.org/TR/wai-aria/roles#sectionhead",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "A structure that labels or summarizes the topic of its related section."
},
{
"@type": "select",
"@value": "http://www.w3.org/TR/wai-aria/roles#select",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "A form widget that allows the user to make selections from a set of choices."
},
{
"@type": "separator",
"@value": "http://www.w3.org/TR/wai-aria/roles#separator",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A divider that separates and distinguishes sections of content or groups of menuitems."
},
{
"@type": "slider",
"@value": "http://www.w3.org/TR/wai-aria/roles#slider",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A user input where the user selects a value from within a given range."
},
{
"@type": "spinbutton",
"@value": "http://www.w3.org/TR/wai-aria/roles#spinbutton",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A form of range that expects the user to select from among discrete choices."
},
{
"@type": "status",
"@value": "http://www.w3.org/TR/wai-aria/roles#status",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "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."
},
{
"@type": "structure",
"@value": "http://www.w3.org/TR/wai-aria/roles#structure",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "A document structural element."
},
{
"@type": "tab",
"@value": "http://www.w3.org/TR/wai-aria/roles#tab",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user."
},
{
"@type": "tablist",
"@value": "http://www.w3.org/TR/wai-aria/roles#tablist",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A list of tab elements, which are references to tabpanel elements."
},
{
"@type": "tabpanel",
"@value": "http://www.w3.org/TR/wai-aria/roles#tabpanel",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A container for the resources associated with a tab, where each tab is contained in a tablist."
},
{
"@type": "textbox",
"@value": "http://www.w3.org/TR/wai-aria/roles#textbox",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "Input that allows free-form text as its value."
},
{
"@type": "timer",
"@value": "http://www.w3.org/TR/wai-aria/roles#timer",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "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."
},
{
"@type": "toolbar",
"@value": "http://www.w3.org/TR/wai-aria/roles#toolbar",
"category": "http://www.w3.org/TR/wai-aria/roles#document_structure_roles",
"description": "A collection of commonly used function buttons or controls represented in compact visual form."
},
{
"@type": "tooltip",
"@value": "http://www.w3.org/TR/wai-aria/roles#tooltip",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A contextual popup that displays a description for an element."
},
{
"@type": "tree",
"@value": "http://www.w3.org/TR/wai-aria/roles#tree",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A type of list that may contain sub-level nested groups that can be collapsed and expanded."
},
{
"@type": "treegrid",
"@value": "http://www.w3.org/TR/wai-aria/roles#treegrid",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "A grid whose rows can be expanded and collapsed in the same manner as for a tree."
},
{
"@type": "treeitem",
"@value": "http://www.w3.org/TR/wai-aria/roles#treeitem",
"category": "http://www.w3.org/TR/wai-aria/roles#widget_roles",
"description": "An option item of a tree. This is an element within a tree that may be expanded or collapsed if it contains a sub-level group of treeitem elements."
},
{
"@type": "widget",
"@value": "http://www.w3.org/TR/wai-aria/roles#widget",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "An interactive component of a graphical user interface (GUI)."
},
{
"@type": "window",
"@value": "http://www.w3.org/TR/wai-aria/roles#window",
"category": "http://www.w3.org/TR/wai-aria/roles#abstract_roles",
"description": "A browser or application window."
}
]
}
</script>
</head>
<body>
</body>
</html>
</ex_desc_2>
</examples>
<resources>
<resources_title1>
W3C: Accessible Rich Internet Applications (WAI-ARIA) 1.0
</resources_title1>
<resource_uri1>
http://www.w3.org/TR/wai-aria/
</resource_uri1>
<resources_title2>
W3C: JSON-LD 1.0 A JSON-based Serialization for Linked Data
</resources_title2>
<resource_uri2>
http://www.w3.org/TR/2014/REC-json-ld-20140116/
</resource_uri2>
</resources>
<related_techniques>
<related_technique>
H
</related_technique>
</related_techniques>
<tests>
<procedure>
1. Apply WAI-ARIA Role attributes and values to elements of a web page.
2. Write and validate the WAI-ARIA Role attributes and values in JSON-LD.
3. Place the JSON-LD within the <head></head> element of the web page.
4. eload or upload the accessible web page to its website.
5. Allow sufficient time for search engine crawlers to discover, then index the accessible web page.
</procedure>
<expected_result>
True - The web page's accessibility is now enhanced to assistive technologies by the WAI-ARIA Roles exposed in the JSON-LD data island.
True - The web page with its accessibility features identified in JSON-LD is now part of universal Linked-Data.
True - The accessible web page's Search Engine Optimization and visibility should improve via crawling and indexing of the JSON-LD by search engines.
</expected_result>
<test_file_1>
</test_file_1>
<pass_fail_1>
pass
</pass_fail_1>
<test_file_2>
</test_file_2>
<pass_fail_2>
pass
</pass_fail_2>
</tests>
</technique>
Additional Notes:
This technique has been tested, validated, and will meet all success criteria that it relates to.
Additional resources:
Received on Monday, 24 November 2014 19:00:24 UTC