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.
What is the best way to code a navigation for accessibility?
<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
Why is semantic HTML markup important for accessibility?
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.
In a page title should the company’s come first or last?
a.) Contact Us| Brand Name
b.) Brand Name | Contact Us
Contact Us| Brand Name
Why do you need to add the <html language ="en">?
It tells screen readers and the browser which language the page should be read in.
https://www.w3schools.com/tags/ref_language_codes.asp
If part of the part of the page is in a different language, do you need add a language tag.?
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”
What’s the difference between landmarks and headings?
Headings designate sections within the content. Landmarks designate sections of the overall page design and layout.
Should you let users know when you are going to have something open in a new window?
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.
Why should you have a page title for each page?
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>
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
C. Search results for “vegetarian recipes”
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.
True
Which of the following would be the best <title> for a page describing the autocorrect features of a software product called "Tri-coil" by a company named "Bob's Brilliant Software?"</title>
A. Autocorrect features in Tri-coil, by Bob’s Brilliant Software
B. Bob’s Brilliant Software: Tri-coil - autocorrect features
C. Features
D. All of the above are equally good
A. Autocorrect features in Tri-coil, by Bob’s Brilliant Software
Identifying the language of a document or part of a document is important for users of:
A. Voice recognition software
B. Screen readers
C. Screen magnifiers
D. All of the above
B. Screen readers
The correct language code for German web content is:
A. lang=”en”
B. lang=”German”
C. lang=”german”
D. lang=”deutch”
E. lang=”de”
F. lang=”d”
E. lang=”de”
The correct location to identify the main language of an entire page is:
A. On the <!doctype> element
B. On the <html> element
C. On the <body> element
D. In a <meta></meta> element in the <head> of the document
E. On every block level element in the content
B. On the <html> element
If the user has the screen reader language set to French and a web page is written in English but does NOT specify the language of the document in the markup, how will the screen reader read the text?
A. It will translate the text to French
B. It will notify the user that there is a mismatch in languages
C. It will read the English words using French pronunciation rules
D. It will detect the language automatically and read the text with the correct pronunciation
E. It will cause the screen reader to turn off
C. It will read the English words using French pronunciation rules
What are the most useful landmarks for HTML and ARIA markup for screenreaders?
The most useful of these for most websites are header/banner, nav/navigation, main, and footer/contentinfo. The others may be used as well, but they are not as widely applicable across most websites.
What are some best practices for landmarks?
- All text should be contained within a landmark region.
- Multiple instances of the same type of landmark SHOULD be distinguishable by different programmatically determinable labels (aria-label or aria-labelledby).
- A page SHOULD NOT contain more than one instance of each of the following landmarks: banner, main, and contentinfo.
- The total number of landmarks SHOULD be minimized to the extent appropriate for the content.
All of the following are valid ARIA landmark roles except:
A. banner
B. navigation
C. main
D. end
E. search
D. end
A page with 47 landmarks:
A. Shows a high level of dedication to accessibility best practices
B. Probably has too many landmarks to be optimally useful to screen reader users
C. Demonstrates the popularity of the web page
D. Is using deprecated markup, and should be updated with more modern methods
B. Probably has too many landmarks to be optimally useful to screen reader users
If there are multiple navigation landmarks in the same page:
A. Each landmark should have its own unique title attribute
B. Screen readers will ignore all but the first one
C. The markup is invalid: there should be only one navigation landmark per page
D. The screen reader is likely to crash, especially older versions
E. Each landmark should have its own aria-label or aria-labelledby attribute
E. Each landmark should have its own aria-label or aria-labelledby attribute
hich of the following does NOT represent best practice, in terms of creating a structured outline of the content with headings?
A. <h1>
<h2>
<h2>
<h3>
<h4>
<h2>
B. <h1>
<h2>
<h2>
<h2>
<h3>
<h4>
C. <h1>
<h3>
<h4>
<h3>
<h4>
<h3>
D. <h1>
<h2>
</h2></h1></h3></h4></h3></h4></h3></h1></h4></h3></h2></h2></h2></h1></h2></h4></h3></h2></h2>
C. <h1>
<h3>
<h4>
<h3>
<h4>
<h3>
</h3></h4></h3></h4></h3>
If the heading level 1 (<h1>) at the beginning of the main content says “How to hang ten on a surfboard,” the most appropriate <title> for the page from among the options below would be:</title>
A. How to ride a surfboard
B. Surfing tutorial
C. Summers in California
D. How to hang ten on a surfboard
E. An article describing how to hang ten on a surfboard, describing the techniques and circumstances in which it is possible to do it
D. How to hang ten on a surfboard
Which of the following will be recognized as a valid heading by screen readers?
A. <h1></h1>
B. <h7>Legal disclaimer</h7>
C. <div role="heading" aria-level="3">The secrets beneath the ocean’s surface</div>
D. <p class="heading level2" style="font-size: 200%; font-weight: bold">Understand yourself</p>
C. <div role="heading" aria-level="3">The secrets beneath the ocean’s surface</div>
True or False: WCAG 2.0 level double A (AA) requires headings to be in a valid hierarchy under all circumstances. A heading 4 (<h4>) cannot directly follow a heading 2 (<h2>), for example. The next subheading under the heading 2 (<h2>) MUST be a heading 3 (<h3>).
A. True
B. False
False
True or False: Screen readers will read the alt text of an image within a heading as part of the heading text.
True
What is the official character limit within a heading?
A. 256 characters
B. 140 characters
C. 1024 characters
D. It depends on the level of the heading
E. There is no official limit
E. There is no official limit
What is necessary to keep in mind if you use ARIA role =”link”?
- Add role=”link” so that screen readers recognize it as a link.
- Add tabindex=”0” to make it focusable with the keyboard.
- Ensure that the JavaScript allows both the mouse click AND the enter key to activate the link.
What are the difference between links and buttons
Here are the main distinguishing factors between links and buttons:
- Links take users to different locations (either to a different page or to a different location on the same page);
- Buttons activate scripted functionality (e.g. make a dialog appear, expand a collapsed menu, turn font bold, etc.), usually on the same page, but a button can also submit form data.
All of the following statements are true, except:
A. Users should be warned if a link opens a new window.
B. Link text should include words like “link” or “click” so screen reader users know it is a link.
C. For images used as links, the alternative text for the image functions as link text for screen reader users.
D. Links with the same text should go to the same place.
B. Link text should include words like “link” or “click” so screen reader users know it is a link.
True or false: Links must be visually distinguishable from the surrounding non-link text
True
What should navigation menus be marked with?
Navigation menus should be marked as such (using <nav> or role=”navigation”), and the number and order of the links in the navigation menu should be consistent from one page to the other.
True or false: Links can be the same color as the surrounding non-link text as long as an underline appears on mouse hover and on keyboard focus.
False
Why should you not assign the navigation role to ul list?
It would override the original <ul> semantics and strip that element of its role of unordered list.
By assigning role=”navigation” to the container, rather than to the <ul>, screen readers will recognize both the navigation role and the unordered list, which allows screen readers to say, “List with three items.” If we strip the list of its semantics, the list items will not have their required parent element.
The main navigation menu should:
A. Be consistently located
B. Be consistently ordered
C. Be positioned horizontally
D. Include drop-down submenus
E. A and B
F. All of the above
E. A and B
True or false: Links on the same page that go to the same destination should have the same text within the link.
True
The correct way to designate a navigation list as a navigation landmark is:
A. Wrap the navigation list in a <nav> container or in a container marked with role=”navigation”
B. Set role=”navigation” on every link in the navigation list, or wrap each link in <nav> elements
C. There is no need to add anything to the markup. Screen readers automatically detect navigation lists and announce them to users
D. Wrap the navigation list in a <navlist> container</navlist>
A. Wrap the navigation list in a <nav> container or in a container marked with role=”navigation”
True or false: Screen readers can identify the current location within a navigation menu based on the visual styles
False
Why is important to pay attention to semantic elements?
With screen readers, most common types of semantic elements (landmarks, headings, lists, links, images, tables, iframes, etc.) are navigable with keyboard shortcuts, so the more attention you pay to semantic structure, the more easily screen reader users will be able to navigate the page.
What is the purpose of a skip link?
The Skip Navigation Link allows screen reader users to directly access the main content of the page without repeatedly going through the navigation on each page.
What are some general rules to follow with skip links?
The skip link should be the first focusable element on the page
The skip link must be either visible at all times or visible on keyboard focus
Why might you use a table of content on a page?
A table of contents:
- Increased understandability
- Improves navigation
- If a table of content is used, it should reflect the heading structure of the page.
What determines the reading order and tab/focus order?
The DOM: https://dequeuniversity.com/class/semantic-structure-wcag-2.2/within-pages/order
What are some CSS positioning techniques that can alter the visual layout so it doesn’t match the DOM order?
CSS positioning techniques — such as float:left, float:right, position:absolute, position:relative, position:fixed, margin, padding, etc. — can alter the visual layout in ways that don’t match the reading order in the DOM.
What do you need consider when using dynamic JavaScript or AJAX?
Injecting content dynamically via JavaScript or AJAX can place things in an unexpected location, such as above the user’s current focus.
A blind person may not realize that new content has been added to the document, especially if the user has already visited that area of the page. There is no obvious reason for the blind person to navigate backward just to find out if maybe something has been added or altered in an area they’ve already been to.
Why should not tabindex of positive values be used.
- It causes a discrepancy between the tab order and the reading order, leading to confusion when interacting with the page using a keyboard.
- It removes the items from their natural tab order and instead places them first in the tab order.
If a single character key shortcut exists, then at least one character must be true:
- single-character-key shortcuts can be turned off, remapped, or are only active when the relevant user interface component is in focus
All of the following are true about skip links, except:
A. Must be placed just before the main navigation menu
B. Must be accessible to keyboard-only users
C. Must be accessible to screen reader users
D. Must become visible upon receiving focus, if hidden
A. Must be placed just before the main navigation menu
This is most generally where you will find it , but it is not 100% to be placed here.
True or false: Sighted keyboard users can navigate by headings, landmarks, and other semantic features, just like blind screen reader users.
False:
Why must table headers be designated with <th>
The only way that screen readers can know if a table cell is a header is by marking it with <th>
True or False: Layout tables are not permitted by WCAG standards.
False
The accessible name for a data table should be contained in what element?
A. <title>
B. <tabletitle>
C. <caption>
D. <summary>
E. <name>
F. The first row of the table (the columns of that row should be merged into a single cell)</name></tabletitle></title>
C. <caption>
The correct way to code a table cell that is a column header cell is:
A. <td scope="col">
B. <td scope="column">
C. <th scope="col">
D. <th scope="column">
C. <th scope="col">
In a table with two header cells in the first row (“Male” and “Female”), and with 5 header cells under each of them, the header cells in the first row should be marked as:
A. <td scope="colgroup">
B. <td scope="columngroup">
C. <th scope="colgroup">
D. <th scope="columngroup">
C. <th scope="colgroup">
In complex tables, each data cell must be explicitly associated with each corresponding header cell by which method?
A. scope + header
B. id + header
C. id + scope
D. Merging table cells
B. id + header
True or false: Complex tables with merged cells are easy for screen readers to understand, as long as the table has all the necessary accessible markup.
False
Complex table structures with irregular column or row designations are difficult for screen reader users to understand and navigate even when all the markup is “perfect” for accessibility compliance. It is much better to create a simple table with no spanned cells than to create a confusing complex table that technically passes the accessibility guidelines.
Some screen readers, especially on mobile devices, do not support accessibility complex table markup. Old versions of VoiceOver for OS X, up until Mac OS X 10.10.2, also lacked accessibility support for complex tables.
True or false: Screen readers will announce the number of items in a bulleted list if the list is marked up properly.
True
True or false: Screen readers do not read nested lists (lists within lists) properly.
False
True or false: Screen readers will recognize the following code as a list:
<p>1. First item<br></br>2. Second item<br></br>3. Third item</p>
False
One of the main ways to make an <iframe> accessible is to add:
A. a title attribute
B. an alt attribute
C. a name attribute
D. a <title> element
E. tabindex="0"
F. a <label> element</label></title>
A. a title attribute
What does the JAWS screen reader read with regard to the name/label of an <iframe>?
A. The name attribute on the <iframe> element
B. The title attribute on the <iframe> element
C. The <title> element of the page within the iframe
D. The title attribute of the page within the iframe</title>
C. The <title> element of the page within the iframe</title>
If a page has 3 headings, and an <iframe>, and if the page within the <iframe> has 2 headings, how many headings total will show up in the screen reader’s list of headings on the parent page?
A. 3
B. 5
C. 7
D. 13
B. 5
If an <iframe> contains only JavaScript that is not meant to be read by the user, what is the best way to address this <iframe> in terms of accessibility?
A. Hide it from screen reader users with aria-hidden=”true”
B. Hide it with display:none in the CSS
C. add aria-describedby=”JavaScript only”
A. Hide it from screen reader users with aria-hidden=”true”
Which of the following elements will most screen readers announce to users (in terms of the semantic meaning of the element itself)?
A. q
B. del
C. ins
D. mark
E. code
F. pre
G. B and C
H. D and E
I. All of the above
J. None of the above
J. None of the above
If you want to highlight text on a web page, when is it necessary to add additional text so that screen reader users know the text is important?
A. Always
B. Never
C. When the emphasis in the highlighting changes the meaning of the text
C. When the emphasis in the highlighting changes the meaning of the text
Screen readers announce emphasized text when it is marked with:
A. b
B. i
C. em
D. strong
E. mark
F. The word “Important: “ (or similar) in front of the emphasized text
G. All of the above
H. None of the above
F. The word “Important: “ (or similar) in front of the emphasized text
What will a screen reader say when it comes across code marked as follows?
<p>Twin mattress <del>$300</del> <ins>$250</ins>!</p>
A. Twin mattress $300 $250!
B. Twin mattress deleted $300, inserted $250!
C. Twin mattress was $300, now $250!
A. Twin mattress $300 $250!
Which of the following is a recommended way to emphasize text accessibly for screen reader users?
A. Add a graphic element with “Important” as its alt text
B. Use all capital letters
C. Increase the font size
D. Add class=”important” to the text
E. Style the text using <em></em>
A. Add a graphic element with “Important” as its alt text
True or False: The concept of robust technology compatibility is to support compatibility of web content with current and future user agents — especially assistive technologies.
True
Question 2 of 4: Which of the following is NOT considered an aspect of well-formed markup?
A. Elements are properly nested.
B. Content has been spell-checked.
C. All id attributes are unique.
D. Elements do not contain duplicate attributes.
B. Content has been spell-checked.
Which of the following statement(s) about deprecated HTML elements or attributes is/are FALSE?
A. They have been replaced by newer constructs such as CSS.
B. They are typically structural in nature.
C. They may cause users to be unable to override the deprecated items with their own style sheets.
D. They are disallowed by WCAG 2.0 standards.
E. They are outdated or obsolete.
F. Both B & D
F. Both B & D
All of the following HTML elements are deprecated in HTML5 except:
A. <applet>
B. <center>
C. <frame>
D. <font>
E. All of the above are deprecated.</font></frame></center>
E. All of the above are deprecated.
Semantic HTML is important because, when applied, all assistive technology and browsers will know how to operate the functionality.
True
False
True
What is the role, name and value of the link in:
<a>Google</a>
A. Role = link, name = Google, value = https://www.google.com/
B. Role = anchor, name = https://www.google.com/, value = Google
A. Role = link, name = Google, value = https://www.google.com/
Does this button have a proper, accessible name?
<button>
<i></i>
</button>
A. Yes
B. No
B. No
Is <dl> flow content, according to the MDN Documentation?
A. Yes
B. No
A. Yes
A Doctype declaration is not necessary if the webpage does not contain HTML5 elements.
A. True
B. False
B. False
The lang attribute can be set on the HTML root element to define the language of the web page.
A. True
B. False
A. True
Which <title> text is useful for screen reader users? Check all that apply.</title>
A. Homepage
B. 24 search results for “apple pie” – Recipes R Us
C. My Site – Just another WordPress site
B. 24 search results for “apple pie” – Recipes R Us
Should you set user-scalable=no?
A. No, user-scalable=no prevents the user from zooming in and out
B. Yes, because then I have more control over what the user sees
A. No, user-scalable=no prevents the user from zooming in and out
<nav> is a top level landmark.
A. True
B. False
</nav>
B. False
<form role=”search”> is correct because:
A. It’s ok to change the role of an element
B. This is a special case, because now screen reader users can quickly navigate to the search form
B. This is a special case, because now screen reader users can quickly navigate to the search form
An aria-label on a <nav>, like <nav aria-label=”sitemap”> is helpful for:
A. Keyboard users
B. Screen reader users
B. Screen reader users
A <div> can be used to indicate the meaning of a text element.
True
False
False
What will a screen reader announce for:
. <img></img>
A. IMG_123
B. Nothing, the image is omitted
C. Image
B. Nothing, the image is omitted
Which of these is true? Check all that apply.
A. Images always need an alternative text, describing what’s on the image
B. Decorative images do not need an alt attribute
C. An alt text may not be enough for Infographics
C. An alt text may not be enough for Infographics
The accessible name of an SVG can be provided by…? Check all that apply:
A. The title element and an aria-labelledby on the SVG element
B. The title element and an aria-describedby on the SVG element
C. The title attribute on the SVG element
D. An aria-label on the SVG element
A. The title element and an aria-labelledby on the SVG element
C. The title attribute on the SVG element
Is <select> fully supported by browsers and assistive technology?</select>
A. Yes
B. No
B. No
Is the first rule of ARIA: don’t use ARIA?
A. Yes, use Semantic HTML5 over ARIA.
B. No, it is better to use ARIA and build components with divs and spans.
A. Yes, use Semantic HTML5 over ARIA
h2::before {
content: “Chapter “;
}
.sale::after {
content: “ On sale!”;
color: #c00;
}
Why or why not is this a good way to add content to the page?
It is not a good idea to use before:: and after:: for content that is essential, it should only be used for content that is non-essential.
Two disadvantages are:
- If a user decides to view the page in Reader View, use their own CSS or disable the CSS altogether, the information is lost. Also, it is doubtful whether search engines actually index content in CSS.
- One other disadvantage for serious web development: this will be hard to translate for multilingual websites using the same stylesheet.
Form controls like checkboxes and radio buttons look outdated.
It’s better to use a more modern approach than use common design patterns. It’s more refreshing for the user to create a new interface for my forms.
A. True
B. False
False, keep this consistent and don’t use unfamiliar design patterns
For consistency it’s important to (check all that apply):
A. Have consistent navigation on every page
B. Keep the look and names of links and buttons consistent
C. Have a help page and tooltips for all functionality
A. Have consistent navigation on every page
B. Keep the look and names of links and buttons consistent
Don’t depend on colour alone. That is important for:
A. Colour blind users
B. Blind users
C. Users with a visual impairment
D. Users from another culture, where colour can have a different meaning than the one you intended
E. All of the above
E. All of the above
Screen reader software always reads the contents of a website from top down.
A. True
B. False
B. True
Why should you opt for SVGs when presenting text in images?
A. Smaller file size
B. Users can zoom in without the text becoming blurry
C. Screen reading software can read the text
B. Users can zoom in without the text becoming blurry (can scale up to 400%)
It is important for the different levels of headings to be used in a linear, hierarchical order.
A. True
B. False
A. True
What are drawbacks of content in CSS?
A. Screen reader software reads it out far too loudly
B. Screen reader support is buggy
C. It can be inaccessible to users who disable CSS or who use their own CSS
D. The contrast is too low for users with a visual impairment
B. Screen reader support is buggy
C. It can be inaccessible to users who disable CSS or who use their own CSS
When should you use the lang attribute for parts of the content?
A. If your page contains content in a language that differs from the site language
B. For comedic effect: use a random language to have your text read with a funny accent
C. If your page contains proper names, technical terms, words of indeterminate language and words or phrases in well-known slang
A. If your page contains content in a language that differs from the site language
