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: , , , }

comment

It is valid in HTML but their several mistake about accessibility (text link is horrible (‘descriptive alt text Blog entry title”)

You can write:

<h2 tabindex=”0″>
<img src=”/path/to/image.png” alt=”descriptive alt text” title=”" />
Blog entry title
</h2>

truffo ( December 20, 2010 at 4:07 pm )

    Thanks – I've got a few concerns about how the accessibility of block level links would work.

    I think in this case even better would be to leave the alt attribute blank. The post title in the <h2> is fine as link text and the image content is likely not important in this context.

    On the page that the header links to, where the image is part of the content, you'd need a descriptive alt attribute.

    I've left the href in the link blank because it is just sample code. Really it would point to the blog post so an <a> element is needed rather than adding a tabindex to the <h2>

    David Owens ( December 20, 2010 at 4:19 pm )

Please Leave a Reply

TrackBack URL :

pagetop