Using CSS Floats with Image Links

  • 0
  •  0

Using CSS Floats with Image Links

The use of CSS floats has been a common method for developers to position content on a web page. According to the W3C CSS 2 specification, section 9.5, “A float is a box that is shifted to the left or right on the current line.” Ensuring visual keyboard focus indication can be tricky for floated image links.

WCAG success criteria 2.4.7 states that there must be a visual focus indicator on all active elements. Without a visual indicator of focus, sighted keyboard-only users will have difficulty identifying the focused element. Often, developers add CSS outline:0; declaration, which removes focus indication. Floating image links, can also have the effect of hiding visual focus indication from the user.

For example, in Figure 1 and Figure 2, a product displayed on a page allows users to activate to view details of this product. To the right may be another element such as a rating review or a contact link. While there may not be a CSS outline:0; or outline:none; declaration for the positioned image links, visual keyboard focus can still be hidden. The problem is the image is floated instead of its parent anchor element.

HTML Code Example:

<div>
<a href="http://dev-ssbbartgroup.pantheonsite.io">
<img alt="SSB BART Group" src="https://www.ssbbartgroup.com/images/hdr_logo.gif">
<img src="stars.png" alt=" Five Stars out of five" class="stars-five" />
</a>
</div>

Non-compliant CSS Example:

<style>
a {
font-size:0.85rem;
text-decoration:none;
}
a img {
float: left;
}

a img.stars-five {
float: right;
}
</style>

Figure 1. Visual Keyboard Focus indication is misplaced in Firefox 32.
Figure 2
Figure 2. No visual focus is displayed in Internet Explorer 11.

To remediate this, developers can set a display:inline-block; to the parent anchor element (Figure 3). This will allow the entire section to have a visual keyboard focus outline.

Compliant CSS Example #1

<style>
a {
font-size:0.85rem;
display:inline-block; 
text-decoration:none;
}
a img {
float: left;
}

a img.stars-five {
float: right;
vertical-align:middle;
}
</style>

Figure 3. Visual keyboard focus outline surrounds the entire image link for both Internet Explorer and Firefox.

For image links that are positioned with other elements on the page, the resolution may not be as simple as adding a display declaration on the parent image. For example, when multiple elements are positioned using float, focus can still be lost on the image link (Figure 4).
Figure 4. Focus appears to skip the SSB BART Group image link and move to the Contact link

HTML Code Example:

<div>
<a href="http://dev-ssbbartgroup.pantheonsite.io" >

<img border=”0″ alt=”SSB BART Group, Inc.” src=”https://www.ssbbartgroup.com/images/hdr_logo.gif”>
</a>
<a href=”http://dev-ssbbartgroup.pantheonsite.io/Contacts” class=”ssbContact”>Contact SSB BART Group</a>
</div>

Non-Compliant CSS Example:

<style>
.ssbLogo {
float: left;
}

.ssbContact {

float: right;
margin: 24px 0;
}
</style>

To resolve this, developers can move the float position to the parent anchor element rather than the nested image element (Figure 5).

Compliant CSS Example:

<style>
.ssbContainer + a {
float: left;
}
      

.ssbContact {
float: right;
margin: 24px 0;
}
</style>

Figure 5. Visual Focus online set on the parent link rather than the child image.

This post has described a couple of solutions to resolve the lack of visual indication of keyboard focus on floated image links. Developers should be aware of issues related to floated links and must ensure that when floating image links are used, the visual indication of keyboard focus needs to remain intact. As shown, developers can either set a CSS display on the parent image or move the CSS float declaration from the image selector to the parent anchor selector.

No Comments

    Leave A Comment