Semantic Structure and Navigation Flashcards
1
Q
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
A
C. Search results for “vegetarian recipes”
2
Q
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.
A
True
3
Q
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
A. Autocorrect features in Tri-coil, by Bob’s Brilliant Software
4
Q
What is the first thing screenreader user hears?
A
The page title
5
Q
What language does the screen reader read if no language is specified in the HTML document?
A
Users select a default language when installing and configuring their screen reader, so if no language is specified in the HTML document, the screen reader will read the document in the user’s default language.
6
Q
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
A
B. Screen readers
7
Q
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”
A
E. lang=”de”
8
Q
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
A
B. On the <html> element
9
Q
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
A
C. It will read the English words using French pronunciation rules
10
Q
All of the following are valid ARIA landmark roles except:
A. banner
B. navigation
C. main
D. end
E. search
A
D. end
11
Q
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
A
B. Probably has too many landmarks to be optimally useful to screen reader users
12
Q
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
A
E. Each landmark should have its own aria-label or aria-labelledby attribute
13
Q
Which 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>
A
C. <h1>
<h3>
<h4>
<h3>
<h4>
<h3>
</h3></h4></h3></h4></h3>
14
Q
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
A
D. How to hang ten on a surfboard
15
Q
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>
A
C. <div role="heading" aria-level="3">The secrets beneath the ocean’s surface</div>
16
Q
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
False
17
Q
True or False: Screen readers will read the alt text of an image within a heading as part of the heading text.
A
True
18
Q
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
A
E. There is no official limit
19
Q
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.
A
B. Link text should include words like “link” or “click” so screen reader users know it is a link.
20
Q
True or false: Links must be visually distinguishable from the surrounding non-link text
A
True
21
Q
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.
A
False
22
Q
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
A
E. A and B
23
Q
True or false: Links on the same page that go to the same destination should have the same text within the link.
A
True
24
Q
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
A. Wrap the navigation list in a <nav> container or in a container marked with role=”navigation”
25
True or false: Screen readers can identify the current location within a navigation menu based on the visual styles
False
26
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
27
True or false: Sighted keyboard users can navigate by headings, landmarks, and other semantic features, just like blind screen reader users.
False
28
Which of the following methods could be used to mark the current location within a paginated view? (Select all that apply)
A. hidden text
B. aria-label
C. aria-labelledby
D. aria-describedby
E. All of the above
E. All of the above
29
What SHOULD be the first focusable element on the page.
A "skip navigation link"
30
Where should the "skip link" be placed in the DOM?
A: in the body tag
B: in the main tag
C: before the main navigation tag
D: A und C
D:
A "skip navigation link" should be placed at the very beginning of the document, right after the opening tag
31
True or False: Layout tables are not permitted by WCAG standards.
False
32
The accessible name for a data table should be contained in what element?
A.
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)
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
C. <caption>
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":33,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444362377},"returnTo":"/packs/21442225/subscribe"}' id='card-444362377'>
<div class='header'>
33
</div>
<div class='card-face question'>
<div class='question-content'>
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">
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
C. <th scope="col">
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":34,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444362473},"returnTo":"/packs/21442225/subscribe"}' id='card-444362473'>
<div class='header'>
34
</div>
<div class='card-face question'>
<div class='question-content'>
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">
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
C. <th scope="colgroup">
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":35,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444362536},"returnTo":"/packs/21442225/subscribe"}' id='card-444362536'>
<div class='header'>
35
</div>
<div class='card-face question'>
<div class='question-content'>
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
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
B. id + header
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":36,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444362569},"returnTo":"/packs/21442225/subscribe"}' id='card-444362569'>
<div class='header'>
36
</div>
<div class='card-face question'>
<div class='question-content'>
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.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
False
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":37,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444362703},"returnTo":"/packs/21442225/subscribe"}' id='card-444362703'>
<div class='header'>
37
</div>
<div class='card-face question'>
<div class='question-content'>
True or false: Screen readers will announce the number of items in a bulleted list if the list is marked up properly.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
True
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":38,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444362776},"returnTo":"/packs/21442225/subscribe"}' id='card-444362776'>
<div class='header'>
38
</div>
<div class='card-face question'>
<div class='question-content'>
True or false: Screen readers do not read nested lists (lists within lists) properly.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
False
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":39,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444362811},"returnTo":"/packs/21442225/subscribe"}' id='card-444362811'>
<div class='header'>
39
</div>
<div class='card-face question'>
<div class='question-content'>
True or false: Screen readers will recognize the following code as a list:
<p>1. First item<br>2. Second item<br>3. Third item</p>
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
False
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":40,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444362910},"returnTo":"/packs/21442225/subscribe"}' id='card-444362910'>
<div class='header'>
40
</div>
<div class='card-face question'>
<div class='question-content'>
What do iframes require so that sreen reader users can find them?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
From an accessibility standpoint, iframes require titles, so that screen reader users can find them and navigate to them
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":41,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444363045},"returnTo":"/packs/21442225/subscribe"}' id='card-444363045'>
<div class='header'>
41
</div>
<div class='card-face question'>
<div class='question-content'>
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
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
A. a title attribute
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":42,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444363235},"returnTo":"/packs/21442225/subscribe"}' id='card-444363235'>
<div class='header'>
42
</div>
<div class='card-face question'>
<div class='question-content'>
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
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
C. The <title> element of the page within the iframe
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":43,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444363263},"returnTo":"/packs/21442225/subscribe"}' id='card-444363263'>
<div class='header'>
43
</div>
<div class='card-face question'>
<div class='question-content'>
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
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
B. 5
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":44,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444366025},"returnTo":"/packs/21442225/subscribe"}' id='card-444366025'>
<div class='header'>
44
</div>
<div class='card-face question'>
<div class='question-content'>
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"
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
A. Hide it from screen reader users with aria-hidden="true"
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":45,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444366074},"returnTo":"/packs/21442225/subscribe"}' id='card-444366074'>
<div class='header'>
45
</div>
<div class='card-face question'>
<div class='question-content'>
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
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
J. None of the above
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":46,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444366337},"returnTo":"/packs/21442225/subscribe"}' id='card-444366337'>
<div class='header'>
46
</div>
<div class='card-face question'>
<div class='question-content'>
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
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
C. When the emphasis in the highlighting changes the meaning of the text
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":47,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444366493},"returnTo":"/packs/21442225/subscribe"}' id='card-444366493'>
<div class='header'>
47
</div>
<div class='card-face question'>
<div class='question-content'>
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
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
F. The word "Important: " (or similar) in front of the emphasized text
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":48,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444366508},"returnTo":"/packs/21442225/subscribe"}' id='card-444366508'>
<div class='header'>
48
</div>
<div class='card-face question'>
<div class='question-content'>
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!
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
A. Twin mattress $300 $250!
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":49,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444367583},"returnTo":"/packs/21442225/subscribe"}' id='card-444367583'>
<div class='header'>
49
</div>
<div class='card-face question'>
<div class='question-content'>
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>
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
A. Add a graphic element with "Important" as its alt text
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":50,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444367596},"returnTo":"/packs/21442225/subscribe"}' id='card-444367596'>
<div class='header'>
50
</div>
<div class='card-face question'>
<div class='question-content'>
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.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
True
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":51,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444368707},"returnTo":"/packs/21442225/subscribe"}' id='card-444368707'>
<div class='header'>
51
</div>
<div class='card-face question'>
<div class='question-content'>
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.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
B. Content has been spell-checked.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":52,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444368824},"returnTo":"/packs/21442225/subscribe"}' id='card-444368824'>
<div class='header'>
52
</div>
<div class='card-face question'>
<div class='question-content'>
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
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
F. Both B & D
B. They are typically structural in nature.
D. They are disallowed by WCAG 2.0 standards.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":53,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":444368868},"returnTo":"/packs/21442225/subscribe"}' id='card-444368868'>
<div class='header'>
53
</div>
<div class='card-face question'>
<div class='question-content'>
All of the following HTML elements are deprecated (veraltet) in HTML5 except:
A. <applet>
B. <center>
C. <frame>
D. <font>
E. All of the above are deprecated.
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
E. All of the above are deprecated.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":54,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":448899030},"returnTo":"/packs/21442225/subscribe"}' id='card-448899030'>
<div class='header'>
54
</div>
<div class='card-face question'>
<div class='question-content'>
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
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
E: There is no official limit
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":55,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":456052359},"returnTo":"/packs/21442225/subscribe"}' id='card-456052359'>
<div class='header'>
55
</div>
<div class='card-face question'>
<div class='question-content'>
The List shows HTML5 elements. What are the corresponding ARIA role?
For:
1. <header>
2. <nav>
3. <main>
4. <footer>
5. <aside>
6. <section>
7. <article>
8. <form>
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
1. <header> / role="banner"
2. <nav> / role="navigation"
3. <main> / role="main"
4. <footer> / role="contentinfo"
5. <aside> / role="complementary"
6. <section> / role="region"
7. <article> / role="article"
8. <form> / role="form"
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":56,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":456053015},"returnTo":"/packs/21442225/subscribe"}' id='card-456053015'>
<div class='header'>
56
</div>
<div class='card-face question'>
<div class='question-content'>
Which landmarks should not be used more than once?
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
ARIA role
banner, main, and contentinfo.
</div>
</div>
</div>
<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":57,"qSoundUrl":null,"resources":{"deckId":13654393,"packId":21442225,"cardId":456128185},"returnTo":"/packs/21442225/subscribe"}' id='card-456128185'>
<div class='header'>
57
</div>
<div class='card-face question'>
<div class='question-content'>
Where should a "skip navigation link" be placed?
A: at the beginning of the document
B: in the Header element
C: after the opening body
D: A und C
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
D
A "skip navigation link" should be placed at the very beginning of the document, right after the opening <body>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='flashcards-sidebar'>
<div class='sidebar-header'>
<div class='react-component' id='flashcards-search-bar'>
<div class='placeholder market-search-bar' id='flashcards-search-bar-placeholder'></div>
</div>
</div>
<div class='sidebar-content'>
<p class='deck-subject-heading'>
<a class="decks-in-subject-link" href="/packs/iaap-was-certification-21442225"><span class="pack-name">IAAP WAS Certification +</span> (21 decks)
</a></p>
<ul class='deck-list-items'>
<a class='deck-link ' href='/flashcards/image-svg-and-canvas-13597577/packs/21442225'>
<li class='deck-list-item'>Image, SVG, and Canvas</li>
</a>
<a class='deck-link ' href='/flashcards/multimeida-animation-motion-13598579/packs/21442225'>
<li class='deck-list-item'>Multimeida, Animation, Motion</li>
</a>
<a class='deck-link ' href='/flashcards/dynamic-updates-ajax-and-single-page-app-13612486/packs/21442225'>
<li class='deck-list-item'>Dynamic Updates, AJAX, and Single-Page Apps</li>
</a>
<a class='deck-link ' href='/flashcards/custom-javascript-aria-widget-13651101/packs/21442225'>
<li class='deck-list-item'>Custom JavaScript / ARIA Widget</li>
</a>
<a class='deck-link ' href='/flashcards/accessibility-fundamentals-13651628/packs/21442225'>
<li class='deck-list-item'>Accessibility Fundamentals</li>
</a>
<a class='deck-link ' href='/flashcards/designing-an-accessible-user-experience-13651775/packs/21442225'>
<li class='deck-list-item'>Designing an Accessible User Experience</li>
</a>
<a class='deck-link ' href='/flashcards/responsive-design-zoom-13654388/packs/21442225'>
<li class='deck-list-item'>Responsive Design & Zoom</li>
</a>
<a class='deck-link selected' href='/flashcards/semantic-structure-and-navigation-13654393/packs/21442225'>
<li class='deck-list-item'>Semantic Structure and Navigation</li>
</a>
<a class='deck-link ' href='/flashcards/visual-design-and-colors-13655610/packs/21442225'>
<li class='deck-list-item'>Visual Design and Colors</li>
</a>
<a class='deck-link ' href='/flashcards/device-independent-input-methods-13655611/packs/21442225'>
<li class='deck-list-item'>Device-Independent Input Methods</li>
</a>
<a class='deck-link ' href='/flashcards/form-labels-instructions-and-validation-13655612/packs/21442225'>
<li class='deck-list-item'>Form Labels, Instructions, and Validation</li>
</a>
<a class='deck-link ' href='/flashcards/web-accessibility-testing-basic-methods-13655615/packs/21442225'>
<li class='deck-list-item'>Web Accessibility Testing: Basic Methods and Tools</li>
</a>
<a class='deck-link ' href='/flashcards/web-accessibility-testing-screen-readers-13655617/packs/21442225'>
<li class='deck-list-item'>Web Accessibility Testing: Screen Readers</li>
</a>
<a class='deck-link ' href='/flashcards/wcag-conformance-testing-detailed-method-13655620/packs/21442225'>
<li class='deck-list-item'>WCAG Conformance Testing, Detailed Methodology</li>
</a>
<a class='deck-link ' href='/flashcards/mixed-sample-question-13655621/packs/21442225'>
<li class='deck-list-item'>Mixed Sample Question</li>
</a>
<a class='deck-link ' href='/flashcards/wcag-21-in-general-13655645/packs/21442225'>
<li class='deck-list-item'>(WCAG) 2.1 in general</li>
</a>
<a class='deck-link ' href='/flashcards/wcag-21-guidlines-13822990/packs/21442225'>
<li class='deck-list-item'>WCAG 2.1 Guidlines</li>
</a>
<a class='deck-link ' href='/flashcards/wcag-21-success-criteria-13822991/packs/21442225'>
<li class='deck-list-item'>WCAG 2.1 Success Criteria</li>
</a>
<a class='deck-link ' href='/flashcards/atag-20-authoring-tool-accessibility-gui-13822993/packs/21442225'>
<li class='deck-list-item'>ATAG 2.0 (Authoring Tool Accessibility Guidlines)</li>
</a>
<a class='deck-link ' href='/flashcards/iaap-exam-sample-questions-13988630/packs/21442225'>
<li class='deck-list-item'>IAAP exam sample questions</li>
</a>
<a class='deck-link ' href='/flashcards/screenreader-navigation-shortcuts-14079416/packs/21442225'>
<li class='deck-list-item'>Screenreader Navigation, Shortcuts</li>
</a>
</ul>
</div>
</div>
</div>
<div id='tooltip-controller'></div>
<div data='{"packId":21442225,"source":"spaced-repetition-modal","subject":"IAAP WAS Certification +","resources":{"deckId":13654393,"packId":21442225},"returnTo":"/packs/21442225/subscribe"}' id='spaced-repetition-modal-controller'></div>
<div id='banner-controller'></div>
<div id='dialog-modal-controller'></div>
<div class='band band-footer'>
<div class='footer-main'>
<ul class='sections'>
<li class='section key-links'>
<p class='section-heading'>
Key Links
</p>
<ul class='options-list'>
<li class='option'>
<a id="footer-pricing-link" class="option-link" href="/pricing?paywall=upgrade">Pricing</a>
</li>
<li class='option'>
<a class="option-link" href="/companies">Corporate Training</a>
</li>
<li class='option'>
<a class="option-link" href="/teachers">Teachers & Schools</a>
</li>
<li class='option'>
<a class="option-link" target="_blank" rel="nofollow noopener noreferrer" href="https://itunes.apple.com/us/app/brainscape-smart-flashcards/id442415567?mt=8">iOS App</a>
</li>
<li class='option'>
<a class="option-link" target="_blank" rel="nofollow noopener noreferrer" href="https://play.google.com/store/apps/details?id=com.brainscape.mobile.portal">Android App</a>
</li>
<li class='option'>
<a class="option-link" target="_blank" rel="noopener" href="https://www.brainscape.com/faq">Help Center</a>
</li>
</ul>
</li>
<li class='section subjects'>
<p class='section-heading'>
Subjects
</p>
<ul class='options-list'>
<li class='option'>
<a class="option-link" href="/subjects/medical-nursing">Medical & Nursing</a>
</li>
<li class='option'>
<a class="option-link" href="/subjects/law">Law Education</a>
</li>
<li class='option'>
<a class="option-link" href="/subjects/foreign-languages">Foreign Languages</a>
</li>
<li class='option'>
<a class="option-link" href="/subjects-directory/a">All Subjects A-Z</a>
</li>
<li class='option certified-classes'>
<a class="option-link" href="/learn">All Certified Classes</a>
</li>
</ul>
</li>
<li class='section company'>
<p class='section-heading'>
Company
</p>
<ul class='options-list'>
<li class='option'>
<a class="option-link" href="/about">About Us</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" rel="nofollow noopener noreferrer" href="https://brainscape.zendesk.com/hc/en-us/articles/115002370011-Can-I-earn-money-from-my-flashcards-">Earn Money!</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" href="https://www.brainscape.com/academy">Academy</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" href="https://brainscapeshop.myspreadshop.com/all">Swag Shop</a>
</li>
<li class='option'>
<a target="_blank" rel="nofollow noopener" class="option-link" href="/contact">Contact</a>
</li>
<li class='option'>
<a target="_blank" rel="nofollow noopener" class="option-link" href="/terms">Terms</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" href="https://www.brainscape.com/academy/brainscape-podcasts/">Podcasts</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" href="/careers">Careers</a>
</li>
</ul>
</li>
<li class='section find-us'>
<p class='section-heading'>
Find Us
</p>
<ul class='social-media-list'>
<li class='option twitter-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://twitter.com/Brainscape"><img data-src="/pks/images/shared/twitterx-af917e8b474ed7c95a19.svg" alt="twitter badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option linkedin-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.linkedin.com/company/brainscape/"><img data-src="/pks/images/shared/linkedin-2f15819658f768056cef.svg" alt="linkedin badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option facebook-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.facebook.com/Brainscape"><img data-src="/pks/images/shared/facebook-1598a44227eabc411188.svg" alt="facebook badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option youtube-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.youtube.com/c/BrainscapeNY"><img data-src="/pks/images/shared/youtube-7f2994b2dc1891582524.svg" alt="youtube badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option pinterest-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.pinterest.com/brainscape/"><img data-src="/pks/images/shared/pinterest-04f51aa292161075437b.svg" alt="pinterest badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option tiktok-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.tiktok.com/@brainscapeu"><img data-src="/pks/images/shared/tiktok-644cf4608bd73fbbb24f.svg" alt="tiktok badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option insta-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.instagram.com/brainscape/"><img data-src="/pks/images/shared/insta-210cc2d059ae807961d2.svg" alt="insta badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
</ul>
<div class='get-the-app'>
<div class='qr-code'>
<img data-src="https://www.brainscape.com/assets/cms/public-views/shared/shortio-from-homepage.png" alt="QR code" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="130" height="130" />
</div>
<div class='app-badges'>
<div class='badge apple-badge'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://apps.apple.com/us/app/brainscape-smart-flashcards/id442415567"><img data-src="/pks/images/shared/apple-badge-b6e4f380fb879821d601.svg" alt="apple badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="124" height="50" /></a>
</div>
<div class='badge android-badge'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://play.google.com/store/apps/details?id=com.brainscape.mobile.portal&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img data-src="/pks/images/shared/android-badge-a2251833dc7f6ca8879c.svg" alt="android badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="124" height="50" /></a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class='footer-blurb'>
Brainscape helps you reach your goals faster, through stronger study habits.
<br>
© 2025 Bold Learning Solutions. <a class="option-link" href="/terms">Terms and Conditions</a>
</div>
</div>
<script>
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
}
</script>
<script>
window.addEventListener('load', () => {
setTimeout(() => {
const script = document.createElement('script');
script.src = "/pks/js/public-flashcards-page-9140413b5150ce9700f9.js";
script.defer = true;
document.body.appendChild(script);
}, 0);
});
</script>
<script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js" defer="defer"></script>
<script>
document.addEventListener("mainSharedready", () => {
GaHelper.setGaDimension("dimension1","No");
});
</script>
<script type='application/ld+json'>
{"@context":"https://schema.org/","@type":"Quiz","about":{"@type":"Thing","name":"Semantic Structure and Navigation"},"hasPart":[{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"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","acceptedAnswer":{"@type":"Answer","text":"C. Search results for \"vegetarian recipes\""}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"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.","acceptedAnswer":{"@type":"Answer","text":"True"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Which of the following would be the best for a page describing the autocorrect features of a software product called \"Tri-coil\" by a company named \"Bob's Brilliant Software?\" 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","acceptedAnswer":{"@type":"Answer","text":"A. Autocorrect features in Tri-coil, by Bob's Brilliant Software"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What is the first thing screenreader user hears?","acceptedAnswer":{"@type":"Answer","text":"The page title"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"What language does the screen reader read if no language is specified in the HTML document?","acceptedAnswer":{"@type":"Answer","text":"Users select a default language when installing and configuring their screen reader, so if no language is specified in the HTML document, the screen reader will read the document in the user's default language."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"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","acceptedAnswer":{"@type":"Answer","text":"B. Screen readers"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"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\"","acceptedAnswer":{"@type":"Answer","text":"E. lang=\"de\""}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"The correct location to identify the main language of an entire page is: A. On the element B. On the element C. On the element D. In a element in the of the document E. On every block level element in the content","acceptedAnswer":{"@type":"Answer","text":"B. On the element"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"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","acceptedAnswer":{"@type":"Answer","text":"C. It will read the English words using French pronunciation rules"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"All of the following are valid ARIA landmark roles except: A. banner B. navigation C. main D. end E. search","acceptedAnswer":{"@type":"Answer","text":"D. end"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"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","acceptedAnswer":{"@type":"Answer","text":"B. Probably has too many landmarks to be optimally useful to screen reader users"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"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","acceptedAnswer":{"@type":"Answer","text":"E. Each landmark should have its own aria-label or aria-labelledby attribute"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Which of the following does NOT represent best practice, in terms of creating a structured outline of the content with headings? A. B. C. D. ","acceptedAnswer":{"@type":"Answer","text":"C. "}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"If the heading level 1 () at the beginning of the main content says \"How to hang ten on a surfboard,\" the most appropriate for the page from among the options below would be: 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","acceptedAnswer":{"@type":"Answer","text":"D. How to hang ten on a surfboard"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"Which of the following will be recognized as a valid heading by screen readers? A. B. Legal disclaimer C. The secrets beneath the ocean's surface D. Understand yourself","acceptedAnswer":{"@type":"Answer","text":"C. The secrets beneath the ocean's surface"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"True or False: WCAG 2.0 level double A (AA) requires headings to be in a valid hierarchy under all circumstances. A heading 4 () cannot directly follow a heading 2 (), for example. The next subheading under the heading 2 () MUST be a heading 3 ().","acceptedAnswer":{"@type":"Answer","text":"False"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"True or False: Screen readers will read the alt text of an image within a heading as part of the heading text.","acceptedAnswer":{"@type":"Answer","text":"True"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"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","acceptedAnswer":{"@type":"Answer","text":"E. There is no official limit"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"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.","acceptedAnswer":{"@type":"Answer","text":"B. Link text should include words like \"link\" or \"click\" so screen reader users know it is a link."}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"True or false: Links must be visually distinguishable from the surrounding non-link text","acceptedAnswer":{"@type":"Answer","text":"True"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"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.","acceptedAnswer":{"@type":"Answer","text":"False"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"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","acceptedAnswer":{"@type":"Answer","text":"E. A and B"}},{"@context":"https://schema.org/","@type":"Question","eduQuestionType":"Flashcard","text":"True or false: Links on the same page that go to the same destination should have the same text within the link.","acceptedAnswer":{"@type":"Answer","text":"True"}}],"educationalAlignment":[{"@type":"AlignmentObject","alignmentType":"educationalSubject","targetName":"Semantic Structure and Navigation"}]}
</script>
</body>
</html>