fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([personal profile] fu) wrote in [site community profile] changelog2010-07-12 08:22 am
  • Add Memory
  • Share This Entry

[dw-free] Need to go over tag cloud for semantics/accessibility

[commit: http://hg.dwscoalition.org/dw-free/rev/f9070bf7b9e9]

http://bugs.dwscoalition.org/show_bug.cgi?id=930

Improve tag cloud HTML: use a ul/li, not spans. Add CSS so that the list
items display inline. Add a rel="tag" to the tag link. Add an invisible
element with the number of uses so the information is exposed to screen
readers, which won't be placing any importance on the font size.

Patch by [personal profile] deborah.

Files modified:
  • bin/upgrading/s2layers/bases/layout.s2
  • bin/upgrading/s2layers/blanket/layout.s2
  • bin/upgrading/s2layers/boxesandborders/layout.s2
  • bin/upgrading/s2layers/brittle/layout.s2
  • bin/upgrading/s2layers/core2.s2
  • bin/upgrading/s2layers/core2base/layout.s2
  • bin/upgrading/s2layers/drifting/layout.s2
  • bin/upgrading/s2layers/easyread/layout.s2
  • bin/upgrading/s2layers/negatives/layout.s2
  • bin/upgrading/s2layers/skittlishdreams/layout.s2
  • bin/upgrading/s2layers/zesty/layout.s2
--------------------------------------------------------------------------------
diff -r 7b94a60ad598 -r f9070bf7b9e9 bin/upgrading/s2layers/bases/layout.s2
--- a/bin/upgrading/s2layers/bases/layout.s2	Mon Jul 12 14:26:56 2010 +0800
+++ b/bin/upgrading/s2layers/bases/layout.s2	Mon Jul 12 16:28:36 2010 +0800
@@ -486,6 +486,7 @@ background: $*color_module_link_hover; }
 .module-tags_list .manage-tags-link {border-top: 0.083em solid $*color_module_border; padding-top: 0.5em; padding-bottom: 0.5em; text-align: center;}
 
 .module-tags_cloud .module-list {padding: 0.5em;}
+.module-tags_cloud li, .tags_cloud li {display: inline; list-style-type: none;}
 .module-tags_cloud .manage-tags-link {border-top: 0.083em solid $*color_module_border; margin-top: 0.5em; text-align: center;}
 
 .module-tags_multilevel .module-list { padding: 0.5em; margin: 0; }
diff -r 7b94a60ad598 -r f9070bf7b9e9 bin/upgrading/s2layers/blanket/layout.s2
--- a/bin/upgrading/s2layers/blanket/layout.s2	Mon Jul 12 14:26:56 2010 +0800
+++ b/bin/upgrading/s2layers/blanket/layout.s2	Mon Jul 12 16:28:36 2010 +0800
@@ -318,6 +318,7 @@ div.module-navlinks ul.module-list li { 
 #secondary .separator-after { clear: both; }
 .module-tags_cloud { margin: 3em 0; width: 100%; float: none; border-top: 1px solid $*color_entry_border; border-bottom: 1px solid $*color_entry_border; }
 .module-tags_cloud .module-content { padding: 0 3em 1em 3em; }
+.module-tags_cloud li, .tags_cloud li { display: inline; list-style-type: none; }
 
 #secondary .module-content { text-align: left; $module_font }
 #secondary .module-content ul {  list-style: outside; margin-left: 1em;  padding-left: 0; }
diff -r 7b94a60ad598 -r f9070bf7b9e9 bin/upgrading/s2layers/boxesandborders/layout.s2
--- a/bin/upgrading/s2layers/boxesandborders/layout.s2	Mon Jul 12 14:26:56 2010 +0800
+++ b/bin/upgrading/s2layers/boxesandborders/layout.s2	Mon Jul 12 16:28:36 2010 +0800
@@ -317,7 +317,6 @@ text-decoration: none; }
 .module-calendar td a { $calendar_link_colors
     text-decoration: none; }
 
-
 /* footer */
 
 #footer { $footer_colors }
