Nice one! The solution looks great - here are a couple of small points to consider:
- I noted that your popup is a link element. I wondered whether this should rather be a button as it triggers an action rather than moving the user to another URL?
- Also once the popup image is open there is no way to close it using the keyboard. A little JS might help here as otherwise keyboard users will be trapped.
Lovely job!!
Cheers Dave
Marked as helpful
@GrzywN
Posted
@dwhenson I wanted to avoid using JS in this project, so I decided to use CSS a:target approach.
I improved my solution based on your recommendations, so I added close button for popup (also it was possible to close it before using keyboard, but it wasn't really intuitive) and set role="button"
to a
tags.
Cheers!
@GrzywN perfect!! Works really well now. I hadn't thought about added an aria role instead of changing the element. Lovely!!