DEV Community

James
James

Posted on

Is there an accessible way to have buttons that are kinda links in a select list?

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));
Enter fullscreen mode Exit fullscreen mode

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)