Country flag — accessibility

Keyboard

• Not interactive. The flag is never a control.

ARIA

• Flag without title is aria-hidden="true". The number next to it already carries the dialling code.
• Flag with title becomes role="img" with aria-label, for a place where the flag stands alone.
• PhoneFlag sets the country name as title on the mark box (a tooltip for sighted users) and keeps the SVG hidden.

Focus

• Takes no focus.

Contrast

• The hairline outline (#000 at 18 % opacity) separates white and pale flags from --bg-canvas in light mode. In dark mode the flag colours carry their own contrast against the dark surface.

Known limits

• Flags are simplified. Fine emblems (Spain, Portugal, Mexico, Saudi Arabia) are reduced to one shape and are recognisable by their colours, not by the emblem.
• 50 countries, matching DIAL_CODES. A new dialling code needs a new drawing, otherwise the grey tile shows.