Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Web Accessibility Exam Prep > Semantic Structure > Flashcards

Semantic Structure Flashcards

1
Q

True or False: semantic elements include
- <h1>
- <p>
- <a></a>

A

false

paragraphs have no semantic meaning

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What are the three main components of semantic elements?

A
  1. Name
  2. Role
  3. Value
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

How should you handle a phrase that’s in a different language from the main language for the page?

A

add the lang attribute to any html tag

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What are the most common landmarks for web pages?

A

<header>, <nav>, <main>, and <footer>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What are some characteristics of good link text?

A
  • adequately convey the purpose or destination of the link
  • make sense when taken out of context
  • be unique for the page
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

True or False: Transcripts should be programmatically associated with a video using aria-describedby.

A

False

There’s no native way to associate transcripts and videos in HTML. Using aria-describedby would cause the screen reader to read out the entire transcript when the video is focused on with no way to pause.

Instead, transcripts (or a link to the transcript) should be placed immediately after the video.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

When should the page title change?

A

Any time the web address changes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are some characteristics of a good page title?

A
  • must be accurate and informative
  • if page change is result of user action (such as search), it should describe the result
  • should be concise
  • should be unique
  • unique information should come first in title
  • should match (or be similar to) the first heading in the main content
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Is <title>Search Results</title> a good example?

A

No, it should include the text that was searched:
<title>"Warranty" - Search Results</title>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

True or False: it’s a good idea to list the brand first in the page title.

A

False

Web sites that put the brand first in the title on every page make it hard to distinguish between pages when looking at them in a set of tabs.

Screen reader users also find it difficult, because they must listen to the same information at the beginning of each page title over and over again.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
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”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What happens if you don’t specify a primary language for the page in the <html> tag?

A

a screen reader will read the document in the user’s default language

This is mostly a problem for multi-lingual screen reader users. They may hear a French page read using English pronunciation, for instance.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

How should changes of language within the document be handled?

A

the lang attribute should be applied to any block or inline elements that use a language different from the primary page language

<span lang="es">

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

True or False: Modal headings should start with h2 since there is already an h1 on the main page.

A

False

Modals are one exception to the ‘only one h1 per page’ rule since they are effectively their own page.

Another exception would be an index of blog pages where each blog title is marked up as an h1. Using an h2 on the index page but an h1 on the main blog page would be better for accessibility, but may not be worth the code maintainability trade-off.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

How should you differentiate different instances of the same landmark?

A

Use aria-label or aria-labeledby

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

True or False: it’s okay to have multiple instances of the “contentinfo” (footer) landmark

A

False

The ARIA specification states that the landmarks role=”banner”, role=”main”, and role=”contentinfo” are meant to be used only once per page.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
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

Strongly recommended but not required.

Headings SHOULD NOT skip hierarchical levels, but there are some situations in which it is valid to skip a heading level.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

How can you semantically designate something as a link?

A
  1. Use a native HTML ‘a’ tag (best option)
  2. Use aria ‘role=”link” tabindex=”0”’ and javascript to allow click or enter to activate (needs both event handlers)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What are four ways to associate a name with a link?

A
  1. aria-labelledby
  2. aria-label
  3. Text contained between the opening <a> and closing </a> elements (including alt text on images) – Best option
  4. title attribute (note that this is considered a last resort method for screen readers to find something; it should not be considered a primary technique for giving names to links)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

True or False: It’s important that all links make sense out of context.

A

True

Screen reader users often listen to links out of context, either by navigating through the links, or by using a keyboard command to list all of the links on the page.

22
Q

Should you include the word “link” in the link text?

A

No

Screen readers will say “link” and then read the link text, so there is no need to include the word “link” in the link text

23
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.

Screen readers will say “link” and then read the link text, so there is no need to include the word “link” in the link text

24
Q

True or False: Every set of links should be marked as a navigation landmark using either the ‘<nav>’ element or a container marked with role=”navigation”.

A

False

The landmark should be reserved for the most important navigation regions on the page, so that the list of landmarks does not get too cluttered.

25
Q

How should you mark the active page in a navigation list?

A. Use CSS to style the active link differently
B. All links should be styled consistently whether they’re active or not
C. Use aria-current="page" to designate the active page
D. Both A & C

A

D

Use CSS to style the active link differently for sighted users

Use aria-current="page" to designate the active page for screen readers

Both are necessary

26
Q

What do you need for a fully compliant skip nav link?

A
  • should be the first focusable element on the page
  • should link users to the main content (may need to add tabindex="-1" to <main> to fix keyboard focus)
  • must be visible on keyboard focus for sighted users
