Hey @Pikamart
On this one, because the toggle needs to have two labels, I recommend using radio inputs to make it accessible. Essentially, that's what this toggle is - it's two labelled choices and you always have to choose one, exactly the same as a set of radios.
If a toggle is an on/off or only has one label, that's the only time I might use a checkbox for it (with the checked state matching the visible label). All other times a set of radios is definitely more understandable.
It's important not to use display none to hide interactive elements as that removes them completely from the accessibility tree. Instead use properties like height and opacity.
Make sure you add visible focus states to all interactive elements too. I can't navigate around this on my keyboard at the moment.
Take a look at my solution if you need some help with the toggle.
Good luck :)
@pikapikamart
Posted
@grace-snow Thank youu and I checked your solution and it really is interactive even when using keyboards and yes, the radio buttons is definitely the best choice in here, at first I thought of using it then I think that, how can I make use of one radio button and why didn't I think of two radio buttons (haha). Also I did not know that displaying none makes element not accessible since they still have their functionality but like what you said, it removes the accessibility. Thank you for that^^
