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

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

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

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>

Native links are keyboard-activated by pressing the ____________.

Links open in a new window via the _____________  attribute.

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

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.

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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>

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

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

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

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)

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

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

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

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>

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

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

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

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

Users with ____________  need to distinguish links from neighboring text.

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

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

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

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.

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