Accessibility

Masonry changes visual placement, but it should not make the content harder to navigate. Masonix keeps item identity and ARIA metadata tied to the original item index.

Default roles

By default, Masonix renders the container with role="list" and items with list item metadata.

<Masonry
  items={articles}
  render={({ data }) => <ArticleCard article={data} />}
/>

Use an accessible label when the list needs a name.

<Masonry
  items={articles}
  role="list"
  aria-label="Latest articles"
  render={({ data }) => <ArticleCard article={data} />}
/>

Semantic elements

Use as and itemAs when the actual HTML element matters. For strict ul/li markup, prefer MasonryBalanced or MasonryVirtual because their item wrappers are direct children of the container.

<MasonryBalanced
  as="ul"
  itemAs="li"
  role="list"
  className="m-0 list-none p-0"
  itemClassName="m-0 list-none p-0"
  items={articles}
  render={({ data }) => <ArticleCard article={data} />}
/>

Suppressing Masonix semantics

Use role="none" when the surrounding page or card markup already provides the needed semantics.

<Masonry
  role="none"
  items={sections}
  render={({ data }) => <SectionCard section={data} />}
/>

When role="none" is used, Masonix omits item roles and ARIA item metadata.

Masonix does not accept role="grid". ARIA grids require row and gridcell ownership plus managed keyboard navigation; a visual masonry layout alone does not satisfy that interaction pattern.

Item-count announcements

Count announcements are opt-in so filtering and pagination do not create noisy screen reader output by default.

<MasonryVirtual
  announceItemCountChanges
  items={articles}
  render={({ data }) => <ArticleCard article={data} />}
/>

Practical notes

• Keep important reading order in the items array.
• Remember that the lightweight Masonry fallback groups DOM by column.
• Avoid relying on visual column order for keyboard or screen reader flow.
• Use descriptive labels for galleries, product lists, and feeds.