Semantics and Navigation

Questions


What do most screen readers do with the page title? (Open question)


What is the best text to use for a link?

  1. More information...
  2. The title of the destination page
  3. Click here
  4. The current article heading containing the link

Can you use HTML5 and ARIA landmarks together?

  1. Yes
  2. No

Should you use ARIA landmarks and skip links together?

  1. Yes, it is recommended
  2. No, using HTML 5 and ARIA landmarks are supplementary "skip navigation" mechanisms

What is a disadvantage of using aria label for Landmarks? (Open question)


Content within an <em> will be ignored by screenreaders

  1. True
  2. False

Content can be styled so that it is hidden for the visual user. What techniques do screen readers ignore the content?

  1. visibility:hidden, width: 0px; height: 0px;
  2. width: 0px; height: 0px;
  3. text-indent: -10000px;
  4. display: none

Which element(s) can get focus? (Select all that apply)

  1. Links
  2. Form fields
  3. Element(s) with tabindex="-1"
  4. Buttons

What elements receive browser focus by default (Select all that apply)

  1. Links
  2. Tables
  3. Elements with onclick event defined
  4. Images
  5. Form fields

What is the difference between 'programmatic focus' and 'visible focus'? (open question)


User visual focus has no effect on the programmatic focus

  1. True
  2. False

If a form field has a specific data format it must be visibly noted next to the field.

  1. True
  2. False

Users must be able to access and operate all information and function using only the keyboard.

  1. True
  2. False

Mac has default keyboard control only on textboxes and lists?

  1. True
  2. False

CSS can cause problems in the taborder.

  1. True
  2. False

What does tabindex="-1" do?

  1. Nothing
  2. Makes your element focusable
  3. Makes your element unfocusable

Is the following a recommended syntax for links to open in a new tab? (Open question)

href="http://www.deque.com" onclick="window.open(this.href); return false;"


Why shouldn't you use 'display:none' or 'visibility:hidden' on skip links? (Open question)

Deque questions


If a person types "vegetarian recipes" in a site search, which of the following is the best page title on the search result page?

  1. Search
  2. Search results
  3. Search results for "vegetarian recipes"
  4. 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.

  1. True
  2. False

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?"

  1. Autocorrect features in Tri-coil, by Bob's Brilliant Software
  2. Bob's Brilliant Software: Tri-coil - autocorrect features
  3. Features
  4. All of the above are equally good

Identifying the language of a document or part of a document is important for users of:

  1. Voice recognition software
  2. Screen readers
  3. Screen magnifiers
  4. All of the above

The correct language code for German web content is:

  1. lang="en"
  2. lang="German"
  3. lang="german"
  4. lang="deutch"
  5. lang="de"
  6. lang="d"

The correct location to identify the main language of an entire page is:

  1. On the <!doctype> element
  2. On the <html> element
  3. On the <body> element
  4. In a <meta> element in the <head> of the document
  5. On every block level element in the content

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?

  1. It will translate the text to French
  2. It will notify the user that there is a mismatch in languages
  3. It will read the English words using French pronunciation rules
  4. It will detect the language automatically and read the text with the correct pronunciation
  5. It will cause the screen reader to turn off

Which of the following is/are valid ARIA landmark role(s) (multiple answers possible)

  1. banner
  2. navigation
  3. main
  4. end
  5. search

A page with 47 landmarks:

  1. Shows a high level of dedication to accessibility best practices
  2. Probably has too many landmarks to be optimally useful to screen reader users
  3. Demonstrates the popularity of the web page
  4. Is using deprecated markup, and should be updated with more modern methods

If there are multiple navigation landmarks in the same page:

  1. Each landmark should have its own unique title attribute
  2. Screen readers will ignore all but the first one
  3. The markup is invalid: there should be only one navigation landmark per page
  4. The screen reader is likely to crash, especially older versions
  5. Each landmark should have its own aria-label or aria-labelledby attribute

Which of the following does NOT represent best practice, in terms of creating a structured outline of the content with headings?

  1. <h1> <h2> <h2> <h3> <h4> <h2>
  2. <h1> <h2> <h2> <h2> <h3> <h4>
  3. <h1> <h3> <h4> <h3> <h4> <h3>
  4. <h1> <h2>

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:

  1. How to ride a surfboard
  2. Surfing tutorial
  3. Summers in California
  4. How to hang ten on a surfboard
  5. An article describing how o hang ten on a surfboard, describing the techniques and circumstances in which it is possible to do it

