Link to external resource in different language should have an indicator


Rule ID: links-language-destination

This rule determines if a given href on <a> element is pointing to an external URL and marks for manual verification when the destination URL points to a different location than the current page.

Examples of correct code for this rule:

<p>Find the documentation <a href="product-swedish.html" hreflang="sv">about product</a>.</p>

How to fix it

Links that point to a location in a different language than origin should have an attribute hreflang and specify the language code.

Additionally, you can use CSS to display links in the destination language.

a[hreflang]:after { content: " [" attr(hreflang) "]"; }

Note:don’t use flags to indicate languages! Flags represent countries, not languages.


Accessibility, Best Practices