I need to have a select list (or something that looks just like it) where users can choose their language. When they make the selection the site is translated. This code shows the idea:
https://codepen.io/_j_i_m_fb_/pen/gOpOYGV
<select>
<option>English</option>
<option>French</option>
</select>
const SELECT = document.querySelector('select');
const changeLanguage = language => {
console.log('Language is now ', language)
}
SELECT.addEventListener('change', (e) => changeLanguage(e.target.value));
Can something like this be made accessable? I feel that really the languages text should be buttons or links, but I don't think those are valid in a select list. I could style a ul
with CSS but then you'd lose the native controls on mobile, so for at least some users it would be worse UX.
Also as a side note, why is there no "accessibility" tag?
Top comments (0)