Visual Design and Colors Flashcards

1
Q

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
A

D. All of the above groups are affected

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Using distinct colors only for hover and focus on links are enough to distinguish links from normal text.

A. True
B. False

A

B. False

Color alone MUST NOT be used to distinguish links from surrounding text unless the color contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g. underline, outline, etc.) is provided when the link is hovered or receives focus.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

From an accessibility stance, why should standard (real) text and native UI components be used instead of images of text and UI components?

A. Standard text and native components give web designers more options to style the look of a web page.
B. As long as contrast ratio requirements are met, images of text and native components can and should be used.
C. The use of standard text and native components allows users to customize text and colors.
D. As long as alternative text is provided, images of text and native components can and should be used.

A

C. The use of standard text and native components allows users to customize text and colors.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Providing alternative text for an image that communicates information using color alone is sufficient in communicating that information to users.
A. True
B. False

A

B. False

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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

A

D. Any of the above methods can be used

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

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

A

C. 4.5 to 1 for small text and 3 to 1 for large text

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

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.

A. True
B. False

A

B. False
In Windows, there are four preset high contrast themes. All of the themes can be customized by users based on their preferences.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

The recommended contrast ratio for UI component boundaries smaller than 3 px by 3 px is:

A. 3 to 1
B. 2.5 to 1
C. 5 to 1
D. 4.5 to 1

A

D. 4.5 to 1
• The contrast of all small visual focus indicators
• (smaller than 3px by 3px) against the background SHOULD be at least 4.5 to 1.
• The contrast of all large visual focus indicators (at least 3px by 3px) against the background SHOULD be at least 3 to 1.
• The contrast of UI control boundaries compared to adjacent areas SHOULD be sufficient (3 to 1 for UI control boundaries measuring at least 3px by 3px, and 4.5 to 1 for all other UI controls) to distinguish the UI control from the adjacent areas.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

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

A

D. All of the above groups are affected

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

The recommended contrast ratio for small visual focus indicators is:

A. 3 to 1
B. 4.5 to 1
C. 4 to 1
D. 3.5 to 1

A

B. 4.5 to 1

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is the purpose of “visual white space” in web design?

A. To ensure sufficient color contrast
B. To allow user CSS customization
C. To visually separate different elements of the design

A

C. To visually separate different elements of the design

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

A text label for a form input should never be placed adjacent to that text input.

A. True
B. False

A

B. False

Labels SHOULD be visually adjacent to their controls.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

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

A

C. Users with low vision

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is the recommended maximum number of main focus areas on a web page?

A. One
B. Two
C. Three
D. Any number is acceptable as long as they are designed well

A

A. One

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

The order that screen readers navigate through page content is determined by the:

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

A

C. Document Object Model (DOM)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

For screen reader users, the reading order and focus order are always the same thing.

A. True
B. False

A

B. False

17
Q

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
A

E. A and D

18
Q

The best way to fix focus order problems is to use tabindex values greater than 1.

A. True
B. False

A

B. False

tabindex of positive values SHOULD NOT be used.

19
Q

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.

A

C. Keyboard-only users and blind users

20
Q

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

A

B. Sans-serif fonts such as Arial and serif fonts such as Times New Roman

21
Q

The line spacing within a paragraph of text should be at least 2.0.

A. True
B. False

A

B. False

Note: Under most circumstances, line spacing should not exceed 2.0, and the spacing between paragraphs should not exceed 2.0 times larger than the line spacing.

22
Q

The spacing between paragraphs should be at least 1.5 times the line spacing.

A. True
B. False

A

A. True

23
Q

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

A

D. A and C

For people with some reading or vision disabilities, long lines of text can become a significant barrier. They have trouble keeping their place and following the flow of text. Having a narrow block of text (not exceeding 80 characters or glyphs) makes it easier for them to continue on to the next line in a block.

24
Q

Paragraph text should be full justified because the neat edges are less distracting for people with reading disorders.

A. True
B. False

A

B. False

People with certain reading disabilities or cognitive disabilities have problems reading text that is both left and right justified. The uneven spacing between words in fully justified text can cause “rivers of white space” to run down the page making reading difficult and, in some cases, impossible. Text justification can also cause words to be either bunched closely together or stretched in unnatural ways, so that it is difficult for them to locate word boundaries.

25
Q

Why is using real HTML text instead of text in an image helpful? (Select all that apply)

A. People who need to customize text for readability can apply their own CSS sheets to HTML text.
B. People who have low vision can better zoom real text, while images lose crispness.
C. HTML text can reflow as the viewport changes, while text in images cannot.
D. B and C
E. All of the above

A

E. All of the above

26
Q

Which of the following text formats allows user customizability of things like color, font, size, etc.?

A. Text embedded in a JPG image
B. Text embedded in an SVG image
C. Text written in an HTML paragraph
D. Text embedded in a Flash object

A

C. Text written in an HTML paragraph

27
Q

Which screen reader and browser combinations support CSS-generated content? (Select all that apply)

A. JAWS and Internet Explorer
B. Narrator and Edge
C. VoiceOver on OS X and Safari
D. VoiceOver on iOS and Safari
E. NVDA and Firefox
A

C. VoiceOver on OS X and Safari
D. VoiceOver on iOS and Safari
E. NVDA and Firefox

NOTE:
CSS-generated content is supported by NVDA + Firefox, VoiceOver on OS X + Safari, and VoiceOver on iOS + Safari. It is not supported by JAWS + Internet Explorer or by Narrator + Edge. Given the lack of universal support, it is best to avoid CSS-generated content, especially if that content is meaningful and not just for decoration.

28
Q

Which CSS methods will hide content from screen readers? (Select all that apply)

A. display:none
B. display:inline-block
C. visibility:hidden
D. screenreader:hidden
E. hide:true
A

A. display:none

C. visibility:hidden

29
Q

An inactive dialog box that is not visible to sighted users must be hidden from blind users to give them an equivalent experience.

A. True
B. False

A

A. True

Visually hidden and inactive content MUST be hidden from screen reader users until that content is made visible and active for sighted users.