提交 dd9f8bc8 编写于 作者: T thenickcox

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
上级 408227d9
## 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`.
......
......@@ -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,
......
......@@ -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
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册