Read more (expandable text): checklist

Live demo: Open the Read more BEFORE/AFTER micro-demo

Common failure modes

• Fake link / fake button: a <span> with onclick that isn’t focusable.
• No state: the control never exposes “expanded” vs “collapsed”.
• Hidden content still tabbable: CSS-only hiding leaves links/inputs focusable (ghost focus).
• Unexpected focus jumps: expanding moves focus somewhere else without a good reason.

Small, reliable pattern (recommended)

• Use a real <button> for the control (not a link unless it navigates).
• Expose state with aria-expanded="true|false" on the button.
• Link the button to the expandable region with aria-controls="…".
• Show/hide the extra content with the hidden attribute (or an equivalent that removes it from the accessibility tree).
• Keep focus predictable: normally, focus stays on the button when toggling.

Notes

• If you visually truncate with CSS (like line-clamp), the control still must be keyboard reachable.
• Prefer plain language labels: “Read more” / “Show less”.
• Test with keyboard only: Tab to the control, Space toggles, and tab order stays sane.

Related micro-demos

• Accordion (disclosure)
• Tabs
• Popovers

More from this hub

• Watch page (primary share target)
• Micro-demo backlog