Developer Considerations for developers
The Flags component doesn't have an aria-label by default to avoid double reading when it's accompanied by the country name.
If you use Flags without the full country name, you should set the following attributes to the component:
aria-labelwith the full country name,role="image".
If you use Flags with the short country code, do the same, and also hide the country code with aria-hidden.
tsx
import React from 'react';
import Flags, { iso2Name } from 'intergalactic/flags';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';
const countries = ['US', 'DE', 'ES', 'FR', 'IT'];
const Demo = () => (
<>
{countries.map((country) => (
<Flags
key={country}
name={country as keyof typeof iso2Name}
role='image'
aria-label={iso2Name[country]}
mr={1}
mb={3}
/>
))}
{countries.map((country) => (
<Flex alignItems='center' gap={1} key={country}>
<Flags
name={country as keyof typeof iso2Name}
role='image'
aria-label={iso2Name[country]}
/>
<Text aria-hidden>{country}</Text>
</Flex>
))}
</>
);
export default Demo;import React from 'react';
import Flags, { iso2Name } from 'intergalactic/flags';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';
const countries = ['US', 'DE', 'ES', 'FR', 'IT'];
const Demo = () => (
<>
{countries.map((country) => (
<Flags
key={country}
name={country as keyof typeof iso2Name}
role='image'
aria-label={iso2Name[country]}
mr={1}
mb={3}
/>
))}
{countries.map((country) => (
<Flex alignItems='center' gap={1} key={country}>
<Flags
name={country as keyof typeof iso2Name}
role='image'
aria-label={iso2Name[country]}
/>
<Text aria-hidden>{country}</Text>
</Flex>
))}
</>
);
export default Demo;Other recommendations
See more accessibility recommendations in the common Accessibility guide.