jinky32 / my3-fed-repository

0 stars 0 forks source link

Accessible links when image is used as a link #42

Open georgeadamson opened 8 years ago

georgeadamson commented 8 years ago

With regard to ​Image alt text when image is used as a link.​ The alt attribute is typically used to describe the image. What would be your steer when a link contains only an image. Historically one might have relied on the link title attribute to provide accessible text for the link but I can’t help thinking that visually-hidden text inside the link would be better, or maybe aria-label? Inspiration: http://www.deque.com/blog/text-links-practices-screen-readers/

On Project Uno we’re looking to formalise the best practice. We’re looking for steer on use of:

  1. Text vs title vs aria-label on normal text links (because Site Builders are currently prone to providing both text and title which can be tiresome when using some screenreaders.)
  2. Text vs title vs aria-label vs img alt on image links.
papafed commented 8 years ago

For text I think it will encourage content creators to give links proper text if the link text is the only thing available to them. Titles can be controlled by code and used only for "this link will open in a new window" type messages. I'd avoid aria-label until there is consistent user agent behaviour. Visually hidden text inside links should be controlled only by code so that lists of "read more" or "buy now" buttons have context. In other cases designs should be rejected if links do not have meaningful text. It should be in the design and copy-writing guidelines that link text should be properly descriptive.

For images, in the ideal scenario the only thing an image should link to is a larger version of itself. For example in a product gallery. It might be better accessibility to make these invisible to screenreaders