0

I have an HTML structure like:

<div aria-label="User overview">
   <a ... href="profile_page.html"><img ... src="user_profile_image" /></a>
   Info about the user

   <a ... href="profile_page.html">User name</a>
   More Info about the user
</div>

Both links go to the same place. Should I add in the alt attribute the username, o this will be too repetitive for the screen reader users?

Should I remove the second link to the screen reader? If this one is a solution, how can I do that?

In the future I will change HTML structure, but for now on I have to keep it.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Raúl Martín
  • 4,471
  • 3
  • 23
  • 42

1 Answers1

1

  1. Remove the aria-label on the div. It's useless on an non-interactive element, or worst can cause accessibility damages.

  2. Images inside links must always contain an alt attribute when they are the only content within them

Once this is done, you may consider adding the aria-hidden="true" attribute to one of the links if you think those two links are repetitive. The other possibility is to use a javascript only solution for the click on the image which will avoid any keyboard related problematic. Because many people use keyboard navigation without using a screen reader.

You can also consider combining the image and the link

Adam
  • 17,838
  • 32
  • 54