Skip to main content

Map has descriptive aria-label and role="application"

ab-001041 · directory-map-location.map-rendering.aria-labels
Severity: mediumactive

Why it matters

A map container without role="application" and a descriptive aria-label is opaque to screen readers. WCAG 2.2 SC 4.1.2 (Name, Role, Value) requires that all UI components expose a name and role that assistive technology can announce. Without role="application", screen readers treat the map as generic content and may announce it as an unlabeled region or skip it entirely. Section 508 2018 Refresh 502.3.1 extends this requirement to federal web applications. A label like just "map" gives no context about what the map displays — users cannot determine whether it is relevant to their task before choosing to interact.

Severity rationale

Medium because missing or inadequate ARIA attributes fail WCAG 2.2 SC 4.1.2 and Section 508 compliance requirements, creating legal exposure and locking out screen reader users.

Remediation

Add both role and aria-label to the map container element. The label must describe the map's content, not just its existence — include the listing type and geographic scope.

<div
  id="map"
  role="application"
  aria-label="Interactive map of local restaurants with address, hours, and ratings"
/>

If the map content changes based on filters (e.g., category selection), update aria-label dynamically to reflect the current filter state — for example, "Map of Italian restaurants within 5km". Check src/components/Map.tsx or equivalent for the container element and add attributes there, not on a wrapper div.

Detection

  • ID: directory-map-location.map-rendering.aria-labels

  • Severity: medium

  • What to look for: Check the map container element for aria-label and role="application" attributes. The aria-label should describe the map's purpose (e.g., "Map of restaurants in downtown").

  • Pass criteria: Map container has role="application" and a descriptive aria-label of at least 5 words that explains what the map displays. Quote the actual aria-label text. Enumerate all map container elements and confirm each has both attributes.

  • Fail criteria: Missing role="application" or aria-label. aria-label is generic or unhelpful (e.g., just "map"). An aria-label under 5 words does not count as pass.

  • Skip (N/A) when: No map display exists.

  • Detail on fail: "Map container missing role='application' and aria-label" or "aria-label is just 'Map' with no context about listing type"

  • Remediation: Add accessibility attributes:

    <div
  id="map"
  role="application"
  aria-label="Interactive map of local restaurants with address, hours, and ratings"
/>

External references

Taxons

accessibility

History