[Vit-discuss] CSS mods: low vision, a first step (patch) (fwd)

Hugh Sasse hgs at dmu.ac.uk
Mon Dec 4 07:48:09 EST 2006


On Sat, 2 Dec 2006, John W. Long wrote:

> Hugh Sasse wrote:
> >> your work on it. My worry is that the maintenance needs for alternate 
> >> stylesheets will outweigh their value. Particularly, as newer browsers 
> >> are released and the need to revisit stylesheets becomes apparent.  One 
> >> of the hazards of maintaining multiple versions of a product is that it 
> >> can greatly reduce the speed in which changes can be made. Since our 
> > 
> > OTOH, can CSS do #include or require or something to manage changes?
> > (I don't work in CSS that often, so am not au fait with its lesser
> > used features).  A quick hunt through the spec suggests @import
> > may be applicable here
> > 
> > http://www.w3.org/TR/REC-CSS2/cascade.html#at-import
> > 
> > so some refactoring may be possible.
> 
> After thinking about this a little more I am willing to reconsider.
> @import is the appropriate method. Can you get me a version of your 
> changes that uses @import?
> 
> Basically it should work like this:
> 
>    low_vision_screen.css:
>      @import url(/stylesheets/shared.css);
>      @import url(/stylesheets/high.css);
>      @import url(/stylesheets/low_vision_high.css);
> 
> Styles in low_vision_high.css should include styles that override the 
> styles in the other two for low vision users. You can use !important to 
> enforce the rule when necessary. For instance:
> 
>    body {
>      font-size: %120 !important;
>    }
> 
> As you said, keeping it DRY is important. Let me know if you have any 
> questions.

Here is the first cut, which does't quite follow the above scheme,
the low vision stylesheets @import from their default equivalents:

<patch>
--- stylesheets/screen_lo_vis.css.orig  1980-01-01 00:00:00.000000000 +0000
+++ stylesheets/screen_lo_vis.css       2006-09-15 15:32:03.614018000 +0100
@@ -0,0 +1,6 @@
+/*
+       screen_lo_vis.css - styles for the screen for visually impaired people
+*/
+
+ at import url(/stylesheets/high_lo_vis.css);
+ at import url(/stylesheets/shared_lo_vis.css);
--- stylesheets/high_lo_vis.css.orig    1980-01-01 00:00:00.000000000 +0000
+++ stylesheets/high_lo_vis.css 2006-12-04 11:54:50.792950000 +0000
@@ -0,0 +1,48 @@
+/*
+  high.css - styles for modern browsers, but for people with low vision.
+*/
+
+ at import url(/stylesheets/high.css) screen;
+
+#content #news ul a {
+  color: #1111ee;
+  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
+}
+#content dl dt {
+  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
+}
+#sidebar {
+  font-size: 90%;
+}
+#sidebar h3 {
+  background-image: none; */
+}
+#sidebar .navigation ul li {
+  background-image: none; */
+}
+#sidebar .navigation .menu a,
+#sidebar .navigation .more a {
+  color: #1111ee;
+}
+#sidebar .navigation a {
+  color: #1111ee;
+  text-decoration: none;
+}
+#search-box {
+  width: 738px;
+}
+#search-form {
+  position: absolute;
+  top: 57px;
+  width: 738px;
+  height: 50px:
+}
+#search-form .field {
+  width: 214px;
+  height: 48px;
+}
+#search-form .button {
+  width: 148px;
+  height: 48px;
+}
+
--- stylesheets/shared_lo_vis.css.orig  1980-01-01 00:00:00.000000000 +0000
+++ stylesheets/shared_lo_vis.css       2006-12-04 12:05:37.447447000 +0000
@@ -0,0 +1,37 @@
+/*
+  shared.css - styles shared between print and high but for low vision
+*/
+ at import url(/stylesheets/shared.css);
+body {
+  font-size: 90%;
+}
+#content h2 {
+  font-size: 180%;
+}
+#content h3 {
+  color: #b60a0a;
+  font-size: 180%;
+  line-height: 120%;
+}
+#content h4 {
+  font-size: 170%;
+  line-height: 120%;
+}
+#content h5 {
+  font-size: 120%;
+  line-height: 120%;
+}
+#content .post-info {
+  color: #706f59;
+  font-size: 100%;
+}
+#search-form .field {
+  border: 4px solid #a3a39f;
+}
+#search-form .button {
+  border: 4px solid #a3a39f;
+  background-color: #f6f6e7;
+  color: #9b9b95;
+  font-size: 24px;
+}
+
--- en/index.html.orig  2006-12-04 12:20:29.109230000 +0000
+++ en/index.html       2006-12-04 12:25:44.176805000 +0000
@@ -5,6 +5,7 @@
     <title>Ruby Programming Language</title>
     <link rel="stylesheet" type="text/css" href="/stylesheets/low.css" />
     <link rel="stylesheet" type="text/css" href="/stylesheets/screen.css" media="screen" />
+    <link title="Low vision" rel="alternate stylesheet" type="text/css" href="/stylesheets/screen_lo_vis.css" media="screen" />
     <link rel="stylesheet" type="text/css" href="/stylesheets/print.css" media="print" />
     <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
     <link href="/en/feeds/news.rss" rel="alternate" title="RSS" type="application/rss+xml" />



</patch>
I want to avoid !important statements if possible: the priorities
are different between CSS1 and CSS2.  

Hopefully the above changes are as small as possible being based on 
differences.  (Some of the  search form stuff is unchanged, but I'm
likely to change them soon, so have left them in for now).

It is odd that diffutils provide no tools for extracting common lines
from a set of files.   

This is about the minimal change to site style that makes the site
accessible to me.  This aims to give people as near the same experience
as other people as possible whilst preserving accessibility.

Clearly the refs to alternate stylesheets will need
to be replicated across the other pages, but I think your CMS does something
of that sort anyway.   Would it be worth exposing the source (input to
the CMS0 so that we can send you patches against that in future?

Once we are agreed on how this stuff should be dealt with, what shape
the alternate stylesheets should take in general, then I'll look into
providing light-on-dark, black-on-yellow styles, or something.  I'd
also like to explore the removal of all advice about font sizes so the
user's browser does what they set it up to do.  I don't think this
will be that soon though

        Thank you,
        Hugh



More information about the vit-discuss mailing list