Designing Better Show/Hide Interactions

by Scott O'Hara

Crafting delightful user experiences on the Web allows for a great amount of experimentation and variety in how best to present content to end users. Many UI patterns are constantly re­imagined to make the best use of available screen real estate on a per­project basis. These re­imaginations result in the emergence of popular new patterns that the design and development community latch onto. However, the communities may not realize additional exploration of usability should be done to make sure a pattern is truly usable for all.

Recently I took a hard look at a pattern I had seen a lot of: revealing hidden content when hovering over elements. Specifically, revealing titles, descriptions, and at times interactive elements relating to images.

You can read my tutorial on revealing captions for everyone, where I describe the necessary code and call out various accessibility considerations for implementation.

About Scott O'Hara

Scott O'Hara is a UX developer & designer. He loves pushing the limits of CSS, designing usable, accessible experiences for all, and teaching and writing...