Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #9221 from thenickcox/image_alt_attribute

Improve img alt attribute for screen readers
  • Loading branch information...
commit 759679289e6f22a5e4cfd9015e5102194fb92b29 2 parents cdd293c + dd9f8bc
@carlosantoniodasilva carlosantoniodasilva authored
View
21 actionpack/CHANGELOG.md
@@ -1,5 +1,26 @@
## Rails 4.0.0 (unreleased) ##
+* Fix `image_alt` method to work with underscored or hyphenated file names.
+ Currently, underscored filenames become
+ `<img alt="A_long_file_name_with_underscores"` in HTML, which is
+ poor for accessibility; Apple's VoiceOver Utility pronounces
+ each underscore. "A_long_file_name" thus becomes "A underscore
+ long underscore file underscore name." This patch makes underscored
+ or hyphenated file names (both of which are very popular naming
+ conventions) read more naturally in screen readers by converting
+ both hyphens and underscores to spaces.
+
+ Example:
+ # current implementation
+ image_tag('underscored_file_name.png')
+ #=> <img alt="Underscored_file_name" src="/assets/underscored_file_name.png" />
+
+ # this patch
+ image_tag('underscored_file_name.png')
+ #=> <img alt="Underscored file name" src="/assets/underscored_file_name.png" />
+
+ *Nick Cox*
+
* We don't support the `:controller` option for route definitions
with the ruby constant notation. This will now result in an
`ArgumentError`.
View
20 actionpack/lib/action_view/helpers/asset_tag_helper.rb
@@ -214,10 +214,24 @@ def image_tag(source, options={})
end
# Returns a string suitable for an html image tag alt attribute.
- # +src+ is meant to be an image file path.
- # It removes the basename of the file path and the digest, if any.
+ # The +src+ argument is meant to be an image file path.
+ # The method removes the basename of the file path and the digest,
+ # if any. It also removes hyphens and underscores from file names and
+ # replaces them with spaces, returning a space-separated, titleized
+ # string.
+ #
+ # ==== Examples
+ #
+ # image_tag('rails.png')
+ # # => <img alt="Rails" src="/assets/rails.png" />
+ #
+ # image_tag('hyphenated-file-name.png')
+ # # => <img alt="Hyphenated file name" src="/assets/hyphenated-file-name.png" />
+ #
+ # image_tag('underscored_file_name.png')
+ # # => <img alt="Underscored file name" src="/assets/underscored_file_name.png" />
def image_alt(src)
- File.basename(src, '.*').sub(/-[[:xdigit:]]{32}\z/, '').capitalize
+ File.basename(src, '.*').sub(/-[[:xdigit:]]{32}\z/, '').tr('-_', ' ').capitalize
end
# Returns an html video tag for the +sources+. If +sources+ is a string,
View
3  actionpack/test/template/asset_tag_helper_test.rb
@@ -443,7 +443,8 @@ def test_image_alt
[nil, '/', '/foo/bar/', 'foo/bar/'].each do |prefix|
assert_equal 'Rails', image_alt("#{prefix}rails.png")
assert_equal 'Rails', image_alt("#{prefix}rails-9c0a079bdd7701d7e729bd956823d153.png")
- assert_equal 'Avatar-0000', image_alt("#{prefix}avatar-0000.png")
+ assert_equal 'Long file name with hyphens', image_alt("#{prefix}long-file-name-with-hyphens.png")
+ assert_equal 'Long file name with underscores', image_alt("#{prefix}long_file_name_with_underscores.png")
end
end
Please sign in to comment.
Something went wrong with that request. Please try again.