{"id":305,"date":"2018-12-10T15:58:08","date_gmt":"2018-12-10T15:58:08","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=305"},"modified":"2022-12-16T16:57:59","modified_gmt":"2022-12-16T16:57:59","slug":"common-static-wai-aria","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/common-static-wai-aria\/","title":{"raw":"Common Static WAI-ARIA","rendered":"Common Static WAI-ARIA"},"content":{"raw":"Much of the WAI-ARIA introduced so far is static. That is, it can be written directly into HTML elements as attributes, their values typically do not change, and they do not require scripting to control their behaviour. Landmarks and roles, for example, are all static. Anyone who knows how to read and write HTML can make use of these attributes by simply adding them to HTML elements. WAI-ARIA properties are also typically static, though not always.\r\n\r\nAs discussed earlier, static WAI-ARIA often consists of properties given to define specific characteristics of an HTML element that has a particular functional role. For example, a nested list may be defined as a menu using <code>role=\"menubar\"<\/code> to define the top-level list and\u00a0\u00a0<code>role=\"menu\"<\/code> to define sublists.\r\n\r\nList items in the top-level list that have a nested sublist would be given the attribute <code>aria-haspopup=\"true\"<\/code> (or <code>aria-haspopup=\"menu\"<\/code>). Thus, when encountered by assistive technology, a list item with this attribute will announce that a submenu is present (e.g., \u201cmenu with submenu\u201d when using ChromeVox).\r\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #b9f;\">\r\n\r\n<strong><strong>Try This: <\/strong><\/strong>Using ChromeVox, navigate through the menu bar widget example below, created by Hans Hillen at the Paciello Group, to hear how submenus are announced. <a href=\"https:\/\/de.torontomu.ca\/wa\/aria\/jquery\/menubar.html\" target=\"_blank\" rel=\"noopener noreferrer\">Open this demo in a new window.<\/a>\r\n\r\n<\/div>\r\n<h2>Frequently Used WAI-ARIA Attributes<\/h2>\r\nYou have already been introduced to a few static attributes. Those and a handful of others you are likely to use regularly are listed here. This is not a full list. Follow the links and read through their descriptions.\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-describedby\">aria-describedby<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-labelledby\">aria-labelledby<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-label\">aria-label<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-required\">aria-required<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-controls\">aria-controls<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-details\">aria-details<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-haspopup\">aria-haspopup<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-live\">aria-live<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-owns\">aria-owns<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-relevant\">aria-relevant<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-roledescription\">aria-roledescription<\/a><\/li>\r\n<\/ul>","rendered":"<p>Much of the WAI-ARIA introduced so far is static. That is, it can be written directly into HTML elements as attributes, their values typically do not change, and they do not require scripting to control their behaviour. Landmarks and roles, for example, are all static. Anyone who knows how to read and write HTML can make use of these attributes by simply adding them to HTML elements. WAI-ARIA properties are also typically static, though not always.<\/p>\n<p>As discussed earlier, static WAI-ARIA often consists of properties given to define specific characteristics of an HTML element that has a particular functional role. For example, a nested list may be defined as a menu using <code>role=\"menubar\"<\/code> to define the top-level list and\u00a0\u00a0<code>role=\"menu\"<\/code> to define sublists.<\/p>\n<p>List items in the top-level list that have a nested sublist would be given the attribute <code>aria-haspopup=\"true\"<\/code> (or <code>aria-haspopup=\"menu\"<\/code>). Thus, when encountered by assistive technology, a list item with this attribute will announce that a submenu is present (e.g., \u201cmenu with submenu\u201d when using ChromeVox).<\/p>\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #b9f;\">\n<p><strong><strong>Try This: <\/strong><\/strong>Using ChromeVox, navigate through the menu bar widget example below, created by Hans Hillen at the Paciello Group, to hear how submenus are announced. <a href=\"https:\/\/de.torontomu.ca\/wa\/aria\/jquery\/menubar.html\" target=\"_blank\" rel=\"noopener noreferrer\">Open this demo in a new window.<\/a><\/p>\n<\/div>\n<h2>Frequently Used WAI-ARIA Attributes<\/h2>\n<p>You have already been introduced to a few static attributes. Those and a handful of others you are likely to use regularly are listed here. This is not a full list. Follow the links and read through their descriptions.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-describedby\">aria-describedby<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-labelledby\">aria-labelledby<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-label\">aria-label<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-required\">aria-required<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-controls\">aria-controls<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-details\">aria-details<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-haspopup\">aria-haspopup<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-live\">aria-live<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-owns\">aria-owns<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-relevant\">aria-relevant<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/wai-aria-1.1\/#aria-roledescription\">aria-roledescription<\/a><\/li>\n<\/ul>\n","protected":false},"author":100,"menu_order":3,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-305","chapter","type-chapter","status-publish","hentry"],"part":31,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/305","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":16,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/305\/revisions"}],"predecessor-version":[{"id":2000,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/305\/revisions\/2000"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/parts\/31"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/305\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=305"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=305"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=305"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}