Read more (truncation) demo

TAB DEMO

Read more (truncated text)

Try Tab • compare BEFORE vs AFTER • press Space to emphasize AFTER

Article preview

Step 1: press Tab Step 2: try to expand Tip: press Space anywhere to highlight AFTER

BEFORE: “Read more” is mouse-only (not focusable). AFTER: uses a real button with aria-expanded and toggles content with hidden.

BEFORE (mouse-only)

Today’s update

Visual truncation + a fake link.

The quick summary looks fine visually, but the “Read more” control below is just a styled <span>. It can’t be reached with Tab, so keyboard and some assistive-tech users can’t expand the text.

Problem: the control is not focusable, so keyboard users can’t expand.

AFTER (aria-expanded + hidden)

Today’s update

Expandable text with state.

The preview is short, and the “Read more” control is a real button.

When expanded, the extra text becomes visible and is part of the accessibility tree. The button exposes its state via aria-expanded, and the expanded region is linked with aria-controls.

Collapsed.

Keyboard: Tab to the button, Space to toggle.

Companion note: Read more checklist

Share this demo