Which of the following will be recognized as valid headings by screen readers? (Select all that apply)

  1. <h1></h1>
  2. <h1>The desert tortoise</h1>
  3. <h7>Legal disclaimer</h7>
  4. <div role="heading" aria-level="3">The secrets beneath the ocean's surface</div>
  5. <p class="heading level2" style="font-size: 200%; font-weight: bold">Understand yourself</p>

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

  1. True
  2. False

True or False: Screen readers will read the alt text of an image within a heading as part of the heading text.

  1. True
  2. False

What is the official character limit within a heading?

  1. 256 characters
  2. 140 characters
  3. 1024 characters
  4. It depends on the level of the heading
  5. There is no official limit

Which of the following statements are TRUE (Select all that apply)

  1. Users should be warned if a link opens a new window
  2. Link text should include words like "link" or "click" so screen reader users know it is a link
  3. Images alone should not be used as links
  4. Links with the same text should go to the same place
  5. Links must be identified by changing the background color behind the text

True or false: Links must be visually distinguishable from the surrounding non-link text

  1. True
  2. False

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.

  1. True
  2. False

The main navigation menu should:

  1. Be consistently located
  2. Be consistently ordered
  3. Be positioned horizontally
  4. Include drop-down submenus
  5. A and B
  6. All of the above

True or false: Links on the same page that go to the same destination should have the same text within the link.

  1. True
  2. False

The correct way to designate a navigation list as a navigation landmark is:

  1. Wrap the navigation list in a <nav> container or in a container marked with role="navigation"
  2. Set role="navigation" on every link in the navigation list, or wrap each link in <nav> elements
  3. There is no need to add anything to the markup. Screen readers automatically detect navigation lists and announce them to users
  4. Wrap the navigation list in a <navlist> container

True or false: Screen readers can identify the current location within a navigation menu based on the visual styles

  1. True
  2. False

A skip link should (Select all that apply):

  1. Be placed just before the main navigation menu
  2. Be placed right after the opening <body> tag
  3. Be accessible to keyboard-only users
  4. Be accessible to screen reader users

True or false: Sighted keyboard users can navigate by headings, landmarks, and other semantic features, just like blind screen reader users.

  1. True
  2. False

Which of the following methods could be used to mark the current location within a paginated view? (Select all that apply)

  1. hidden text
  2. aria-label
  3. aria-labelledby
  4. aria-describedby

True or False: Layout tables are not permitted by WCAG standards.

  1. True
  2. False

he title for a data table should be contained in what element?

  1. <title>
  2. <tabletitle>
  3. <caption>
  4. <summary>
  5. <name>
  6. The first row of the table (the columns of that row should be merged into a single cell)

The correct way to code a table cell that is a column header cell is:

  1. <td scope="col">
  2. <td scope="column">
  3. <th scope="col">
  4. <th scope="column">

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:

  1. <td scope="colgroup">
  2. <td scope="columngroup">
  3. <th scope="colgroup">
  4. <th scope="columngroup">

In complex tables, each data cell must be explicitly associated with each corresponding header cell by which method?

  1. scope + header
  2. id + header
  3. id + scope
  4. Merging table cells

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.

  1. True
  2. False

True or false: Screen readers will announce the number of items in a bulleted list if the list is marked up properly.

  1. True
  2. False

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

  1. True
  2. False

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>

  1. True
  2. False

One of the main ways to make an <iframe> accessible is to add:

  1. a title attribute
  2. an alt attribute
  3. a name attribute
  4. a <title> element
  5. tabindex="0"
  6. a <label> element

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

  1. The name attribute on the <iframe> element
  2. The title attribute on the <iframe> element
  3. The <title> element of the page within the iframe
  4. The title attribute of the page within the iframe

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

  1. 3
  2. 5
  3. 7
  4. 13

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?

  1. Hide it from screen reader users with aria-hidden="true"
  2. Hide it with display:none in the CSS
  3. add aria-describedby="JavaScript only"

