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

ITAO - Module 3 – Links and Navigation (Test 1)

ITAO - Module 3 – Links and Navigation (Test 1)

1 / 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>

2 / 40

You can distinguish each instance with the ________________  attribute, pointing to one or more idattribute values of elements containing the desired label.

3 / 40

When there are two or more navigation regions on the page, name each with ____________________________ to differentiate them.

4 / 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;}

5 / 40

______________  enable users to skim links on a page, moving from one to the next without declaring the neighboring text.

6 / 40

_____________  users need visible feedback of a control's focus state.

7 / 40

For users with low vision and colour blindness need to distinguish links from neighboring text with an _____________.

8 / 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 sentence

B) The enclosing list item

C) The enclosing paragraph

D) The enclosing table cell and table header cell

E) The parent list item of a nested list (example follows)

9 / 40

If the link text is not self-descriptive, ensure the ______________  describes the link purpose.

10 / 40

Ensure that links (and buttons and other controls) are focusable and actionable by _______________  and not just via a mouse.

11 / 40

Web browsers provide a default visual focus indicator that varies in appearance by browser but usually consists of a ________________ around  the focused element.

12 / 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>

13 / 40

A skip link isn’t needed if only a handful of controls separate the main content from the top of the page.

14 / 40

Indicate the current location visually, using CSS, and semantically, using the ________________ attribute.

15 / 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>

16 / 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.

17 / 40

Your links should be descriptive and able to stand alone so that it's clear ________________________.

18 / 40

Do not use information-empty link text such as “click here” or “Read More” etc.

19 / 40

When colour is used as the only way to identify a link (meaning the underline has been removed), two conditions must be met:

20 / 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) keyboard

B) voice control

C) alternative pointing devices

21 / 40

The ARIA label supercedes the native link text in assistive technology.

22 / 40

Place the _____________  at the top of the page before any other focusable element (link, button, or custom control).

23 / 40

People with _______________  can also determine the purpose of a link by exploring the link's context.

24 / 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;}

25 / 40

To activate a link using voice input, the user declares the name of the link as_________ .

26 / 40

Native links are keyboard-activated by pressing the ____________.

27 / 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.

28 / 40

Distinguish links with identical text but different destinations by either

A) rephrasing the link text

B) using an ARIA label

C) adding visually-hidden text to the link text.

29 / 40

Links open in a new window via the _____________  attribute.

30 / 40

In general, avoid opening links in a new window. When links do open in a new window, warn users. Either:

31 / 40

It's best practice to use_________  to design a highly-visible focus indicator with strong contrast.

32 / 40

Whenever possible, provide link text that identifies the _________________  without needing additional context

33 / 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;}

34 / 40

The browser default visual focus indicator can be removed with ________________ , which is a common barrier and anti-pattern.

35 / 40

Typically, keyboard users press the __________  to navigate the interactive elements on a web page (links, buttons, form fields, custom controls).

36 / 40

The skip link doesn't need to be visible until it receives focus.

37 / 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-label

B) aria-labelledby

38 / 40

A _____________  enables screen reader users and sighted keyboard users to navigate directly to the main content from the top of the page.

39 / 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    }});

40 / 40

Users with ____________  need to distinguish links from neighboring text.

Your score is

The average score is 0%

LinkedIn Facebook Twitter
0%

error: Content is protected !!
Scroll to Top