IT 270 Web Site Design Midterm Exam Practice Questions and
Detailed Solutions Latest Update 2026/2027 | User Interface
Design, Web Accessibility, Verified Answers - 199 Questions
This midterm examination assesses advanced competencies in user interface (UI) design principles, web
accessibility standards (WCAG 2.2), responsive design, usability heuristics, and inclusive design practices.
Questions require synthesis of theoretical concepts with practical application to novel web design scenarios. It
contains 199 multiple-choice questions, each with four distractors and a fully worked rationale that explains why
the keyed answer is correct. Questions are organized into clearly labelled sections that mirror the major content
areas of the course. Targeted learning outcomes include: Evaluate and apply WCAG 2.2 success criteria to
complex web interfaces.; Critique UI designs using established heuristics and cognitive psychology principles.;
Design accessible and responsive layouts that accommodate diverse user needs.; Analyze the trade-offs between
aesthetic design and functional accessibility.. Every item has been reviewed for clinical accuracy, current
guidelines, and clarity so that students can study with confidence and self-correct as they work through the bank.
Use it as a high-yield review immediately before the exam, or as a structured practice tool during the unit - the
rationales double as concise teaching notes. The recommended writing time is 3 hours, with a passing score of
70%. Aligned with Aligned with ABET computing accreditation standards and the ACM/IEEE Computer Science
curricula guidelines for human-computer interaction. standards and reflects the question style commonly seen on
accredited program examinations. Students consistently achieving above the cut score on this bank have
Section 1: General (Questions 1-199)
1 A designer argues that using a purely icon-based navigation with
tooltips is 'intuitive' because icons are universally understood.
Which evidence-based principle most directly challenges this
assertion?
A) Fitts's Law guarantees icons are faster to select than text labels.
B) Recognition rather than recall is violated because tooltips are
hidden until hover.
C) The aesthetic-usability effect overrides the need for text labels.
D) Hick's Law reduces decision time when icons are used without
text.
Answer: B
Rationale: Recognition rather than recall (Nielsen's heuristic) requires
that objects, actions, and options be visible or easily retrievable.
Hover-dependent tooltips hide labels, forcing users to recall or
discover meanings, which increases cognitive load. Fitts's Law and
Hick's Law do not address comprehensibility, and the
aesthetic-usability effect actually biases users toward perceiving
,attractive designs as easier to use, not the reverse.
2 A developer is designing a form with a required date-of-birth field.
Which implementation best aligns with WCAG 2.2 Understanding
SC 3.3.2 (Labels or Instructions) and SC 1.3.5 (Identify Input
Purpose)?
A) Placeholder text 'MM/DD/YYYY' and a red asterisk beside the
field.
B) A visible label 'Date of Birth' plus an example of the format and
the autocomplete attribute set to 'bday'.
C) A single text input with a pattern attribute and a title attribute
describing the format.
D) A calendar picker with no text label, relying on the icon to
convey purpose.
Answer: B
Rationale: SC 3.3.2 requires labels or instructions when content
requires user input, and SC 1.3.5 requires that the purpose of input
fields collecting specific user data can be programmatically
determined (autocomplete). Option B provides a persistent visible
label, explicit format example, and autocomplete, satisfying both
criteria. Placeholders are not a substitute for labels and often fail
contrast requirements. A pattern/title combo is less robust because
titles are not always accessible. An unlabeled calendar picker fails SC
3.3.2.
3 In a usability test, participants consistently fail to notice a 'Save'
button because it is placed in the far left of a cluttered footer. Which
design principle, when applied, would most likely improve
discoverability without adding clutter?
A) Consistency and standards - place the button where users expect,
such as the top right.
B) Aesthetic minimalism - remove all decorative elements from the
footer.
,C) Flexibility and efficiency of use - add keyboard shortcuts for
saving.
D) Error prevention - confirm before leaving the page to prompt
saving.
Answer: A
Rationale: Consistency and standards (Nielsen's heuristic) leverages
users' prior experience; placing the Save action in a conventional
location (top right) improves discoverability. Minimalism alone does
not ensure the button is noticed if it is in an unexpected location.
Keyboard shortcuts help efficiency but not initial discovery. Error
prevention (confirmation dialogs) is a safety net, not a discoverability
solution.
4 A product team is debating whether to implement dark mode.
Which set of considerations best represents the current
evidence-based guidance on dark mode accessibility?
A) Dark mode always reduces eye strain and is universally preferred;
therefore, it should be the default.
B) Dark mode can benefit users with photophobia but may cause
halation for those with astigmatism; provide both themes with a
user-controlled toggle.
C) Dark mode is purely aesthetic and has no impact on accessibility;
it should be offered only as a decorative option.
D) Dark mode should be avoided because it reduces readability for
all users due to lower contrast ratios.
Answer: B
Rationale: Current research indicates dark mode may reduce symptoms
for some users (e.g., photophobia) but can exacerbate issues like
halation for individuals with astigmatism. Offering both themes with a
toggle respects user preference and accommodates diverse visual
needs. It is not universally beneficial or harmful, and it does have
accessibility implications, contrary to options A, C, and D.
, 5 A designer proposes a carousel on the homepage that auto-advances
every 4 seconds, with no controls to pause, stop, or hide it. Which
WCAG 2.2 success criterion is most directly violated?
A) SC 2.2.2 Pause, Stop, Hide
B) SC 1.4.4 Resize Text
C) SC 3.2.3 Consistent Navigation
D) SC 4.1.2 Name, Role, Value
Answer: A
Rationale: SC 2.2.2 requires that moving, blinking, or scrolling content
that starts automatically, lasts more than five seconds, and is presented
in parallel with other content has a mechanism to pause, stop, or hide
it. An auto-advancing carousel without controls directly violates this.
The other criteria relate to text resizing, consistent navigation, and
programmatic semantics, which are not the primary issue.
6 A developer is implementing a custom dropdown menu using a
<div> and JavaScript. Which ARIA pattern is essential for making it
accessible to screen reader users?
A) role="menu" on the container, with aria-haspopup="true" on the
button and aria-expanded toggled.
B) role="listbox" on the container, with each item having
role="option".
C) role="combobox" on the button, with aria-autocomplete="list".
D) No ARIA is needed if the dropdown is keyboard operable.
Answer: A
Rationale: For a custom dropdown menu, the WAI-ARIA menu pattern
requires role="menu" on the container, role="menuitem" on items,
and the triggering button must have aria-haspopup="true" and
aria-expanded to reflect state. A listbox is for selecting from a list, not
for navigation menus. A combobox is for editable text fields with
suggestions. Keyboard operability alone is insufficient for screen
reader users-ARIA is necessary to convey semantics.
Detailed Solutions Latest Update 2026/2027 | User Interface
Design, Web Accessibility, Verified Answers - 199 Questions
This midterm examination assesses advanced competencies in user interface (UI) design principles, web
accessibility standards (WCAG 2.2), responsive design, usability heuristics, and inclusive design practices.
Questions require synthesis of theoretical concepts with practical application to novel web design scenarios. It
contains 199 multiple-choice questions, each with four distractors and a fully worked rationale that explains why
the keyed answer is correct. Questions are organized into clearly labelled sections that mirror the major content
areas of the course. Targeted learning outcomes include: Evaluate and apply WCAG 2.2 success criteria to
complex web interfaces.; Critique UI designs using established heuristics and cognitive psychology principles.;
Design accessible and responsive layouts that accommodate diverse user needs.; Analyze the trade-offs between
aesthetic design and functional accessibility.. Every item has been reviewed for clinical accuracy, current
guidelines, and clarity so that students can study with confidence and self-correct as they work through the bank.
Use it as a high-yield review immediately before the exam, or as a structured practice tool during the unit - the
rationales double as concise teaching notes. The recommended writing time is 3 hours, with a passing score of
70%. Aligned with Aligned with ABET computing accreditation standards and the ACM/IEEE Computer Science
curricula guidelines for human-computer interaction. standards and reflects the question style commonly seen on
accredited program examinations. Students consistently achieving above the cut score on this bank have
Section 1: General (Questions 1-199)
1 A designer argues that using a purely icon-based navigation with
tooltips is 'intuitive' because icons are universally understood.
Which evidence-based principle most directly challenges this
assertion?
A) Fitts's Law guarantees icons are faster to select than text labels.
B) Recognition rather than recall is violated because tooltips are
hidden until hover.
C) The aesthetic-usability effect overrides the need for text labels.
D) Hick's Law reduces decision time when icons are used without
text.
Answer: B
Rationale: Recognition rather than recall (Nielsen's heuristic) requires
that objects, actions, and options be visible or easily retrievable.
Hover-dependent tooltips hide labels, forcing users to recall or
discover meanings, which increases cognitive load. Fitts's Law and
Hick's Law do not address comprehensibility, and the
aesthetic-usability effect actually biases users toward perceiving
,attractive designs as easier to use, not the reverse.
2 A developer is designing a form with a required date-of-birth field.
Which implementation best aligns with WCAG 2.2 Understanding
SC 3.3.2 (Labels or Instructions) and SC 1.3.5 (Identify Input
Purpose)?
A) Placeholder text 'MM/DD/YYYY' and a red asterisk beside the
field.
B) A visible label 'Date of Birth' plus an example of the format and
the autocomplete attribute set to 'bday'.
C) A single text input with a pattern attribute and a title attribute
describing the format.
D) A calendar picker with no text label, relying on the icon to
convey purpose.
Answer: B
Rationale: SC 3.3.2 requires labels or instructions when content
requires user input, and SC 1.3.5 requires that the purpose of input
fields collecting specific user data can be programmatically
determined (autocomplete). Option B provides a persistent visible
label, explicit format example, and autocomplete, satisfying both
criteria. Placeholders are not a substitute for labels and often fail
contrast requirements. A pattern/title combo is less robust because
titles are not always accessible. An unlabeled calendar picker fails SC
3.3.2.
3 In a usability test, participants consistently fail to notice a 'Save'
button because it is placed in the far left of a cluttered footer. Which
design principle, when applied, would most likely improve
discoverability without adding clutter?
A) Consistency and standards - place the button where users expect,
such as the top right.
B) Aesthetic minimalism - remove all decorative elements from the
footer.
,C) Flexibility and efficiency of use - add keyboard shortcuts for
saving.
D) Error prevention - confirm before leaving the page to prompt
saving.
Answer: A
Rationale: Consistency and standards (Nielsen's heuristic) leverages
users' prior experience; placing the Save action in a conventional
location (top right) improves discoverability. Minimalism alone does
not ensure the button is noticed if it is in an unexpected location.
Keyboard shortcuts help efficiency but not initial discovery. Error
prevention (confirmation dialogs) is a safety net, not a discoverability
solution.
4 A product team is debating whether to implement dark mode.
Which set of considerations best represents the current
evidence-based guidance on dark mode accessibility?
A) Dark mode always reduces eye strain and is universally preferred;
therefore, it should be the default.
B) Dark mode can benefit users with photophobia but may cause
halation for those with astigmatism; provide both themes with a
user-controlled toggle.
C) Dark mode is purely aesthetic and has no impact on accessibility;
it should be offered only as a decorative option.
D) Dark mode should be avoided because it reduces readability for
all users due to lower contrast ratios.
Answer: B
Rationale: Current research indicates dark mode may reduce symptoms
for some users (e.g., photophobia) but can exacerbate issues like
halation for individuals with astigmatism. Offering both themes with a
toggle respects user preference and accommodates diverse visual
needs. It is not universally beneficial or harmful, and it does have
accessibility implications, contrary to options A, C, and D.
, 5 A designer proposes a carousel on the homepage that auto-advances
every 4 seconds, with no controls to pause, stop, or hide it. Which
WCAG 2.2 success criterion is most directly violated?
A) SC 2.2.2 Pause, Stop, Hide
B) SC 1.4.4 Resize Text
C) SC 3.2.3 Consistent Navigation
D) SC 4.1.2 Name, Role, Value
Answer: A
Rationale: SC 2.2.2 requires that moving, blinking, or scrolling content
that starts automatically, lasts more than five seconds, and is presented
in parallel with other content has a mechanism to pause, stop, or hide
it. An auto-advancing carousel without controls directly violates this.
The other criteria relate to text resizing, consistent navigation, and
programmatic semantics, which are not the primary issue.
6 A developer is implementing a custom dropdown menu using a
<div> and JavaScript. Which ARIA pattern is essential for making it
accessible to screen reader users?
A) role="menu" on the container, with aria-haspopup="true" on the
button and aria-expanded toggled.
B) role="listbox" on the container, with each item having
role="option".
C) role="combobox" on the button, with aria-autocomplete="list".
D) No ARIA is needed if the dropdown is keyboard operable.
Answer: A
Rationale: For a custom dropdown menu, the WAI-ARIA menu pattern
requires role="menu" on the container, role="menuitem" on items,
and the triggering button must have aria-haspopup="true" and
aria-expanded to reflect state. A listbox is for selecting from a list, not
for navigation menus. A combobox is for editable text fields with
suggestions. Keyboard operability alone is insufficient for screen
reader users-ARIA is necessary to convey semantics.
