Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    1
    Thanks
    0
    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.

    Code:
    <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:

    Image Link, focus border around &quot;line&quot;, not image-01.png

    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.

    Image Link, focus border around &quot;line&quot;, not image-02.png

    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,
    sBoff

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 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
    •