Accessibility (Material Design)
Google’s Material Design usability guidelines on accessibility — mobile/app-focused (Android and iOS conventions specifically, alongside general web guidance), organized around understanding accessibility, assistive technology, visual hierarchy, color/contrast, layout/typography, writing, imagery, sound/motion, and implementation. Cited live at the URL above.
Material 2 is Google’s now-superseded design-system version (Material 3 is current at m3.material.io), but this specific accessibility content was not carried over to M3 as of this fetch, and nothing in it is Material-2-specific — the guidance generalizes to any UI.
License: Apache License 2.0 — per the site footer.
Key points
- Alt text writing craft: a practical ~125-character limit (most screen readers truncate beyond it), avoiding the redundant “image of”/“picture of” prefix, avoiding disconnected SEO-keyword stuffing, and a three-way division of labor between alt text, captions, and adjacent body text (use captions for long descriptions since they aren’t character-limited; leave
alt=""when adjacent text already covers the image; never let alt text and a caption repeat the same content, since it doubles a screen reader user’s listening time for no new information). See Alt Text. - DOM order vs. visual order: a screen reader always follows HTML source order regardless of how CSS arranges things visually, so a grid that reads correctly by eye can still read out of sequence to a screen reader if the underlying markup wasn’t authored in the same order — illustrated with a four-step recipe grid example. See Accessibility.
- Touch and pointer target sizing: 48×48dp minimum touch targets (Android convention, ≈9mm physical size), 44×44pt (iOS), 44×44dp minimum for pointer/mouse targets, and 8dp minimum spacing between adjacent targets. See Fitts's Law.
- Accessibility-text labeling craft: label by action, not appearance (a control’s label should say what tapping it does, not describe what it looks like); avoid restating a control’s type or current state in the label when the accessibility role already announces it; for toggling controls, phrase the label as the action that will occur (“Add to wishlist” / “Remove from wishlist”) rather than a static, ambiguous name. See Action Buttons.
- Motion and vestibular accessibility: content that moves, scrolls, or blinks automatically must be pausable/stoppable/hideable past five seconds; flashing content must stay under three flashes per second and avoid flashing large screen regions, mirroring WCAG’s seizure-safety criteria. See Accessibility.
- Color contrast and colorblind-friendly cues: reconfirms Web Content Accessibility Guidelines (WCAG)‘s 3:1 (large text/graphics) and 4.5:1 (small text) success-criterion numbers; a concrete three-channel error-state example (title color + field stroke + explicit text message) illustrates “never rely on color alone.” See Color Theory.
- Decorative/informative/functional image taxonomy: Material’s three-category version matches the taxonomy used on Alt Text.