{"id":302,"date":"2019-06-04T15:51:46","date_gmt":"2019-06-04T19:51:46","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/iwacc\/?post_type=chapter&p=302"},"modified":"2022-12-16T10:32:05","modified_gmt":"2022-12-16T15:32:05","slug":"introduction-to-wai-aria","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/introduction-to-wai-aria\/","title":{"raw":"Introduction to WAI-ARIA","rendered":"Introduction to WAI-ARIA"},"content":{"raw":"An important and recent addition to the family of accessibility standards created by the W3C is WAI-ARIA. This acronym stands for \u201cWeb Accessibility Initiative,\u201d the W3C subgroup that created the standard, and \u201cAccessible Rich Internet Applications,\u201d the name of the standard itself. Here we touch on WAI-ARIA without going into much detail. It is primarily aimed at developers who create custom web applications and widgets using non-standard HTML. For example, a developer might create a checkbox out of an HTML <div><\/code>element. WAI-ARIA allows a developer to assign checkbox semantics to that <div><\/code>, like its role (i.e., role=\"checkbox\"<\/code>) and its state (i.e., aria-checked=\"true\"<\/code> or aria-checked=\"false\"<\/code>), so when it is encountered by an assistive technology, the technology recognizes that <div> <\/code>as a checkbox.\r\n
\r\n
\r\n\r\nWhat is a <div><\/code><\/strong>?\r\n\r\nThe <div><\/code> tag defines a division or a section in an HTML document.\r\n\r\nThe <div> <\/code> element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.\r\n\r\nSource: W3C<\/a>\r\n\r\n<\/div>\r\nYou were indirectly introduced to some of the semantics described in the paragraph above in Activity 1. As you were navigating through the Showcase demo website, you would have heard a number of WAI-ARIA elements announced by your screen reader.\r\n\r\nAs part of what you are learning here, just knowing of the existence of WAI-ARIA will be sufficient. Here, we will provide an overview of how it works and when it should be used, along with an example you can try with your screen reader to develop a little practical experience with it.\r\n
Key Point: <\/strong>Just be familiar with the existence of WAI-ARIA and the purpose it serves as part of your learning here. WAI-ARIA makes custom-created web elements meaningful to assistive technology users.<\/div>\r\n

Static vs. Dynamic WAI-ARIA<\/h2>\r\nThough primarily aimed at developers and programmers, there is some WAI-ARIA that can be used in a static form. That is, a person writing HTML can write WAI-ARIA \u00a0right into the HTML. The landmark navigation elements you were introduced to earlier is one example of a static use of HTML. These landmarks are a type of role, specifically used to define regions on a web page. There are eight landmark roles, listed here.\r\n

WAI-ARIA Landmark Roles<\/h3>\r\n