ITAO – Module 3 – Links and Navigation ( Test 1) Fee: Free Practice Tests (based on WAS Guide https://www.accessibilityassociation.org/ ) Passing score: 95% Time limit: 35 minutes Number of questions: 40 Format: Multiple Choice, Multi Answer and True/False Difficulty: Advance 0 Created on January 06, 2023 ITAO - Module 3 – Links and Navigation (Test 1) ITAO - Module 3 – Links and Navigation (Test 1) 1 / 40 In general, avoid opening links in a new window. When links do open in a new window, warn users. Either: 3:1 contrast between the body text and the link text. Add the visible link text “(Opens in new window)”. Underline the link on hover and focus Reveal a visually-hidden warning on focus and hover 2 / 40 When using aria-label or aria-labelledby to name a link, ensure the link's visible text matches or is included in the ARIA label.<a href="poor.html" aria-label="Read more about Insufficient link names">Read more</a> True False 3 / 40 The duplicated link text is extended with text that’s been visually-hidden using the CSS "_____ " method. The text is invisible, but it’s still in the HTML and so is encountered by assistive technology.<h1>Tools and resources</h1><h2>Planning Accessible Virtual Events – Job Aid</h2><p>[Description of the resource]</p><p> <a href="[...]"> Access <span class="wb-inv">Planning Accessible Virtual Events – Job Aid</span> </a></p><h2>Employees with Disabilities Network (EwDN)</h2><p>[Description of the resource]</p><p> <a href="[...]"> Access <span class="wb-inv">Employees with Disabilities Network</span> </a></p>.wb-inv { clip: rect(1px,1px,1px,1px); height: 1px; margin: 0; overflow: hidden; position: absolute; width: 1px;} aria-label aria-labelledby aria-describedby clip 4 / 40 Do not use information-empty link text such as “click here” or “Read More” etc. False True 5 / 40 When there are two or more navigation regions on the page, name each with ____________________________ to differentiate them. aria-label or aria-current="visible" aria-label or aria-labelledby aria-label or display:"none" aria-label or aria-describedby 6 / 40 If two or more links on the same page have identical link text but different destinations, you can distinguish the links from one another by :<h1>Tools and resources</h1><h2>Planning Accessible Virtual Events – Job Aid</h2><p>[Description of the resource]</p><p> <a href="[...]" aria-label="Access Planning Accessible Virtual Events – Job Aid">Access</a></p><h2>Employees with Disabilities Network (EwDN)</h2><p>[Description of the resource]</p><p> <a href="[...]" aria-label="Access Employees with Disabilities Network">Access</a></p> Adding similar aria-label attributes All of the options Adding similar link texts Adding visually-hidden text to the link text 7 / 40 In the example below - The current link is indicated visually via the CSS, and to screen reader users via the ________________ attribute.<nav label="Results by page"> <ul> <li> <a href="[…]" aria-label="page 1">1</a> </li> <li class="current-page"> <a href="[…]" aria-current="page" aria-label="page 2">2</a> </li> <li> <a href="[…]" aria-label="page 3">3</a> </li> <li> <a href="[…]" aria-label="page 4">4</a> </li> </ul></nav>CSS:.current-page { background-color: #ccc; border: 1px solid black;} none aria-label label aria-current="page" 8 / 40 It's best practice to use_________ to design a highly-visible focus indicator with strong contrast. hyperlink underline HTML CSS 9 / 40 If writing stand-alone link text is impossible, ensure the link text identifies its purpose in combination with one of the following:A) The enclosing sentenceB) The enclosing list itemC) The enclosing paragraphD) The enclosing table cell and table header cellE) The parent list item of a nested list (example follows) B, C and D D and E A, B and C All of the options 10 / 40 The skip link doesn't need to be visible until it receives focus. True False 11 / 40 A skip link isn’t needed if only a handful of controls separate the main content from the top of the page. True False 12 / 40 If the visual focus indicator is removed, ___________ users will have no idea which link has the focus, making it difficult or impossible to navigate the web page.a:focus { outline: none;} auditory disabled blind sighted keyboard cognitive 13 / 40 Native links are keyboard-activated by pressing the ____________. Space bar Combination key Enter key Ctrl Key 14 / 40 If you design a custom link using the ARIA role="link" attribute and a div or span element, include, a _______________ for the Enter key for activation, in addition to mouse click.document.querySelector('#txtSearch').addEventListener('keypress', function (e) { if (e.key === 'Enter') { // code for enter }}); querySelector keyPress function JavaScript event listener textSearch 15 / 40 Whenever possible, provide link text that identifies the _________________ without needing additional context color of the link purpose of the link destination of the link link text 16 / 40 Ensure that links (and buttons and other controls) are focusable and actionable by _______________ and not just via a mouse. keyboard and voice input links headings JavaScript 17 / 40 Use a same-page link, targeting the ________ attribute value of the destination (usually the <main> element).<body> <a id="skip-nav" class="show-with-focus" href="#main-content">Skip To Content </a> [...] <main id="main-content" tabindex="-1">Main Content Goes Here</main></body> id tabindex href class 18 / 40 Your links should be descriptive and able to stand alone so that it's clear ________________________. that the hyperlink is clickable that the destination is not duplicate what people can expect if they click on them the test is a link 19 / 40 You can distinguish each instance with the ________________ attribute, pointing to one or more idattribute values of elements containing the desired label. aria-visible="true" aria-labelledby tabindex = "0" aria-label 20 / 40 ______________ enable users to skim links on a page, moving from one to the next without declaring the neighboring text. Navigations Screen readers ARIA attributes Semantic elements 21 / 40 Place the _____________ at the top of the page before any other focusable element (link, button, or custom control). skip navigation link logos top navigation menus functional menus 22 / 40 If you design a custom link using the ARIA role="link" attribute and a div or span element, include, a ______________ attribute, so that the custom link receives keyboard focus via the Tab key. tabindex>"4" tabindex="0" tabindex="-1" tabindex="2" 23 / 40 When colour is used as the only way to identify a link (meaning the underline has been removed), two conditions must be met: link colour that has both a 3:1 contrast with black body text 3:1 contrast between the body text and the link text. 4.5:1 contrast between the body text and the link text. A "visual cue" (not just a color change) that appears on mouse hover and keyboard focus. The most common way to meet this is to underline the link on hover and focus, but you could also provide a background colour or border or outline. 24 / 40 _____________ users need visible feedback of a control's focus state. Sighted keyboard Blind Deaf Speech disabled 25 / 40 For users with low vision and colour blindness need to distinguish links from neighboring text with an _____________. underline on the link glowing text around highlighted text ARIA label 26 / 40 The browser default visual focus indicator can be removed with ________________ , which is a common barrier and anti-pattern. CSS outline:0 CSS outline:hidden outline: none outline: visible 27 / 40 Web browsers provide a default visual focus indicator that varies in appearance by browser but usually consists of a ________________ around the focused element. underlined border or outline bold text glowing color 28 / 40 Typically, keyboard users press the __________ to navigate the interactive elements on a web page (links, buttons, form fields, custom controls). Space bar Enter key Ctrl key Tab key 29 / 40 Links open in a new window via the _____________ attribute. target="-1" target="1" target="0" target="_blank" 30 / 40 The ARIA label supercedes the native link text in assistive technology. False True 31 / 40 Indicate the current location visually, using CSS, and semantically, using the ________________ attribute. aria-current="page" aria-visible="true" aria-labelledby aria-label 32 / 40 A _____________ enables screen reader users and sighted keyboard users to navigate directly to the main content from the top of the page. navigation links skip navigation link headers menus 33 / 40 If two or more links on the same page have identical link text but different destinations, you can distinguish the links from one another by using an ARIA label :A) aria-labelB) aria-labelledby B Either A or B None of the options A 34 / 40 Users with ____________ need to distinguish links from neighboring text. blindness low vision colour blindness cognitive disabilities 35 / 40 Identify important blocks of navigation with the __________________ attribute on a page, Each creates an ARIA navigation landmark, which screen reader users can target by keyboard command. aria-label aria-labelledby aria-current="page" <nav> element or role="navigation" 36 / 40 Distinguish links with identical text but different destinations by eitherA) rephrasing the link textB) using an ARIA labelC) adding visually-hidden text to the link text. All the options C A B 37 / 40 If the link text is not self-descriptive, ensure the ______________ describes the link purpose. link context link destination link language underlined link 38 / 40 To activate a link using voice input, the user declares the name of the link as_________ . highlighted hidden underlined visible 39 / 40 Some people with disabilities are not able to use a mouse and instead leverage mechanisms such as _______________ to navigate and interact with web.A) keyboardB) voice controlC) alternative pointing devices B and C A and B None of the options All the options 40 / 40 People with _______________ can also determine the purpose of a link by exploring the link's context. auditory disabilities speech disabilities cognitive disabilities visual disabilities Your score is The average score is 0% LinkedIn Facebook Twitter 0% Restart quiz