TileMap

Props

• label: string (required) -- accessible label describing the map
• children: slot (required) -- map layer content (tile-map-layer components or custom)
• data: array (optional) -- geographic tile data
• ...restProps: Any additional HTML attributes

Keyboard Interactions

• Arrow keys navigate between tiles
• Enter/Space activates focused tile
• Escape deselects the currently selected tile

ARIA

• role="img" with aria-label for the overall map
• aria-roledescription="tile map" for the map container
• Individual tiles can have role="listitem" with aria-label for data values

When to Use

• Use for geographic data where equal representation matters more than geographic accuracy
• Use to compare values across geographic regions at a glance
• Use when geographic shape or area would distort data perception (e.g., election results, population statistics)

When Not to Use

• Do not use when geographic shape or area matters -- use a standard map
• Do not use for non-geographic grid data -- use DataTable
• Do not use when precise geographic boundaries are important

Headless

This component provides a <div> element with role="img", aria-label, and aria-roledescription for accessible geographic visualization, with zero visual styling. The consumer is responsible for all CSS including tile size, grid positioning, colors, labels, hover effects, and responsive layout.

Styles

The consumer provides all CSS styling. The component renders with a .tile-map class for targeting. No default styles are included -- this is a fully headless component.

Testing

• Verify the component renders a <div> element with class tile-map
• Verify role="img" is applied
• Verify aria-label is applied
• Verify aria-roledescription="tile map" is applied
• Verify arrow key navigation between tiles
• Verify Enter/Space activates focused tile
• Verify Escape deselects
• Verify child content is rendered correctly
• Verify pass-through attributes are applied

Advice

• Designers: Choose tile colors with sufficient contrast for WCAG 2.2 AAA compliance. Include a legend explaining color mappings. Consider how the cartogram layout communicates equal representation versus geographic accuracy.
• Developers: Always provide a descriptive label prop for screen reader users. Add aria-label to individual tiles with data values. Ensure keyboard navigation follows a logical reading order through the grid.

Implementation Notes

• Uses <div> element with role="img" for the map container
• aria-roledescription="tile map" provides descriptive context for assistive technology
• Displays geographic data as a grid of equal-sized tiles (cartogram)
• Each tile represents a geographic unit (state, country, region)
• Tiles can be colored, labeled, and made interactive
• Consumer provides tile positioning and styling
• Supports multiple data layers

Related components

• tile — a grouping container that presents related content in a structured format, often as a single clickable area
• image — an image element with alt text

References

• Reuters Graphics TileMap component