{"id":418,"date":"2018-06-20T19:06:27","date_gmt":"2018-06-20T19:06:27","guid":{"rendered":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/?post_type=chapter&#038;p=418"},"modified":"2018-06-29T15:26:46","modified_gmt":"2018-06-29T15:26:46","slug":"chapter-1-7-web-content-accessibility-guidelines-wcag-2-0","status":"publish","type":"chapter","link":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/chapter\/chapter-1-7-web-content-accessibility-guidelines-wcag-2-0\/","title":{"rendered":"Web Content Accessibility Guidelines (WCAG 2.0)"},"content":{"raw":"<p style=\"line-height: 1.5em; font-size: 1em;\"><span style=\"font-family: arial, helvetica, sans-serif;\">The <a target=\"_blank\" title=\"Web Content Accessibility Guidelines 2.0\" href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\" rel=\"noopener\">Web Content Accessibility Guidelines 2.0<\/a> are published on the World Wide Web consortium's website. There are four <em>principles<\/em> to the guidelines. You can use the acronym POUR to remember it.<\/span><\/p>\r\n<p style=\"line-height: 1.5em; font-size: 1em;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><strong>Perceivable<\/strong>: The first is that the content must be <strong>Perceivable<\/strong> to the end user. It can't be invisible to all of their senses.<\/span><\/p>\r\n<p style=\"line-height: 1.5em; font-size: 1em;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><strong>Operable<\/strong>: The second is that the user interface and navigation must be <strong>Operable<\/strong>. The interface can't require interaction that a user can't perform.<\/span><\/p>\r\n<p style=\"line-height: 1.5em; font-size: 1em;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><strong>Understandable<\/strong>: The third is that the interface and information must be <strong>Understandable<\/strong>.<\/span><\/p>\r\n<p style=\"line-height: 1.5em; font-size: 1em;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><strong>Robust<\/strong>: The fourth is that the content must be <strong>Robust<\/strong> in that it can be interpreted by assistive technology existing today as well as that coming in the future.<\/span><\/p>\r\n<p style=\"line-height: 1.5em; font-size: 1em;\"><span style=\"font-family: arial, helvetica, sans-serif;\">WCAG 2.0 includes three levels of conformance represented by \"A,\" \"AA,\" and \"AAA\" with \"AAA\" being the best accessibility. It's made up of 12 guidelines. Each guideline has checkpoints you can use to evaluate the accessibility of your online content.<\/span><\/p>\r\n<p style=\"line-height: 1.5em; font-size: 1em;\"><span style=\"font-family: arial, helvetica, sans-serif;\">The WCAG 2.0 Guidelines are listed below with links to their details.<\/span><\/p>\r\n\r\n<ul style=\"list-style-type: none; list-style: none; color: #000000; font-family: sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">\r\n \t<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#perceivable\" style=\"color: #660099; background: transparent;\">1 Perceivable<\/a><\/span>\r\n<ul style=\"list-style-type: none; list-style: none;\">\r\n \t<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">1.1 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv\" style=\"color: #660099; background: transparent;\">Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.<\/a><\/span><\/li>\r\n \t<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">1.2 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#media-equiv\" style=\"color: #660099; background: transparent;\">Provide alternatives for time-based media.<\/a><\/span><\/li>\r\n \t<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">1.3 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#content-structure-separation\" style=\"color: #660099; background: transparent;\">Create content that can be presented in different ways (for example simpler layout) without losing information or structure.<\/a><\/span><\/li>\r\n \t<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">1.4 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast\" style=\"color: #660099; background: transparent;\">Make it easier for users to see and hear content including separating foreground from background.<\/a><\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#operable\" style=\"color: #660099; background: transparent;\">2 Operable<\/a><\/span>\r\n<ul style=\"list-style-type: none; list-style: none;\">\r\n \t<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">2.1 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#keyboard-operation\" style=\"color: #660099; background: transparent;\">Make all functionality available from a keyboard.<\/a><\/span><\/li>\r\n \t<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">2.2 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#time-limits\" style=\"color: #660099; background: transparent;\">Provide users enough time to read and use content.<\/a><\/span><\/li>\r\n \t<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">2.3 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#seizure\" style=\"color: #660099; background: transparent;\">Do not design content in a way that is known to cause seizures.<\/a><\/span><\/li>\r\n \t<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">2.4 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#navigation-mechanisms\" style=\"color: #660099; background: transparent;\">Provide ways to help users navigate, find content, and determine where they are.<\/a><\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#understandable\" style=\"color: #660099; background: transparent;\">3 Understandable<\/a><\/span>\r\n<ul class=\"toc\" style=\"list-style: none;\">\r\n \t<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">3.1 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#meaning\" style=\"color: #660099; background: transparent;\">Make text content readable and understandable.<\/a><\/span><\/li>\r\n \t<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">3.2 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#consistent-behavior\" style=\"color: #660099; background: transparent;\">Make Web pages appear and operate in predictable ways.<\/a><\/span><\/li>\r\n \t<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">3.3 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#minimize-error\" style=\"color: #660099; background: transparent;\">Help users avoid and correct mistakes.<\/a><\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#robust\" style=\"color: #660099; background: transparent;\">4 Robust<\/a><\/span>\r\n<ul class=\"toc\" style=\"list-style: none;\">\r\n \t<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">4.1 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#ensure-compat\" style=\"color: #660099; background: transparent;\">Maximize compatibility with current and future user agents, including assistive technologies.<\/a><\/span><\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<p style=\"line-height: 1.5em; font-size: 1em;\"><span style=\"font-family: arial, helvetica, sans-serif;\">You'll notice similarities between the WCAG 2.0 guidelines and the 2000 Section 508 standards. Guideline 1.1 says, \"Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language\" is similar to the previous Section 508 standard (a) A text equivalent for every non-text element shall be provided (e.g., via \u201c<code>alt<\/code>\u201d, \u201c<code>longdesc<\/code>\u201d, or in element content).<\/span><\/p>","rendered":"<p style=\"line-height: 1.5em; font-size: 1em;\"><span style=\"font-family: arial, helvetica, sans-serif;\">The <a target=\"_blank\" title=\"Web Content Accessibility Guidelines 2.0\" href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\" rel=\"noopener\">Web Content Accessibility Guidelines 2.0<\/a> are published on the World Wide Web consortium&#8217;s website. There are four <em>principles<\/em> to the guidelines. You can use the acronym POUR to remember it.<\/span><\/p>\n<p style=\"line-height: 1.5em; font-size: 1em;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><strong>Perceivable<\/strong>: The first is that the content must be <strong>Perceivable<\/strong> to the end user. It can&#8217;t be invisible to all of their senses.<\/span><\/p>\n<p style=\"line-height: 1.5em; font-size: 1em;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><strong>Operable<\/strong>: The second is that the user interface and navigation must be <strong>Operable<\/strong>. The interface can&#8217;t require interaction that a user can&#8217;t perform.<\/span><\/p>\n<p style=\"line-height: 1.5em; font-size: 1em;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><strong>Understandable<\/strong>: The third is that the interface and information must be <strong>Understandable<\/strong>.<\/span><\/p>\n<p style=\"line-height: 1.5em; font-size: 1em;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><strong>Robust<\/strong>: The fourth is that the content must be <strong>Robust<\/strong> in that it can be interpreted by assistive technology existing today as well as that coming in the future.<\/span><\/p>\n<p style=\"line-height: 1.5em; font-size: 1em;\"><span style=\"font-family: arial, helvetica, sans-serif;\">WCAG 2.0 includes three levels of conformance represented by &#8220;A,&#8221; &#8220;AA,&#8221; and &#8220;AAA&#8221; with &#8220;AAA&#8221; being the best accessibility. It&#8217;s made up of 12 guidelines. Each guideline has checkpoints you can use to evaluate the accessibility of your online content.<\/span><\/p>\n<p style=\"line-height: 1.5em; font-size: 1em;\"><span style=\"font-family: arial, helvetica, sans-serif;\">The WCAG 2.0 Guidelines are listed below with links to their details.<\/span><\/p>\n<ul style=\"list-style-type: none; list-style: none; color: #000000; font-family: sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;\">\n<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#perceivable\" style=\"color: #660099; background: transparent;\">1 Perceivable<\/a><\/span>\n<ul style=\"list-style-type: none; list-style: none;\">\n<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">1.1 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#text-equiv\" style=\"color: #660099; background: transparent;\">Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.<\/a><\/span><\/li>\n<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">1.2 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#media-equiv\" style=\"color: #660099; background: transparent;\">Provide alternatives for time-based media.<\/a><\/span><\/li>\n<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">1.3 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#content-structure-separation\" style=\"color: #660099; background: transparent;\">Create content that can be presented in different ways (for example simpler layout) without losing information or structure.<\/a><\/span><\/li>\n<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">1.4 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast\" style=\"color: #660099; background: transparent;\">Make it easier for users to see and hear content including separating foreground from background.<\/a><\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#operable\" style=\"color: #660099; background: transparent;\">2 Operable<\/a><\/span>\n<ul style=\"list-style-type: none; list-style: none;\">\n<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">2.1 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#keyboard-operation\" style=\"color: #660099; background: transparent;\">Make all functionality available from a keyboard.<\/a><\/span><\/li>\n<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">2.2 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#time-limits\" style=\"color: #660099; background: transparent;\">Provide users enough time to read and use content.<\/a><\/span><\/li>\n<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">2.3 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#seizure\" style=\"color: #660099; background: transparent;\">Do not design content in a way that is known to cause seizures.<\/a><\/span><\/li>\n<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">2.4 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#navigation-mechanisms\" style=\"color: #660099; background: transparent;\">Provide ways to help users navigate, find content, and determine where they are.<\/a><\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#understandable\" style=\"color: #660099; background: transparent;\">3 Understandable<\/a><\/span>\n<ul class=\"toc\" style=\"list-style: none;\">\n<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">3.1 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#meaning\" style=\"color: #660099; background: transparent;\">Make text content readable and understandable.<\/a><\/span><\/li>\n<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">3.2 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#consistent-behavior\" style=\"color: #660099; background: transparent;\">Make Web pages appear and operate in predictable ways.<\/a><\/span><\/li>\n<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">3.3 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#minimize-error\" style=\"color: #660099; background: transparent;\">Help users avoid and correct mistakes.<\/a><\/span><\/li>\n<\/ul>\n<\/li>\n<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#robust\" style=\"color: #660099; background: transparent;\">4 Robust<\/a><\/span>\n<ul class=\"toc\" style=\"list-style: none;\">\n<li style=\"list-style-type: none; margin-top: 0px; margin-bottom: 0.25em; padding-top: 0px; padding-bottom: 0px;\"><span style=\"font-family: arial, helvetica, sans-serif;\">4.1 <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/#ensure-compat\" style=\"color: #660099; background: transparent;\">Maximize compatibility with current and future user agents, including assistive technologies.<\/a><\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p style=\"line-height: 1.5em; font-size: 1em;\"><span style=\"font-family: arial, helvetica, sans-serif;\">You&#8217;ll notice similarities between the WCAG 2.0 guidelines and the 2000 Section 508 standards. Guideline 1.1 says, &#8220;Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language&#8221; is similar to the previous Section 508 standard (a) A text equivalent for every non-text element shall be provided (e.g., via \u201c<code>alt<\/code>\u201d, \u201c<code>longdesc<\/code>\u201d, or in element content).<\/span><\/p>\n","protected":false},"author":7,"menu_order":8,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":["heather-caprette"],"pb_section_license":""},"chapter-type":[],"contributor":[61],"license":[],"class_list":["post-418","chapter","type-chapter","status-publish","hentry","contributor-heather-caprette"],"part":382,"_links":{"self":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapters\/418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":3,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapters\/418\/revisions"}],"predecessor-version":[{"id":516,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapters\/418\/revisions\/516"}],"part":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/parts\/382"}],"metadata":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapters\/418\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/wp\/v2\/media?parent=418"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/pressbooks\/v2\/chapter-type?post=418"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/wp\/v2\/contributor?post=418"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.ulib.csuohio.edu\/accessibility\/wp-json\/wp\/v2\/license?post=418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}