Graphic design learning

Accessibility And Responsive Design

Accessible design keeps content usable across abilities, devices, input methods, and viewing conditions.

Intermediate lessons

Lesson objective and evidence

Make and explain one design decision that demonstrates this principle: Accessible design keeps content usable across abilities, devices, input methods, and viewing conditions.

Prerequisite: Digital And UI Visual Design

Evidence to produce: Check contrast for body text and small labels.

Estimated workload: 1-1.5 hr

Accessibility And Responsive Design lesson

Observe

See the communication problem

A pricing card looks clean on desktop but the button wraps awkwardly and low-contrast labels fade on mobile.

  • What to notice

    Low contrast and cramped tap targets are design bugs, not polish issues.

  • Why it matters

    Contrast, type size, focus states, spacing, and semantic structure all affect whether people can use the design.

Takeaway: Accessible design keeps content usable across abilities, devices, input methods, and viewing conditions.

Understand

Understand the principle

Accessible design keeps content usable across abilities, devices, input methods, and viewing conditions.

Accessibility includes perception, operation, understanding, and technical compatibility. Contrast alone cannot certify a page. Check logical headings, meaningful alternatives for informative images, text-supported status cues, keyboard access, visible focus, and a reading order that remains meaningful when layout changes.

WCAG 2.2 AA target size is at least 24 × 24 CSS px, with specified exceptions including spacing and inline text. Larger controls can be more comfortable; 44 × 44 is the enhanced target-size criterion, not the general AA minimum. Reflow checks a width of 320 CSS px for ordinary vertically scrolling content, with exceptions for content needing two dimensions. Test text resizing to 200% without lost content or functionality as a separate check.

Reflow
Content rearranges to fit available width while preserving meaning and function.
CSS pixel
A layout unit; it is not necessarily one physical display pixel.

Takeaway: Accessible design is good design tested against real users, devices, and viewing conditions.

Understand

Study the visual model

Takeaway: Use the model as a diagnostic, not a decoration recipe: Low contrast and cramped tap targets are design bugs, not polish issues.

Try

Follow a worked decision

An illustrative scenario: the proposed result is a hypothesis to check with the intended audience.

  • Situation

    A pricing card looks clean on desktop but the button wraps awkwardly and low-contrast labels fade on mobile.

  • Designer move

    Increase contrast, define a minimum tap target, allow text to wrap, and keep the action visible.

  • Expected result

    The card becomes usable for more people and more screen sizes.

Takeaway: Accessibility problems are design problems that should be caught during layout, not after launch.

Try

Run the studio method

Adapt a registration panel from a wide layout to 320 CSS px. Test 200% text size, long labels, keyboard navigation, and focus visibility. Measure interactive targets and document any applicable exception.

  • Plan: Check contrast, keyboard focus, mobile wrapping, and text overflow before calling a layout finished.
  • Collect evidence: Keep a checklist of checks performed and remaining issues. Do not label the whole page WCAG-conformant from these few checks alone.
  • Test: Low contrast and cramped tap targets are design bugs, not polish issues.
  • Revise: change one variable, compare the versions, and keep the stronger evidence.

Takeaway: Check contrast, keyboard focus, mobile wrapping, and text overflow before calling a layout finished.

Critique

Diagnose weak decisions

Name the visible problem before proposing a fix. This keeps critique specific and useful.

  • Using color as the only status signal.
  • Letting mobile layout hide the main action.
  • Treating focus styles as visual clutter.

Takeaway: A strong designer can name the mistake and the fix.

Apply

Use the review rubric

Ask first: Low contrast and cramped tap targets are design bugs, not polish issues.

  • Check contrast for body text and small labels.
  • Make focus states visible.
  • Keep touch targets large enough.
  • Test narrow screens and long text strings.

Takeaway: Your design is ready to move forward when you can point to evidence for every criterion.

Apply Accessibility And Responsive Design

Use the lesson brief below. Fictional project details are practice material, not real event listings.

Adapt a registration panel from a wide layout to 320 CSS px. Test 200% text size, long labels, keyboard navigation, and focus visibility. Measure interactive targets and document any applicable exception.

Specification: Use the format named in this lesson’s brief. Collect your comparisons on an A4 landscape sheet (297 × 210 mm) or a digital process board; these are presentation options, not pixel equivalents.

Process

  • List the required content, format, and constraints in the lesson brief.
  • Run the comparison or investigation described in the brief before refining a final response.
  • Record what you changed, measured, or observed.
  • Keep a checklist of checks performed and remaining issues. Do not label the whole page WCAG-conformant from these few checks alone.
  • Revise a weak decision and save a clear final example or annotated explanation.

Deliverables

  • Keep a checklist of checks performed and remaining issues. Do not label the whole page WCAG-conformant from these few checks alone.
  • The comparisons, calculations, or project outputs named in this lesson's brief.
  • A short rationale explaining how the lesson's principle informed your decision.
  • A revision or correction, with a note about the evidence that prompted it.
  • A source note for any images, type, and references used, including permissions where relevant.

Review criteria

  • Criterion 1: Check contrast for body text and small labels.
  • Criterion 2: Make focus states visible.
  • Criterion 3: Keep touch targets large enough.
  • Criterion 4: Test narrow screens and long text strings.

Portfolio transfer

Audit one existing page and propose five accessibility or responsive improvements.

Knowledge check

Which item is part of accessible visual design?

  • Tiny text to fit more content.
  • Color as the only status signal.
  • Buttons without labels.
  • Readable contrast and visible focus states.

A narrow screen is handled by scaling the whole desktop panel down until its text is tiny. Is that an effective reflow solution?

  • No; rearrange and wrap content while preserving usable text and controls.
  • Yes; nothing extends outside the viewport.
  • Yes, if all buttons use the brand's accent color.