aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorthenickcox <nick@nickcox.me>2013-02-07 23:07:42 -0800
committerthenickcox <nick@nickcox.me>2013-02-09 20:29:52 -0800
commitdd9f8bc84740654057ddfc26428a4411f151c957 (patch)
treea5450b75f577acff436f03afce589b668c135316
parent408227d9c5ed7de26310d72a1a99c1ee02311c63 (diff)
downloadrails-dd9f8bc84740654057ddfc26428a4411f151c957.tar.gz
rails-dd9f8bc84740654057ddfc26428a4411f151c957.tar.bz2
rails-dd9f8bc84740654057ddfc26428a4411f151c957.zip
Improve img alt attribute for screen readers
Currently, the img_alt method in ActionView keeps 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 by replacing them with spaces. See method documentation for details. Added documentation to image_alt method
-rw-r--r--actionpack/CHANGELOG.md21
-rw-r--r--actionpack/lib/action_view/helpers/asset_tag_helper.rb20
-rw-r--r--actionpack/test/template/asset_tag_helper_test.rb3
3 files changed, 40 insertions, 4 deletions
diff --git a/actionpack/CHANGELOG.md b/actionpack/CHANGELOG.md
index d6a2687037..3c62d39e07 100644
--- a/actionpack/CHANGELOG.md
+++ b/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`.
diff --git a/actionpack/lib/action_view/helpers/asset_tag_helper.rb b/actionpack/lib/action_view/helpers/asset_tag_helper.rb
index 5b3a2cae7c..6387b89a81 100644
--- a/actionpack/lib/action_view/helpers/asset_tag_helper.rb
+++ b/actionpack/lib/action_view/helpers/asset_tag_helper.rb
@@ -214,10 +214,24 @@ module ActionView
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,
diff --git a/actionpack/test/template/asset_tag_helper_test.rb b/actionpack/test/template/asset_tag_helper_test.rb
index 82c9d383ac..11614a45dc 100644
--- a/actionpack/test/template/asset_tag_helper_test.rb
+++ b/actionpack/test/template/asset_tag_helper_test.rb
@@ -443,7 +443,8 @@ class AssetTagHelperTest < ActionView::TestCase
[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