0

I'm trying to make my site WCAG 2.0 AA compliant. I need to make all my links accessible by tabbing, however the first link on the page (a logo which leads back to the homepage) is not being picked up when the user presses tab on the keyboard. All the text links on the page are being picked up fine. My mark up is below:

<a href="#" title="homepage">
   <img class="logo" src="images/clear.png" alt="Homepage" />
</a>

How I can I fix it?

Rich
  • 5,603
  • 9
  • 39
  • 61

1 Answers1

2

I'm willing to bet you just have something along the lines of a { outline: 0 } in the stylesheet. Take a look at that and remove it. It's more than likely still tabbing to it, just no indication of it.

Bill Criswell
  • 32,161
  • 7
  • 75
  • 66
  • Thanks for the response Bill, however I've already checked this. I'm using a screen reader so it creates its own outline, and reads the text inside the link (I've already specified alt text). – Rich Aug 06 '13 at 14:12
  • Does the screen reader use `border` to outline the links instead? – Bill Criswell Aug 06 '13 at 14:15
  • Its got it's own bordering. Also, I can clearly see the tabbing shift focus from the URL bar, straight to the second link, skipping the logo. The mark up is in logical order. – Rich Aug 06 '13 at 14:17
  • Could it just be ignoring it because it's going to `#` or is there an actual link in your real code? I don't see how it can skip it without setting like `tabindex="-1"` to it. – Bill Criswell Aug 06 '13 at 14:21
  • Here is your code without anything else, so it's definitely something else: http://jsbin.com/uvogod/1 – Bill Criswell Aug 06 '13 at 14:22