Sometimes, I like to listen to shows or YouTube videos as I fall asleep — just something in the background to keep my mind from bouncing around.
Last night, after taking my glasses off, I decided to grab my MacBook from my nightstand and play a show I have saved on Plex.
Since I didn't have my glasses on, my vision was fuzzy. But I know my way around Plex, so it wasn't too difficult to get to the show I wanted. I used the keyboard shortcut / to focus on the search bar, searched for Community, arrowed down once, and hit Enter.
Once I got to the show I wanted to watch, I just needed to hit play. Since my vision was blurry, I couldn't really see my cursor, and up until this point I was relying on my keyboard.
So I used my trackpad and moved my cursor around in the general area of the button and waited for the button to change colors. Once it changed from a dark yellow to a lighter yellow, I knew that I was hovering over the button and could click my trackpad to start the show.
This experience reminded me of the importance of adding hover and focus effects to interactive elements. Those aren't just secondary CSS styles you add to spice things up — they're essential for providing users with critical feedback. Not everyone has a pair of glasses they can slip on to quickly restore their 20/20 vision. Some people have poor vision all the time and rely on these cues to effectively surf the web.