What to use for lots of 'details' links on one page. Web Accessibility doesn't like "details"

Question

According to http://webaim.org/standards/wcag/checklist#sc2.4.4

2.4.4 Link Purpose (In Context) (Level A)

The purpose of each link (or form image button or image map hotspot) can be determined from the link text alone, or from the link text and its context (e.g., surrounding paragraph, list item, table cell, or table headers). Links (or form image buttons) with the same text that go to different locations are readily distinguishable.

and so WAVE (Web Accessibility Evaluation Tool - http://wave.webaim.org) says all my "details" links are not recommended on my page here:

but I can't think what would work better. I don't really want to clutter up the page with the first few characters of the actual details text because I think it would make the page look too cluttered.

Answer 1

Well, there are many ways you could solve your problem. To name a few:

• You could add a title attribute to each link (i.e. title="Details on makeagoodpassword.com"), however screen readers might not read out the title attribute's values, so you'd better add aria-label="Details on makeagoodpassword.com" to your link tag
• another (my preferred) option would be hidden text since this appears to be the most generic solution:

 <a href="#" title="Details on makeagoodpassword.com">Details <span style="display:none;" aria-hidden="false">on makeagoodpassword.com</span></a>

Please also see: http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-refs for other options.