{"id":272,"date":"2018-12-06T21:54:43","date_gmt":"2018-12-06T21:54:43","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=272"},"modified":"2019-11-07T16:40:16","modified_gmt":"2019-11-07T16:40:16","slug":"static-vs-dynamic-wai-aria","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/static-vs-dynamic-wai-aria\/","title":{"raw":"Static vs. Dynamic WAI-ARIA","rendered":"Static vs. Dynamic WAI-ARIA"},"content":{"raw":"Even if you don\u2019t use JavaScript, there is a good amount you can do with static WAI-ARIA to improve the accessibility of a website or web application. You may have already gathered from the discussion of states and properties that some WAI-ARIA can be written right into the HTML of a web page (e.g., properties and landmarks). Others need to be dynamically updated based on user input or context (e.g., states and some properties).\r\n\r\nSome of the static WAI-ARIA attributes you are likely to use are listed below, with their descriptions from W3C.\r\n<h2>Global Static Properties<\/h2>\r\n<ul>\r\n \t<li><strong>aria-describedby<\/strong>: Identifies the element (or elements) that describes the object.<\/li>\r\n \t<li><strong>aria-labelledby<\/strong>: Identifies the element (or elements) that labels the current element.<\/li>\r\n \t<li><strong>aria-label<\/strong>: Defines a string value that labels the current element.<\/li>\r\n \t<li><strong>aria-controls<\/strong>: Identifies the element (or elements) whose contents or presence are controlled by the current element.<\/li>\r\n \t<li><strong>aria-owns<\/strong>: Identifies an element (or elements) in order to define a visual, functional, or contextual parent\/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.<\/li>\r\n \t<li><strong>aria-details<\/strong>: Identifies the element that provides a detailed, extended description for the object.<\/li>\r\n<\/ul>\r\nBelow is an example of some of these attributes in action. Though this example would need some scripting to handle the submenu opening and closing, and dynamically updating <span class=\"no-hyphens\"><code>aria-expanded<\/code> to false when the submenu is closed, and update the active element referenced in <code>aria-activedescendant<\/code><\/span>, you can get an idea of the semantics that are being applied to make the nested list announce itself as a menu. Watch or listen to the screen reader output in the video that follows the code box below to understand how the WAI-ARIA attributes are read. Examine the code in the code box to understand what WAI-ARIA is being used to produce that output.\r\n<div style=\"height: 510px; width: 100%; overflow: hidden;\">[h5p id=\"4\"]<\/div>\r\n<h2>How Does the Above Markup Work?<\/h2>\r\n<ol>\r\n \t<li>Navigating with the Tab key, focus first goes to the <code>\"menu_container\"<\/code> div, which is made keyboard focusable with the <code>tabindex=\"0\"<\/code> attribute.<\/li>\r\n \t<li>There the screen reader reads the content of the \u201cchooser\u201d div, identified by <code>aria-details<\/code>, describing what the menu is used for. This div is hidden from view but available to screen readers. This div could be made visible to make it available for everyone.<\/li>\r\n \t<li>Next, the \u201cofferings\u201d UL receives focus, also made focusable with <code>tabindex=\"0\"<\/code>.<\/li>\r\n \t<li>There, the screen reader reads the content of the \u201cnavhowto\u201d div, identified by <code>aria-describedby<\/code>, explaining how to navigate the menu. This div is hidden from view for most users.<\/li>\r\n \t<li>Next, using the Arrow keys as instructed by the \u201cnavhowto\u201d div, the \u2018Home\u2019 <code>menuitem<\/code> takes focus, announcing \u201cmenubar expanded with submenu, Home, menu\u201d. Probably a little more verbose in this case than it needs to be, but that\u2019s how ChromeVox handles menu items.<\/li>\r\n \t<li>Using the Down Arrow key, focus is moved to the \u201cCourses\u201d menu item, announcing \u201cCourses, menu expanded with submenu.\u201d The <span class=\"no-hyphens\"><code>aria-haspopup<\/code> attribute is what causes a screen reader to announce a submenu. <code>aria-expanded=\"true\"<\/code><\/span> causes the screen reader to announce that the menu is expanded.<\/li>\r\n \t<li>Using the Down Arrow, focus moves into the submenu, announcing \u201cMenu with two items, Economics, menuitem 1 of two.\u201d The submenu is announced as a menu of its own, identified by adding <code>role=\"menu\"<\/code> to the UL containing the two submenu items.<\/li>\r\n \t<li>Finally, using the Down Arrow, the screen reader announces \u201cComputer Science, menuitem two of two.\u201d<\/li>\r\n<\/ol>\r\nHere's a video that shows how ChromeVox would read out the menu described above:\r\n\r\n<strong>Video: <a href=\"https:\/\/www.youtube.com\/watch?v=-DKpnLU4KnU target=_blank\" rel=\"noopener noreferrer\">Example Menu with WAI-ARIA<\/a>\u00a0<\/strong>(0:33)\r\n\r\n[embed]https:\/\/www.youtube.com\/watch?v=-DKpnLU4KnU[\/embed]\r\n\r\nMost of the WAI-ARIA elements described in the above series of steps can be used statically by typing the attributes right into the HTML. The <code>aria-activedescendant<\/code>\u00a0would typically be dynamically updated with script as the menuitems are selected. The\u00a0<code>aria-expanded<\/code> would also be updated dynamically switching between true and false when the submenu is toggled opened or closed.\r\n\r\nHere are some more static WAI-ARIA attributes, which we\u2019ll look at in a little more detail later as you complete the activities.\r\n<h2>Widget Static Attributes<\/h2>\r\n<ul>\r\n \t<li><strong>aria-haspopup<\/strong>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.<\/li>\r\n \t<li><strong>aria-modal<\/strong>: Indicates whether an element is modal when displayed<\/li>\r\n \t<li><strong>aria-readonly<\/strong>: Indicates that the element is not editable but is otherwise operable.<\/li>\r\n \t<li><strong>aria-required<\/strong>: Indicates that user input is required on the element before a form may be submitted.<\/li>\r\n<\/ul>\r\n<h2>Live Static Regions<\/h2>\r\n<ul>\r\n \t<li><strong>aria-live<\/strong>: Indicates that an element will be updated and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.<\/li>\r\n \t<li><strong>aria-atomic<\/strong>: Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.<\/li>\r\n \t<li><strong>aria-relevant<\/strong>: Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.<\/li>\r\n<\/ul>\r\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #3c3;\"><strong>Toolkit:\u00a0<\/strong>For a full list of roles, see section 1 in the <a href=\"http:\/\/whatsock.com\/training\/matrices\/\">The ARIA Role Matrices.<\/a><\/div>","rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69d5443a47232\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69d5443a47232\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/static-vs-dynamic-wai-aria\/#Global_Static_Properties\" >Global Static Properties<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/static-vs-dynamic-wai-aria\/#How_Does_the_Above_Markup_Work\" >How Does the Above Markup Work?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/static-vs-dynamic-wai-aria\/#Widget_Static_Attributes\" >Widget Static Attributes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/static-vs-dynamic-wai-aria\/#Live_Static_Regions\" >Live Static Regions<\/a><\/li><\/ul><\/nav><\/div>\n<p>Even if you don\u2019t use JavaScript, there is a good amount you can do with static WAI-ARIA to improve the accessibility of a website or web application. You may have already gathered from the discussion of states and properties that some WAI-ARIA can be written right into the HTML of a web page (e.g., properties and landmarks). Others need to be dynamically updated based on user input or context (e.g., states and some properties).<\/p>\n<p>Some of the static WAI-ARIA attributes you are likely to use are listed below, with their descriptions from W3C.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Global_Static_Properties\"><\/span>Global Static Properties<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>aria-describedby<\/strong>: Identifies the element (or elements) that describes the object.<\/li>\n<li><strong>aria-labelledby<\/strong>: Identifies the element (or elements) that labels the current element.<\/li>\n<li><strong>aria-label<\/strong>: Defines a string value that labels the current element.<\/li>\n<li><strong>aria-controls<\/strong>: Identifies the element (or elements) whose contents or presence are controlled by the current element.<\/li>\n<li><strong>aria-owns<\/strong>: Identifies an element (or elements) in order to define a visual, functional, or contextual parent\/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.<\/li>\n<li><strong>aria-details<\/strong>: Identifies the element that provides a detailed, extended description for the object.<\/li>\n<\/ul>\n<p>Below is an example of some of these attributes in action. Though this example would need some scripting to handle the submenu opening and closing, and dynamically updating <span class=\"no-hyphens\"><code>aria-expanded<\/code> to false when the submenu is closed, and update the active element referenced in <code>aria-activedescendant<\/code><\/span>, you can get an idea of the semantics that are being applied to make the nested list announce itself as a menu. Watch or listen to the screen reader output in the video that follows the code box below to understand how the WAI-ARIA attributes are read. Examine the code in the code box to understand what WAI-ARIA is being used to produce that output.<\/p>\n<div style=\"height: 510px; width: 100%; overflow: hidden;\">\n<div id=\"h5p-4\">\n<div class=\"h5p-content\" data-content-id=\"4\"><\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"How_Does_the_Above_Markup_Work\"><\/span>How Does the Above Markup Work?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li>Navigating with the Tab key, focus first goes to the <code>\"menu_container\"<\/code> div, which is made keyboard focusable with the <code>tabindex=\"0\"<\/code> attribute.<\/li>\n<li>There the screen reader reads the content of the \u201cchooser\u201d div, identified by <code>aria-details<\/code>, describing what the menu is used for. This div is hidden from view but available to screen readers. This div could be made visible to make it available for everyone.<\/li>\n<li>Next, the \u201cofferings\u201d UL receives focus, also made focusable with <code>tabindex=\"0\"<\/code>.<\/li>\n<li>There, the screen reader reads the content of the \u201cnavhowto\u201d div, identified by <code>aria-describedby<\/code>, explaining how to navigate the menu. This div is hidden from view for most users.<\/li>\n<li>Next, using the Arrow keys as instructed by the \u201cnavhowto\u201d div, the \u2018Home\u2019 <code>menuitem<\/code> takes focus, announcing \u201cmenubar expanded with submenu, Home, menu\u201d. Probably a little more verbose in this case than it needs to be, but that\u2019s how ChromeVox handles menu items.<\/li>\n<li>Using the Down Arrow key, focus is moved to the \u201cCourses\u201d menu item, announcing \u201cCourses, menu expanded with submenu.\u201d The <span class=\"no-hyphens\"><code>aria-haspopup<\/code> attribute is what causes a screen reader to announce a submenu. <code>aria-expanded=\"true\"<\/code><\/span> causes the screen reader to announce that the menu is expanded.<\/li>\n<li>Using the Down Arrow, focus moves into the submenu, announcing \u201cMenu with two items, Economics, menuitem 1 of two.\u201d The submenu is announced as a menu of its own, identified by adding <code>role=\"menu\"<\/code> to the UL containing the two submenu items.<\/li>\n<li>Finally, using the Down Arrow, the screen reader announces \u201cComputer Science, menuitem two of two.\u201d<\/li>\n<\/ol>\n<p>Here&#8217;s a video that shows how ChromeVox would read out the menu described above:<\/p>\n<p><strong>Video: <a href=\"https:\/\/www.youtube.com\/watch?v=-DKpnLU4KnU target=_blank\" rel=\"noopener noreferrer\">Example Menu with WAI-ARIA<\/a>\u00a0<\/strong>(0:33)<\/p>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"Example Menu with WAI-ARIA\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/-DKpnLU4KnU?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Most of the WAI-ARIA elements described in the above series of steps can be used statically by typing the attributes right into the HTML. The <code>aria-activedescendant<\/code>\u00a0would typically be dynamically updated with script as the menuitems are selected. The\u00a0<code>aria-expanded<\/code> would also be updated dynamically switching between true and false when the submenu is toggled opened or closed.<\/p>\n<p>Here are some more static WAI-ARIA attributes, which we\u2019ll look at in a little more detail later as you complete the activities.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Widget_Static_Attributes\"><\/span>Widget Static Attributes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>aria-haspopup<\/strong>: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.<\/li>\n<li><strong>aria-modal<\/strong>: Indicates whether an element is modal when displayed<\/li>\n<li><strong>aria-readonly<\/strong>: Indicates that the element is not editable but is otherwise operable.<\/li>\n<li><strong>aria-required<\/strong>: Indicates that user input is required on the element before a form may be submitted.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Live_Static_Regions\"><\/span>Live Static Regions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><strong>aria-live<\/strong>: Indicates that an element will be updated and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.<\/li>\n<li><strong>aria-atomic<\/strong>: Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.<\/li>\n<li><strong>aria-relevant<\/strong>: Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.<\/li>\n<\/ul>\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #3c3;\"><strong>Toolkit:\u00a0<\/strong>For a full list of roles, see section 1 in the <a href=\"http:\/\/whatsock.com\/training\/matrices\/\">The ARIA Role Matrices.<\/a><\/div>\n","protected":false},"author":100,"menu_order":4,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-272","chapter","type-chapter","status-publish","hentry"],"part":28,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/272","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":24,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/272\/revisions"}],"predecessor-version":[{"id":1888,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/272\/revisions\/1888"}],"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\/272\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=272"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=272"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=272"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}