diff -r 7b94a60ad598 -r f9070bf7b9e9 bin/upgrading/s2layers/brittle/layout.s2
--- a/bin/upgrading/s2layers/brittle/layout.s2	Mon Jul 12 14:26:56 2010 +0800
+++ b/bin/upgrading/s2layers/brittle/layout.s2	Mon Jul 12 16:28:36 2010 +0800
@@ -812,6 +812,9 @@ ul.userlite-interaction-links li {
 
 .module-tags_cloud, .module-time, .module-powered { width: 90%; }
 
+.tags_cloud li, .module-tags_cloud li { display: inline;
+    list-style-type: none; }
+
 .manage-tags-link {
     text-align: right;
     font-size: smaller;
diff -r 7b94a60ad598 -r f9070bf7b9e9 bin/upgrading/s2layers/core2.s2
--- a/bin/upgrading/s2layers/core2.s2	Mon Jul 12 14:26:56 2010 +0800
+++ b/bin/upgrading/s2layers/core2.s2	Mon Jul 12 16:28:36 2010 +0800
@@ -3455,6 +3455,8 @@ function print_cloud_tags(TagDetail[] ta
     var int high_count = 1;
 
     println """<div $list_class>""";
+    println """<ul>""";
+
     foreach var TagDetail t ($tagslist)
     {
         if ($t.use_count > $high_count) { $high_count = $t.use_count; }
@@ -3470,15 +3472,23 @@ function print_cloud_tags(TagDetail[] ta
         }   
         var string tag_size_em = $tag_size->substr(0,($tag_size->length())-1) + "." + $tag_size->substr(($tag_size->length())-1,1) + "em";
         if ($print_uses == "number") {
-            println """<span $tag_class style="font-size: $tag_size_em;"><a href="$t.url">$t.name</a> [$t.use_count]</span>\n""";
+            println """<li $tag_class style="font-size: $tag_size_em;"><a rel="tag" href="$t.url">$t.name</a> [$t.use_count]</li>\n""";
         } elseif ($print_uses == "text") {
             var string uses = get_plural_phrase($t.use_count, "text_tag_uses");
-            println """<span $tag_class style="font-size: $tag_size_em;"><a href="$t.url">$t.name</a> - $uses</span>\n""";
+            println """<li $tag_class style="font-size: $tag_size_em;"><a rel="tag" href="$t.url">$t.name</a> - $uses</li>\n""";
         } else {
             var string uses = get_plural_phrase($t.use_count, "text_tag_uses");
-            println """<span $tag_class style="font-size: $tag_size_em;"><a href="$t.url" title="$uses">$t.name</a></span>\n""";
-        }
-    }
+            # if the style hides the number of uses, put it both
+            # in the title tag and offscreen via CSS to maximize
+            # the chance of it being available to
+            # screenreader/lynx users
+            println """<li $tag_class style="font-size: $tag_size_em;">""";
+            println """<a rel="tag" href="$t.url" title="$uses">$t.name</a> """;
+            println """<span class ="invisible">$uses</span></li>\n""";
+        }
+    }
+
+    println """</ul>""";
     println """</div>""";
 }
 
diff -r 7b94a60ad598 -r f9070bf7b9e9 bin/upgrading/s2layers/core2base/layout.s2
--- a/bin/upgrading/s2layers/core2base/layout.s2	Mon Jul 12 14:26:56 2010 +0800
+++ b/bin/upgrading/s2layers/core2base/layout.s2	Mon Jul 12 16:28:36 2010 +0800
@@ -722,6 +722,10 @@ ul.userlite-interaction-links li {
     font-weight: bold;
     margin-right: 0.5em;
 }
+
+.tags_cloud li, .module-tags_cloud li { display: inline;
+    list-style-type: none; }
+
 .module-syndicate  .module-content {
     text-align: center;
 }
diff -r 7b94a60ad598 -r f9070bf7b9e9 bin/upgrading/s2layers/drifting/layout.s2
--- a/bin/upgrading/s2layers/drifting/layout.s2	Mon Jul 12 14:26:56 2010 +0800
+++ b/bin/upgrading/s2layers/drifting/layout.s2	Mon Jul 12 16:28:36 2010 +0800
@@ -585,6 +585,10 @@ function Page::print_default_stylesheet(
         margin-bottom: 0.5em;
     }
 
+    .module-tags_cloud li, .tags_cloud li { 
+        display: inline;
+        list-style-type: none; }
+
     /* Reply
     ***************************************************************************/
     #reply h2 {
