logo
31

响应式与可访问性

⏱️ 16分钟

Responsive Design and Accessibility: From "Viewable" to "Usable"

Module Goal

Make pages usable across different devices and user scenarios.

Minimum Responsive Standards

  • Readable on mobile: font size, line height, and spacing are reasonable
  • Key actions are tappable: button size and spacing are sufficient
  • Content doesn't overflow: no horizontal scrollbar, nothing obscured
  • Mobile First: build for mobile first, then enhance for desktop
  • Keep breakpoints few and focused: avoid over-fragmentation

Basic Accessibility Checklist

  • Images have alt attributes
  • Form controls have corresponding label elements
  • Color contrast is sufficient
  • Key functions are keyboard-accessible

Lab Exercise Tips for This Module

After finishing each Lab, switch to mobile view at least once and check:

  • Is text readable
  • Are interactions reachable
  • Is layout stable

Transfer Task

Pick a completed page. Do a "mobile usability audit report":

  • Find 3 problems
  • Provide 3 fixes
  • Explain how each fix impacts the experience