{"id":195,"date":"2019-06-04T13:15:34","date_gmt":"2019-06-04T17:15:34","guid":{"rendered":"https:\/\/pressbooks.library.ryerson.ca\/iwacc\/?post_type=chapter&#038;p=195"},"modified":"2022-12-16T10:22:02","modified_gmt":"2022-12-16T15:22:02","slug":"2-4-navigable-level-a","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-a\/","title":{"raw":"2.4 Navigable (Level A)","rendered":"2.4 Navigable (Level A)"},"content":{"raw":"<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #eb974e\">\r\n<h2><strong>Guideline 2.4<\/strong> Navigable<\/h2>\r\nProvide ways to help users navigate, find content, and determine where they are.\r\n\r\n<\/div>\r\n<strong>Why is it important to help visitors navigate?<\/strong>\r\n\r\nNavigation on web pages serves two purposes:\r\n<ol>\r\n \t<li>To tell users where they are.<\/li>\r\n \t<li>To let users know how to go somewhere else.<\/li>\r\n<\/ol>\r\nThese tasks are often more difficult for people with disabilities. This section describes how to help visitors find content and keep track of their location. The same rules that simplify navigation for people with disabilities also improves navigation for users who do not have disabilities.\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.1\"><\/a>Success Criterion 2.4.1<\/strong> Bypass Blocks<\/h3>\r\nLevel A\r\n\r\nA\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-mechanism\">mechanism<\/a> is available to bypass blocks of content that are repeated on multiple\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-web-page-s\">web pages<\/a>.\r\n\r\n<\/div>\r\n<h4>Bypass Blocks Explained<\/h4>\r\nPeople who cannot use a mouse often use the Tab key to navigate around web pages: they press Tab to move \u201cforward\u201d through the content; Shift + Tab to move \u201cbackward\u201d; and Enter to activate links and buttons. At best, Tab key navigation is a tedious way to get around, but for some non-mouse users, it is the best option.\r\n\r\nMany web pages have content that is repeated on every page. For example, a site may have the same navigation links on the top of all pages. If there are 20 navigation links, a non-mouse user could be forced to press the Tab key 20 times just to reach the main content \u2014 and do this on every page.\r\n\r\nBy meeting this requirement, keyboard users can go directly to the main content without the need to press a lot of keys. A simple way to achieve this is to place a \u201cSkip to Content\u201d link as the first link on every page.\r\n\r\n\u201cSkip to Content\u201d links also benefit people who use portable web-enabled devices, such as cell phones. Because the screens of these devices are so small, it may be more convenient to click a \u201cSkip to Content\u201d link than to scroll through many screens to reach the content.\r\n\r\nThere are a variety of ways to provide navigation elements that allow non-mouse users to navigate effectively and reduce or eliminate the need to navigate through web content in the sequence elements appearing on the page. These include:\r\n<ul>\r\n \t<li><strong>Bypass Links<\/strong>: Skip to Content is one type of bypass link, typically located in the top left corner of the page. When a bypass link is followed, focus moves to an anchor elsewhere on the page, skipping past content in between the link and anchor. Bypass links can also be used with other complex elements within the content of a page, such as skipping over a large data table or past an embedded object or application.<\/li>\r\n \t<li><strong>Headings<\/strong>: When proper HTML headings are used in web content, assistive technology users are able to list them and navigate directly to any one of them, skipping over any content in between the location in focus on the page, and the heading farther down the page. Using proper headings is perhaps the easiest way to meet <strong>SC 2.4.1\u00a0<\/strong>(Level A), if the site already meets <strong>SC 1.3.1 <\/strong>Info and Relationships (Level A).<\/li>\r\n \t<li><strong>Landmarks<\/strong>: With the introduction of WAI-ARIA, site developers can add specific roles to regions of the page that screen reader users are able to list and then use to navigate directly to a block with a navigation menu, to the main content area of the page, or to the footer area, among other potential regions. See the link in the suggested readings below for more about landmarks<\/li>\r\n<\/ul>\r\nAll three of these strategies can be used together to accommodate a broad range of users. For instance, landmarks may work well for screen reader users but not so well for low-vision users who may not be using a screen reader. Bypass links may be a more effective means for the latter group.\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: Web Accessibility Auditing Showcase\"><\/a>Try This: Web Accessibility Auditing Showcase<\/strong><\/h4>\r\nUsing ChromeVox, navigate the <a href=\"https:\/\/de.torontomu.ca\/wa\/showcase\/\" target=\"_blank\" rel=\"noopener\">Web Accessibility Auditing Showcase<\/a> site using the available bypass links, then using headings, then using landmarks, to develop a practical understanding of how these navigation elements function with a screen reader. Refer to the ChromeVox shortcut keys handout introduced earlier, if you need a refresher on ChromeVox shortcut keys.\r\n<ul>\r\n \t<li><strong>Bypass Links: <\/strong>Press the Tab key when the page has finished loading to access the \u201cSkip to Content\u201d bypass link near the top of the page.<\/li>\r\n \t<li><strong>Headings:<\/strong> While using ChromeVox press CVox + L + H to list the headings. Use the up and down arrows to navigate through the list of headings that appear, and press Enter on a particular heading in the list to send focus to that heading on the page.<\/li>\r\n \t<li><strong>Landmarks:<\/strong> While using ChromeVox press CVox + L + semicolon (;) to list the landmarks. Use the up and down arrows to navigate through the list of landmarks that appear, and press Enter on a particular landmark in the list to send focus to that region of the page.<\/li>\r\n<\/ul>\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\/bypass-blocks.html\">Understanding Success Criterion 2.4.1 Bypass Blocks<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#bypass-blocks\">How to Meet Bypass Blocks<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Techniques\/aria\/ARIA11\">Using ARIA Landmarks to Identify Regions of a Page<\/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.2\"><\/a>Success Criterion 2.4.2<\/strong> Page Titled<\/h3>\r\nLevel A\r\n\r\n<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-web-page-s\">Web pages<\/a> have titles that describe topic or purpose.\r\n\r\n<\/div>\r\n<h4>Page Titled Explained<\/h4>\r\nWhen a screen reader begins reading a page after it has finished loading, the first thing it reads is the page title. A descriptive title immediately tells the listener they are in the right place (or in the wrong place). Without the title, users have to navigate into the page before making that determination.\r\n\r\nFor most current browsers, holding a mouse pointer over a tab across the top of the browser window reveals the title of the page being viewed. The title is added to a web page using the HTML <code>&lt;title&gt;<\/code> element.\r\n\r\nA good title summarizes a page in a few words, so users do not have to read an entire page to know what it is about. Many screen reader users take advantage of titles to keep track of where they are. A title may be based on the main heading on the page, then followed by the name of the site. If not the same as the main heading, the title should be equivalent in meaning to it. When linking to a page, the link text may be the same as the title of the page the link leads to, thus users can make a direct association between the link they clicked and the page that opens.\r\n\r\nDescriptive titles also help people interpret search engine results. Many search engines, including Google, display search results as a list of page titles. Not using descriptive titles can also affect a website\u2019s searchability, and its search ranking, whether it appears near the top of the results for a related search query or not.\r\n\r\nWhen writing web page titles, it is recommended that each title:\r\n<ol>\r\n \t<li>Identify the subject of the page.<\/li>\r\n \t<li>Identify the site.<\/li>\r\n \t<li>Make sense.<\/li>\r\n \t<li>Be short.<\/li>\r\n \t<li>Be unique for each page.<\/li>\r\n<\/ol>\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"example\">\r\n\r\nExamples of descriptive titles:\r\n<ul>\r\n \t<li>For a page containing a chocolate brownie recipe on <a href=\"http:\/\/www.yummydesserts.com\">www.yummydesserts.com<\/a>:\r\n<strong><i>Chocolate Brownie Recipe - Yummy Desserts<\/i><\/strong><\/li>\r\n \t<li>For a chapter in a textbook called \"Gender and Stereotype\":\r\n<strong><i>Chapter 3: The Origins of Patriarchy - Gender and Stereotype<\/i><\/strong><\/li>\r\n \t<li>For a web-based banking application that lets customers retrieve monthly statements:\r\n<strong><i>Account 10001, Statement for October 2010 - Bank of Hudson Bay<\/i><\/strong><\/li>\r\n<\/ul>\r\n<\/div>\r\nIt is advisable to position the subject of a page before the name of the site in a page title, just in case the title is truncated to fit available space. Placing the subject before the site\/page title allows that unique topic to be informatively displayed in search results or in a browser tab, if the latter part of the title gets truncated.\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\/page-titled.html\">Understanding Success Criterion 2.4.2 Page Titled<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#page-titled\">How to Meet Page Titled<\/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.3\"><\/a>Success Criterion 2.4.3<\/strong> Focus Order<\/h3>\r\nLevel A\r\n\r\nIf a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-web-page-s\">web page<\/a> can be\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-navigated-sequentially\">navigated sequentially<\/a> and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.\r\n\r\n<\/div>\r\n<h4>Focus Order Explained<\/h4>\r\nContent should make sense when navigating by keyboard. Many people who cannot handle (or have difficulty handling) a mouse rely on <strong>Tab-key navigation<\/strong> to interact with a web page. That is, they press Tab to move forward through the content; Shift + Tab to move backwards; and Enter to activate links and buttons. Knowing a handful of other hotkeys (keyboard shortcuts) makes it possible for non-mouse users to interact with any web page.\r\n\r\nWhen navigating through a web page via keyboard, people should encounter information in a logical order. This is especially important for screen reader users, who cannot observe how pages are visually organized. When designing for the Web, strive to make the visual organization and the tabbing order correspond.\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: Logical Focus Order\"><\/a>Try This: Logical Focus Order<\/strong><\/h4>\r\nHere you have two login forms that look identical. However, the first is created with default HTML, which results in the focus order being illogical for someone listening with a screen reader. When encountering such a form, one might be expected to register first, then login by entering a username, then a password, choose the optional auto-login, then press the sign-in button to complete the login.\r\n\r\n<strong>Illogical focus order:<\/strong>\r\n\r\nThe focus order for this form does NOT follow a logical sequence. Use the Tab key to navigate through this first form.\r\n[h5p id=\"7\"]\r\n\r\n<strong>Logical focus order:<\/strong>\r\n\r\nThe focus order for this form does follow a logical sequence. Use the Tab key to navigate through this second form.\r\n[h5p id=\"8\"]\r\n\r\nAlso, see <strong>SC 1.3.2 Meaningful Sequence<\/strong> and <strong>SC 3.2.3 Consistent Navigation<\/strong>, both related to \u00a0<strong>SC 2.4.3<\/strong>.\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-order.html\">Understanding Success Criterion 2.4.3 Focus Order<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#focus-order\">How to Meet Focus Order<\/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.4\"><\/a>Success Criterion 2.4.4<\/strong> Link Purpose (In Context)<\/h3>\r\nLevel A\r\n\r\nThe\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-purpose-of-each-link\">purpose of each link<\/a> can be determined from the link text alone or from the link text together with its\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-programmatically-determined-link-context\">programmatically determined link context<\/a>, except where the purpose of the link would be\u00a0<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<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"definition\">\r\n\r\n<strong>Definition <\/strong>\r\n\r\n<strong>Programmatically determined:<\/strong> Code is used to associate a link with additional meaning. This could be via a preceding link, as described below or through other means, such as a WAI-ARIA label or description or an HTML title attribute, among other means. The added meaning in each of these is available to assistive technologies when they encounter a link.\r\n\r\n<\/div>\r\n<h4>Link Purpose (in Context) Explained<\/h4>\r\nLinks that make sense by themselves enhance usability for everybody. The preferred way to meet the requirement is to write link text that clearly indicates what to expect if the link is followed.\r\n\r\nFor example:\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"example\"><strong>On a recipe Website:\r\n<\/strong>\r\n<ul>\r\n \t<li><span style=\"text-decoration: underline\"><span style=\"font-weight: 400;color: #0000ff;text-decoration: underline\">Appetizers\r\n<\/span><\/span><\/li>\r\n \t<li><span style=\"text-decoration: underline\"><span style=\"font-weight: 400;color: #0000ff;text-decoration: underline\">Soups\r\n<\/span><\/span><\/li>\r\n \t<li><span style=\"text-decoration: underline\"><span style=\"font-weight: 400;color: #0000ff;text-decoration: underline\">Main Courses\r\n<\/span><\/span><\/li>\r\n \t<li><span style=\"text-decoration: underline\"><span style=\"text-decoration: underline\"><span style=\"font-weight: 400;color: #0000ff;text-decoration: underline\">Desserts<\/span><\/span><\/span><\/li>\r\n<\/ul>\r\n<strong style=\"font-size: 14pt\">On an online weight training forum:\r\n<\/strong>\r\n<ul>\r\n \t<li><span style=\"color: #0000ff;font-size: 14pt\">Strength Training Principles\r\n<\/span><\/li>\r\n \t<li><span style=\"color: #0000ff;font-size: 14pt\">Getting Started\r\n<\/span><\/li>\r\n \t<li><span style=\"color: #0000ff;font-size: 14pt\">Developing a Routine\r\n<\/span><\/li>\r\n \t<li><span style=\"color: #0000ff;font-size: 14pt\">Injured Yourself? What to do<\/span><\/li>\r\n<\/ul>\r\n<\/div>\r\nWhile using meaningful words that describe the destination of a link is always recommended, this success criteria does allow the use of less meaningful words, provided there is context that adds meaning to those words. <strong>SC 2.1.4<\/strong> refers to the phrase \"programmatically determined,\" which means essentially, assistive technologies are able to gather meaning from the context in which a link appears, giving the link meaning.\r\n\r\nFor example: Imagine a news website, like the one in the screenshot below, that presents a series of news headlines. Each headline is followed by a sentence or two to introduce the article, followed by a \"continue reading\" link that leads to the full article. The words \"continue reading\" on their own do not contain any useful information about the article; however, if the article title that precedes the meaningless link is also a link to the article, users navigating through the links on the page will hear the title followed by \"continue reading,\" in which case the article title gives meaning to the otherwise meaningless link, by answering \"continue reading what?\"\r\n\r\n[caption id=\"attachment_58\" align=\"alignnone\" width=\"696\"]<img src=\"http:\/\/pressbooks.library.ryerson.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/link_context.png\" alt=\"Linked headlines provide context for otherwise meaningless links with &quot;continue reading&quot; as the hyperlinked text.\" class=\"wp-image-58 size-full\" width=\"696\" height=\"511\" \/> <a href=\"https:\/\/globalnews.ca\/canada\/\">Source: Global News<\/a>[\/caption]\r\n\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:<\/strong> Though the W3C description for<strong> SC 2.4.4<\/strong> suggests that text in a surrounding paragraph can add meaning to an otherwise meaningless link embedded in the paragraph, technically this means of providing context is not \"programmatically determined.\" In other words a user would need to manually search through the surrounding content to determine the destination of a \"click here\" link, for\u00a0example. They would not be able to gather that information from the link itself, as in the programmatically determined link contexts described above.\r\n\r\nIn the two examples that follow, the first is a typically frowned upon \"click here\" link that based on the W3C description of the success criteria, passes the requirements as described. The reality is, however, this creates unnecessary effort for assistive technology users, who may be \"tabbing\" through the links on the page.\r\n<ul>\r\n \t<li><strong>Bad<\/strong> (Passes according to WCAG, but requires extra effort)\r\nLearning more about meaningful links, <a>click here<\/a>.<\/li>\r\n \t<li><strong>Good <\/strong>(No context needed, link text good as is)\r\nLearn more <a>about meaningful links<\/a>.<\/li>\r\n<\/ul>\r\nNot only do those using assistive technology require extra effort to determine the meaning of \"click here,\" anyone, with a disability or not, who may be scanning the links on a page, will have to read through the surrounding content to determine the destination of the link.\r\n\r\n<\/div>\r\nBy meeting this requirement, a site conforms at Level A. To conform at Level AAA, see <strong>SC 2.4.9<\/strong>.\r\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f;height: auto\">\r\n<h4><strong><a id=\"Try This:\u00a0The Curb Cut Effect of Meaningful Link Text\"><\/a>Try This:\u00a0The Curb Cut Effect of Meaningful Link Text<\/strong><\/h4>\r\nMeaningful link text is a good example of a \"<a href=\"https:\/\/pressbooks.library.ryerson.ca\/iwacc\/chapter\/curb-cuts-and-universal-design\/\">curb cut<\/a>.\" Meaningful links are useful for everyone.\u00a0<strong>\r\n<\/strong>\r\n\r\nBelow are two collapsed blocks of web content with timers.\u00a0In Exercise 1, you'll be asked to engage with a web page that contains several meaningless \"click here\" links. In contrast, in Exercise 2,\u00a0you'll see a web page that uses meaningful links. In both exercises, links do not function; no need to click.\r\n\r\n<strong>IMPORTANT:<\/strong> Read <em>all<\/em> the instructions before attempting the activity.\r\n\r\nWhile it's easy to \"cheat\" on this task, follow through with this exercise as instructed to experience the effect. It's an opportunity to experience first-hand the contrast between meaningless and meaningful links.\r\n<h5><strong>Exercise 1: Experience Meaningless Links<\/strong><\/h5>\r\n<strong>Task:<\/strong> Find the<strong> link to contact a sales representative<\/strong> <strong>for more booking information.<\/strong>\r\n<ol>\r\n \t<li>Open your browser window in full-screen mode or <a href=\"https:\/\/courses.ryerson.ca\/content\/enforced\/443593-deu_afcd_w21_01\/linktext_bad.html?ou=443593#example\" target=\"des\" rel=\"noopener noreferrer\">open Exercise 1 in a new window<\/a> to display the\u00a0 content below in full.<\/li>\r\n \t<li>Click on \"<strong>1. Find a meaningless link<\/strong>\" to reveal the web content <em>and<\/em> start the timer.<\/li>\r\n \t<li>Scan through the section to find the link being asked for (to contact a sales rep about bookings).<\/li>\r\n \t<li><strong>Click the Stop button when you find the right link.\u00a0<\/strong><\/li>\r\n \t<li>Notice how long it took to find the link.<\/li>\r\n<\/ol>\r\n[h5p id=\"9\"]\r\n<h5><strong>Exercise 2: Experience Meaningful Links<\/strong><\/h5>\r\n<strong>Task<\/strong>: Find the link that takes you to <strong>the quiz<\/strong> <strong>to determine if you need a vacation.<\/strong>\r\n<ol>\r\n \t<li>Open your browser window to full screen or <a href=\"https:\/\/courses.ryerson.ca\/content\/enforced\/443593-deu_afcd_w21_01\/linktext_good.html?ou=443593#example\">open Exercise 2 in a new window<\/a>.<\/li>\r\n \t<li>Click \"<strong>2. Find a meaningful link<\/strong>\"\u00a0 to reveal the web content <em>and<\/em>\u00a0start the timer.<\/li>\r\n \t<li>Scan the content to find the link described above (the vacation quiz).<\/li>\r\n \t<li><strong>Click the Stop button when you find the right link.<\/strong><\/li>\r\n \t<li>Note how long it took you to find the link.<\/li>\r\n<\/ol>\r\nOnce you have finished, compare the duration of time it took for each exercise in this activity. What you've experienced shows \"the curb cut effect\" of meaningful link text.\r\n\r\n[h5p id=\"10\"]\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\/link-purpose-in-context.html\">Understanding Success Criterion 2.4.4 Link Purpose (In Context)<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#link-purpose-in-context\">How to Meet Link Purpose (In Context)<\/a><\/li>\r\n<\/ul>\r\n<\/div>","rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 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-69d9ed2f520ea\" 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-69d9ed2f520ea\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-a\/#Guideline_24_Navigable\" >Guideline 2.4 Navigable<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-a\/#Success_Criterion_241_Bypass_Blocks\" >Success Criterion 2.4.1 Bypass Blocks<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-a\/#Bypass_Blocks_Explained\" >Bypass Blocks Explained<\/a><\/li><li class='ez-toc-page-1 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-a\/#Try_This_Web_Accessibility_Auditing_Showcase\" >Try This: Web Accessibility Auditing Showcase<\/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-a\/#Success_Criterion_242_Page_Titled\" >Success Criterion 2.4.2 Page Titled<\/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-a\/#Page_Titled_Explained\" >Page Titled Explained<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-a\/#Success_Criterion_243_Focus_Order\" >Success Criterion 2.4.3 Focus Order<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-a\/#Focus_Order_Explained\" >Focus Order Explained<\/a><\/li><li class='ez-toc-page-1 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-a\/#Try_This_Logical_Focus_Order\" >Try This: Logical Focus Order<\/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-a\/#Success_Criterion_244_Link_Purpose_In_Context\" >Success Criterion 2.4.4 Link Purpose (In Context)<\/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-a\/#Link_Purpose_in_Context_Explained\" >Link Purpose (in Context) Explained<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-a\/#Try_This_The_Curb_Cut_Effect_of_Meaningful_Link_Text\" >Try This:\u00a0The Curb Cut Effect of Meaningful Link Text<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-a\/#Exercise_1_Experience_Meaningless_Links\" >Exercise 1: Experience Meaningless Links<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/chapter\/2-4-navigable-level-a\/#Exercise_2_Experience_Meaningful_Links\" >Exercise 2: Experience Meaningful Links<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #eb974e\">\n<h2><span class=\"ez-toc-section\" id=\"Guideline_24_Navigable\"><\/span><strong>Guideline 2.4<\/strong> Navigable<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Provide ways to help users navigate, find content, and determine where they are.<\/p>\n<\/div>\n<p><strong>Why is it important to help visitors navigate?<\/strong><\/p>\n<p>Navigation on web pages serves two purposes:<\/p>\n<ol>\n<li>To tell users where they are.<\/li>\n<li>To let users know how to go somewhere else.<\/li>\n<\/ol>\n<p>These tasks are often more difficult for people with disabilities. This section describes how to help visitors find content and keep track of their location. The same rules that simplify navigation for people with disabilities also improves navigation for users who do not have disabilities.<\/p>\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_241_Bypass_Blocks\"><\/span><strong><a id=\"2.4.1\"><\/a>Success Criterion 2.4.1<\/strong> Bypass Blocks<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level A<\/p>\n<p>A\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-mechanism\">mechanism<\/a> is available to bypass blocks of content that are repeated on multiple\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-web-page-s\">web pages<\/a>.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Bypass_Blocks_Explained\"><\/span>Bypass Blocks Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>People who cannot use a mouse often use the Tab key to navigate around web pages: they press Tab to move \u201cforward\u201d through the content; Shift + Tab to move \u201cbackward\u201d; and Enter to activate links and buttons. At best, Tab key navigation is a tedious way to get around, but for some non-mouse users, it is the best option.<\/p>\n<p>Many web pages have content that is repeated on every page. For example, a site may have the same navigation links on the top of all pages. If there are 20 navigation links, a non-mouse user could be forced to press the Tab key 20 times just to reach the main content \u2014 and do this on every page.<\/p>\n<p>By meeting this requirement, keyboard users can go directly to the main content without the need to press a lot of keys. A simple way to achieve this is to place a \u201cSkip to Content\u201d link as the first link on every page.<\/p>\n<p>\u201cSkip to Content\u201d links also benefit people who use portable web-enabled devices, such as cell phones. Because the screens of these devices are so small, it may be more convenient to click a \u201cSkip to Content\u201d link than to scroll through many screens to reach the content.<\/p>\n<p>There are a variety of ways to provide navigation elements that allow non-mouse users to navigate effectively and reduce or eliminate the need to navigate through web content in the sequence elements appearing on the page. These include:<\/p>\n<ul>\n<li><strong>Bypass Links<\/strong>: Skip to Content is one type of bypass link, typically located in the top left corner of the page. When a bypass link is followed, focus moves to an anchor elsewhere on the page, skipping past content in between the link and anchor. Bypass links can also be used with other complex elements within the content of a page, such as skipping over a large data table or past an embedded object or application.<\/li>\n<li><strong>Headings<\/strong>: When proper HTML headings are used in web content, assistive technology users are able to list them and navigate directly to any one of them, skipping over any content in between the location in focus on the page, and the heading farther down the page. Using proper headings is perhaps the easiest way to meet <strong>SC 2.4.1\u00a0<\/strong>(Level A), if the site already meets <strong>SC 1.3.1 <\/strong>Info and Relationships (Level A).<\/li>\n<li><strong>Landmarks<\/strong>: With the introduction of WAI-ARIA, site developers can add specific roles to regions of the page that screen reader users are able to list and then use to navigate directly to a block with a navigation menu, to the main content area of the page, or to the footer area, among other potential regions. See the link in the suggested readings below for more about landmarks<\/li>\n<\/ul>\n<p>All three of these strategies can be used together to accommodate a broad range of users. For instance, landmarks may work well for screen reader users but not so well for low-vision users who may not be using a screen reader. Bypass links may be a more effective means for the latter group.<\/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: Web Accessibility Auditing Showcase<\/strong><\/h4>\n<p>Using ChromeVox, navigate the <a href=\"https:\/\/de.torontomu.ca\/wa\/showcase\/\" target=\"_blank\" rel=\"noopener\">Web Accessibility Auditing Showcase<\/a> site using the available bypass links, then using headings, then using landmarks, to develop a practical understanding of how these navigation elements function with a screen reader. Refer to the ChromeVox shortcut keys handout introduced earlier, if you need a refresher on ChromeVox shortcut keys.<\/p>\n<ul>\n<li><strong>Bypass Links: <\/strong>Press the Tab key when the page has finished loading to access the \u201cSkip to Content\u201d bypass link near the top of the page.<\/li>\n<li><strong>Headings:<\/strong> While using ChromeVox press CVox + L + H to list the headings. Use the up and down arrows to navigate through the list of headings that appear, and press Enter on a particular heading in the list to send focus to that heading on the page.<\/li>\n<li><strong>Landmarks:<\/strong> While using ChromeVox press CVox + L + semicolon (;) to list the landmarks. Use the up and down arrows to navigate through the list of landmarks that appear, and press Enter on a particular landmark in the list to send focus to that region of the page.<\/li>\n<\/ul>\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\/bypass-blocks.html\">Understanding Success Criterion 2.4.1 Bypass Blocks<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#bypass-blocks\">How to Meet Bypass Blocks<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Techniques\/aria\/ARIA11\">Using ARIA Landmarks to Identify Regions of a Page<\/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_242_Page_Titled\"><\/span><strong><a id=\"2.4.2\"><\/a>Success Criterion 2.4.2<\/strong> Page Titled<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level A<\/p>\n<p><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-web-page-s\">Web pages<\/a> have titles that describe topic or purpose.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Page_Titled_Explained\"><\/span>Page Titled Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>When a screen reader begins reading a page after it has finished loading, the first thing it reads is the page title. A descriptive title immediately tells the listener they are in the right place (or in the wrong place). Without the title, users have to navigate into the page before making that determination.<\/p>\n<p>For most current browsers, holding a mouse pointer over a tab across the top of the browser window reveals the title of the page being viewed. The title is added to a web page using the HTML <code>&lt;title&gt;<\/code> element.<\/p>\n<p>A good title summarizes a page in a few words, so users do not have to read an entire page to know what it is about. Many screen reader users take advantage of titles to keep track of where they are. A title may be based on the main heading on the page, then followed by the name of the site. If not the same as the main heading, the title should be equivalent in meaning to it. When linking to a page, the link text may be the same as the title of the page the link leads to, thus users can make a direct association between the link they clicked and the page that opens.<\/p>\n<p>Descriptive titles also help people interpret search engine results. Many search engines, including Google, display search results as a list of page titles. Not using descriptive titles can also affect a website\u2019s searchability, and its search ranking, whether it appears near the top of the results for a related search query or not.<\/p>\n<p>When writing web page titles, it is recommended that each title:<\/p>\n<ol>\n<li>Identify the subject of the page.<\/li>\n<li>Identify the site.<\/li>\n<li>Make sense.<\/li>\n<li>Be short.<\/li>\n<li>Be unique for each page.<\/li>\n<\/ol>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"example\">\n<p>Examples of descriptive titles:<\/p>\n<ul>\n<li>For a page containing a chocolate brownie recipe on <a href=\"http:\/\/www.yummydesserts.com\">www.yummydesserts.com<\/a>:<br \/>\n<strong><i>Chocolate Brownie Recipe &#8211; Yummy Desserts<\/i><\/strong><\/li>\n<li>For a chapter in a textbook called &#8220;Gender and Stereotype&#8221;:<br \/>\n<strong><i>Chapter 3: The Origins of Patriarchy &#8211; Gender and Stereotype<\/i><\/strong><\/li>\n<li>For a web-based banking application that lets customers retrieve monthly statements:<br \/>\n<strong><i>Account 10001, Statement for October 2010 &#8211; Bank of Hudson Bay<\/i><\/strong><\/li>\n<\/ul>\n<\/div>\n<p>It is advisable to position the subject of a page before the name of the site in a page title, just in case the title is truncated to fit available space. Placing the subject before the site\/page title allows that unique topic to be informatively displayed in search results or in a browser tab, if the latter part of the title gets truncated.<\/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\/page-titled.html\">Understanding Success Criterion 2.4.2 Page Titled<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#page-titled\">How to Meet Page Titled<\/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_243_Focus_Order\"><\/span><strong><a id=\"2.4.3\"><\/a>Success Criterion 2.4.3<\/strong> Focus Order<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level A<\/p>\n<p>If a <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-web-page-s\">web page<\/a> can be\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-navigated-sequentially\">navigated sequentially<\/a> and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Focus_Order_Explained\"><\/span>Focus Order Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Content should make sense when navigating by keyboard. Many people who cannot handle (or have difficulty handling) a mouse rely on <strong>Tab-key navigation<\/strong> to interact with a web page. That is, they press Tab to move forward through the content; Shift + Tab to move backwards; and Enter to activate links and buttons. Knowing a handful of other hotkeys (keyboard shortcuts) makes it possible for non-mouse users to interact with any web page.<\/p>\n<p>When navigating through a web page via keyboard, people should encounter information in a logical order. This is especially important for screen reader users, who cannot observe how pages are visually organized. When designing for the Web, strive to make the visual organization and the tabbing order correspond.<\/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: Logical Focus Order<\/strong><\/h4>\n<p>Here you have two login forms that look identical. However, the first is created with default HTML, which results in the focus order being illogical for someone listening with a screen reader. When encountering such a form, one might be expected to register first, then login by entering a username, then a password, choose the optional auto-login, then press the sign-in button to complete the login.<\/p>\n<p><strong>Illogical focus order:<\/strong><\/p>\n<p>The focus order for this form does NOT follow a logical sequence. Use the Tab key to navigate through this first form.<\/p>\n<div id=\"h5p-7\">\n<div class=\"h5p-content\" data-content-id=\"7\"><\/div>\n<\/div>\n<p><strong>Logical focus order:<\/strong><\/p>\n<p>The focus order for this form does follow a logical sequence. Use the Tab key to navigate through this second form.<\/p>\n<div id=\"h5p-8\">\n<div class=\"h5p-content\" data-content-id=\"8\"><\/div>\n<\/div>\n<p>Also, see <strong>SC 1.3.2 Meaningful Sequence<\/strong> and <strong>SC 3.2.3 Consistent Navigation<\/strong>, both related to \u00a0<strong>SC 2.4.3<\/strong>.<\/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-order.html\">Understanding Success Criterion 2.4.3 Focus Order<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#focus-order\">How to Meet Focus Order<\/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_244_Link_Purpose_In_Context\"><\/span><strong><a id=\"2.4.4\"><\/a>Success Criterion 2.4.4<\/strong> Link Purpose (In Context)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Level A<\/p>\n<p>The\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-purpose-of-each-link\">purpose of each link<\/a> can be determined from the link text alone or from the link text together with its\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-programmatically-determined-link-context\">programmatically determined link context<\/a>, except where the purpose of the link would be\u00a0<a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#dfn-ambiguous-to-users-in-general\">ambiguous to users in general<\/a>.<\/p>\n<\/div>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"definition\">\n<p><strong>Definition <\/strong><\/p>\n<p><strong>Programmatically determined:<\/strong> Code is used to associate a link with additional meaning. This could be via a preceding link, as described below or through other means, such as a WAI-ARIA label or description or an HTML title attribute, among other means. The added meaning in each of these is available to assistive technologies when they encounter a link.<\/p>\n<\/div>\n<h4><span class=\"ez-toc-section\" id=\"Link_Purpose_in_Context_Explained\"><\/span>Link Purpose (in Context) Explained<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Links that make sense by themselves enhance usability for everybody. The preferred way to meet the requirement is to write link text that clearly indicates what to expect if the link is followed.<\/p>\n<p>For example:<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd\" title=\"example\"><strong>On a recipe Website:<br \/>\n<\/strong><\/p>\n<ul>\n<li><span style=\"text-decoration: underline\"><span style=\"font-weight: 400;color: #0000ff;text-decoration: underline\">Appetizers<br \/>\n<\/span><\/span><\/li>\n<li><span style=\"text-decoration: underline\"><span style=\"font-weight: 400;color: #0000ff;text-decoration: underline\">Soups<br \/>\n<\/span><\/span><\/li>\n<li><span style=\"text-decoration: underline\"><span style=\"font-weight: 400;color: #0000ff;text-decoration: underline\">Main Courses<br \/>\n<\/span><\/span><\/li>\n<li><span style=\"text-decoration: underline\"><span style=\"text-decoration: underline\"><span style=\"font-weight: 400;color: #0000ff;text-decoration: underline\">Desserts<\/span><\/span><\/span><\/li>\n<\/ul>\n<p><strong style=\"font-size: 14pt\">On an online weight training forum:<br \/>\n<\/strong><\/p>\n<ul>\n<li><span style=\"color: #0000ff;font-size: 14pt\">Strength Training Principles<br \/>\n<\/span><\/li>\n<li><span style=\"color: #0000ff;font-size: 14pt\">Getting Started<br \/>\n<\/span><\/li>\n<li><span style=\"color: #0000ff;font-size: 14pt\">Developing a Routine<br \/>\n<\/span><\/li>\n<li><span style=\"color: #0000ff;font-size: 14pt\">Injured Yourself? What to do<\/span><\/li>\n<\/ul>\n<\/div>\n<p>While using meaningful words that describe the destination of a link is always recommended, this success criteria does allow the use of less meaningful words, provided there is context that adds meaning to those words. <strong>SC 2.1.4<\/strong> refers to the phrase &#8220;programmatically determined,&#8221; which means essentially, assistive technologies are able to gather meaning from the context in which a link appears, giving the link meaning.<\/p>\n<p>For example: Imagine a news website, like the one in the screenshot below, that presents a series of news headlines. Each headline is followed by a sentence or two to introduce the article, followed by a &#8220;continue reading&#8221; link that leads to the full article. The words &#8220;continue reading&#8221; on their own do not contain any useful information about the article; however, if the article title that precedes the meaningless link is also a link to the article, users navigating through the links on the page will hear the title followed by &#8220;continue reading,&#8221; in which case the article title gives meaning to the otherwise meaningless link, by answering &#8220;continue reading what?&#8221;<\/p>\n<figure id=\"attachment_58\" aria-describedby=\"caption-attachment-58\" style=\"width: 696px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/link_context.png\" alt=\"Linked headlines provide context for otherwise meaningless links with &quot;continue reading&quot; as the hyperlinked text.\" class=\"wp-image-58 size-full\" width=\"696\" height=\"511\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/link_context.png 696w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/link_context-300x220.png 300w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/link_context-65x48.png 65w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/link_context-225x165.png 225w, https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-content\/uploads\/sites\/82\/2019\/06\/link_context-350x257.png 350w\" sizes=\"auto, (max-width: 696px) 100vw, 696px\" \/><figcaption id=\"caption-attachment-58\" class=\"wp-caption-text\"><a href=\"https:\/\/globalnews.ca\/canada\/\">Source: Global News<\/a><\/figcaption><\/figure>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #f66\">\n<p><strong>Key Point:<\/strong> Though the W3C description for<strong> SC 2.4.4<\/strong> suggests that text in a surrounding paragraph can add meaning to an otherwise meaningless link embedded in the paragraph, technically this means of providing context is not &#8220;programmatically determined.&#8221; In other words a user would need to manually search through the surrounding content to determine the destination of a &#8220;click here&#8221; link, for\u00a0example. They would not be able to gather that information from the link itself, as in the programmatically determined link contexts described above.<\/p>\n<p>In the two examples that follow, the first is a typically frowned upon &#8220;click here&#8221; link that based on the W3C description of the success criteria, passes the requirements as described. The reality is, however, this creates unnecessary effort for assistive technology users, who may be &#8220;tabbing&#8221; through the links on the page.<\/p>\n<ul>\n<li><strong>Bad<\/strong> (Passes according to WCAG, but requires extra effort)<br \/>\nLearning more about meaningful links, <a>click here<\/a>.<\/li>\n<li><strong>Good <\/strong>(No context needed, link text good as is)<br \/>\nLearn more <a>about meaningful links<\/a>.<\/li>\n<\/ul>\n<p>Not only do those using assistive technology require extra effort to determine the meaning of &#8220;click here,&#8221; anyone, with a disability or not, who may be scanning the links on a page, will have to read through the surrounding content to determine the destination of the link.<\/p>\n<\/div>\n<p>By meeting this requirement, a site conforms at Level A. To conform at Level AAA, see <strong>SC 2.4.9<\/strong>.<\/p>\n<div style=\"margin: 1em 0;padding: 1em;border: 1px solid #ddd;border-left: 10px solid #b9f;height: auto\">\n<h4><strong><a><\/a>Try This:\u00a0The Curb Cut Effect of Meaningful Link Text<\/strong><\/h4>\n<p>Meaningful link text is a good example of a &#8220;<a href=\"https:\/\/pressbooks.library.ryerson.ca\/iwacc\/chapter\/curb-cuts-and-universal-design\/\">curb cut<\/a>.&#8221; Meaningful links are useful for everyone.\u00a0<strong><br \/>\n<\/strong><\/p>\n<p>Below are two collapsed blocks of web content with timers.\u00a0In Exercise 1, you&#8217;ll be asked to engage with a web page that contains several meaningless &#8220;click here&#8221; links. In contrast, in Exercise 2,\u00a0you&#8217;ll see a web page that uses meaningful links. In both exercises, links do not function; no need to click.<\/p>\n<p><strong>IMPORTANT:<\/strong> Read <em>all<\/em> the instructions before attempting the activity.<\/p>\n<p>While it&#8217;s easy to &#8220;cheat&#8221; on this task, follow through with this exercise as instructed to experience the effect. It&#8217;s an opportunity to experience first-hand the contrast between meaningless and meaningful links.<\/p>\n<h5><span class=\"ez-toc-section\" id=\"Exercise_1_Experience_Meaningless_Links\"><\/span><strong>Exercise 1: Experience Meaningless Links<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p><strong>Task:<\/strong> Find the<strong> link to contact a sales representative<\/strong> <strong>for more booking information.<\/strong><\/p>\n<ol>\n<li>Open your browser window in full-screen mode or <a href=\"https:\/\/courses.ryerson.ca\/content\/enforced\/443593-deu_afcd_w21_01\/linktext_bad.html?ou=443593#example\" target=\"des\" rel=\"noopener noreferrer\">open Exercise 1 in a new window<\/a> to display the\u00a0 content below in full.<\/li>\n<li>Click on &#8220;<strong>1. Find a meaningless link<\/strong>&#8221; to reveal the web content <em>and<\/em> start the timer.<\/li>\n<li>Scan through the section to find the link being asked for (to contact a sales rep about bookings).<\/li>\n<li><strong>Click the Stop button when you find the right link.\u00a0<\/strong><\/li>\n<li>Notice how long it took to find the link.<\/li>\n<\/ol>\n<div id=\"h5p-9\">\n<div class=\"h5p-content\" data-content-id=\"9\"><\/div>\n<\/div>\n<h5><span class=\"ez-toc-section\" id=\"Exercise_2_Experience_Meaningful_Links\"><\/span><strong>Exercise 2: Experience Meaningful Links<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h5>\n<p><strong>Task<\/strong>: Find the link that takes you to <strong>the quiz<\/strong> <strong>to determine if you need a vacation.<\/strong><\/p>\n<ol>\n<li>Open your browser window to full screen or <a href=\"https:\/\/courses.ryerson.ca\/content\/enforced\/443593-deu_afcd_w21_01\/linktext_good.html?ou=443593#example\">open Exercise 2 in a new window<\/a>.<\/li>\n<li>Click &#8220;<strong>2. Find a meaningful link<\/strong>&#8221;\u00a0 to reveal the web content <em>and<\/em>\u00a0start the timer.<\/li>\n<li>Scan the content to find the link described above (the vacation quiz).<\/li>\n<li><strong>Click the Stop button when you find the right link.<\/strong><\/li>\n<li>Note how long it took you to find the link.<\/li>\n<\/ol>\n<p>Once you have finished, compare the duration of time it took for each exercise in this activity. What you&#8217;ve experienced shows &#8220;the curb cut effect&#8221; of meaningful link text.<\/p>\n<div id=\"h5p-10\">\n<div class=\"h5p-content\" data-content-id=\"10\"><\/div>\n<\/div>\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\/link-purpose-in-context.html\">Understanding Success Criterion 2.4.4 Link Purpose (In Context)<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#link-purpose-in-context\">How to Meet Link Purpose (In Context)<\/a><\/li>\n<\/ul>\n<\/div>\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-195","chapter","type-chapter","status-publish","hentry"],"part":28,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/195","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":28,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/195\/revisions"}],"predecessor-version":[{"id":1367,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapters\/195\/revisions\/1367"}],"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\/195\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/media?parent=195"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/pressbooks\/v2\/chapter-type?post=195"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/contributor?post=195"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/iwacc\/wp-json\/wp\/v2\/license?post=195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}