Links only available in other language than page

[shawnthompson]

Continued from DAT: Github Footer · gc-da11yn/gc-da11yn.github.io · Discussion #305.

In the footer discussion we talked about adding Problèmes (Issues) | en anglais seulement link to the footer and formatting it with a pipe ( | ) instead of putting the extra text in parenthesis like we usually do for links to something in a different language,.

This discussion was started to come up with an accessible pattern to use on our site when linking to content that isn't the same as the language of the page we are linking from.

Most links on Government of Canada websites use a similar pattern to the following:

• Problèmes (Issues) (en anglais seulement), or
• Problèmes (Issues) (Disponible en anglais seulement)

If you do a Code search you can see that we are using both variants from above on our site.

The Canada.ca Style guide is using a different variation. The accessibility community is not a fan of their version because it places the (French only) text outside of the actual link text and we feel it should be inside the link text as it's important information needed to understand the link text. So I really don't want to follow their guidance but wanted to acknowledge that we know about it.

See section 7.4 Linking to non-government content for more details.

Regardless of the format we use for the text the HTML should be marked as the following:

<a href="https://github.com/gc-da11yn/gc-da11yn.github.io/issues" hreflang="fr">Problèmes (<span lang="en">Issues</span>) (en anglais seulement)</a>

Making sure you are using the hreflang attribute to programatically define the language of the target page. In this example we are also adding a <span lang="fr"> around the word Issues because it's the English term.

What are your thoughts?

[shawnthompson]

Also another thing to add to this discussion.

Should we be translating titles or link to English only pages into French titles? A great example is when we are linking to the Harmonised European Standard on Accessibility (EN 301 549) on a French page.

<a href="https://www.etsi.org/deliver/etsi_en/301500_301599/301549/03.02.01_60/en_301549v030201p.pdf" hreflang="en" download="download">
<em>Norme européenne harmonisée : Exigences en matière d'accessibilité applicables aux produits et services liés aux TIC (EN&nbsp;301&nbsp;549)</em> (disponible seulement en anglais)</a>

Question is should we be using the English text when linking to an English page instead of translating it?

<a href="https://www.etsi.org/deliver/etsi_en/301500_301599/301549/03.02.01_60/en_301549v030201p.pdf" hreflang="en" download="download">
<em lang="en">Harmonised European Standard on Accessibility (EN&nbsp;301&nbsp;549)</em> (disponible seulement en anglais)</a>

Another discussion we should have for this example should be about adding the files format and size in the link text also. Feel free to open a new discussion if you'd like to chat about that.