html/show.tmpl: Improve dependency list readability for blind people

Suggested by Richard Atterer <richard -at- 2007 atterer net>

Use @media to define .visual/.nonvisual to be used instead of the
slightly broken hidecss. Replace <img> by <span> since we don't intend
to show images here most of the time anyway.

Also let the list-style-type differ so that people can see the difference
even without images.

diff --git a/static/packages.css.sed.in b/static/packages.css.sed.in
index 2afe3f3a74af7067af444f1216b12e1faf53df8c..bf44d3d1c0f682f8dc04c0c71f8ebd1290c5976d 100644 (file)
--- a/static/packages.css.sed.in
+++ b/static/packages.css.sed.in
@@ -1,3 +1,11 @@
+@media handheld, print, projection, screen, tv {
+       .nonvisual { display: none; }
+}
+
+@media braille, embossed, speech, tty {
+       .visual { display: none; }
+}
+

 #hpacketsearch {
        display: block;
        padding-top: 1px;
 #hpacketsearch {
        display: block;
        padding-top: 1px;


@@ -82,12 +90,12 @@ h1 {
 }
 
 #pdeps ul.ulrec, #pdeps ul.ulidep {
 }
 
 #pdeps ul.ulrec, #pdeps ul.ulidep {

-       list-style-type: disc;
+       list-style-type: square;

        list-style-image: url(http://%SITE%/Pics/rec.gif);
 }
 
 #pdeps ul.ulsug {
        list-style-image: url(http://%SITE%/Pics/rec.gif);
 }
 
 #pdeps ul.ulsug {

-       list-style-type: disc;
+       list-style-type: circle;

        list-style-image: url(http://%SITE%/Pics/sug.gif);
 }
 
        list-style-image: url(http://%SITE%/Pics/sug.gif);
 }
 

diff --git a/templates/html/show.tmpl b/templates/html/show.tmpl
index 554f48fd1e8f5b706c194180b7555ab4cc11a13a..7c7dd17acb8ea79592b3f9d741eac7085a508b66 100644 (file)
--- a/templates/html/show.tmpl
+++ b/templates/html/show.tmpl
@@ -217,7 +217,7 @@ Do not install it on a normal Debian system.</p>
     <div id="pdeps">
     <h2>Other Packages Related to [% pkg %]</h2>
 
     <div id="pdeps">
     <h2>Other Packages Related to [% pkg %]</h2>
 

-    <table id="pdeplegend" summary="legend"><tr>
+    <table id="pdeplegend" class="visual" summary="legend"><tr>

     [% IF is_source %]
     <td><img src="/Pics/adep.gif" alt="[adep]" width="16" height="16">= build-depends</td>
     <td><img src="/Pics/idep.gif" alt="[idep]" width="16" height="16">= build-depends-indep</td>
     [% IF is_source %]
     <td><img src="/Pics/adep.gif" alt="[adep]" width="16" height="16">= build-depends</td>
     <td><img src="/Pics/idep.gif" alt="[idep]" width="16" height="16">= build-depends-indep</td>


@@ -234,7 +234,7 @@ Do not install it on a normal Debian system.</p>
     [% '<li>' UNLESS is_old_pkgs %]
     [% FOREACH alternatives %]
       [% '<dl>' IF loop.first %]
     [% '<li>' UNLESS is_old_pkgs %]
     [% FOREACH alternatives %]
       [% '<dl>' IF loop.first %]

-      <dt>[% IF loop.first %]<img class="hidecss" src="/Pics/[% id %].gif" alt="[[% id %]]">[% ELSE %]or [% END %]
+      <dt>[% IF loop.first %]<span class="nonvisual">[% id %]:</span>[% ELSE %]or [% END %]

        [% IF suite %]<a href="[% make_url(name,'','suite',suite,'source','') %]">[% name %]</a>[% ELSE %][% name %][% END %]
        [% ' (' _ version _ ')' IF version %]
         [% ' [' _ arch_str _ ']' IF arch_str %]</dt>
        [% IF suite %]<a href="[% make_url(name,'','suite',suite,'source','') %]">[% name %]</a>[% ELSE %][% name %][% END %]
        [% ' (' _ version _ ')' IF version %]
         [% ' [' _ arch_str _ ']' IF arch_str %]</dt>