Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Thanked 0 Times in 0 Posts

    Image Link, focus border around "line", not image

    Hi All,

    I've been struggling with an issue for a couple of days now and it's finally got me beat.

    I have a link which has an internal img element (see below) and I am trying to enable the website to be keyboard friendly.

    <a href=""><img src=""></a>
    Currently when I tab to the link, I can press enter and it will work however, visually I get the following result:


    This is obviously not ideal and I want the focus border to surround the whole image. To rectify this I tried giving the <img> a tabindex of "0". This resulted in the border being correctly displayed however, when I press "Enter", the link is not triggered - This seems somewhat obvious as the <img> is not selected not the link.


    How do I get the border to surround the image and also trigger the link when "Enter" is pressed?

    p.s. The screenshots were done in Chrome but this is also required to work in a slightly older version of webkit.

    Kind regards,

  2. #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Thanked 2,233 Times in 2,220 Posts
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts