Semantic Structure and Navigation (with WCAG 2.2 updates) Flashcards
What are the types of landmarks in ARIA?
banner
navigation
main
contentinfo
complementary
form
search
region
What HTML tag maps to banner?
header
Should you have more than one banner role per page?
No, you should only have one banner role per page.
What does the HTML <nav> tag map to in ARIA?
navigation
Can you have more then one <nav> tag per page?
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/
How many main landmarks should be used on a page?
Just one, it denotes the main section of the page
What does the ARIA role of contentinfo map to for an HTML tag?
<footer></footer>
What is complementary landmark used for?
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/
What is a good way to create more then one complementary landmark on a page?
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/
What a good way to use form landmarks?
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>
True or False: The <form> landmark is exposed by default.
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.
How should you create a search landmark?
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
What is region landmark?
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”
What is the proper way to use a region landmark?
<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
When should you use link vs a button?
- Buttons trigger programmable actions. You will generally need to use JavaScript to make a button do something.
- Links take you places.
