Changing Edit | Details | Delete Action links to have alt text for 508 compliance readers

Question

MVC @Html.ActionLink Edit, if you run a compliance program like JAWS, just says "Edit" visual it is fine, but if you are doing a find as a visual impaired person. Thousands of "Edits" doesn't help you understand where you're at. I need the compliance program to say "Edit CustomerX", but keep visual real estate down to just "Edit". Same goes for Delete and Details.

I have tried using hidden labels, but didn't work. I was thinking titles would do it, but didn't see any results, and read an article that title attributes are bad. Still looking for more arguments on this.

Bad for 508 searching Normal setup:

@Html.ActionLink("Edit", "Edit", new { id = item.CustomerID }) 

Doesn't work hidden labels:

@Html.ActionLink("Edit", "Edit", new { id = item.CustomerID })
<label class="hidden">&nbsp @item.CustomerName &nbsp</label>

Trying to find pros and cons: @Html.ActionLink("Edit", "Edit", new { id = item.ApplicationID }, new{ title="Edit " + item.CustomorName }) not sure how well this works though.

Answer 1

I find that it's easier to understand in JAWS and other screen readers if you have the unique identifier within the actual <a> tag and hide it using CSS. Unfortunately, we need to use @Url.Action instead of @Html.ActionLink to achieve this.

<a href="@Url.Action("Edit", "ControllerName")">Edit <span class="visual-hidden"> for @item.CustomorName</span></a>

and the CSS:

.visual-hidden {
    position: absolute !important;
    height: 1px; width: 1px; 
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

Another (easier) solution is to use the aria-label HTML attribute. Here's a link for more info on the aria-label attribute. This will let the screen reader know what the edit button will be for and you can use the @Html.ActionLink method:

@Html.ActionLink("Edit", "Edit", new { id = item.ApplicationID }, new{ aria_label="Edit for " + item.CustomorName })