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 the above

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

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

A

False

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

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

True or false: Providing alternative text for an image that communicates information using color alone is sufficient in communicating that information to users.

A

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 methods

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

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

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.

A

False

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

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

A

D 4.5 to 1

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 the Above

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

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

A. 3 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 visually separate different elements of the design

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

True or False: A text label for a form input should never be placed adjacent to that text input.

A

False

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

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: (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

A

C. Document Object Model (DOM)

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

True or false: For screen reader users, the reading order and focus order are always the same thing.

A

False

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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

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

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

A

False

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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

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

True or false: The line spacing within a paragraph of text should be at least 2.0.

A

False

22
Q

True or false: The spacing between paragraphs should be at least 1.5 times the line spacing.

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

24
Q

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

A

False

25
Q

Why is using real HTML text instead of text in an image helpful? Give three reasons.

A
  1. People who need to customize text for readability can apply their own CSS sheets to HTML text.
  2. People who have low vision can better zoom real text, while images lose crispness.
  3. HTML text can reflow as the viewport changes, while text in images cannot.
26
Q

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

A

Text written in an HTML paragraph

27
Q

True or False: CSS-generated content is universally supported by screen readers, and is recommended for use.

A

False

28
Q

Which two CSS methods will effectively hide content such as inactive dialogs from both screen reader users and sighted users?

A
  1. display:none

2. visibility:hidden

29
Q

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.

A

True

30
Q

The touch target size of actionable elements should be what dimensions?

A

At least 44 pixels by 44 pixels, with at least 6 pixels of inactive space between adjacent actionable items

31
Q

A text alternative for informative CSS-generated content MUST be provided, AND the CSS-generated text SHOULD be set to ….

A

aria-hidden=”true”

32
Q

When additional content is triggered on pointer hover or on keyboard focus, that additional content MUST be …

A

dismissible, hoverable, and persistent.

33
Q

The number of characters or glyphs per line in any section or column of text SHOULD NOT exceed what amount?

A

80 characters (or 40 characters in Chinese, Japanese, or Korean)

34
Q

Paragraph spacing SHOULD be at least how many times larger than the line spacing.

A

1.5 times larger

35
Q

The visual state of an active user interface component MUST have a sufficient contrast of ….

A

at least 3 to 1 with the adjacent background.

36
Q

Small text (under 18 point regular font or 14 point bold font) SHOULD have a contrast ratio of …

A

at least 7 to 1 with the background.

37
Q

Large text and images of large text (at or over 18 point or 14 point bold) MUST have a contrast ratio of ….

A

at least 3 to 1 with the background.

38
Q

Any information conveyed by color MUST be accompanied by …

A

a visible alternative (text, image, etc.) that does not depend on color for meaning.

39
Q

Color alone MUST NOT be used to distinguish links from surrounding text unless what two conditions are met?

A
  1. the color contrast between the link and the surrounding text is at least 3:1
  2. an additional differentiation (e.g. underline, outline, etc.) is provided when the link receives focus.
40
Q

Text SHOULD or SHOULD NOT be fully justified?

A

SHOULD NOT be justified

41
Q

CSS-generated content SHOULD or SHOULD NOT be avoided?

A

SHOULD be avoided

42
Q

Visually hidden and inactive content MUST be hidden from screen reader users until what condition is met?

A

that content is made visible and active for sighted users.

43
Q

Whenever visual boundaries are used to distinguish controls, UI control boundaries and adjacent areas MUST have ….

A

a contrast of at least 3 to 1 to distinguish the UI control from the adjacent areas.

44
Q

Any information conveyed by color SHOULD OR MUST be accompanied by a programmatically-discernible text alternative?

A

MUST

45
Q

The layout SHOULD OR MUST have only one main visual focus?

A

SHOULD

46
Q

tabindex of positive values SHOULD or SHOULD NOT be used?

A

SHOULD NOT

47
Q

The navigation order of focusable elements MUST or SHOULD be logical and intuitive?

A

MUST

48
Q

Fonts MUST or SHOULD be user-customizable?

A

SHOULD

49
Q

Labels MUST or SHOULD be visually adjacent to their controls?

A

SHOULD

50
Q

A text alternative for informative CSS-generated content MUST or SHOULD be provided?

A

MUST