Figure 1 Example of various types of effects that can be applied on hover
In hover state, a distinct visual cue SHOULD be available for all users. It helps to show the
interactive element that the mouse is currently focused on.
NOTE:
New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS
and JavaScript (when needed), along with a working demo.
The contrast requirement of 3:1 ratio MUST be met with the adjacent background for
the border and color changes (except for change in text color) on hover.
When hover state is shown as a change in color of the text of interactive element, the contrast
requirement of 4.5:1 ratio for standard text and 3:1 for large text (text that is at least 18 points
or 14 points and bold) MUST be met with the adjacent color for the interactive
element in hover state.
A thick border SHOULD be present when an interactive element is hovered on to
indicate the current location.
The hover state CAN also be shown as a change in background color or text color
along with the thick border.
The hover on interactive element SHOULD NOT cause the text on the page to move
around as it could be distracting for users.
Distinguishable changes shown on hover benefit majorly the below users.
People with limited dexterity
People with low vision
People with color blindness
<h2>
Change background color and apply border on hover for input field and button
</h2>
<label for="email">Email</label>
<input type="text" size="20" id="email" name="searchtext"/>
<button class="hover-effect">Submit</button>
<h2>Change background color and apply border on hover for links</h2>
<ul id="mainnav">
<li class="page_item"><a href="#">Home</a></li>
<li class="page_item"><a href="#">Services</a></li>
<li class="page_item"><a href="#">About us</a></li>
<li class="page_item"><a href="#">Contact us</a></li>
</ul>
<h2>Change text color, apply border on hover</h2>
<ul id="nav">
<li class="page_item"><a href="#">Home</a></li>
<li class="page_item"><a href="#">Services</a></li>
<li class="page_item"><a href="#">About us</a></li>
<li class="page_item"><a href="#">Contact us</a></li>
</ul>
