Unit 11: Intro to Photoshop
Unit 12: Design Accessibility
Unit 13: Product Design Thinking
Unit 14: User Experience Design
Unit 16: Introduction to Design Portfolios
Unit 17: Portfolio Development
Unit 18: Personal Branding
Unit 19: Case Studies
Unit 20: Portfolio Website Design
Unit 21: Career Coaching
2 of 2

Hover States

In this lesson, we’ll a look at hover states and accessibility design considerations around it.

Don’t make people hover to find things.

This principle mainly serves people with motor-related disabilities. This includes keyboard-only users who have vision, and those who use speech recognition tools like Dragon NaturallySpeaking to interact with web pages. Keyboard users and assistive technologies like Dragon rely on actionable items being visible on the screen. If a link or button cannot be seen by Dragon, it cannot be verbally “clicked”. If a keyboard-only user cannot see that a button exists on a page, how can we expect them to navigate to the empty space where it will ultimately appear?

Below is a screen shot from Gmail with Dragon Naturally Speaking showing an overlay with hyperlinks identified by number. The user can now speak a number out loud and activate a link. What happens if a link isn’t visible until a region is hovered upon? We would have numbers showing next to empty spaces.

Instead of hiding actions and information behind hover states, explore more inclusive alternatives.

  • Place secondary actions inside of menus (or non-modal dialogs), without using hover states to hide the trigger.
  • Lighten the contrast of secondary icons and darken them on hover.
  • Use tangible items as triggers for larger hovers. An info icon is a better trigger than white space to launch a content-filled hover.

Here’s an example from LinkedIn. This is a screenshot from a profile page.

Suddenly there are visual indications that we can individually edit many of the fields on this page including the name, title, previous jobs, education and even profile photo. Taking this one step farther, when we hover specifically over the title, the text turns blue indicating that we are ready to click.

This is one solution to the accessibility problems this design may cause certain groups of users. We have smaller pencils that appear nearby the fields. They are always present.

When we hover over a field, the blue kicks in.

Here’s another example from Evernote. This is a list view of notes. When the user’s mouse hovers over a row, four actionable icons appear.

In this case, we would ask the designer to explore always showing these four icons. One possible solution would be to always show these icons. They could be green on the white rows and reverse on hover.

This solution might also be called “heavy”, but remember that we aren’t designing for designers. We are designing for a diverse set of users with different needs and varying technologies for accessing computers.

On the surface it may seem that placing these limits on your use of components, hover states, and visual design limit your creativity. If anything, these guidelines will push the limits of your creativity as you find visually pleasing designs that enable the success of a wider set of users.

With the right focus, you will find that any design challenge can be met in a way that meets the needs of your executives, marketing team, Dribbble followers and all of your users, including those with disabilities.

Scroll to Top