{"id":259,"date":"2018-12-06T21:05:45","date_gmt":"2018-12-06T21:05:45","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=259"},"modified":"2022-06-20T14:24:17","modified_gmt":"2022-06-20T14:24:17","slug":"what-is-wai-aria","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/what-is-wai-aria\/","title":{"raw":"What is WAI-ARIA?","rendered":"What is WAI-ARIA?"},"content":{"raw":"<div class=\"textbox\">\r\n\r\n<strong>W3C definition of WAI-ARIA <\/strong>\r\n\r\n\u201cWAI-ARIA provides a framework for adding attributes to identify features for user interaction, how they relate to each other, and their current state.\u201d\r\n<p style=\"text-align: left;\"><a href=\"https:\/\/www.w3.org\/WAI\/intro\/aria\">Source: W3C<\/a><\/p>\r\n\r\n<\/div>\r\n<div style=\"border: 1px solid black; padding: 1em;\">\r\n\r\nWAI-ARIA provides web authors with the following:\r\n<ul>\r\n \t<li>Roles to describe the type of widget presented, such as \u201cmenu\u201d, \u201ctreeitem\u201d, \u201cslider\u201d, and \u201cprogressmeter\u201d<\/li>\r\n \t<li>Roles to describe the structure of the web page, such as headings, regions, and tables (grids)<\/li>\r\n \t<li>Properties to describe the state widgets are in, such as \u201cchecked\u201d for a check box, or \u201chaspopup\u201d for a menu.<\/li>\r\n \t<li>Properties to define live regions of a page that are likely to get updates (such as stock quotes), as well as an interruption policy for those updates \u2014 for example, critical updates may be presented in an alert dialog box and incidental updates occur within the page<\/li>\r\n \t<li>Properties for drag-and-drop that describe drag sources and drop targets<\/li>\r\n \t<li>A way to provide keyboard navigation for the web objects and events, such as those mentioned above<\/li>\r\n<\/ul>\r\n<p style=\"text-align: left;\"><a href=\"https:\/\/www.w3.org\/WAI\/intro\/aria\">Source: W3C<\/a><\/p>\r\n\r\n<\/div>\r\nSome elements of the framework can be used on their own to add accessibility to web content (e.g., landmarks). More often, they are combined with scripting that is used to dynamically add or remove WAI-ARIA attributes depending on the context.\r\n\r\nWAI-ARIA provides semantics for custom widgets and web applications that can be understood by assistive technologies (ATs) and conveyed to users in a \u201chuman understandable\u201d form. For example, HTML list markup might be used to create a navigation bar with menus and submenus. Without WAI-ARIA a screen reader would simply recognize the navigation bar as a collection of nested lists. Adding WAI-ARIA menu attributes (e.g., menubar, menu, menuitem, aria-haspopup, aria-expanded) can give the nested list a whole new meaning, more easily understood as a means of navigation than the list would be understood.\r\n<div class=\"textbox\">\r\n\r\n<strong>W3C definition of semantics<\/strong>\r\n\r\n\u201cThe meaning of something as understood by a human, defined in a way that computers can process a representation of an\u00a0<a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-object\">object<\/a>, such as <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-element\">elements<\/a> and <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-attribute\">attributes<\/a>, and reliably represent the object in a way that various humans will achieve a mutually consistent understanding of the object.\u201d\r\n\r\n<a href=\"https:\/\/www.w3.org\/TR\/personalization-semantics-1.0\/#dfn-semantic\">Source: W3C<\/a>\r\n\r\n<\/div>\r\nThis definition of semantics in programming is much like the common definition of the word: \u201cthe meaning, or an interpretation of the meaning\u201d (dictionary.com). Semantics in the context of web accessibility refers to the defining of meaning as it applies to functional elements of web content, and how that functionality is conveyed to assistive technology users, especially, screen reader users.\r\n<h2>When and When Not to Use WAI-ARIA<\/h2>\r\nWAI-ARIA is supposed to be used when semantics are required to make a web application or widget understandable. For example, if you are using a <code>&lt;div&gt;<\/code> to create a checkbox, along with some scripting you can assign the WAI-ARIA role \u201ccheckbox\u201d to that <code>&lt;div&gt;<\/code> to make it appear as a checkbox.\r\n\r\nThat said though, when there is a native HTML element available, like a checkbox, it is almost always better to use the native version than creating your own. The native version will already have all the associated semantics by default. Since the native versions are standardized, they are more likely to be supported across browsers and assistive technologies.\r\n\r\nFor native HTML elements, it is not necessary to use WAI-ARIA. For an HTML\u00a0<code>&lt;form&gt;<\/code> element for instance, there is no need to include <code>role=\"form\"<\/code> with the element. There are a few exceptions to this rule, however. For some of the newer HTML5 elements, like <code>&lt;nav&gt;<\/code> and <code>&lt;main&gt;<\/code> for instance, it does not hurt to include the WAI-ARIA equivalent <code>role=\"navigation\"<\/code> and <code>role=\"main\"<\/code> in these elements for the time being, to accommodate some of the inconsistent support for these elements across browsers and ATs. HTML validators will still give you warnings about the redundant roles, but you can safely ignore these.\r\n\r\nYou should also be careful when using WAI-ARIA with HTML elements that already have semantics. For example, if you use <code>&lt;h3 role=\"button\"&gt;something&lt;\/h3&gt;<\/code>, the semantics associated with the heading will be overridden, thus, potentially breaking the structure of a document. In a case like this, a better approach would be to wrap the heading in a <code>&lt;div&gt;<\/code> then assign <code>role=\"button\"<\/code> to the <code>&lt;div&gt;<\/code> to preserve the structural semantics of the heading, as seen in the examples below.\r\n\r\n&nbsp;\r\n<div style=\"height: 175px; width: 100%; overflow: hidden;\">[h5p id=\"2\"]<\/div>","rendered":"<div class=\"textbox\">\n<p><strong>W3C definition of WAI-ARIA <\/strong><\/p>\n<p>\u201cWAI-ARIA provides a framework for adding attributes to identify features for user interaction, how they relate to each other, and their current state.\u201d<\/p>\n<p style=\"text-align: left;\"><a href=\"https:\/\/www.w3.org\/WAI\/intro\/aria\">Source: W3C<\/a><\/p>\n<\/div>\n<div style=\"border: 1px solid black; padding: 1em;\">\n<p>WAI-ARIA provides web authors with the following:<\/p>\n<ul>\n<li>Roles to describe the type of widget presented, such as \u201cmenu\u201d, \u201ctreeitem\u201d, \u201cslider\u201d, and \u201cprogressmeter\u201d<\/li>\n<li>Roles to describe the structure of the web page, such as headings, regions, and tables (grids)<\/li>\n<li>Properties to describe the state widgets are in, such as \u201cchecked\u201d for a check box, or \u201chaspopup\u201d for a menu.<\/li>\n<li>Properties to define live regions of a page that are likely to get updates (such as stock quotes), as well as an interruption policy for those updates \u2014 for example, critical updates may be presented in an alert dialog box and incidental updates occur within the page<\/li>\n<li>Properties for drag-and-drop that describe drag sources and drop targets<\/li>\n<li>A way to provide keyboard navigation for the web objects and events, such as those mentioned above<\/li>\n<\/ul>\n<p style=\"text-align: left;\"><a href=\"https:\/\/www.w3.org\/WAI\/intro\/aria\">Source: W3C<\/a><\/p>\n<\/div>\n<p>Some elements of the framework can be used on their own to add accessibility to web content (e.g., landmarks). More often, they are combined with scripting that is used to dynamically add or remove WAI-ARIA attributes depending on the context.<\/p>\n<p>WAI-ARIA provides semantics for custom widgets and web applications that can be understood by assistive technologies (ATs) and conveyed to users in a \u201chuman understandable\u201d form. For example, HTML list markup might be used to create a navigation bar with menus and submenus. Without WAI-ARIA a screen reader would simply recognize the navigation bar as a collection of nested lists. Adding WAI-ARIA menu attributes (e.g., menubar, menu, menuitem, aria-haspopup, aria-expanded) can give the nested list a whole new meaning, more easily understood as a means of navigation than the list would be understood.<\/p>\n<div class=\"textbox\">\n<p><strong>W3C definition of semantics<\/strong><\/p>\n<p>\u201cThe meaning of something as understood by a human, defined in a way that computers can process a representation of an\u00a0<a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-object\">object<\/a>, such as <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-element\">elements<\/a> and <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-attribute\">attributes<\/a>, and reliably represent the object in a way that various humans will achieve a mutually consistent understanding of the object.\u201d<\/p>\n<p><a href=\"https:\/\/www.w3.org\/TR\/personalization-semantics-1.0\/#dfn-semantic\">Source: W3C<\/a><\/p>\n<\/div>\n<p>This definition of semantics in programming is much like the common definition of the word: \u201cthe meaning, or an interpretation of the meaning\u201d (dictionary.com). Semantics in the context of web accessibility refers to the defining of meaning as it applies to functional elements of web content, and how that functionality is conveyed to assistive technology users, especially, screen reader users.<\/p>\n<h2>When and When Not to Use WAI-ARIA<\/h2>\n<p>WAI-ARIA is supposed to be used when semantics are required to make a web application or widget understandable. For example, if you are using a <code>&lt;div&gt;<\/code> to create a checkbox, along with some scripting you can assign the WAI-ARIA role \u201ccheckbox\u201d to that <code>&lt;div&gt;<\/code> to make it appear as a checkbox.<\/p>\n<p>That said though, when there is a native HTML element available, like a checkbox, it is almost always better to use the native version than creating your own. The native version will already have all the associated semantics by default. Since the native versions are standardized, they are more likely to be supported across browsers and assistive technologies.<\/p>\n<p>For native HTML elements, it is not necessary to use WAI-ARIA. For an HTML\u00a0<code>&lt;form&gt;<\/code> element for instance, there is no need to include <code>role=\"form\"<\/code> with the element. There are a few exceptions to this rule, however. For some of the newer HTML5 elements, like <code>&lt;nav&gt;<\/code> and <code>&lt;main&gt;<\/code> for instance, it does not hurt to include the WAI-ARIA equivalent <code>role=\"navigation\"<\/code> and <code>role=\"main\"<\/code> in these elements for the time being, to accommodate some of the inconsistent support for these elements across browsers and ATs. HTML validators will still give you warnings about the redundant roles, but you can safely ignore these.<\/p>\n<p>You should also be careful when using WAI-ARIA with HTML elements that already have semantics. For example, if you use <code>&lt;h3 role=\"button\"&gt;something&lt;\/h3&gt;<\/code>, the semantics associated with the heading will be overridden, thus, potentially breaking the structure of a document. In a case like this, a better approach would be to wrap the heading in a <code>&lt;div&gt;<\/code> then assign <code>role=\"button\"<\/code> to the <code>&lt;div&gt;<\/code> to preserve the structural semantics of the heading, as seen in the examples below.<\/p>\n<p>&nbsp;<\/p>\n<div style=\"height: 175px; width: 100%; overflow: hidden;\">\n<div id=\"h5p-2\">\n<div class=\"h5p-content\" data-content-id=\"2\"><\/div>\n<\/div>\n<\/div>\n","protected":false},"author":100,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-259","chapter","type-chapter","status-publish","hentry"],"part":28,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/users\/100"}],"version-history":[{"count":29,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/259\/revisions"}],"predecessor-version":[{"id":1959,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/259\/revisions\/1959"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/parts\/28"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/259\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=259"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=259"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=259"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}