0

Once again, I'm trying to follow standards...

Here's another issue. On one page of my site, I have a grid of clickable images. In HTML code, the grid is partly as follows, and the images are generated through CSS code. This is the HTML:

...<a href="image1"></a><a href="image2"></a><a href="image3"></a>...

When testing my page, I found that it violates the BITV, TG, and WCAG 1.0 level AAA guidelines because I don't have a printable character between links. See: http://achecker.ca/checker/suggestion.php?id=134

So I was thinking using the following HTML instead to comply:

...<a href="image1"></a> . <a href="image2"></a> . <a href="image3"></a>...

But the problem is guests will see dots on the screen and wonder why they are there with the grid when they expect to see only the grid on the screen. I can't use CSS to make the dot color similar to that of the background color or I will be violating other accessibility guidelines.

The only way I feel I can pull this off is to do something like this:

...<a href="image1"></a><div class="hide"> . </div><a href="image2"></a><div class="hide"> . </div><a href="image3"></a>...

and in CSS, set the divs to be always hidden. I'm not sure if that violates some guidelines but doing that will increase the HTML size on some pages by 50% to 500% and would hurt the code-to-text ratio.

What is the proper way to hide characters between links whilst following all guidelines including the ones I mentioned above?

Improve this question

1 Answer 1

Reset to default
2

When you don´t put something in between, are your links even visible / klickable on your page?

Normally you would attach a link to a picture like this.

<a href="image1"><img src="example.jpg" alt="example pic"></a>

If your images are created through CSS you should include the html elements on which the CSS is creating the images in between. e.g.

<a href="image1"><div class="image1"></div></a>

Then your links are visible (as images) and you dont have to use any tricks to have your link appear. you can also use your grid at link holder if you just put the html elements of your grid inside the here the grid which is later holding one of the images each is beeing a link.

Edit comment2 -> try row 2 instead of 1

<a id="pic1" href="image1">1</a>
<a id="link1" href="image1"><div id="pic1"></div></a>
Improve this answer
2
  • I forgot to indicate the ID value to the hyperlinks into my question. I use CSS. The only clickable printable character in my link is a number inside the picture representing the picture number so users without CSS/Javascript enabled will see a set of numbers. I feel it is improper to create an anchor tag with no printable text inside of it.
    – Mike -- No longer here
    Jun 27, 2016 at 14:03
  • try putting the the id in a div inside the hyperlink
    – veritaS
    Jun 27, 2016 at 14:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.