Semantic Structure and Navigation (with WCAG 2.2 updates)

Question 1

What are the types of landmarks in ARIA?

Answer 1

banner
navigation
main
contentinfo
complementary
form
search
region

Question 2

What HTML tag maps to banner?

Answer 2

header

Question 3

Should you have more than one banner role per page?

Answer 3

No, you should only have one banner role per page.

Question 4

What does the HTML <nav> tag map to in ARIA?

Answer 4

navigation

Question 5

Can you have more then one <nav> tag per page?

Answer 5

Yes, you can. It is recommended to provide an arialabel or arialabelledby to provide an accessible name for multiple navs on page.

Examples:

<nav>
<!-- navigation links -->
</nav>

<nav>
<!-- navigation links -->
</nav>

<nav>
<h2>Categories</h2>

<!-- list of content categories -->
</nav>

https://practical-accessibility.today/chapters/landmark-regions/

Question 6

How many main landmarks should be used on a page?

Answer 6

Just one, it denotes the main section of the page

Question 7

What does the ARIA role of contentinfo map to for an HTML tag?

Answer 7

<footer></footer>

Question 8

What is complementary landmark used for?

Answer 8

It contains information that is complementary to the main content, such as side bar with additional links on a blog posts.

Use the <aside> HTML tag

https://practical-accessibility.today/chapters/landmark-regions/

Question 9

What is a good way to create more then one complementary landmark on a page?

Answer 9

You may create more than one complementary landmark on a page. Similar to the navigation landmark, if you do create more than one complementary landmark, assign each of them an appropriate name that identifies its purpose. When a heading is present, you can expose that heading as the name for the <aside> using the aria-labelledby attribute:

<aside>
<h2>Title for this complementary area</h2>
This is secondary information related to the `main` content of the page.
</aside>

<aside>
<h2>Title for another complementary area</h2>
This is another secondary information area.
</aside>

https://practical-accessibility.today/chapters/landmark-regions/

Question 10

What a good way to use form landmarks?

Answer 10

Every form should ideally have a visible label that describes what the form is for. This label may then be used to provide an accessible name for the form using aria-labelledby:\

<form>
<h2>Sign up</h2>
<!-- form controls here -->
</form>

Question 11

True or False: The <form> landmark is exposed by default.

Answer 11

The <form> element is not exposed as a form landmark by default. It is only exposed as a form landmark when it is given an accessible name. Not all forms need to be exposed as landmarks.

Question 12

How should you create a search landmark?

Answer 12

Use the HTML <search> element</search>

<search>
<form>
<label>Find an article</label>
<input></input>
<button>Go!</button>
</form>
</search>

<search>
<label>
Find and filter your query
<input></input>
</label>

<section>
<h3>Results found:</h3>
<ul>
<li>
...
</li>
...
</ul>

<output><!-- When no results are found, render the no results message here --></output>
</section>
</search>

https://practical-accessibility.today/chapters/landmark-regions/#the-search-landmark

Question 13

What is region landmark?

Answer 13

A region landmark is defined as “a perceivable section containing content that is relevant to a specific purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page.

https://practical-accessibility.today/chapters/landmark-regions/#the-generic-region”

Question 14

What is the proper way to use a region landmark?

Answer 14

<section>
<h2>Editor</h2>
..
</section>

or

<!-- this div with an explicit region role is exposed as a landmark region -->

<div>
<h2>Editor</h2>
..
</div>

https://practical-accessibility.today/chapters/landmark-regions/#the-generic-region

Question 15

When should you use link vs a button?

Answer 15

• Buttons trigger programmable actions. You will generally need to use JavaScript to make a button do something.
• Links take you places.

Question 16

What is the best way to code a navigation for accessibility?

Answer 16

<nav>
<span>Breadcrumbs</span>
<ol>
<li><a>Home</a></li>
<li><a>Products</a></li>
<li><a>Sustainable Kitchen</a></li>
</ol>
</nav>

By creating the code in this way, we let the user know the nav list is a breadcrumb with the aria-labelledby, the list tells the user how many items are in the list, and finally the user will know that each of these are links.

Use an ordered list when the order of the items is important such as here in the breadcrumb navigation.

https://practical-accessibility.today/chapters/navigation/#labelling-multiple-navigations-on-the-page

Question 17

Why is semantic HTML markup important for accessibility?

Answer 17

Screen readers rely on the meaning of HTML elements and attributes to convey information to blind users. It is through the semantic markup that browsers are able to parse accessibility cues and information through the accessibility API and pass that information on to users, through assistive technologies, such as screen readers.

Question 18

In a page title should the company’s come first or last?
a.) Contact Us| Brand Name
b.) Brand Name | Contact Us

Answer 18

Contact Us| Brand Name

Question 19

Why do you need to add the <html language ="en">?

Answer 19

It tells screen readers and the browser which language the page should be read in.

https://www.w3schools.com/tags/ref_language_codes.asp

Question 20

If part of the part of the page is in a different language, do you need add a language tag.?

Answer 20

Yes, if you have text you will need to indicate that it is written with a new language by adding a language tag. lang=”es”

Question 21

What’s the difference between landmarks and headings?

Answer 21

Headings designate sections within the content. Landmarks designate sections of the overall page design and layout.

Question 22

Should you let users know when you are going to have something open in a new window?

Answer 22

Yes, you can do so by adding an external icon and using the alt text to alert screen reader users that it will open in a new window.

Question 23

Why should you have a page title for each page?

Answer 23

Screen reader users rely on the title to quickly learn the identity and purpose of the page. If you leave off the title, screen reader users will have to browse the page and infer the identity and purpose from the content, which is highly inconvenient.

Example code:

<!DOCTYPE html>

<html>
<head>
<title>Products and Services</title>
</head>
</html>

Question 24

If a person types “vegetarian recipes” in a site search, which of the following is the best page title on the search result page?

A. Search
B. Search results
C. Search results for “vegetarian recipes”
D. Vegetarian recipes

Answer 24

C. Search results for “vegetarian recipes”

Question 25

True or false: On a so-called single-page application — in which AJAX is used to bring in new content without refreshing or loading the entire web page — any time that the URL changes, the page title should be updated accordingly.

Answer 25

True

Question 26

Which of the following would be the best