AspectRatio -- Accessibility

Overview

AspectRatio is a purely visual layout utility. It enforces a width-to-height ratio on its container but does not add any interactive behavior or ARIA semantics of its own. Accessibility requirements come from the content placed inside it.

Content guidelines

Images

• Every <img> inside an AspectRatio must have a meaningful alt attribute.
• Decorative images should use alt="" and aria-hidden="true" so screen readers skip them.
• When object-fit: cover is used, important content should be centered to avoid being cropped at smaller sizes.

Video

• Video content should include captions (<track kind="captions">) or a transcript linked nearby.
• Embedded iframes (e.g., YouTube) must have a descriptive title attribute so screen readers can announce the embed purpose.
• Autoplay should be avoided; if used, the video must be muted by default and provide visible pause controls.

Interactive content

• If the content inside AspectRatio is interactive (e.g., a clickable card), the interactive element itself must handle focus and keyboard events -- AspectRatio is not focusable.

Responsive behaviour

• AspectRatio scales fluidly with its parent's width. At narrow viewports the height shrinks proportionally, keeping the ratio intact.
• Ensure text or interactive content inside the container remains legible and tappable (44px minimum touch target) at all breakpoints.
• For very small containers, consider switching to a different ratio or removing the constraint entirely to prevent content from becoming unusable.

Screen reader considerations

• The AspectRatio wrapper renders a plain <div>. It adds no landmark, role, or label. Screen readers traverse straight through to the child content.
• Do not rely on the visual aspect ratio to convey information. If the ratio itself is meaningful (e.g., "this image is displayed at 16:9"), communicate that through surrounding text or aria-label on the content.

Platform behaviour

• Web: Uses the CSS aspect-ratio property.
• Native: Uses React Native's aspectRatio style property.

Best practices

• Always provide alt text for images and title for iframes.
• Use object-cover or object-contain on media to control how content fills the ratio without distortion.
• Pair AspectRatio with a skeleton loader to prevent layout shift while media loads.
• Avoid placing critical interactive controls (buttons, links) at the edges of the container where cropping may hide them on smaller screens.