Accessibility

Alternate Content is a composition, not a component — it wires Split Content, Asset Download, and Frame together, and each part owns its own accessibility. The notes below cover only the seams the composition introduces: the reading order of the two panes and the asset list’s place in the page. It meets WCAG 2.1 AA.

For designers

• Reading order matches the narrative. Source order runs the copy pane first — label, headline, description, downloads — then the media frame, so the reading flow follows the story in both the side-by-side and stacked layouts. Don’t flip the panes against that order visually. Source: WCAG 1.3.2 Meaningful Sequence.
• The split flips at a container-query threshold, not the viewport. A surface placed inside a narrow container (a sidebar, a half-width modal, a card) stacks the panes even on a wide screen, so test the pattern in the actual surface it ships in and confirm the stacked reading order still holds.
• Copy, download rows, and any media controls must maintain accessible contrast on every supported surface. Source: WCAG 1.4.3 Contrast (Minimum).
• Never convey meaning by colour alone on the composed surface — pair it with text, an icon, or a shape. Source: WCAG 1.4.1 Use of Color.
• Focus styles must stay visible, meet contrast requirements on every supported surface, and be clearly distinguishable from hover. Source: WCAG 2.4.7 Focus Visible.

For developers

Alternate Content is pure composition, so its developer guidance is about the seams — the DOM order of the panes and the asset list’s place in the page — not per-element ARIA, which each part already owns.

Source order is reading order: keep the copy pane before the frame in the DOM and let Split Content’s container query drive the stacking. Never reorder the panes with CSS order — that splits the visual order from the DOM order screen-reader and keyboard users follow. Source: WCAG 1.3.2 Meaningful Sequence.

Don’t wrap the asset list in a landmark. The <ul class="tng-asset-download"> is part of the module surface, not a navigation landmark, so don’t add role="region" or a <section aria-labelledby> around it unless the surrounding page genuinely needs the list discoverable on its own. Keep the accessible name at the item level too: each row is a single link that announces from its visible filename, so a summarising aria-label on the <ul> is redundant noise the list semantics and per-row names already cover. One row is one tab stop, and the row order is the tab order; Asset Download owns the detail.

Because every named element belongs to a part — Asset Download rows, the Frame, and any media-control buttons all carry their own accessible names from their own components — Alternate Content introduces no module-level naming of its own. There is no per-element name story to document here, so this tab has no Labelling elements section. Source: WCAG 4.1.2 Name, Role, Value.