Hi
I think the accessibility of this is actually pretty good. You just need to
- sort out that sr-only class
- and add hover and focus-visible styles to the interactive elements
In your styles I suggest adding a max width in rem rather than %. Then you wouldn’t need to change as much in media queries.
Also, I’m not sure you understand the difference between em and rem(?) Be very careful with how much you are using em. As those sizes can inherit from their parent you could get some unintended consequences, especially in larger projects. Using rem may be more consistent and then em would be useful when you intentionally want a size to inherit from the parent’s font size. It’s just an idea though, lots of people prefer using em and that’s ok as long as you are aware of the potential downsides.
Good luck
0