diff -r 7b94a60ad598 -r f9070bf7b9e9 bin/upgrading/s2layers/easyread/layout.s2
--- a/bin/upgrading/s2layers/easyread/layout.s2	Mon Jul 12 14:26:56 2010 +0800
+++ b/bin/upgrading/s2layers/easyread/layout.s2	Mon Jul 12 16:28:36 2010 +0800
@@ -501,6 +501,11 @@ h2.module-header a {
     display: inline;
 }
 
+.tags_cloud li, .module-tags_cloud li { 
+    display: inline;
+    list-style-type: none; 
+}
+
 .module-tags_list ul.module-list li {
     display: inline;
 }
diff -r 7b94a60ad598 -r f9070bf7b9e9 bin/upgrading/s2layers/negatives/layout.s2
--- a/bin/upgrading/s2layers/negatives/layout.s2	Mon Jul 12 14:26:56 2010 +0800
+++ b/bin/upgrading/s2layers/negatives/layout.s2	Mon Jul 12 16:28:36 2010 +0800
@@ -445,6 +445,11 @@ function Page::print_default_stylesheet(
 
     .module-content {
         $module_font
+    }
+
+    .module-tags_cloud li, .tags_cloud li { 
+        display: inline;
+        list-style-type: none; 
     }
 
     .userpic{
diff -r 7b94a60ad598 -r f9070bf7b9e9 bin/upgrading/s2layers/skittlishdreams/layout.s2
--- a/bin/upgrading/s2layers/skittlishdreams/layout.s2	Mon Jul 12 14:26:56 2010 +0800
+++ b/bin/upgrading/s2layers/skittlishdreams/layout.s2	Mon Jul 12 16:28:36 2010 +0800
@@ -659,6 +659,8 @@ blockquote {margin: 1em; padding: 1em; $
 .module-section-three a:hover { $header_footer_hover_colors }
 .module-section-three .module {padding-left: 20px; }
 
+.module-tags_cloud li, .tags_cloud li { display: inline; list-style-type: none; }
+
 .hfeed .navigation, #archive-year .navigation,  #archive-month .navigation, #archive-day .navigation  {height:61px; margin-bottom:-20px; }
 .two-columns-right .hfeed .navigation, 
 .two-columns-right #archive-year .navigation,  
diff -r 7b94a60ad598 -r f9070bf7b9e9 bin/upgrading/s2layers/zesty/layout.s2
--- a/bin/upgrading/s2layers/zesty/layout.s2	Mon Jul 12 14:26:56 2010 +0800
+++ b/bin/upgrading/s2layers/zesty/layout.s2	Mon Jul 12 16:28:36 2010 +0800
@@ -1054,6 +1054,10 @@ h3 {
     text-decoration: none;
 }
 
+.module-tags_cloud li, .tags_cloud li {
+    display: inline;
+    list-style-type: none;
+}
 
 
 /* ReplyPage reply box */
@@ -2636,8 +2640,12 @@ function MessagePage::print_body() {
 # Weighted tag cloud / heatmap.
 #
 function TagsPage::print_body() {
+    # since there is no heading, make invisible one here for
+    # screenreaders
     """
-    <div id="tag-cloud">
+    <div id="tag-cloud" class="tags_cloud">
+    <h2 class="invisible">Visible tags</h2>
+    <ul>
     """;
 
     # font min and max as % values
@@ -2655,7 +2663,7 @@ function TagsPage::print_body() {
     var int highest = 0;
     var int lowest = 999999;
     var int count;
-
+    
     foreach var TagDetail tag ($.tags) {
         if ($tag.use_count > $highest) {
             $highest = $tag.use_count;
@@ -2680,11 +2688,13 @@ function TagsPage::print_body() {
         }
 
         """
-        <a class="used-$tag.use_count visible-to-$tag.visibility" href="$tag.url" style="font-size: $font;">$tag.name</a>
+        <li>
+        <a rel="tag" class="used-$tag.use_count visible-to-$tag.visibility" href="$tag.url" style="font-size: $font;">$tag.name</a>
+        <span class ="invisible"> used $tag.use_count times</span></li>
         """;
     }
 
     """
-    </div>
+    </ul></div>
     """;
 }
--------------------------------------------------------------------------------