{"id":203,"date":"2018-12-05T22:45:57","date_gmt":"2018-12-05T22:45:57","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/wafd\/?post_type=chapter&p=203"},"modified":"2019-09-13T20:13:21","modified_gmt":"2019-09-13T20:13:21","slug":"wai-aria-and-html-5","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/chapter\/wai-aria-and-html-5\/","title":{"raw":"WAI-ARIA and HTML 5","rendered":"WAI-ARIA and HTML 5"},"content":{"raw":"WAI-ARIA was released as a complement to HTML5. Its main purpose is to give developers more freedom to build custom web content, web applications, and interface controls created with HTML, JavaScript, and Ajax. WAI-ARIA provides a framework for adding semantics that make it possible for assistive technology users to understand and operate these custom elements.\r\n\r\nMost HTML has built-in semantics and does not generally need WAI-ARIA. However, when HTML is being used in a non-standard way, like making a button out of a <div><\/code>, then WAI-ARIA can be added to that <div><\/code> to make it appear as a button to a screen reader by adding the following: Add the role of \u201cbutton\u201d (i.e.,\u00a0role=\"button\"<\/code>), add a null tabindex value (i.e.,\u00a0tabindex=\"0\"<\/code>), which makes it focusable, then\u00a0define its state using the aria-pressed<\/code> attribute, which is updated with JavaScript when the button is pressed. In the case of an actual <button><\/code> element, these properties are all already defined, so there is no need to use WAI-ARIA.\r\n\r\n[code language=\"html\" light=\"true\"]\r\n\r\n<div role="button" aria-pressed="false" tabindex="0">Press Me<\/div>\r\n\r\n[\/code]\r\n\r\nThough WAI-ARIA is typically used with HTML5, it can also be used with XHTML and HTML4. You may find, however, that HTML validators<\/a> see WAI-ARIA as broken markup in older versions of HTML, but don\u2019t worry about that. Any WAI-ARIA related errors that a validator might identify in older HTML can generally be ignored (assuming it has been used correctly). By now though, you should be using HTML5. If you are retrofitting older code, then go ahead and add WAI-ARIA to it. \u00a0If you are developing something new, then go with HTML5.","rendered":"

WAI-ARIA was released as a complement to HTML5. Its main purpose is to give developers more freedom to build custom web content, web applications, and interface controls created with HTML, JavaScript, and Ajax. WAI-ARIA provides a framework for adding semantics that make it possible for assistive technology users to understand and operate these custom elements.<\/p>\n

Most HTML has built-in semantics and does not generally need WAI-ARIA. However, when HTML is being used in a non-standard way, like making a button out of a <div><\/code>, then WAI-ARIA can be added to that <div><\/code> to make it appear as a button to a screen reader by adding the following: Add the role of \u201cbutton\u201d (i.e.,\u00a0role=\"button\"<\/code>), add a null tabindex value (i.e.,\u00a0tabindex=\"0\"<\/code>), which makes it focusable, then\u00a0define its state using the aria-pressed<\/code> attribute, which is updated with JavaScript when the button is pressed. In the case of an actual <button><\/code> element, these properties are all already defined, so there is no need to use WAI-ARIA.<\/p>\n

\r\n\r\n<div role="button" aria-pressed="false" tabindex="0">Press Me<\/div>\r\n\r\n<\/pre>\n
Though WAI-ARIA is typically used with HTML5, it can also be used with XHTML and HTML4. You may find, however, that HTML validators<\/a> see WAI-ARIA as broken markup in older versions of HTML, but don\u2019t worry about that. Any WAI-ARIA related errors that a validator might identify in older HTML can generally be ignored (assuming it has been used correctly). By now though, you should be using HTML5. If you are retrofitting older code, then go ahead and add WAI-ARIA to it. \u00a0If you are developing something new, then go with HTML5.<\/p>\n","protected":false},"author":100,"menu_order":8,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-203","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/203","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":22,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/203\/revisions"}],"predecessor-version":[{"id":1807,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/203\/revisions\/1807"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapters\/203\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/media?parent=203"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/pressbooks\/v2\/chapter-type?post=203"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/contributor?post=203"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/wafd\/wp-json\/wp\/v2\/license?post=203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}