Semantic Structure Flashcards
True or False: semantic elements include
- <h1>
- <p>
- <a></a>
false
paragraphs have no semantic meaning
What are the three main components of semantic elements?
- Name
- Role
- Value
How should you handle a phrase that’s in a different language from the main language for the page?
add the lang attribute to any html tag
What are the most common landmarks for web pages?
<header>, <nav>, <main>, and <footer>
What are some characteristics of good link text?
- adequately convey the purpose or destination of the link
- make sense when taken out of context
- be unique for the page
True or False: Transcripts should be programmatically associated with a video using aria-describedby.
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.
When should the page title change?
Any time the web address changes
What are some characteristics of a good page title?
- 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
Is <title>Search Results</title> a good example?
No, it should include the text that was searched:<title>"Warranty" - Search Results</title>
True or False: it’s a good idea to list the brand first in the page title.
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.
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”
What happens if you don’t specify a primary language for the page in the <html> tag?
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 should changes of language within the document be handled?
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">
True or False: Modal headings should start with h2 since there is already an h1 on the main page.
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 should you differentiate different instances of the same landmark?
Use aria-label or aria-labeledby
True or False: it’s okay to have multiple instances of the “contentinfo” (footer) landmark
False
The ARIA specification states that the landmarks role=”banner”, role=”main”, and role=”contentinfo” are meant to be used only once per page.
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>).
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.
True or False: Screen readers will read the alt text of an image within a heading as part of the heading text.
True
How can you semantically designate something as a link?
- Use a native HTML ‘a’ tag (best option)
- Use aria ‘role=”link” tabindex=”0”’ and javascript to allow click or enter to activate (needs both event handlers)
What are four ways to associate a name with a link?
- aria-labelledby
- aria-label
- Text contained between the opening <a> and closing </a> elements (including alt text on images) – Best option
- 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)
True or False: It’s important that all links make sense out of context.
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.
Should you include the word “link” in the link text?
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
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.
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
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”.
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.
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
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
What do you need for a fully compliant skip nav link?
- 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
When should you use tabindex="0"?
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.
What does tabindex="-1" do?
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.
What are the allowed tabindex values?
0 or -1
Positive tabindex values will pull the element to the top of the tab order which is confusing for sighted keyboard users.
What rules must be followed if your web app has single-key shortcuts?
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
List three ways to programmatically link a table to its name.
<caption>aria-labelaria-labelledby
What happens if you don’t use <th> tags for table headers?
screen readers may assume the table is just for visual formatting and will not read the header information as they should
What does the scope attribute on table headers do?
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.
How can you make nested data tables accessible?
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.
How can you let screen readers know that a table is being used only for layout purposes?
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.
What are the three types of lists in HTML?
- ordered lists
- unordered lists
- definition/description lists
True or false: Screen readers do not read nested lists (lists within lists) properly.
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.
True or False: screen readers treat content in an iframe as a separate page.
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.
How should you hide an iframe that doesn’t contain user-facing content (decorative or javascript, for instance)?
use aria-hidden="true"
What does the JAWS screen reader read with regard to the name/label of an <iframe>?
The <title> element of the page within the iframe.</title>
Most screen readers read the title attribute on the <iframe> element.
True or False: You can use <em> or <strong> to convey emphasis to screen readers.
False
all major screen readers ignore both the ‘<em>’ and the ‘<strong>’ elements</strong></em>
True or False: You can use <blockquote> to designate long quotes to screen readers.
True
most screen readers announce the blockquote element
True or False: You can use <code> to separate technical terms from regular prose for screen readers.
False
Screen readers don’t support the <code> element.</code>
True or False: You can use<del> to designate strikethrough text for screen readers.
False
Screen readers don’t support the <del> element.</del>
How can you convey emphasis to screen reader users?
- You can add words like “Important” or “Warning” to your text to make sure that the content is emphasized.
- If emphasis is already conveyed visually, you can visually hide the added emphasis words using CSS.
- You can add an image, usually an icon like an exclamation mark, question mark, warning symbol, etc. with alt text that conveys emphasis.
How can you designate strikethrough text for screen reader users?
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>
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!
What are some best practices for page navigation?
- use a
<nav>landmark - use a list (and sublists for submenus)
- use meaningful text
- stay consistent between pages
True or False: Screen readers can read all caps.
True
will often be interpreted as acronyms
