Webkit (Safari and Chrome) removes links containing only floated elements from the tab order

posted by on 2010.12.20, under Accessibility, CSS, Development
20:

I’ve just found a strange bug in Google Chrome.

I’ve been working on a set of templates for fineartdavid.com, and was testing them for keyboard accessibility. I hadn’t expected anything unusual because there is nothing very complicated in the the HTML. When I tabbed through the page however, the large images were being skipped.

At first I thought the problem was caused by block-level links. These are allowed in HTML5 and are a good solution to the design pattern where you have an image and a header both pointing to the same link.

<a href="#">
    <img src="/path/to/image.png" alt="descriptive alt text" title="" />
    <h2>Blog entry title</h2>
</a>

A few experiments showed that this was fine though, and that the problem only happened when the image was floated. Further investigations showed that any links that contain only floated elements are removed from the tab order.

Check out the test suite. Obviously has implications for accessibility, so lets hot it is fixed soon.

Update: I’ve updated the title because this happens in Safari too, meaning it is a Webkit, and not Chrome bug.

Update 2: I’ve filed a Webkit bug report.

{ 2 comments } :| { Tags: , , , }

pagetop