WebAIM - Web Accessibility In Mind

E-mail List Archives

Providing the correct information about a redundant link

for

From: Date: Oct 21, 2020 10:51AM

Hello everyone,

As an absolute beginner in accessibility testing I would like to ask for
a recommendation.

I am working with the project where I am asked to do an accessibility
testing.

I am not sure if I provide an information about the bugs in a correct way.

In the example below I will paste my text with how I described the
redundant links issue.

I will really appreciate any suggestions how it is better to correct the
report and how it is better to report about accessibility issues.

Title:

Accessibility - redundant links

Description:

The redundant links are present on a web page.
Preconditions:
nvda 2020.3.
Steps to reproduce:
1. Launch nvda.
2. Open google chrome and navigate to access travel webpage.
3. Using only keyboard for navigating, press down arrow. You will notice
that screen reader announces link graphic "Moscow" and then the link
"Moscow" below.
Expected result:
The redundant links shouldn't have the images with redundant alternative
text. It is needed to make the alt tag invisible for screen readers by
putting alt="".
In that case the screan reader won't process the image and the user
won't be able to interactwith it, but he will be able to navigate to the
link without any repititions while navigating.
Actual result:
The screen reader tells the text of the image and then it tells the text
of the link which is absolutely the same.
The redundant link on a page means that the screen reader and keyboard
users will have to navigate the same elements several times.
Usually it happens when there is an image with the alt-text and the link
that is located below the linked image.
It is needed to combine all redundant links into one link and remove the
redundant alternative text from images inserting alt="" to them.
Standards and guidelines:
https://webaim.org/standards/wcag/checklist#sc2.4.4
Code:
<a href="/en-US/Guide/Index/41" tabindex="0">
<img class="rounded-circle" width="88" height="88"
src="/media/eadaed3a-c88b-4083-8916-b1d0685f829f_small.png"
alt="Rent&amp;Repair Equipment">
<div class="teammate">
<p>Rent&amp;Repair Equipment</p>
<span>(Guide)</span>
<div class="country">Kaliningrad</div>
</div>
</a>

--

Best regards,

Vsievolod