# ✎ Technique: Content on hover or focus

Make it easier for users to interact with added content. Tooltips, drop-down menus, and popups are examples of added content. This new content is usually made visible when you put your mouse pointer over a "trigger" item such as a button or link. It can also display when an item receives focus. Some people have difficulty keeping the mouse pointer over the trigger item. Also, the new content will sometimes obscure existing content. The three requirements of this success criterion, as outlined below, help make the added content more operable.

# ✎ Technique: Consistent layout

Consistency is one of the cornerstones of good usability. Although it is possible in advanced CMSs to create radically different page layouts according to content type, it's important that areas outside of the page’s content area remain consistent across the site for wayfinding purposes. This can be controlled through carefully designing and implementing page templates.... Read more about ✎ Technique: Consistent layout

In long lists of links, it's helpful to show users which links they've already followed so they can focus on unseen content. Browsers do not tend to let you style visited links with anything but the color property.

## Examples

### ✓ Good example

With link styling, as with many aspects of web-interface design, you can aid comprehension by capitalizing on convention. By default, browsers style unvisited...

# ✎ Technique: Site and page navigation

It's important to provide consistent navigation regions to navigate between a site's pages and—where there is a lot content on each page—between sections of pages.

Clear, logical and consistent navigation tools reliably help people find their way to the content they need and recover quickly when they are in the wrong place. This helps everyone but particularly people with visual, cognitive, or motor impairments who might otherwise find it time-consuming to locate the information they need....

# ✎ Technique: Indicating current page location

Users can find their way around a web site more easily and confidently if they know where they are.

This is why websites tend to highlight the navigation-menu item for the current page or section. But to make this information is accessible, we cannot rely on color alone to differentiate that link.

# ✎ Technique: Hit areas

Interactive elements should not be difficult to select or activate when using a mouse or a touchscreen.

Generous sizing and spacing is important, and their implied visual “hit area” should correspond to the control’s active area.

# ✎ Technique: Focus order and tabindex

Interactive elements should, under most circumstances, be focusable in the order that they appear in the source code. This helps people who are using the keyboard or alternative input devices to follow focus in a logical order.

The order that elements appear in the document source should reflect the order they appear visually.

# ✎ Technique: Paragraph link focus indication

All interactive elements should be focusable so that they can be activated using a mouse, a keyboard, voice recognition software, a switch input device, and other input methods.

They should also indicate when they’re focused so that users know which element they are currently interacting with. This is where focus styles come into play.

# ✎ Technique: Managing focus and inactive elements

Visually indicating which element has focus is important for effective keyboard navigation. It's also important to ensure that only those elements that are available visually for interaction are focusable. If an active element is intended to be unavailable in a particular state and it’s hidden from view, it should not be able to receive focus.

Having to tab through invisible controls to reach visible ones is arduous and potentially confusing for sighted users navigating the page by keyboard. Also, screen-...

# ✎ Technique: Keyboard accessible links

Links (<a> elements) are focusable by default, so it should normally be possible to activate them using the keyboard. However, under certain circumstances, they are not focusable: Unless you are deliberately trying to "disable" a link, make sure it does not take the form of any of these examples.

# ✎ Technique: Positioned navigation bar

When positioning elements using CSS, it's possible to place them in a position that does not reflect their location in the source order. This can have unexpected side effects for keyboard-navigation users.

# ✎ Technique: Icon fonts

Icon fonts are a popular and effective method for providing scalable symbols that can be used to label controls and provide graphical information. The information provided by icons also needs to be available to people who can’t see them.