demo: screenshots for the external link marker and its SR hint

Browse Source

Three captures of /blog/engineering/delayed-gratification-in-ai-summer
taken with rodney (headless chromium):

- external-link-hint-icon.png: a paragraph as rendered - the marker icon
  follows the external link, the hint text is invisible
- external-link-hint-unhidden.png: same paragraph with the sr-only rule
  cancelled, showing " (opens in a new tab)" inside the link, which is
  what screen readers get
- external-link-hint-page.png: full page for context (internal links such
  as "Swim the Test" carry no icon)

Backing evidence, from the same load: the accessibility tree names exactly
the 8 external links with "opens in a new tab"; the hint box measures
1x1 with clip-path inset(50%).

...

This commit is contained in:

Willem van den Ende

2026-10-26 20:54:45 +00:00

parent e3fc734862

commit be80c89548

3 changed files with 0 additions and 0 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

demos/screenshots/external-link-hint-icon.png

BIN

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 18 KiB

demos/screenshots/external-link-hint-page.png

BIN

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 844 KiB

demos/screenshots/external-link-hint-unhidden.png

BIN

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 19 KiB