: Printable characters between two links. How to legally hide so my page still appears correctly? Once again, I'm trying to follow standards... Here's another issue. On one page of my site, I
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: 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?
More posts by @Harper822
1 Comments
Sorted by latest first Latest Oldest Best
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>
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.