🐛(lagaufre) use accessibleName for service aria-label

[Ovgodd]

Purpose

Use the full accessible name for France Transfert in the La Suite app switcher (#49). The landing page API can keep a short display name (Fr. Transfert) while screen readers announce the full service name.

Proposal

• Add optional accessibleName to the lagaufre widget Service type
• Use accessibleName || name for aria-label in lagaufre v2
• Apply the same logic in gaufre v1 (GaufrePage.astro)
• Expose accessibleName from /api/v1/services.json when present

[manuhabitela]

Hey there :)

my 2 cents:

• accessible name should contain the visible name, otherwise people using voice commands could be stuck trying to voice activate things they see on screen by their visible name, while the voice commands tool only recognize the invisible names
• on paper, I'd argue if we feel the need to have "understandable names", maybe they should be visible by default. If we consider that "Fr. Transfert" can't be understood as is, why would people with sight would get just that?

So from my pov we shouldn't merge this as is.

Accessible name should always contain the visible name. If you really feel that short names should be explained, we should set things like "Fr. Transfert - France Transfert" in accessible names, if the visible name is "Fr. Transfert". Not just "France Transfert".

sorry if I misunderstood something, I'm on vacation, just checking this quickly 🌴

[Ovgodd]

Hey there :)

my 2 cents:

• accessible name should contain the visible name, otherwise people using voice commands could be stuck trying to voice activate things they see on screen by their visible name, while the voice commands tool only recognize the invisible names
• on paper, I'd argue if we feel the need to have "understandable names", maybe they should be visible by default. If we consider that "Fr. Transfert" can't be understood as is, why would people with sight would get just that?

So from my pov we shouldn't merge this as is.

Accessible name should always contain the visible name. If you really feel that short names should be explained, we should set things like "Fr. Transfert - France Transfert" in accessible names, if the visible name is "Fr. Transfert". Not just "France Transfert".

sorry if I misunderstood something, I'm on vacation, just checking this quickly 🌴

Thank you @manuhabitela for the detailed answer, I get the point.

The audit (Sophie) flagged that the France Transfert link does not have an explicit enough accessible name. At the same time, the full label “France Transfert” does not really fit in the grid tile, which is maybe why it is “Fr. Transfert”.

What would you recommend in that case ? We can talk about it on visio ;) !

[manuhabitela]

Hey there,

To strictly conform to WCAG we should set something like Fr. Transfert (France Transfert) as accessible name, to copy the exact visible name in the accessible name (for reasons I already mentioned above).

I guess in that case we could argue that it's obvious that "Fr = France" here and writing only France Transfert as accessible name is okay.

Personally I'd stick to the guidelines and make sure to repeat the visible name.

I was a bit against this PR because it allows us to use totally different strings for visible name and accessible name, and this guideline of "accessible name must at least contain visible name" is not well known. So it allows for easy mistakes on the authoring/dev side. But oh well I'm a bit too wary about a small thing I guess, with good comments and a little care, no reasons that wouldn't work!

[manuhabitela]

to prevent misusage, I'd add a comment here, i.e. something like that:

name: string;
/* String to use as aria-label if the visible name is not self-explanatory enough.
It should start with the visible name or at least include it (see https://www.w3.org/WAI/WCAG22/Understanding/label-in-name.html) */
accessibleName?: string;

[manuhabitela]

isn't this for the old Gaufre, where France Transfert is already written in full? You should not need your accessible name here I think.

[Ovgodd]

You're right, thanks! Removed it from services.json since the old Gaufre already shows the full name.

I'll set "Fr. Transfert (France Transfert)" on the landing page side, where the visible name is actually short.