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-label with 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.

import React from 'react';
import Flags, { iso2Name } from '@semcore/ui/flags';
import { Text } from '@semcore/ui/typography';
import { Flex } from '@semcore/ui/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.