Hide decorative flags from screen readers in the language selector

The flags had titles that repeated the button text. Also mark each
language name with its own lang so it's pronounced correctly.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
leanderandClaude Opus 5.5 committed 2026-10-30 22:54:18 +01:00
1 parent 633237f262
commit 70ba50c515
1 file changed
+4 -4
+4 -4
View File
@@ -24,13 +24,13 @@ const LanguageSelector = () => {
<div className={styles.languageSwitcher}>
{locale === "no" ? (
<button onClick={() => changeLocale("en")} className={styles.button}>
<GB className={styles.flag} title="English flag" />
English
<GB className={styles.flag} aria-hidden="true" />
<span lang="en">English</span>
</button>
) : (
<button onClick={() => changeLocale("no")} className={styles.button}>
<NO className={styles.flag} title="Norwegian flag" />
Norsk
<NO className={styles.flag} aria-hidden="true" />
<span lang="no">Norsk</span>
</button>
)}
</div>