List table: media thumbnail and title links improvements

[afercia]

In the Media Library, the attachment thumbnail is a linked image and its alt attribute is set with the alt-caption-title fallback see #18984. See screenshot:

For linked images though, the alt attribute should communicate the destination of the link or action taken, see ​A simple alt text decision tree

This impacts screen readers and the way(s) they read out content, depending on the "reading mode", not to mention other assistive technologies. All screen readers have different browsing modes, they name them in a different way but they're basically the same, for example:

• "Say all" just lets the screen reader read out the whole page content
• using arrows to navigate all page objects
• tabbing to navigate through focusable elements
• for tables, they have special keystrokes to navigate in every direction inside the table

Tested with Firefox + NVDA, here's how our example gets read out:

Say all          > `link graphic asdasd`
using arrows     > `link graphic asdasd`
table navigation > `link graphic asdasd`
tabbing          > `asdasd graphic link  Edit “typekit-bb-2014-4-copy”`

Only when tabbing it will read out *also* the link title in addition to the alt attribute: `asdasd graphic link Edit “typekit-bb-2014-4-copy”. In all other cases there's no information at all about the link's purpose.

Additionally, the linked Title and the filename below can be improved a bit.

[afercia]

In the proposed patch:

• set the alt attribute to, for example, Edit “typekit-bb-2014-4-copy”
• remove the title attribute from the image link
• remove the title attribute from the Title link and use a separate string hidden with screen-reader-text
• add a 'File name:' screen-reader-text before the... file name

[afercia]

Related: #32254 and #32255

[helen]

In 32687:

Media: move the thumbnail into the title column in list view.

This gives us more space for the title and row actions, and will make a responsive list table enhancement significantly easier.

props bradt for the initial patch.
fixes #29993 and #32255. see #32509 and #32395.

[afercia]

Having the thumbnail into the title column is a big improvement for accessibility too. This allow us to simply do not use any title or alt attribute on the link and the image, just an empty alt="" and move the image inside the existing link. The plan is to apply a very simple technique: ​http://www.w3.org/TR/WCAG20-TECHS/H2.html
We'll try to handle this in #32254

[obenland]

Is there anything left to do here or can we close it?

[afercia]

Closing. After recent changes to the List Tables a better solution for the adjacent links is proposed in #32254