Make them discoverable by placing them in the header or footer with each language labeled twice: once in the current locale and again in the original format. Look here for accessible select menus and at Headless UI for guardrails. Finally, Jacob Neilson has some pointed advice worth consuming.
Looks like one of the main gotchas is you should only use flags if you're having the user select countries - many languages are spoken in multiple countries and many countries have multiple languages spoken within their borders. Otherwise, making the component accessible depends on the HTML element you choose to use.
Oh wow, thanks for all the resources! I'm gonna look into i18next 👏
I totally agree with the flags vs languages. I prefer to use the ISO abbreviations :)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Thanks for sharing this. Do you know about the best practices for language toggles and selects in the realm of a11y?
Make them discoverable by placing them in the header or footer with each language labeled twice: once in the current locale and again in the original format. Look here for accessible select menus and at Headless UI for guardrails. Finally, Jacob Neilson has some pointed advice worth consuming.
Hi Max,
I haven't gotten that far in to tell you in detail, but perhaps @inhuofficial or @abbeyperini can shed some light on this?
Hey! I haven't built a language select, only written some i18next code, but there are some good resources out there:
Looks like one of the main gotchas is you should only use flags if you're having the user select countries - many languages are spoken in multiple countries and many countries have multiple languages spoken within their borders. Otherwise, making the component accessible depends on the HTML element you choose to use.
Oh wow, thanks for all the resources! I'm gonna look into i18next 👏
I totally agree with the flags vs languages. I prefer to use the ISO abbreviations :)