27
Q

When should you use tabindex="0"?

A

When you need a not natively focusable element to receive keyboard focus. The element will be placed in the default navigation order based on the DOM order.

28
Q

What does tabindex="-1" do?

A

It removes elements from the default navigation flow.

It should be used if you need to make a not natively focusable element able to receive programmatic focus but don’t want that element to be added to the default tab order.

29
Q

What are the allowed tabindex values?

A

0 or -1

Positive tabindex values will pull the element to the top of the tab order which is confusing for sighted keyboard users.

30
Q

What rules must be followed if your web app has single-key shortcuts?

A

shortcuts must be able to be turned off or remapped by the user
or
shortcuts are only active when the relevant user interface component is in focus

31
Q

List three ways to programmatically link a table to its name.

A
  1. <caption>
  2. aria-label
  3. aria-labelledby
32
Q

What happens if you don’t use <th> tags for table headers?

A

screen readers may assume the table is just for visual formatting and will not read the header information as they should

33
Q

What does the scope attribute on table headers do?

A

The scope attribute makes an explicit association between the table header cell and its corresponding data cells. For simple associations, the options are scope=”col” for column headers, and scope=”row” for row headers.

34
Q

How can you make nested data tables accessible?

A

You can’t, really.

Nested data tables break the accessibility of the data presentation as a whole, making it impossible to associate the data and header cells appropriately with any of the standard methods. The scope method will not work properly, and neither will the id + headers method.

35
Q

How can you let screen readers know that a table is being used only for layout purposes?

A

Add role="presentation" to the <table> element and DO NOT use <caption>, <th>, scope, or headers.

This generally isn’t recommended (use CSS for layout), but it isn’t a huge problem for accessibility.

36
Q

What are the three types of lists in HTML?

A
  1. ordered lists
  2. unordered lists
  3. definition/description lists
37
Q

True or false: Screen readers do not read nested lists (lists within lists) properly.

A

False

Nested lists are okay, just make sure to use the appropriate markup. For example, the entire sub-list would be wrapped within both list tags and item tags, since it is both a list within itself and an item within a larger list.

38
Q

True or False: screen readers treat content in an iframe as a separate page.

A

False

Screen readers treat an <iframe> almost as if it is part of the same document that contains it. Users can access all of the content within an <iframe> using the same keystrokes that they would use to access the content if it were all in the same document.

39
Q

How should you hide an iframe that doesn’t contain user-facing content (decorative or javascript, for instance)?

A

use aria-hidden="true"

40
Q

What does the JAWS screen reader read with regard to the name/label of an <iframe>?

A

The <title> element of the page within the iframe.</title>

Most screen readers read the title attribute on the <iframe> element.

41
Q

True or False: You can use <em> or <strong> to convey emphasis to screen readers.

A

False

all major screen readers ignore both the ‘<em>’ and the ‘<strong>’ elements</strong></em>

42
Q

True or False: You can use <blockquote> to designate long quotes to screen readers.

A

True

most screen readers announce the blockquote element

43
Q

True or False: You can use <code> to separate technical terms from regular prose for screen readers.

A

False

Screen readers don’t support the <code> element.</code>

44
Q

True or False: You can use<del> to designate strikethrough text for screen readers.

A

False

Screen readers don’t support the <del> element.</del>

45
Q

How can you convey emphasis to screen reader users?

A
  1. You can add words like “Important” or “Warning” to your text to make sure that the content is emphasized.
  2. If emphasis is already conveyed visually, you can visually hide the added emphasis words using CSS.
  3. You can add an image, usually an icon like an exclamation mark, question mark, warning symbol, etc. with alt text that conveys emphasis.
46
Q

How can you designate strikethrough text for screen reader users?

A

Use visually hidden text to supplement what’s shown.

<p>Price reduced! <del> <span class="visually-hidden">Was</span> $100 </del> <ins> <span class="visually-hidden">now</span> $75! </ins> </p>

47
Q

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

A

J. None of the above

48
Q

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

A

C. When the emphasis in the highlighting changes the meaning of the text

49
Q

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

A

F. The word “Important: “ (or similar) in front of the emphasized text

50
Q

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

A. Twin mattress $300 $250!

51
Q

What are some best practices for page navigation?

A
  • use a <nav> landmark
  • use a list (and sublists for submenus)
  • use meaningful text
  • stay consistent between pages
52
Q

True or False: Screen readers can read all caps.

A

True

will often be interpreted as acronyms

Web Accessibility Exam Prep (9 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions