Accessibility: 2 links with same text and different HREF

Question

In a web application I have lists of things with the following structure:

As you can see, when we list items (users, roles or anything basically), we have some associated actions on the right, highlighted on yellow. In this case all items have a Delete option.

However, if I run a ADA compliance tool, I get a warning saying:

Warn: Ensure that links that point to different HREFs use different link text.

What would be correct way to fix this as all the Delete links obviously point to a different link (for example: javascript:Delete(123) ). I know it's just a warning I could ignore, but it might be good to fix it.

I don't want to change the link text to Delete XYZ as it would be way redundant and it might not fit in the screen either.

I'm using the Firefox's Accessibility Evaluation Toolbar for the test.

Edit: When using a screen reader, the tab order is Administrator , Delete , Advisor , Delete , Instructor , Delete , ... as the items are also links that take you to the details/edit of each of those items. I'm not an expert on accessibility, but it looks redundant since it's already reading the item before each Delete .

Answer 1

Use a screenreader only class on a more descriptive element if you don't want to put the proper text labels in.

Bootstrap has a really handy little style .sr-only you can add to your stylesheet for elements you only want screenreaders to see:

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

Just put the style on a more verbose version of the 'delete' div/span:

<div class="sr-only">Delete Administrator</div>

Answer 2

Similar to staypuftman's suggestion, I would also use Bootstrap's .sr-only class but I would assign it to a span surrounding the extra words only so that you only see "Delete" in the button while the accessibly hidden text is part of the button semantically and will be read when the button has focus.

Like so:

<button type="button" id="deleteAdvisor">
    Delete
    <span class="sr-only"> Advisor</span>
</button>