{"id":196,"date":"2019-06-04T13:15:43","date_gmt":"2019-06-04T17:15:43","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/iwacc\/?post_type=chapter&#038;p=196"},"modified":"2022-12-16T10:23:15","modified_gmt":"2022-12-16T15:23:15","slug":"2-4-navigable-level-aa-and-aaa","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-aa-and-aaa\/","title":{"raw":"2.4 Navigable (Level AA and AAA)","rendered":"2.4 Navigable (Level AA and AAA)"},"content":{"raw":"<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"2.4.5\"><\/a>Success Criterion 2.4.5<\/strong> Multiple Ways<\/h3>\r\nLevel AA\r\n\r\nMore than one way is available to locate a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-web-page-s\">web page<\/a> within a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-set-of-web-pages\">set of web pages<\/a>, except where the web page is the result of, or a step in, a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-processes\">process<\/a>.\r\n\r\n<\/div>\r\n<h4>Multiple Ways Explained<\/h4>\r\nDifferent people use different ways to focus in on particular content on a website: some prefer site maps; others like navigation links or breadcrumbs; still, others rely on site searches.\r\n\r\nMake it possible for visitors to your site to find content in at least two ways. Choose from among these techniques:\r\n<ul>\r\n \t<li>A site map<\/li>\r\n \t<li>A site search<\/li>\r\n \t<li>A table of contents<\/li>\r\n \t<li>Links on the homepage to all pages on the site<\/li>\r\n \t<li>Links to all other pages on the site<\/li>\r\n \t<li>Links to navigate to related web pages<\/li>\r\n<\/ul>\r\nAn exception applies when content is not \u201cfindable.\u201d A banking website, for example, lets customers transfer funds between accounts. The page that confirms the transfer is exempt because the page does not exist until the customer completes the transfer. WCAG 2.1 acknowledges that pages that are \u201cthe result of, or a step in, a process\u201d do not need to conform to <strong>SC 2.4.5<\/strong>.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading:<\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/multiple-ways.html\">Understanding Success Criterion 2.4.5 Multiple Ways<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#multiple-ways\">How to Meet Multiple Ways<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"2.4.6\"><\/a>Success Criterion 2.4.6<\/strong> Headings and Labels<\/h3>\r\nLevel AA\r\n\r\nHeadings and <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-labels\">labels<\/a> describe topic or purpose.\r\n\r\n<\/div>\r\n<h4>Headings and Labels Explained<\/h4>\r\nWhen headings and labels are clear and descriptive, they help users understand what information is contained in web pages and how that information is organized. Much like meaningful link text describes the destination of a link, meaningful headings describe a section or paragraph that follows, and meaningful labels describe the purpose or function of a form field.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"example\">\r\n\r\n<strong>Examples of clear and descriptive headings:\u00a0<\/strong>A website for a newspaper lists today\u2019s headlines. Each headline is a heading. After each headline is the article. Each headline gives a clear idea of the article\u2019s subject:\r\n<ul>\r\n \t<li><strong>Housing Prices Plunge 5% Since August\r\n<\/strong><\/li>\r\n \t<li><strong>Rebel Planes Attack Capital\r\n<\/strong><\/li>\r\n \t<li><strong>UFO Sightings Soar<\/strong><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"example\">\r\n\r\n<strong>Examples of clear and descriptive labels:\u00a0<\/strong>A form consists of three input fields. The label for the first field is\u00a0<span style=\"color: #0000ff\"><strong>First name<\/strong><\/span>. The label for the second field is <span style=\"color: #0000ff\"><span style=\"color: #0000ff\"><strong>Last name<\/strong><\/span><\/span>. The label for the third field is\u00a0<span style=\"color: #0000ff\"><span style=\"color: #0000ff\"><strong>Email address<\/strong>.<\/span><\/span>\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #f66\">\r\n\r\n<strong>Key Point: SC 2.4.6<\/strong> only requires that headings and labels be meaningful when they are used. It does not require that actual HTML-defined headings (i.e., <code>&lt;h1&gt;<\/code>) or labels (i.e., <label><\/label>) be used. The use of proper HTML headings and labels is covered by <strong>SC 1.3.1<\/strong> Info and Relationships.\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading:<\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/headings-and-labels.html\">Understanding Success Criterion 2.4.6 Headings and Labels<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#headings-and-labels\">How to Meet Headings and Labels<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"2.4.7\"><\/a>Success Criterion 2.4.7<\/strong> Focus Visible<\/h3>\r\nLevel AA\r\n\r\nAny keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.\r\n\r\n<\/div>\r\n<h4>Focus Visible Explained<\/h4>\r\nKeyboard focus is the one point within a window that receives information from the keyboard. Only one component can have focus at a time. When keyboard-only users press keystrokes, typically the Tab key, to navigate around a web page, they are moving focus from one component to another.\r\n\r\nWhether it\u2019s people with low vision who rely on a keyboard to interact with web pages or power users who use a keyboard to navigate more efficiently, each must know which component has focus. By complying with <strong>SC 2.4.7<\/strong>, keyboard users can tell at a glance exactly what they are interacting with on a web page.\r\n\r\nBy default, browsers display focus indicators when navigating by keyboard. If they are not present, they have been purposely removed. For the most part, these indicators appear as faint rectangles that surround the focused component. In text fields, the focus indicator is usually a flashing cursor. Web authors who use CSS and JavaScript can enhance the appearance of focused components or make them invisible or hard to see. Authors often remove the focus visibility for aesthetic reasons, though that practice violates this success criteria. WCAG 2.1 requires web authors to ensure that all focused components are easy to spot when navigating by keyboard.\r\n\r\nWhile the default focus indicator is sufficient to pass the requirements of this success criteria, they can still be difficult to see, even for those with relatively good sight. It is generally recommended that website developers enhance the default focus indicator to make it easier for everyone to see.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\r\n<h4><strong><a id=\"Try This: Focus Indicators\"><\/a>Try This: Focus Indicators<\/strong><\/h4>\r\nTo see what focus looks like, open the <a href=\"https:\/\/de.torontomu.ca\/wa\/showcase\/\" target=\"_blank\" rel=\"noopener\">Accessibility Auditing Showcase<\/a> website linked here, then press the Tab key repeatedly to navigate through the page (put your mouse away). You do not need to use ChromeVox for this activity. Answer the following questions.\r\n<ol>\r\n \t<li>Are you able to follow the focus easily as it moves through the page?<\/li>\r\n \t<li>Turn away, press the Tab key a few times, then look back. Can you tell where the focus ended up?<\/li>\r\n \t<li>Do all elements that receive focus have a focus indicator?<\/li>\r\n<\/ol>\r\nNext, try the activity on a site that does not provide focus highlighting:\r\n\r\n<a href=\"https:\/\/www.praxar.com\/\">Praxar<\/a>\r\n\r\nNow, go to a few of the sites you are familiar with, and find a couple with good focus indicators (default focus is okay), and find a couple where the focus indicator is missing or partially missing (e.g., missing from links but present for form elements).\r\n\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading: <\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/focus-visible.html\">Understanding Success Criterion 2.4.7 Focus Visible<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#focus-visible\">How to Meet Focus Visible<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"2.4.8\"><\/a>Success Criterion 2.4.8<\/strong> Location<\/h3>\r\nLevel AAA\r\n\r\nInformation about the user\u2019s location within a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-set-of-web-pages\"> set of web pages<\/a> is available.\r\n\r\n<\/div>\r\n<h4>Location Explained<\/h4>\r\nWhen a website or a web application consists of dozens, hundreds, or thousands of pages, it can be easy to become disoriented and tricky to find related information. To help visitors orient themselves, include information about the current location in relation to the whole. This can be done, for example, by:\r\n<ol>\r\n \t<li>highlighting the current page within a set of navigation links,<\/li>\r\n \t<li>providing a breadcrumb trail, or<\/li>\r\n \t<li>describing the relationship of a page to a larger collection of pages.<\/li>\r\n<\/ol>\r\nThis requirement may also be met by including a sitemap. Although this involves navigating away from the current page, a site map is a good way to show how information on one page (or in one part of the site) relates to the whole.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading: <\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/location.html\">Understanding Success Criterion 2.4.8 Location<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#location\">How to Meet Location<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"2.4.9\"><\/a>Success Criterion 2.4.9<\/strong> Link Purpose (Link Only)<\/h3>\r\nLevel AAA\r\n\r\nA <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-mechanism\">mechanism<\/a> is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-ambiguous-to-users-in-general\">ambiguous to users in general<\/a>.\r\n\r\n<\/div>\r\n<h4>Link Purpose (Link Only) Explained<\/h4>\r\nHelp visitors understand the purpose of each link. This is a more stringent version of <strong>SC 2.4.4<\/strong>, which requires that links make sense on their own, without the benefit of surrounding context to add meaning. This benefits screen reader users who use a feature to extract all links from a page and sort them as an alphabetical list. When each link is unambiguous, individuals who rely on this technique can confidently decide whether they want to follow a link. They may otherwise hear a list of meaningless \u201cClick Here\u201d links.\r\n\r\nSome visitors may find pages that consist entirely of unambiguous links easier to access, while others may find them harder to access. The word \u201cmechanism\u201d gives web authors the option to make all links understandable out of context or to provide a way to make them this way. Providing this option gives all visitors the ability to customize the \u201cwordiness\u201d of links to match their needs.\r\n\r\nThere is an exception to <strong>SC 2.4.9<\/strong> when the purpose of a link cannot be determined from information that appears anywhere on the web page. In this case, a person with the disability is not disadvantaged, as the context is not available to anyone.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading: <\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/link-purpose-link-only.html\">Understanding Success Criterion 2.4.9 Link Purpose (Link Only)<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#link-purpose-link-only\">How to Meet Link Purpose (Link Only)<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\r\n<h3><strong><a id=\"2.4.10\"><\/a>Success Criterion 2.4.10<\/strong> Section Headings<\/h3>\r\nLevel AAA\r\n\r\n<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-section\">Section<\/a> headings are used to organize the content.\r\n\r\n<\/div>\r\n<h4>Section Headings Explained<\/h4>\r\nWhenever possible, divide pages into sections and begin each section with the heading that reflects the place of the section within the whole.\r\n\r\nFor example, a long document may be divided into chapters, chapters into topics, topics into subtopics, and subtopics into paragraphs. Headings are designed to organize content hierarchically; they are the scaffolding that give shape to documents.\r\n\r\nFor HTML documents, use these elements to organize content hierarchically:\r\n<ul>\r\n \t<li><code>&lt;h1&gt; <\/code><span style=\"font-size: 14pt\">for the highest level of page organization,<\/span><\/li>\r\n \t<li><code>&lt;h2&gt; <\/code><span style=\"font-size: 14pt\">for the second level,<\/span><\/li>\r\n \t<li><code>&lt;h3&gt;<\/code> for the third level,<\/li>\r\n \t<li>and so on.<\/li>\r\n<\/ul>\r\nFor Word documents, use these styles to organize content hierarchically:\r\n<ul>\r\n \t<li><strong>Heading 1<\/strong> for the highest level of page organization,<\/li>\r\n \t<li><strong>Heading 2<\/strong> for the second level,<\/li>\r\n \t<li><strong>Heading 3<\/strong> for the third level,<\/li>\r\n \t<li>and so on.<\/li>\r\n<\/ul>\r\nSection headings clarify the organization of the content, facilitate navigation, and aid comprehension. Other page elements, such as horizontal rules and boxes, enhance the visual presentation but are not sufficient in themselves to identify document sections.\r\n\r\nThis provision is included at Level AAA because headings may be impractical or unsuitable. For example:\r\n<ul>\r\n \t<li>Headings are inappropriate for historical documents that do not have headings. However, if the original document has a title, mark it up as <code>&lt;h1&gt;<\/code>.<\/li>\r\n \t<li>Headings are not normally used in letters, even when letters cover a range of topics.<\/li>\r\n \t<li>Some electronic file formats, such as plain text, have no built-in support for hierarchically structured documents.<\/li>\r\n<\/ul>\r\nAlso, see <strong>SC 1.3.1<\/strong> Info and Relationships (Level A). While <strong>SC 2.4.10<\/strong>\u00a0(Level AAA) suggests using headings to section content by topic and subtopic within written content (as opposed to interface elements), <strong>SC 1.3.1<\/strong> provides guidance on organizing that content semantically so the relationships between topics and subtopics can be understood. Content that complies with <strong>SC 1.3.1<\/strong>, also complies with <strong>SC 2.4.10<\/strong>, though not necessarily vice versa.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\r\n\r\n<strong>Suggested Reading: <\/strong>\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/section-headings.html\">Understanding Success Criterion 2.4.10 Section Headings<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#section-headings\">How to Meet Section Headings<\/a><\/li>\r\n<\/ul>\r\n<\/div>","rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 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-69ff683d9dc10\" 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-69ff683d9dc10\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-aa-and-aaa\/#Success_Criterion_245_Multiple_Ways\" >Success Criterion 2.4.5 Multiple Ways<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-aa-and-aaa\/#Multiple_Ways_Explained\" >Multiple Ways Explained<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-aa-and-aaa\/#Success_Criterion_246_Headings_and_Labels\" >Success Criterion 2.4.6 Headings and Labels<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-aa-and-aaa\/#Headings_and_Labels_Explained\" >Headings and Labels Explained<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-aa-and-aaa\/#Success_Criterion_247_Focus_Visible\" >Success Criterion 2.4.7 Focus Visible<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-aa-and-aaa\/#Focus_Visible_Explained\" >Focus Visible Explained<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-aa-and-aaa\/#Try_This_Focus_Indicators\" >Try This: Focus Indicators<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-aa-and-aaa\/#Success_Criterion_248_Location\" >Success Criterion 2.4.8 Location<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-aa-and-aaa\/#Location_Explained\" >Location Explained<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-aa-and-aaa\/#Success_Criterion_249_Link_Purpose_Link_Only\" >Success Criterion 2.4.9 Link Purpose (Link Only)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-aa-and-aaa\/#Link_Purpose_Link_Only_Explained\" >Link Purpose (Link Only) Explained<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-aa-and-aaa\/#Success_Criterion_2410_Section_Headings\" >Success Criterion 2.4.10 Section Headings<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-aa-and-aaa\/#Section_Headings_Explained\" >Section Headings Explained<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_245_Multiple_Ways\"><\/span><strong><a id=\"2.4.5\"><\/a>Success Criterion 2.4.5<\/strong> Multiple Ways<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level AA<\/p>\n<p>More than one way is available to locate a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-web-page-s\">web page<\/a> within a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-set-of-web-pages\">set of web pages<\/a>, except where the web page is the result of, or a step in, a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-processes\">process<\/a>.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Multiple_Ways_Explained\"><\/span>Multiple Ways Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Different people use different ways to focus in on particular content on a website: some prefer site maps; others like navigation links or breadcrumbs; still, others rely on site searches.<\/p>\n<p>Make it possible for visitors to your site to find content in at least two ways. Choose from among these techniques:<\/p>\n<ul>\n<li>A site map<\/li>\n<li>A site search<\/li>\n<li>A table of contents<\/li>\n<li>Links on the homepage to all pages on the site<\/li>\n<li>Links to all other pages on the site<\/li>\n<li>Links to navigate to related web pages<\/li>\n<\/ul>\n<p>An exception applies when content is not \u201cfindable.\u201d A banking website, for example, lets customers transfer funds between accounts. The page that confirms the transfer is exempt because the page does not exist until the customer completes the transfer. WCAG 2.1 acknowledges that pages that are \u201cthe result of, or a step in, a process\u201d do not need to conform to <strong>SC 2.4.5<\/strong>.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/multiple-ways.html\">Understanding Success Criterion 2.4.5 Multiple Ways<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#multiple-ways\">How to Meet Multiple Ways<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_246_Headings_and_Labels\"><\/span><strong><a id=\"2.4.6\"><\/a>Success Criterion 2.4.6<\/strong> Headings and Labels<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level AA<\/p>\n<p>Headings and <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-labels\">labels<\/a> describe topic or purpose.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Headings_and_Labels_Explained\"><\/span>Headings and Labels Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>When headings and labels are clear and descriptive, they help users understand what information is contained in web pages and how that information is organized. Much like meaningful link text describes the destination of a link, meaningful headings describe a section or paragraph that follows, and meaningful labels describe the purpose or function of a form field.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"example\">\n<p><strong>Examples of clear and descriptive headings:\u00a0<\/strong>A website for a newspaper lists today\u2019s headlines. Each headline is a heading. After each headline is the article. Each headline gives a clear idea of the article\u2019s subject:<\/p>\n<ul>\n<li><strong>Housing Prices Plunge 5% Since August<br \/>\n<\/strong><\/li>\n<li><strong>Rebel Planes Attack Capital<br \/>\n<\/strong><\/li>\n<li><strong>UFO Sightings Soar<\/strong><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"example\">\n<p><strong>Examples of clear and descriptive labels:\u00a0<\/strong>A form consists of three input fields. The label for the first field is\u00a0<span style=\"color: #0000ff\"><strong>First name<\/strong><\/span>. The label for the second field is <span style=\"color: #0000ff\"><span style=\"color: #0000ff\"><strong>Last name<\/strong><\/span><\/span>. The label for the third field is\u00a0<span style=\"color: #0000ff\"><span style=\"color: #0000ff\"><strong>Email address<\/strong>.<\/span><\/span><\/p>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #f66\">\n<p><strong>Key Point: SC 2.4.6<\/strong> only requires that headings and labels be meaningful when they are used. It does not require that actual HTML-defined headings (i.e., <code>&lt;h1&gt;<\/code>) or labels (i.e., <label><\/label>) be used. The use of proper HTML headings and labels is covered by <strong>SC 1.3.1<\/strong> Info and Relationships.<\/p>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/headings-and-labels.html\">Understanding Success Criterion 2.4.6 Headings and Labels<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#headings-and-labels\">How to Meet Headings and Labels<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_247_Focus_Visible\"><\/span><strong><a id=\"2.4.7\"><\/a>Success Criterion 2.4.7<\/strong> Focus Visible<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level AA<\/p>\n<p>Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Focus_Visible_Explained\"><\/span>Focus Visible Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Keyboard focus is the one point within a window that receives information from the keyboard. Only one component can have focus at a time. When keyboard-only users press keystrokes, typically the Tab key, to navigate around a web page, they are moving focus from one component to another.<\/p>\n<p>Whether it\u2019s people with low vision who rely on a keyboard to interact with web pages or power users who use a keyboard to navigate more efficiently, each must know which component has focus. By complying with <strong>SC 2.4.7<\/strong>, keyboard users can tell at a glance exactly what they are interacting with on a web page.<\/p>\n<p>By default, browsers display focus indicators when navigating by keyboard. If they are not present, they have been purposely removed. For the most part, these indicators appear as faint rectangles that surround the focused component. In text fields, the focus indicator is usually a flashing cursor. Web authors who use CSS and JavaScript can enhance the appearance of focused components or make them invisible or hard to see. Authors often remove the focus visibility for aesthetic reasons, though that practice violates this success criteria. WCAG 2.1 requires web authors to ensure that all focused components are easy to spot when navigating by keyboard.<\/p>\n<p>While the default focus indicator is sufficient to pass the requirements of this success criteria, they can still be difficult to see, even for those with relatively good sight. It is generally recommended that website developers enhance the default focus indicator to make it easier for everyone to see.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f\">\n<h4><strong><a><\/a>Try This: Focus Indicators<\/strong><\/h4>\n<p>To see what focus looks like, open the <a href=\"https:\/\/de.torontomu.ca\/wa\/showcase\/\" target=\"_blank\" rel=\"noopener\">Accessibility Auditing Showcase<\/a> website linked here, then press the Tab key repeatedly to navigate through the page (put your mouse away). You do not need to use ChromeVox for this activity. Answer the following questions.<\/p>\n<ol>\n<li>Are you able to follow the focus easily as it moves through the page?<\/li>\n<li>Turn away, press the Tab key a few times, then look back. Can you tell where the focus ended up?<\/li>\n<li>Do all elements that receive focus have a focus indicator?<\/li>\n<\/ol>\n<p>Next, try the activity on a site that does not provide focus highlighting:<\/p>\n<p><a href=\"https:\/\/www.praxar.com\/\">Praxar<\/a><\/p>\n<p>Now, go to a few of the sites you are familiar with, and find a couple with good focus indicators (default focus is okay), and find a couple where the focus indicator is missing or partially missing (e.g., missing from links but present for form elements).<\/p>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading: <\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/focus-visible.html\">Understanding Success Criterion 2.4.7 Focus Visible<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#focus-visible\">How to Meet Focus Visible<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_248_Location\"><\/span><strong><a id=\"2.4.8\"><\/a>Success Criterion 2.4.8<\/strong> Location<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level AAA<\/p>\n<p>Information about the user\u2019s location within a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-set-of-web-pages\"> set of web pages<\/a> is available.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Location_Explained\"><\/span>Location Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>When a website or a web application consists of dozens, hundreds, or thousands of pages, it can be easy to become disoriented and tricky to find related information. To help visitors orient themselves, include information about the current location in relation to the whole. This can be done, for example, by:<\/p>\n<ol>\n<li>highlighting the current page within a set of navigation links,<\/li>\n<li>providing a breadcrumb trail, or<\/li>\n<li>describing the relationship of a page to a larger collection of pages.<\/li>\n<\/ol>\n<p>This requirement may also be met by including a sitemap. Although this involves navigating away from the current page, a site map is a good way to show how information on one page (or in one part of the site) relates to the whole.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading: <\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/location.html\">Understanding Success Criterion 2.4.8 Location<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#location\">How to Meet Location<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_249_Link_Purpose_Link_Only\"><\/span><strong><a id=\"2.4.9\"><\/a>Success Criterion 2.4.9<\/strong> Link Purpose (Link Only)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level AAA<\/p>\n<p>A <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-mechanism\">mechanism<\/a> is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-ambiguous-to-users-in-general\">ambiguous to users in general<\/a>.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Link_Purpose_Link_Only_Explained\"><\/span>Link Purpose (Link Only) Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Help visitors understand the purpose of each link. This is a more stringent version of <strong>SC 2.4.4<\/strong>, which requires that links make sense on their own, without the benefit of surrounding context to add meaning. This benefits screen reader users who use a feature to extract all links from a page and sort them as an alphabetical list. When each link is unambiguous, individuals who rely on this technique can confidently decide whether they want to follow a link. They may otherwise hear a list of meaningless \u201cClick Here\u201d links.<\/p>\n<p>Some visitors may find pages that consist entirely of unambiguous links easier to access, while others may find them harder to access. The word \u201cmechanism\u201d gives web authors the option to make all links understandable out of context or to provide a way to make them this way. Providing this option gives all visitors the ability to customize the \u201cwordiness\u201d of links to match their needs.<\/p>\n<p>There is an exception to <strong>SC 2.4.9<\/strong> when the purpose of a link cannot be determined from information that appears anywhere on the web page. In this case, a person with the disability is not disadvantaged, as the context is not available to anyone.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading: <\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/link-purpose-link-only.html\">Understanding Success Criterion 2.4.9 Link Purpose (Link Only)<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#link-purpose-link-only\">How to Meet Link Purpose (Link Only)<\/a><\/li>\n<\/ul>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #ffcb05\">\n<h3><span class=\"ez-toc-section\" id=\"Success_Criterion_2410_Section_Headings\"><\/span><strong><a id=\"2.4.10\"><\/a>Success Criterion 2.4.10<\/strong> Section Headings<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level AAA<\/p>\n<p><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-section\">Section<\/a> headings are used to organize the content.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Section_Headings_Explained\"><\/span>Section Headings Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Whenever possible, divide pages into sections and begin each section with the heading that reflects the place of the section within the whole.<\/p>\n<p>For example, a long document may be divided into chapters, chapters into topics, topics into subtopics, and subtopics into paragraphs. Headings are designed to organize content hierarchically; they are the scaffolding that give shape to documents.<\/p>\n<p>For HTML documents, use these elements to organize content hierarchically:<\/p>\n<ul>\n<li><code>&lt;h1&gt; <\/code><span style=\"font-size: 14pt\">for the highest level of page organization,<\/span><\/li>\n<li><code>&lt;h2&gt; <\/code><span style=\"font-size: 14pt\">for the second level,<\/span><\/li>\n<li><code>&lt;h3&gt;<\/code> for the third level,<\/li>\n<li>and so on.<\/li>\n<\/ul>\n<p>For Word documents, use these styles to organize content hierarchically:<\/p>\n<ul>\n<li><strong>Heading 1<\/strong> for the highest level of page organization,<\/li>\n<li><strong>Heading 2<\/strong> for the second level,<\/li>\n<li><strong>Heading 3<\/strong> for the third level,<\/li>\n<li>and so on.<\/li>\n<\/ul>\n<p>Section headings clarify the organization of the content, facilitate navigation, and aid comprehension. Other page elements, such as horizontal rules and boxes, enhance the visual presentation but are not sufficient in themselves to identify document sections.<\/p>\n<p>This provision is included at Level AAA because headings may be impractical or unsuitable. For example:<\/p>\n<ul>\n<li>Headings are inappropriate for historical documents that do not have headings. However, if the original document has a title, mark it up as <code>&lt;h1&gt;<\/code>.<\/li>\n<li>Headings are not normally used in letters, even when letters cover a range of topics.<\/li>\n<li>Some electronic file formats, such as plain text, have no built-in support for hierarchically structured documents.<\/li>\n<\/ul>\n<p>Also, see <strong>SC 1.3.1<\/strong> Info and Relationships (Level A). While <strong>SC 2.4.10<\/strong>\u00a0(Level AAA) suggests using headings to section content by topic and subtopic within written content (as opposed to interface elements), <strong>SC 1.3.1<\/strong> provides guidance on organizing that content semantically so the relationships between topics and subtopics can be understood. Content that complies with <strong>SC 1.3.1<\/strong>, also complies with <strong>SC 2.4.10<\/strong>, though not necessarily vice versa.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #0000ff\">\n<p><strong>Suggested Reading: <\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/section-headings.html\">Understanding Success Criterion 2.4.10 Section Headings<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#section-headings\">How to Meet Section Headings<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"author":100,"menu_order":9,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-196","chapter","type-chapter","status-publish","hentry"],"part":28,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/users\/100"}],"version-history":[{"count":16,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/196\/revisions"}],"predecessor-version":[{"id":1368,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/196\/revisions\/1368"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/parts\/28"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/196\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/media?parent=196"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapter-type?post=196"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/contributor?post=196"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/license?post=196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}