Which of the following elements will most screen readers announce to users (in terms of the semantic meaning of the element itself)?

  1. q
  2. del
  3. ins
  4. mark
  5. code
  6. pre
  7. B and C
  8. D and E
  9. All of the above/li>
  10. 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?

  1. Always
  2. Never
  3. When the emphasis in the highlighting changes the meaning of the text

Screen readers announce emphasized text when it is marked with:

  1. b
  2. i
  3. em
  4. strong
  5. mark
  6. The word "Important: " (or similar) in front of the emphasized text
  7. None of the above
  8. All of the above

What will a screen reader say when it comes across code marked as follows? <p>Twin mattress <del>$300</del> <ins>$250</ins>!</p>

  1. Twin mattress $300 $250!
  2. Twin mattress deleted $300, inserted $250!
  3. Twin mattress was $300, now $250!

Which of the following are recommended ways to emphasize text accessibly (Select all that apply)?

  1. Add a graphic element with "Important" as its alt text
  2. Use all capital letters
  3. Add the word "Important: " in front of the content
  4. Increase the font size

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.

  1. True
  2. False

Markup is considered well-formed when: (Select all that apply)

  1. Elements are properly nested
  2. Content has been spell-checked
  3. Forms have been validated
  4. All id attributes are unique
  5. Elements do not contain duplicate attributes

Which statement(s) is/are TRUE about deprecated HTML elements or attributes? (Select all that apply)

  1. They have been replaced by newer constructs such as CSS
  2. They are typically structural in nature
  3. They may cause users to be unable to override the deprecated items with their own style sheets
  4. They are disallowed by WCAG 2.0 standards
  5. They are outdated or obsolete

Which of the following HTML elements are deprecated in HTML5? (Select all that apply)

  1. <applet>
  2. <span>
  3. <center>
  4. <frame>
  5. <font>
  6. <div>

Responsive Design and Zoom

Questions


What happens when you use browser zoom to zoom in on a responsive website?

  1. The website keeps scaling up
  2. Nothing, the website stays the same to keep the design consistent
  3. The website scales up and switches to the table/mobile version
  4. The font size increases

What MUST be prevented when building a mobile site? (select all that apply)

  1. Resizable text
  2. Horizontal scrolling
  3. user-scalable="no" in the meta tags
  4. Pinch-to-zoom support

Which of the following go hand-in-hand? (select two)

  1. Responsive design
  2. Gestures
  3. Video transcripts
  4. Landmarks
  5. Low vision design
  6. Layout tables

Which viewport units causes a failure in WCAG when used for text scaling, and why? (Open question)


Which size should you use for the most consistent measurements across OSses and devices?

  1. sp
  2. dp
  3. pt
  4. CSS Pixels

In what ways does responsive design make web apps more usable? (Open question)


What level of text magnification SHOULD be supported?

  1. 150%
  2. 200%
  3. 300%
  4. 400%

What should be avoided to properly support zooming? (select all that apply)

  1. Floating objects
  2. Horizontal scrolling/panning
  3. Fixed widths
  4. Minimal heights
  5. Font sizes

Why is it a best practice to use big sized graphics while they use more bandthwidth? (Open question)


Deque Questions


None documented

Dynamic Updates

Questions


None documented

Deque questions


Which of the following methods for notifying users of new content does not require JavaScript?

  1. Moving focus within a page or to another element such as a dialog
  2. Loading or reloading a page
  3. ARIA live announcements
  4. All methods require JavaScript

When moving focus to an element that is not focusable, it is important to include which one of the following attributes on the container:

  1. tabindex="-1"
  2. tabindex="0"
  3. tabindex="1"
  4. aria-focus="true"

Which of the following is NOT a consideration when moving focus to new content:

  1. The container on which focus is set must not be empty.
  2. Focus should not move unexpectedly.
  3. The element that triggers the focus change must include aria-haspopup="true".
  4. Sending focus to AJAX content must be the last event.

True or false: ARIA live announcements are an effective way to notify users of new content without moving the user's focus.

  1. True
  2. False

Valid aria-live values include: (select all that apply)

  1. aria-live="assertive"
  2. aria-live="rude"
  3. aria-live="polite"
  4. aria-live="true"

True or false: The ARIA live region must be present on the page and must be empty before inserting the content to be announced.

  1. True
  2. False

