Hi I have the following question in regards to accessibility, I'm using JAWS screen reader software to test my code and I have the following issue:
JAWS reads out the heading label for the category, but it doesn’t represent the category and its repeating twice. The software says "Create case dash link";"Create case dash link".
The software should read should be Ask a question"
Please advise, my HTML is below
<div class="col-12 col-sm-6 col-md-4">
<article class="icon-feature icon-feature--first">
<a class="icon-feature__link" href="/support/create-case/"></a>
<div class="icon-feature__icon bg--blue-primary" style="height: 150px;">
<a class="icon-feature__link" href="/support/create-case/">
<span class="icon icon--signs"></span>
<div class="imghoveropacity">
<img class="img-fluid" title="Ask a question" src="/Illustration__SS_illo_Ask_a_question" alt="Ask a question" width="150px" height="150px">
</div>
</a>
</div>
<a class="icon-feature__link" href="/support/create-case/">
<h3 class="icon-feature__title">Ask a question</h3>
</a>
<p class="icon-feature__excerpt">Submit an enquiry</p>
</article></div>
JAWS is right, there's nothing to read from its perspective. Well, almost nothing.
If you want JAWS with default settings to read your links, they should have either A) link text, i.e., something meaningful between <a> and </a>, or B) The aria-label attribute that should not be empty.
You have here:
<a class="icon-feature__link" href="/support/create-case/"></a>
This link contains nothing to JAWS' eyes. I mean, nada. The easiest way to fix this is to add an aria-label attribute, like this:
<a class="icon-feature__link" href="/support/create-case/" aria-label="Ask Question"></a>
Then JAWS would know what to read when the focus lands on that link. Otherwise, as it is a link, so a priority piece of data that must be announced somehow, it tries to get at least something and reads the (relative) URL, that's why you hear "Create Case".
The other link is a more cumbersome case. You have a link, a div inside it, and an img inside that div. Here JAWS is also confused because the link text is blank again, so it probably should read the alt attribute of the image, but this image is in another div, so it is not sure if the div should be read as the link contents. Oh yes, and there is an empty span also, and it is the first element of the link, so even more confusion arises.
If I were you, I'd also simply add an aria-label if you need that link to be read, too. And if the span is not needed and is only for decoration purposes, hide it from JAWS' view, otherwise you also will get some hard-to-notice troubles. After that, if you hear "Ask Question" twice on that link, hide the div with the image, you don't need it anymore (this last point is to be discussed, needs to be tested more thoroughly):
<a class="icon-feature__link" href="/support/create-case/" aria-label="Ask Question">
<span class="icon icon--signs" aria-hidden="true"></span>
<div class="imghoveropacity" aria-hidden="true">
<img class="img-fluid" title="Ask a question" src="/Illustration__SS_illo_Ask_a_question" alt="Ask a question" width="150px" height="150px">
</div>
</a>