I have sent the site i'm working on to someone who checks whether its accessable or not, and the test came back with a reject regarding some links in the site.
There are 7 links, each of them in their own hoverable box, and in each box there is text, a headline and about 3-4 lines of more details. I'm happy with the design itself (visually) and want to stick with it.
Initially, the code looked like this:
<a href=# target="_blank" rel="noopener noreferrer">
<strong> some headline </strong>
<span> info1 <br/> info2 <br/> info3 </span>
</a>
the screen reader reads it like this: "link - some headline", and then "link - info1" and so on... even though its a single link!
After reading some about accessibility, I decided to not use the <br> element, since it causes problems in screen reading.
And so, I changed it to:
<a href=# target="_blank" rel="noopener noreferrer">
<p><strong>some headline</strong>
info1
info2
info3
</p>
</a>
with css handling the break lines with the property "white-space: pre-line;" applied to <p> element.
Surprisingly, the screen reader still has the same problem.
How can that be? there is only one <a> element.
I also tried switching places between <a> and <p>, to get a similar result and it also messed up the design.
Follow-up: Could it be that their reader is just not working well? I had that suspicion
Would love to get some insight on this, thank you.