Améliorations accessibilité : attributs `alt`, dissimulation d'éléments aux lecteurs d'écrans (#2283)

* feat: Retire alt inutiles

* feat: Cache par défaut les Emojis aux lecteurs d'écran

* feat: Ajout aria-hidden et labels

* feat: Améliore a11y du champ de recherche page d'accueil

* feat: Ajout role sur Button + cache label inutile aux lecteurs d'écran

* feat: Améliore liens landing + retropedalage

* fix: Corrige les traductions

site/source/components/MoreInfosOnUs.tsx

@@ -63,6 +63,7 @@ export default function MoreInfosOnUs() {
 									height: '3rem',
 									margin: 0,
 								}}
+								aria-hidden="true"
 							>
 								<g>
 									<path d={icons.github.icon} />

site/source/components/PageHeader.tsx

@@ -44,7 +44,12 @@ export default function PageHeader({
 
 			{picture && (
 				<InnerGrid item className="hide-mobile" md={3} lg={4}>
-					<Illustration className="hide-mobile" titre={titre} src={picture} />
+					<Illustration
+						className="hide-mobile"
+						titre={titre}
+						src={picture}
+						alt=""
+					/>
 				</InnerGrid>
 			)}
 		</Grid>

site/source/components/company/SearchField.tsx

@@ -39,7 +39,7 @@ export function CompanySearchField(props: {
 		},
 		placeholder: t(
 			'CompanySearchField.placeholder',
-			'Café de la gare ou 40123778000127'
+			'Ex : Café de la gare ou 40123778000127'
 		),
 	}
 

site/source/components/utils/Emoji.tsx

@@ -4,13 +4,19 @@ type PropType = {
 	emoji: string | undefined
 	alt?: string
 	title?: string
+	ariaHidden?: boolean
 }
 
 // This custom component has several advantages over the direct use of the
 // `emojiFn` provided by `react-easy-emoji` :
 // - allow to configure the URL to self host twemoji images in production
 // - using a real React component works better with the translation scripts
-export default function Emoji({ emoji, alt, title }: PropType) {
+export default function Emoji({
+	emoji,
+	alt,
+	title,
+	ariaHidden = true,
+}: PropType) {
 	alt ??= emoji
 
 	if (!emoji) {
@@ -24,6 +30,7 @@ export default function Emoji({ emoji, alt, title }: PropType) {
 		props: {
 			alt,
 			title,
+			'aria-hidden': ariaHidden,
 		},
 	})
 }

site/source/design-system/buttons/Button.tsx

@@ -15,6 +15,7 @@ type ButtonProps = GenericButtonOrNavLinkProps & {
 	children: React.ReactNode
 	size?: Size
 	light?: boolean
+	role?: string
 }
 
 export const Button = forwardRef(function Button(
@@ -23,6 +24,7 @@ export const Button = forwardRef(function Button(
 		light = false,
 		color = 'primary' as const,
 		isDisabled,
+		role,
 		...ariaButtonProps
 	}: ButtonProps,
 	forwardedRef: ForwardedRef<HTMLAnchorElement | HTMLButtonElement | null>
@@ -39,6 +41,7 @@ export const Button = forwardRef(function Button(
 			$light={light}
 			$color={color}
 			$isDisabled={isDisabled}
+			role={role}
 		/>
 	)
 })

site/source/design-system/field/SearchField.tsx

@@ -72,7 +72,11 @@ export default function SearchField(
 				hasLabel={!!props.label}
 			>
 				<IconContainer hasLabel={!!props.label}>
-					{props.isSearchStalled ? <Loader /> : <SearchIcon />}
+					{props.isSearchStalled ? (
+						<Loader />
+					) : (
+						<SearchIcon aria-hidden="true" />
+					)}
 				</IconContainer>
 				<SearchInput
 					{...inputProps}
@@ -80,7 +84,9 @@ export default function SearchField(
 					ref={ref}
 				/>
 				{props.label && (
-					<StyledLabel {...labelProps}>{props.label}</StyledLabel>
+					<StyledLabel aria-hidden {...labelProps}>
+						{props.label}
+					</StyledLabel>
 				)}
 				{state.value !== '' && (
 					<StyledClearButton {...buttonProps} ref={buttonRef}>

site/source/design-system/icons/Loader.tsx

@@ -1,6 +1,11 @@
 export function Loader() {
 	return (
-		<svg width={24} height={24} xmlns="http://www.w3.org/2000/svg">
+		<svg
+			aria-label="Chargement en cours"
+			width={24}
+			height={24}
+			xmlns="http://www.w3.org/2000/svg"
+		>
 			<defs>
 				<linearGradient
 					x1="8.042%"

site/source/design-system/icons/SearchIcon.tsx

@@ -1,6 +1,12 @@
-export function SearchIcon() {
+export function SearchIcon({ ...props }) {
 	return (
-		<svg width={24} height={24} fill="none" xmlns="http://www.w3.org/2000/svg">
+		<svg
+			width={24}
+			height={24}
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
 			<path
 				fillRule="evenodd"
 				clipRule="evenodd"

site/source/design-system/typography/link.tsx

@@ -70,6 +70,7 @@ export const Link = React.forwardRef<
 	return (
 		<StyledLink
 			{...buttonOrLinkProps}
+			role="link"
 			$isDisabled={isDisabled}
 			tabIndex={isDisabled ? -1 : buttonOrLinkProps.tabIndex}
 			as={isDisabled ? 'span' : buttonOrLinkProps.as}

site/source/locales/ui-en.yaml

@@ -82,7 +82,7 @@ CompanySearchField:
   description: "The Siret number is a 14 digit number unique to each company. Ex:
     40123778000127"
   label: Company name, SIREN or SIRET
-  placeholder: Café de la gare or 40123778000127
+  placeholder: "Ex: Café de la gare or 40123778000127"
 Comparaison statuts: Status comparison
 Continuer: Continue
 Coronavirus: Coronavirus
@@ -989,8 +989,8 @@ jour: day
 jours: days
 landing:
   aboutUs: "<0>Who are we?</0><1>We are a small, independent, multidisciplinary
-    <2>team</2> within the<5>Urssaf</5>. We are committed to being close to your
-    needs in order to constantly improve this site in accordance with the
+    <2>team</2> within <5>the Urssaf</5>. We are committed to being close to
+    your needs in order to constantly improve this site in accordance with the
     <8>beta.gouv.fr</8> approach.</1><2>We have developed this site to assist
     entrepreneurs in the development of their business.</2><3>Our objective is
     to remove all uncertainties with regard to the administration so that you

site/source/locales/ui-fr.yaml

@@ -67,7 +67,7 @@ CompanySearchField:
   description: "Le numéro Siret est un numéro de 14 chiffres unique pour chaque
     entreprise. Ex : 40123778000127"
   label: Nom de l'entreprise, SIREN ou SIRET
-  placeholder: Café de la gare ou 40123778000127
+  placeholder: "Ex : Café de la gare ou 40123778000127"
 Continuer: Continuer
 Cotisations sociales: Cotisations sociales
 Crée le: Crée le
@@ -755,9 +755,9 @@ inférieurs à: inférieurs à
 jours: jours
 landing:
   aboutUs: "<0>Qui sommes-nous ?</0><1>Nous sommes une petite <2>équipe</2>
-    autonome et pluridisciplinaire au sein de l’<5>Urssaf</5>. Nous avons à cœur
+    autonome et pluridisciplinaire au sein de <6>l’Urssaf</6>. Nous avons à cœur
     d’être au près de vos besoins afin d’améliorer en permanence ce site
-    conformément à l'approche <8>beta.gouv.fr</8>.</1><2>Nous avons développé ce
+    conformément à l'approche <9>beta.gouv.fr</9>.</1><2>Nous avons développé ce
     site pour accompagner les créateurs d’entreprise dans le développement de
     leur activité.</2><3>Notre objectif est de lever toutes les incertitudes vis
     à vis de l’administration afin que vous puissiez vous concentrer sur ce qui

site/source/pages/Creer/AfterRegistration.tsx

@@ -51,11 +51,7 @@ export default function AfterRegistration() {
 					d'établissement (NIC).
 				</Trans>
 				<br />
-				<img
-					src={siret}
-					alt="SIRET and SIREN number"
-					style={{ maxWidth: '100%' }}
-				/>
+				<img src={siret} alt="" style={{ maxWidth: '100%' }} />
 			</Body>
 			<H2>
 				<Trans i18nKey="après.ape.titre">Le code APE</Trans>

site/source/pages/Landing/Landing.tsx

@@ -125,14 +125,25 @@ export default function Landing() {
 
 							<Body>
 								Nous sommes une petite{' '}
-								<Link href="https://beta.gouv.fr/startups/mon-entreprise.html#equipe">
+								<Link
+									aria-label="équipe, accéder à notre page de présentation d'équipe"
+									href="https://beta.gouv.fr/startups/mon-entreprise.html#equipe"
+								>
 									équipe
 								</Link>{' '}
-								autonome et pluridisciplinaire au sein de l’
-								<Link href="https://www.urssaf.fr">Urssaf</Link>. Nous avons à
-								cœur d’être au près de vos besoins afin d’améliorer en
-								permanence ce site conformément à l'approche{' '}
-								<Link href="https://beta.gouv.fr/approche/manifeste">
+								autonome et pluridisciplinaire au sein de{' '}
+								<Link
+									href="https://www.urssaf.fr"
+									aria-label="l'URSSAF, accéder au site urssaf.fr"
+								>
+									l’Urssaf
+								</Link>
+								. Nous avons à cœur d’être au près de vos besoins afin
+								d’améliorer en permanence ce site conformément à l'approche{' '}
+								<Link
+									href="https://beta.gouv.fr/approche/manifeste"
+									aria-label="beta.gouv.fr, accéder au site beta.gouv.fr "
+								>
 									beta.gouv.fr
 								</Link>
 								.

site/source/pages/Landing/SearchOrCreate.tsx

@@ -40,6 +40,7 @@ export default function SearchOrCreate() {
 						<Spacing md />
 						<AnswerGroup>
 							<Button
+								role="link"
 								to={generatePath(absoluteSitePaths.gérer.entreprise, {
 									entreprise: companySIREN as string,
 								})}
@@ -61,6 +62,7 @@ export default function SearchOrCreate() {
 
 						<Button
 							size="XL"
+							role="link"
 							to={
 								statutChoisi
 									? absoluteSitePaths.créer[statutChoisi]

site/source/pages/Nouveautes/Nouveautes.tsx

@@ -71,7 +71,10 @@ export default function Nouveautés() {
 				</H1>
 				<Body>
 					Nous améliorons le site en continu à partir de{' '}
-					<Link to={absoluteSitePaths.stats + '#demandes-utilisateurs'}>
+					<Link
+						aria-label="vos retours, accéder aux statistiques d'utilisation"
+						to={absoluteSitePaths.stats + '#demandes-utilisateurs'}
+					>
 						vos retours
 					</Link>
 					. Découvrez les{' '}

site/source/pages/integration/Iframe.tsx

@@ -239,7 +239,7 @@ export default function Integration() {
 							href="https://entreprise.pole-emploi.fr/cout-salarie/"
 							ctaLabel="Voir le simulateur"
 						>
-							<Logo src={poleEmploiLogo} alt="Pôle Emploi" />
+							<Logo src={poleEmploiLogo} alt="" />
 						</Article>
 					</Grid>
 					<Grid item xs={12} md={6} xl={4}>

site/source/pages/integration/Options.tsx

@@ -143,6 +143,7 @@ export default function Options() {
 									height: '1rem',
 									margin: 0,
 								}}
+								aria-hidden="true"
 							>
 								<g style={{ fill: '#030303' }}>
 									<path d={icons.github.icon} />