Improve img alt attribute for screen readers

[thenickcox]

Currently, the img_alt method in ActionView maintains underscores
in the alt attribute. Because underscores are pronounced in
Apple's VoiceOver Utility, this has serious implications for
accessibility. This patch makes underscored or hyphenated file
names (both common in projects) read more naturally in screen
readers.

[carlosantoniodasilva]

hyphens.

[acapilleri]

I think that it's bad also. Look here
Do not make sense mentionioning Apple's Voice Over Utility, because before of that the alt definition is violated by the current implementation

[carlosantoniodasilva]

It's a completely backward incompatible change unfortunately, but I agree that underscores doesn't seem good in alt attribute, it always bothered me. Thanks.

[steveklabnik]

Awesome. 👍

Even though it's not backwards compatible, nobody should be relying on alt tags for CSS or anything, so it shouldn't cause breakage.

[thenickcox]

@carlosantoniodasilva, thanks for the suggestions (and catching the typos). Should I add example output to the changelog and the documentation on the method itself, or just in the changelog?

[thenickcox]

@carlosantoniodasilva I added some clearer documentation and some examples. Check it out.

[acapilleri]

About the changelog.
It is wrong mentioning Apple Voice Over
Because before it works bad with Apple Voice Over, as said here, the current implementation is violating the alt definition.

• The text should describe the image if the image contains information
• The text should explain where the link goes if the image is inside an <a> element
• Use alt="" if the image is only for decoration

[thenickcox]

I'm not sure why you would say that mentioning Voice Over is "wrong", @acapilleri. The reason I mention it is that it's a screen reader, and that screen readers for the vision impaired are, I would argue, the primary use case for the alt attribute. (I also don't think that W3 Schools is a valid reference, as argued here.)

The definition, as you state it, is mostly correct, but incomplete. As noted in the (SitePoint Reference)(http://reference.sitepoint.com/html/img/alt),

[If] the user is visually impaired and is accessing the content using a screen reader—the alt
attribute provides alternative content that can be displayed instead of the image.

456 Berea St also has a good write up on the alt tag and its use in screen readers. And the W3 specification mentions other use cases, primarily focused on accessibility, not instances where the image won't load:

Specifying alternate text assists users without graphic display terminals, users whose browsers don't support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc.

Thus, screen readers are my primary concern, as noted in the pull request title, because I think accessibility is important. So the reason I mention Voice Over is twofold:

1. The current implementation is broken in Voice Over
2. That was the screen reader with which I tested it

Further, I didn't need to test it in any other screen readers because it was broken on Apple computers, a significant enough portion of the market that, even if this worked on every other screen reader, it would still need fixing for Apple's Voice Over.

Lastly, in the other use cases that you correctly point out, if the image doesn't display, the text should describe the image, and a long, hyphenated and capitalized string doesn't work well for that case, either.

So whatever the reason that an alt attribute is being displayed, whether it's by a screen reader, because the user is using a headless web browser, because the image path is incorrectly specified, because the user has a slow connection and it hasn't rendered yet, or any other reason, this description needs to read like a normal phrase.

[carlosantoniodasilva]

Can you squash please?

[thenickcox]

Squashed. Please let me know if there's anything else you'd like to see happen on this.

[steveklabnik]

Looks great. 👍

[carlosantoniodasilva]

Thanks!