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

- **Pattern:** `ab-001041` (`directory-map-location.map-rendering.aria-labels`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001041
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001041)

## 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.

```tsx
<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:** `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:

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

---

## External references

- wcag 4.1.2
- wcag 2.4.6
- section-508 502.3.1

Taxons: accessibility

HTML version: https://auditbuffet.com/patterns/ab-001041