Manuel Matuzović

Let’s play a game. I’ll hide a button using different techniques in HTML and CSS, and you have to guess whether it’s still focusable.

In my last blog post, I explained how to create a back-to-top button that visually indicates the scroll position. I tested it in different browsers to see if the CSS works. I didn't test with screen readers because the HTML was basic and straightforward. There wasn't anything that could go wrong, or at least I thought so.

I noticed a nice detail on theneedledrop.com. They have a square scroll-to-top button with an arrow pointing right. The button's border is black, and the background color is white. When you scroll, the arrow points up, and the background color turns gradually yellow as you scroll. That's nothing too special, but it caught my attention because it looks nice and I realized we can build this without JS. Let's try.