Flag Accessibility

Best Practices

Each flag image must use role="img" and aria-label to convey the country name (e.g., "United States flag", "Canada flag").

When a flag appears alongside visible text that already identifies the country, the flag is decorative and should use aria-hidden="true" instead.

Flags are not interactive and should not be keyboard focusable.

A screen reader must announce the label and image role (e.g., "US flag, image").

Decorative flags must be skipped by screen readers.

Flags are not clickable.

Attribute	Description
role="img"	Applied to informative flags to identify them as images to assistive technologies.
aria-label	Applied to informative flags to provide the country name (e.g., "US flag").
aria-hidden="true"	Applied to decorative flags when country is already identified by adjacent text.