Visual Design and Colors Flashcards
Which of the following groups of people are affected when only color is used to communicate information on a web page? (Select all that apply)
A. People who have low vision B. People who are blind C. People who are colorblind D. All of the above groups are affected E. B and C
D. All the above
True or false: Using distinct colors only for hover and focus on links are enough to distinguish links from normal text.
False
From an accessibility stance, why should standard (real) text and native UI components be used instead of images of text and UI components?
The use of standard text and native components allows users to customize text and colors.
True or false: Providing alternative text for an image that communicates information using color alone is sufficient in communicating that information to users.
False
What method can be used to distinguish UI components from surrounding content?
A. Providing an outline around the UI component
B. Using a different color for the UI component that has high contrast against the surrounding content
C. Changing the background of the UI component
D. Any of the above methods can be used
D. Any of the methods
To aid people with low vision or color deficiencies, the contrast between text and its background must be at least:
A. 3 to 1 for small text and 2 to 1 for large text
B. 5 to 1 for small text and 6.5 to 1 for large text
C. 4.5 to 1 for small text and 3 to 1 for large text
D. 12 to 1 for small text and 8 to 1 for large text
C
True or false: When high contrast is activated on an operating system, a user cannot choose to have the high contrast theme override the styling of a web page.
False
The contrast ratio for UI component boundaries smaller than 3 px by 3 px must be at least:
A. 3 to 1
B. 2.5 to 1
C. 5 to 1
D. 4.5 to 1
D 4.5 to 1
Enhancing the visual focus indicator benefits which group of users? (Select all that apply)
A. Users who are colorblind
B. Users who have low vision
C. Sighted keyboard users
D. All of the above groups are affected
D All the Above
The contrast ratio for visual focus indicators must be at least:
A. 3 to 1
B. 4.5 to 1
C. 4 to 1
D. 3.5 to 1
A. 3 to 1
What is the purpose of “visual white space” in web design?
To visually separate different elements of the design
True or False: A text label for a form input should never be placed adjacent to that text input.
False
If the text label for an icon is placed visually too far away from its text label, which category of users with a disability will be most affected?
A. Blind users
B. Deaf users
C. Users with low vision
D. Users with colorblindness
C. Users with low vision
What is the recommended maximum number of main focus areas on a web page?
One
The order that screen readers navigate through page content is determined by the: (Select all that apply)
A. Visual order of the elements on the screen: left-to-right, top-to-bottom
B. CSS
C. Document Object Model (DOM)
D. All of the above
C. Document Object Model (DOM)
True or false: For screen reader users, the reading order and focus order are always the same thing.
False
Which of the following can impact the reading order and focus order of page content? (Select all that apply)
A. JavaScript DOM manipulation B. Turning on a screen reader C. Magnification D. CSS positioning techniques E. A and D F. B and C G. B and D
E. A and D
True or false: The best way to fix focus order problems is to use tabindex values greater than 1.
False
When the order of content in a webpage’s source code does not match the visual presentation of the content, the following users may find it hard to use the page:
A. Blind users and mouse users
B. Deaf users and deafblind users
C. Keyboard-only users and blind users
D. Source code does not have to match visual presentation.
C. Keyboard-only users and blind users
Which categories of fonts are acceptable general-purpose fonts in terms of readability?
A. Bold fonts such as Impact, and sans-serif fonts such as Arial
B. Sans-serif fonts such as Arial and serif fonts such as Times New Roman
C. Fixed-width fonts such as Courier and sans-serif fonts such as Arial
D. Specialty fonts such as Papyrus and serif fonts such as Times New Roman
B. Sans-serif fonts such as Arial and serif fonts such as Times New Roman
True or false: The line spacing within a paragraph of text should be at least 2.0.
False
True or false: The spacing between paragraphs should be at least 1.5 times the line spacing.
True
To help people who have trouble keeping their place and following the flow of text when columns of text are too wide, you can do which of the following? (Select all that apply)
A. Use CSS to set a maximum column width of approximately 80 characters.
B. Write in short, simple sentences.
C. Ensure the text on your website reflows as the viewport is narrowed so users can determine the column width that works for them.
D. A and C
E. All of the above
D. A and C
True or false: Paragraph text should be full justified because the neat edges are less distracting for people with reading disorders.
False
Why is using real HTML text instead of text in an image helpful? Give three reasons.
- People who need to customize text for readability can apply their own CSS sheets to HTML text.
- People who have low vision can better zoom real text, while images lose crispness.
- HTML text can reflow as the viewport changes, while text in images cannot.
Which of the following text formats allows user customizability of things like color, font, size, etc.?
Text written in an HTML paragraph
True or False: CSS-generated content is universally supported by screen readers, and is recommended for use.
False
Which two CSS methods will effectively hide content such as inactive dialogs from both screen reader users and sighted users?
- display:none
2. visibility:hidden
True or false: An inactive dialog box that is not visible to sighted users must be hidden from blind users to give them an equivalent experience.
True
The touch target size of actionable elements should be what dimensions?
At least 44 pixels by 44 pixels, with at least 6 pixels of inactive space between adjacent actionable items
A text alternative for informative CSS-generated content MUST be provided, AND the CSS-generated text SHOULD be set to ….
aria-hidden=”true”
When additional content is triggered on pointer hover or on keyboard focus, that additional content MUST be …
dismissible, hoverable, and persistent.
The number of characters or glyphs per line in any section or column of text SHOULD NOT exceed what amount?
80 characters (or 40 characters in Chinese, Japanese, or Korean)
Paragraph spacing SHOULD be at least how many times larger than the line spacing.
1.5 times larger
The visual state of an active user interface component MUST have a sufficient contrast of ….
at least 3 to 1 with the adjacent background.
Small text (under 18 point regular font or 14 point bold font) SHOULD have a contrast ratio of …
at least 7 to 1 with the background.
Large text and images of large text (at or over 18 point or 14 point bold) MUST have a contrast ratio of ….
at least 3 to 1 with the background.
Any information conveyed by color MUST be accompanied by …
a visible alternative (text, image, etc.) that does not depend on color for meaning.
Color alone MUST NOT be used to distinguish links from surrounding text unless what two conditions are met?
- the color contrast between the link and the surrounding text is at least 3:1
- an additional differentiation (e.g. underline, outline, etc.) is provided when the link receives focus.
Text SHOULD or SHOULD NOT be fully justified?
SHOULD NOT be justified
CSS-generated content SHOULD or SHOULD NOT be avoided?
SHOULD be avoided
Visually hidden and inactive content MUST be hidden from screen reader users until what condition is met?
that content is made visible and active for sighted users.
Whenever visual boundaries are used to distinguish controls, UI control boundaries and adjacent areas MUST have ….
a contrast of at least 3 to 1 to distinguish the UI control from the adjacent areas.
Any information conveyed by color SHOULD OR MUST be accompanied by a programmatically-discernible text alternative?
MUST
The layout SHOULD OR MUST have only one main visual focus?
SHOULD
tabindex of positive values SHOULD or SHOULD NOT be used?
SHOULD NOT
The navigation order of focusable elements MUST or SHOULD be logical and intuitive?
MUST
Fonts MUST or SHOULD be user-customizable?
SHOULD
Labels MUST or SHOULD be visually adjacent to their controls?
SHOULD
A text alternative for informative CSS-generated content MUST or SHOULD be provided?
MUST
