Patch #21805

Improve accessibility for icon-only links

Added by Daniel Ritz over 3 years ago. Updated about 3 years ago.

Status:ClosedStart date:
Priority:NormalDue date:
Assignee:Jean-Philippe Lang% Done:


Target version:3.3.0


Per #21256-9, this patch adds invisible <span class="hidden-for-sighted"> as part of icon-only links to improve accessibility. The text in the span is automatically set to the :title attribute of the link.

Based on r15093, passes all tests with Ruby 2.1.5

0001-Improve-accessibility-for-icon-only-links.patch Magnifier (29.3 KB) Daniel Ritz, 2016-01-23 18:54

0001-Improve-accessibility-for-icon-only-links-v2.patch Magnifier - v2 without helper, based on r15144 (19.4 KB) Daniel Ritz, 2016-01-31 16:38

0001-Improve-accessibility-for-icon-only-links-v2.1.patch Magnifier (20.3 KB) Daniel Ritz, 2016-01-31 20:27

Associated revisions

Revision 15271
Added by Jean-Philippe Lang about 3 years ago

Improve accessibility for icon-only links by adding hidden text (#21805).

Patch by Daniel Ritz.

Revision 15272
Added by Jean-Philippe Lang about 3 years ago

Fix icon only links display (#21805).


#1 Updated by Jean-Philippe Lang over 3 years ago

  • Target version set to 3.3.0

I'd prefer not to add specific helper methods for this.
Can't we just use a regular link with the icon-only class and use some styling to hide the label, eg:

<a href="/foo" class="icon icon-only">Label</a>

and the CSS:

a.icon.icon-only {display:inline-block; width:0px; overflow:hidden;}

This is just an example, maybe the CSS could be improved.

#2 Updated by Daniel Ritz over 3 years ago

I don't like the helpers too much myself,'s why I did the helpers:
  • No need to use l(:bla) twice (one for the invisible text, one for the title attribute)
  • Shorter to write
  • It's easy to forget the accessible content

Anyways, please have a look at v2 of the patch w/o the helpers.

#3 Updated by Daniel Ritz over 3 years ago

Daniel Ritz wrote:

Anyways, please have a look at v2 of the patch w/o the helpers.

Missed one:

diff --git a/app/views/news/show.html.erb b/app/views/news/show.html.erb
index 0390964..2178e1c 100644
--- a/app/views/news/show.html.erb
+++ b/app/views/news/show.html.erb
@@ -36,7 +36,7 @@
 <% @comments.each do |comment| %>
     <% next if comment.new_record? %>
     <div class="contextual">
-    <%= link_to_if_authorized '', {:controller => 'comments', :action => 'destroy', :id => @news, :comment_id => comment},
+    <%= link_to_if_authorized l(:button_delete), {:controller => 'comments', :action => 'destroy', :id => @news, :comment_id => comment},
                               :data => {:confirm => l(:text_are_you_sure)}, :method => :delete,
                               :title => l(:button_delete),
                               :class => 'icon-only icon-del' %>

Found it because it broke badly. With the CSS in v2, a <a class="icon-only icon-del"></a> without any content inside the tag like the one I missed will not show anything at all in the browser, link completely gone. The display:inline-block" is necessary to make it work with content, but breaks w/o's fixable with this:

a.icon-only::after {
  content: "&nbsp;";

Not all that pretty, but seems to work...Fixed patch attached.

#4 Updated by Jean-Philippe Lang about 3 years ago

  • Status changed from New to Closed
  • Assignee set to Jean-Philippe Lang

Patch committed, thanks. I made a few more changes to fix the display of these links in several places.

Also available in: Atom PDF