Accessible Behavior Flashcards
What do you need to consider when allowing content to reflow according to WCAG 2.1 -1.4.10
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
Vertical scrolling content at a width equivalent to 320 CSS pixels;
Horizontal scrolling content at a height equivalent to 256 CSS pixels.
https://knowbility.org/blog/2018/wcag21-1410reflow/
What should you consider when user zoom in up to 200%?
a browser can also zoom in on text only, leaving the layout the same. In that case the user should be able to zoom in 200% without the loss of content or functionality.
WCAG SC 1.4.4
https://www.a11yproject.com/posts/resize-text/
https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html
What should you consider when using character key shortcuts?
According to Success Criterion 2.1.4 -
If a keyboard shortcut is implemented in content using only a letter (including upper- and lower-case letters), punctuation, number, or symbol, then at least one of the following is true:
Turn off: A mechanism is available to turn the shortcut off.
Remap: A mechanism is available to remap the shortcut to include one or more non-printable keyboard keys (e.g. Ctrl, Alt).
Active only on focus: The keyboard shortcut for a user interface component is only active when that component has focus.
Should you surprise the user with unexpected change on focus or hover?
No
On focus or hover
When any user interface component receives focus, it does not initiate a change of context.
On input
When any user interface component receives focus, it does not initiate a change of context.
https://www.a11y-collective.com/courses/accessible-code/lessons/behaviour/topics/unexpected-changes/
What is the expected behavior of a link?
- A link gets keyboard focus and is activated by pressing enter with a keyboard
- A link can be targeted by its link text by voice recognition software
- A screen reader can list all the links on a web page, to make navigation for screen reader users easy.
https://www.a11y-collective.com/courses/accessible-code/lessons/behaviour/topics/difference-between-a-link-and-a-button/
What is the expected behavior of a button?
- A button gets keyboard focus and is activated by pressing enter or the spacebar with a keyboard
- A button can be targeted by its button text by voice recognition software
- A screen reader can list all the buttons on a web page, to make navigation for screen reader users easy.
https://www.a11y-collective.com/courses/accessible-code/lessons/behaviour/topics/difference-between-a-link-and-a-button/
Setting the orientation of a web page fixed to landscape could lead to accessibility issues.
A. True
B. False
A. True
Creating a responsive website is also useful for visitors who like to zoom in.
A. True
B. False
A. True
Text resizing is the same as zooming in.
A. True
B. False
B. False
A user should be able to:
A. Zoom in up to 400% and enlarge text only up to 200%
B. Zoom in up to 400% and enlarge text only up to 400%
C. Zoom in up to 200% and enlarge text only up to 400%
D. Zoom in up to 200% and enlarge text only up to 200%
A. Zoom in up to 400% and enlarge text only up to 200%
Creating one key shortcuts:
A. Can have a negative effect on voice recognition interaction
B. Can have a negative effect on screen reader interaction
C. All of the above
C. All of the above
Don’t initiate a change of context on:
A. Hover, focus or input
B. Hover, focus or input, unless the user has been warned
B. Hover, focus or input, unless the user has been warned
What would a good alternative be for zooming in on a mobile, for a user with a stylus?
A. Tell them to use 2 fingers to zoom in and out
B. Add + and – buttons to zoom in and out
B. Add + and – buttons to zoom in and out
What are the accessibility issues with the following code? Check all that apply.
<a></a>
A. The link doesn’t get keyboard focus
B. The link does not have an accessible name
C. This should be a button, because the element invokes an action
D. There is no indication, for the screen reader user, whether the menu is open or closed
E. “data-title” is not allowed
A. The link doesn’t get keyboard focus
B. The link does not have an accessible name
C. This should be a button, because the element invokes an action
D. There is no indication, for the screen reader user, whether the menu is open or closed
Why do you need to be careful with using order in CSS flexbox?
If you reorder things visually using grid layout, this will not change how the items are ordered if the content is being read out by a screen reader, or other text to speech user agent. In addition, the reordering will not change tab order. This means that someone navigating using the keyboard could be tabbing through links on your site and suddenly find themselves jumping from the top to the bottom of the document due to a reordered item being next in line.
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility
- https://css-tricks.com/grid-content-re-ordering-and-accessibility/
- https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html
How should the keyboard focus behave inside a modal?
How should the keyboard focus behave inside a modal?
- The user activates the open-the-modal button.
- The focus is put on the close button.
- The user can tab around the modal without dropping out of it.
- The user can close the modal with the close button and with the Escape key.
- The focus returns on the open-the-modal button.
https://www.a11y-collective.com/courses/accessible-code/lessons/focus-management/topics/modals/
https://www.a11y-collective.com/courses/accessible-code/lessons/focus-management/topics/modals/
https://yoast.com/developer-blog/the-a11y-monthly-making-modals-accessible/
Visible focus means: a keyboard user must be able to see where the keyboard focus is.
A. True
B. False
A. True
Predictable focus means: a keyboard user must be able to predict where the next keyboard focus will be.
A. True
B. False
A. True
If you don’t like the outline of an element that gets focus you should:
A. Add the CSS outline: 0 to the stylesheet
B. Change the outline to a more visually appealing style with CSS
C. Learn to live with it, the native browser outline is always the best option
B. Change the outline to a more visually appealing style with CSS
What is important when including a form on a webpage?
A. The first form input should get the keyboard focus, using tabindex=”1”
B. Each form field should have a tab index, to make sure users fill out the form in the right way
C. The tab order of all the focusable elements in the DOM should be the same as the visual order. Positive tab indexes on form fields are not allowed.
C. The tab order of all the focusable elements in the DOM should be the same as the visual order. Positive tab indexes on form fields are not allowed.
After an AJAX form submit, the keyboard focus should be put on:
A. The top of the error or success message, just above the form
B. The top of the page
A. The top of the error or success message, just above the form
After the user closes a modal, the keyboard focus should be put on:
A. The button that opened the modal
B. The top of the page
A. The button that opened the modal
What do you need to consider with bypass blocks (skip links)?
- A skip link is an internal link
- The link should be the first focusable element on the page
- The link can be, but doesn’t have to be, visible all the time for all users
- If the link is hidden from view at first, it should be visible when the keyboard focus moves to the link
- If the link is clicked, it should move focus to the link target, if you support older browsers (like Internet Explorer), or just want to make sure it always works: add a tabindex=”-1” to make the link target focusable.
https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1#bypass-blocks
https://www.a11y-collective.com/courses/accessible-code/lessons/navigation-2/topics/bypass-blocks/
A good page <title> for a search result page is:</title>
A. Search results – My site
B. You searched for Drupal
C. 32 search results for Drupal, page 1 of 2 – My site
D. 32 search results for Drupal, read them in the list below just after the H2 heading called Results, this is the first page of 2 in total – My Site
C. 32 search results for Drupal, page 1 of 2 – My site
A skip link (check all that apply):
A. Is useful for keyboard users to skip content that is repeated on every page, for example the menu
B. Must become visible on keyboard focus
C. Is not necessary when the heading and landmark structure are semantically correct
D. Must be the first focusable element on a webpage
A. Is useful for keyboard users to skip content that is repeated on every page, for example the menu
B. Must become visible on keyboard focus
D. Must be the first focusable element on a webpage
An H1 heading (check all that apply):
A. Describes what the page is about
B. Can be used multiple times
C. Is preferably placed just above the main content
A. Describes what the page is about
C. Is preferably placed just above the main content
Multiple <nav>elements can be set apart by giving them:
A. An aria-label, for example <nav aria-label="sitemap">
B. An aria-label, with the description of the role. For example <nav aria-label="sitemap navigation">
C. A title, for example <nav title="sitemap">
A. An aria-label, for example <nav aria-label="sitemap">
For a table, which of the following is true:
A. A caption is the name of the table, a summary explains how to use that table
B. A summary is the name of the table, a caption explains how to use that table
A. A caption is the name of the table, a summary explains how to use that table
Screen readers are able to announce the correlation between header cells <th> and data cells </td>.
A. True
B. False
A. True
