{"id":267,"date":"2018-12-06T21:41:05","date_gmt":"2018-12-06T21:41:05","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&#038;p=267"},"modified":"2022-06-20T14:26:41","modified_gmt":"2022-06-20T14:26:41","slug":"roles-states-and-properties","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/roles-states-and-properties\/","title":{"raw":"Roles, States, and Properties","rendered":"Roles, States, and Properties"},"content":{"raw":"The semantics described earlier are created by adding roles, states, and properties to HTML elements.\r\n<h2>Roles<\/h2>\r\n<div class=\"textbox\">\r\n\r\n<strong>W3C definition of roles<\/strong>\r\n\r\n\u201cMain indicator of type. This <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-semantics\">semantic<\/a> association allows tools to present and support interaction with the object in a manner that is consistent with user expectations about other objects of that type.\u201d\r\n<p style=\"text-align: left;\"><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-roles\">Source:\u00a0W3C<\/a><\/p>\r\n\r\n<\/div>\r\nExamples of roles include menu, alert, banner, tree, tabpanel, textbox, and so on. Once assigned to an element, roles <em>must not<\/em> change over time or with user input. If, for instance, you wanted to change from a \u201cmenubar\u201d while viewing in full screen mode to a toggle \u201cmenu\u201d when viewed on a mobile device, the entire block of markup would change, rather than switching menubar for menu.\r\n\r\nRoles are categorized into six groupings. Here are the groups with a few examples of each type:\r\n<ul>\r\n \t<li>Abstract role (not to be used by authors in content, the base for the WAI-ARIA ontology)<\/li>\r\n \t<li>Widget roles (e.g., button, link, menuitem)<\/li>\r\n \t<li>Document structure roles (e.g., article, feed, list, table)<\/li>\r\n \t<li>Landmark roles (e.g., banner, navigation, main, complementary)<\/li>\r\n \t<li>Live region roles (e.g., alert, log, timer)<\/li>\r\n \t<li>Window roles (e.g., alertdialog, dialog)<\/li>\r\n<\/ul>\r\n<span>Roles are typically added to HTML elements using the role attribute as follows. In the example below, an unordered list is given a role of\u00a0<\/span><code>menubar<\/code><span>. Typically, this is used when creating a horizontal navigation bar across the top of a user interface. Each list item is given a role of\u00a0<\/span><code>menuitem<\/code><span>.<\/span>\r\n<div style=\"height: 150px; width: 100%; overflow: hidden;\">[h5p id=\"3\"]<\/div>\r\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #0000ff;\"><strong>Suggested Reading:<\/strong> Here is the <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#role_definitions\">full list of roles<\/a> in WAI-ARIA 1.1.<\/div>\r\n<h2>States<\/h2>\r\n<div class=\"textbox\">\r\n\r\n<strong>W3C definition of states\u00a0<\/strong>\r\n\r\n\u201cA state is a dynamic <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-property\">property<\/a> expressing characteristics of an <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-object\">object<\/a> that may change in response to user action or automated processes. States do not affect the essential nature of the object, but represent data associated with the object or user interaction possibilities. See:\u00a0<a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#statevsprop\">clarification of states versus properties<\/a>.\u201d\r\n\r\n<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-states\">Source: W3C<\/a>\r\n\r\n<\/div>\r\nStates are used along with roles, typically, to define its functional status. States are much like properties, though they typically change while an application or widget is being used (e.g., <code>aria-checked<\/code> changes between true and false). Properties typically do not change (e.g., <code>aria-labelledby<\/code> keeps the same value). States and properties are all \u201caria-\u201d prefixed, unlike roles.\r\n\r\nHere are a few examples of states:\r\n<ul>\r\n \t<li>aria-busy<\/li>\r\n \t<li>aria-checked<\/li>\r\n \t<li>aria-expanded<\/li>\r\n \t<li>aria-disabled<\/li>\r\n \t<li>aria-hidden<\/li>\r\n<\/ul>\r\n<h2>Properties<\/h2>\r\n<div class=\"textbox\">\r\n\r\n<strong>W3C definition of properties<\/strong>\r\n\r\n\u201c<a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-attribute\">Attributes<\/a> that are essential to the nature of a given\u00a0<a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-object\">object<\/a>, or that represent a data value associated with the object. A change of a property may significantly impact the meaning or presentation of an object. Certain properties (for example,\u00a0<a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#aria-multiline\">aria-multiline<\/a>) are less likely to change than<a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-state\"> states<\/a>, but note that the frequency of change difference is not a rule. A few properties, such as <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#aria-activedescendant\"> aria-activedescendant<\/a>,<a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#aria-valuenow\"> aria-valuenow<\/a>, and<a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#aria-valuetext\"> aria-valuetext<\/a> are expected to change often. See <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#statevsprop\"> clarification of states versus properties<\/a>.\u201d\r\n\r\n<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-states\">Source: W3C<\/a>\r\n\r\n<\/div>\r\nProperties, as mentioned above, are much like states in how they are used along with roles. However, unlike states that change, properties <em>tend<\/em> to remain the same (though this is not a rule). Intuitively, you may notice the changing nature of states listed above, and the static nature of properties listed below.\r\n\r\nHere are a few examples of properties:\r\n<ul>\r\n \t<li>aria-describedby<\/li>\r\n \t<li>aria-atomic<\/li>\r\n \t<li>aria-autocomplete<\/li>\r\n \t<li>aria-colcount<\/li>\r\n \t<li>aria-colspan<\/li>\r\n \t<li>aria-controls<\/li>\r\n<\/ul>\r\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #0000ff;\"><strong>Suggested Reading:<\/strong>\u00a0 See the WAI-ARIA Specification for a <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#states_and_properties\">full list of states and properties.<\/a><\/div>","rendered":"<p>The semantics described earlier are created by adding roles, states, and properties to HTML elements.<\/p>\n<h2>Roles<\/h2>\n<div class=\"textbox\">\n<p><strong>W3C definition of roles<\/strong><\/p>\n<p>\u201cMain indicator of type. This <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-semantics\">semantic<\/a> association allows tools to present and support interaction with the object in a manner that is consistent with user expectations about other objects of that type.\u201d<\/p>\n<p style=\"text-align: left;\"><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-roles\">Source:\u00a0W3C<\/a><\/p>\n<\/div>\n<p>Examples of roles include menu, alert, banner, tree, tabpanel, textbox, and so on. Once assigned to an element, roles <em>must not<\/em> change over time or with user input. If, for instance, you wanted to change from a \u201cmenubar\u201d while viewing in full screen mode to a toggle \u201cmenu\u201d when viewed on a mobile device, the entire block of markup would change, rather than switching menubar for menu.<\/p>\n<p>Roles are categorized into six groupings. Here are the groups with a few examples of each type:<\/p>\n<ul>\n<li>Abstract role (not to be used by authors in content, the base for the WAI-ARIA ontology)<\/li>\n<li>Widget roles (e.g., button, link, menuitem)<\/li>\n<li>Document structure roles (e.g., article, feed, list, table)<\/li>\n<li>Landmark roles (e.g., banner, navigation, main, complementary)<\/li>\n<li>Live region roles (e.g., alert, log, timer)<\/li>\n<li>Window roles (e.g., alertdialog, dialog)<\/li>\n<\/ul>\n<p><span>Roles are typically added to HTML elements using the role attribute as follows. In the example below, an unordered list is given a role of\u00a0<\/span><code>menubar<\/code><span>. Typically, this is used when creating a horizontal navigation bar across the top of a user interface. Each list item is given a role of\u00a0<\/span><code>menuitem<\/code><span>.<\/span><\/p>\n<div style=\"height: 150px; width: 100%; overflow: hidden;\">\n<div id=\"h5p-3\">\n<div class=\"h5p-content\" data-content-id=\"3\"><\/div>\n<\/div>\n<\/div>\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #0000ff;\"><strong>Suggested Reading:<\/strong> Here is the <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#role_definitions\">full list of roles<\/a> in WAI-ARIA 1.1.<\/div>\n<h2>States<\/h2>\n<div class=\"textbox\">\n<p><strong>W3C definition of states\u00a0<\/strong><\/p>\n<p>\u201cA state is a dynamic <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-property\">property<\/a> expressing characteristics of an <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-object\">object<\/a> that may change in response to user action or automated processes. States do not affect the essential nature of the object, but represent data associated with the object or user interaction possibilities. See:\u00a0<a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#statevsprop\">clarification of states versus properties<\/a>.\u201d<\/p>\n<p><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-states\">Source: W3C<\/a><\/p>\n<\/div>\n<p>States are used along with roles, typically, to define its functional status. States are much like properties, though they typically change while an application or widget is being used (e.g., <code>aria-checked<\/code> changes between true and false). Properties typically do not change (e.g., <code>aria-labelledby<\/code> keeps the same value). States and properties are all \u201caria-\u201d prefixed, unlike roles.<\/p>\n<p>Here are a few examples of states:<\/p>\n<ul>\n<li>aria-busy<\/li>\n<li>aria-checked<\/li>\n<li>aria-expanded<\/li>\n<li>aria-disabled<\/li>\n<li>aria-hidden<\/li>\n<\/ul>\n<h2>Properties<\/h2>\n<div class=\"textbox\">\n<p><strong>W3C definition of properties<\/strong><\/p>\n<p>\u201c<a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-attribute\">Attributes<\/a> that are essential to the nature of a given\u00a0<a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-object\">object<\/a>, or that represent a data value associated with the object. A change of a property may significantly impact the meaning or presentation of an object. Certain properties (for example,\u00a0<a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#aria-multiline\">aria-multiline<\/a>) are less likely to change than<a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#dfn-state\"> states<\/a>, but note that the frequency of change difference is not a rule. A few properties, such as <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#aria-activedescendant\"> aria-activedescendant<\/a>,<a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#aria-valuenow\"> aria-valuenow<\/a>, and<a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#aria-valuetext\"> aria-valuetext<\/a> are expected to change often. See <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#statevsprop\"> clarification of states versus properties<\/a>.\u201d<\/p>\n<p><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-states\">Source: W3C<\/a><\/p>\n<\/div>\n<p>Properties, as mentioned above, are much like states in how they are used along with roles. However, unlike states that change, properties <em>tend<\/em> to remain the same (though this is not a rule). Intuitively, you may notice the changing nature of states listed above, and the static nature of properties listed below.<\/p>\n<p>Here are a few examples of properties:<\/p>\n<ul>\n<li>aria-describedby<\/li>\n<li>aria-atomic<\/li>\n<li>aria-autocomplete<\/li>\n<li>aria-colcount<\/li>\n<li>aria-colspan<\/li>\n<li>aria-controls<\/li>\n<\/ul>\n<div style=\"margin: 1em 0; padding: 1em; border: 1px solid #ddd; border-left: 10px solid #0000ff;\"><strong>Suggested Reading:<\/strong>\u00a0 See the WAI-ARIA Specification for a <a href=\"https:\/\/www.w3.org\/TR\/2017\/REC-wai-aria-1.1-20171214\/#states_and_properties\">full list of states and properties.<\/a><\/div>\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-267","chapter","type-chapter","status-publish","hentry"],"part":28,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/267","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":23,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/267\/revisions"}],"predecessor-version":[{"id":1960,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/267\/revisions\/1960"}],"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\/267\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=267"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=267"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=267"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}