Proof of concept: Extended Descriptions - Adjacent Implementation

Warning: This is a Proof of Concept implementation and should not be used in reality.

This sample demonstrates adjacent extended descriptions with both supported container options: <details> and <aside>.

Example 1: Adjacent Extended Description with <details>

The image uses aria-details to point directly to a nearby <details> container. The description is adjacent in reading order and does not require a separate forward link.

Bar chart showing 2014 first quarter visitors to three websites
Figure 1: Website Visitor Statistics Q1 2014.
Extended description — Figure 1 (details)

The chart compares website visits for three sites from January to March 2014. Site 1 declines over the quarter, Site 2 remains relatively stable, and Site 3 grows steadily.

Period Site 1 Site 2 Site 3
Jan 135 112 92
Feb 117 114 99
Mar 96 111 126

Example 2: Adjacent Extended Description with <aside>

The second image uses the same direct aria-details relationship but points to an adjacent <aside> container instead of <details>.

Diagram showing oxygen-rich blood flowing between the heart and lungs
Figure 2: Human circulatory and respiratory systems.