If one of your pages employs a time-limit, which of the following are recommended?

  1. Ensure the time limit is greater than four hours
  2. Provide a warning when the time limit is about to expire
  3. Provide an option to extend the session
  4. A and B
  5. B and C

True or false: When a user allows a session to time out, it is not necessary to save data because the user would have extended the session if they intended to continue.

  1. True
  2. False

True or false: ARIA live announcements should be used to announce the the time left on a countdown timer every time the visible time remaining changes.

  1. True
  2. False

Accessibility problems associated with automatically refreshing or reloading a page include:

  1. Users may not have time to read content before it disappears
  2. Users may lose their place on the page
  3. Users may have a seizure
  4. A and B
  5. All of the above

True or false: If refreshing page content is important for a web site, it is recommended that users be notified that new content is available using a dialog or an ARIA alert message depending on the urgency of the update.

  1. True
  2. False

Regarding portions of content in a page that load more slowly than the main page itself, which of the following statements are true? (select all that apply)

  1. This technique is often referred to as "lazy loading."
  2. Loading the main page content and AJAX content at a different rates detracts from the overall user experience.
  3. Placeholders (graphic or textual) should be used to inform users when the content is still being loaded.
  4. Content should be automatically announced by screen readers as it is loaded.

True or false: Infinite scrolling may prevent a user from accessing information that comes after the infinite scrolling area.

  1. True
  2. False

Infinite scrolling can be implemented accessibly if it: (select all that apply)

  1. Has a screen-reader only method for skipping past the scrolling content.
  2. Is the last feature on the page, i.e., no content follows it.
  3. Can be activated (i.e., turned on) by the user.
  4. Infinite scrolling can not be implemented accessibly.

True or false: Interstitial views are intended to be temporary and therefore it is not required to make screen reader users aware of their presence.

  1. True
  2. False

Regarding single-page applications, which of the following statements is FALSE?

  1. Screen reader users must be made aware of new content loaded on the page.
  2. Focus management is often an essential part of making a single-page application accessible.
  3. The <title> of a single-page application should not be updated when the user has selected a link that causes an AJAX event.
  4. User must be able to use the browser's back and forward functionality as would be expected in a non-single-page application.

WAI-ARIA

Questions


None documented

Deque questions


True or false: ARIA is a programming language that communicates information like names, roles, and values to screen readers.

  1. True
  2. False

Which of the following ARIA attributes can be used to communicate the names of elements? (Select all that apply)

  1. aria-labelledby
  2. aria-describedby
  3. role="name"
  4. aria-label
  5. alt

aria-label and aria-labelledby will work best on which kinds of elements listed below? (Select all that apply)

  1. Paragraphs (<p>)
  2. Links (<a>)
  3. Text Inputs (<input type="text">)
  4. Containers (<div>)

The purpose of ARIA roles is to:

  1. Provide the name of the element.
  2. Define what the element is.
  3. Identify the state of the element.
  4. None of the above.

hich type of ARIA roles are used to convey the layout of a web page?

  1. Landmark roles
  2. Abstract roles
  3. Pseudo HTML roles
  4. Widget roles

True or false: It is best to use actual HTML elements instead Pseudo HTML roles so developers don't always have to create functionality for elements by using JavaScript.

  1. True
  2. False

True or false: Assigning role="application" to a region disables most screen reader keystrokes within the region to allow developers to create custom keystrokes.

  1. True
  2. False

Which role should be assigned within an application region to give screen readers access to regular text in the region?

  1. Presentation role
  2. Main role
  3. Note role
  4. Document role

ARIA attributes like aria-expanded, aria-checked, and aria-busy convey what information to screen reader users?

  1. The names of elements.
  2. The states of elements.
  3. The roles of elements.
  4. None of the above.

Which ARIA attribute is used to provide additional information about an element?

  1. aria-labelledby
  2. aria-describedby
  3. role="description"
  4. aria-label

True or false: The difference between aria-live="assertive" and aria-live="polite" is that aria-live="assertive" waits for a screen reader to finish its current statement before announcing new content.

  1. True
  2. False

iOS

Questions


None documented

Deque Questions


None documented

Android

Questions


None documented

Deque Questions


None documented