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.
| `, `scope`, or `headers`.
This generally isn't recommended (use CSS for layout), but it isn't a huge problem for accessibility.
36
What are the three types of lists in HTML?
1. ordered lists
2. unordered lists
3. definition/description lists
37
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.
38
True or False: screen readers treat content in an iframe as a separate page.
False
Screen readers treat an |
|---|