W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > October to December 2014

Line styes or patterns in addition to color

From: Phill Jenkins <pjenkins@us.ibm.com>
Date: Mon, 24 Nov 2014 16:21:25 -0500
To: W3C WAI Interest Group <w3c-wai-ig@w3.org>
Message-ID: <OFAF7D7F53.59255703-ON86257D9A.0071AF28-86257D9A.007554F8@us.ibm.com>
Do you have any examples or references for the following:

1. I have a group of boxes and they need to be related 10 different ways 
with line connectors.  For example, one top box is an international 
collection of the sub boxes connected to it.  Another top box is only a 
local collection of sub boxes connected to it.  So the color and line type 
is different showing a different relationship; international verses local, 
etc.  I have 10 different ways these boxes are related: international, 
local, North America, South America, European only, Africa, etc. 

2. Each connector (relationship line) also has 4 or more different states 
or status: Suspended, Active, Future, and Expired, etc.

I was thinking of using the dash and dotted line styles to represent the 
states, such as 
        Dotted for Suspended
        Dashed for Expired
        Solid for Active
        Dashed + Dotted for Future

I was thinking of line type or pattern to represent the 10 different ways 
the boxes could relate / connect, such as 
        Single for Local
        Double for Multiple states
        Triple for International
        Squiggly for North America
        Wavy for European,
        Thick plus thin

Does anyone know of a set of more than 10 line type / style examples that 
meet the "Success Criteria 1.4.1 Use of color:  Do not use color as the 
only visual means of conveying information, indicating an action, 
prompting a response, or distinguishing a visual element."? and also work 
when CSS is turned off when in Windows High Contrast Mode?

        4 Line types in PowerPoint: Single, Double, Triple, Single bold 
with a single thin, and Single thin with a single bold.
        7 Line styles (dashed) in PowerPoint:  Round dot, Square dot, 
Dashed, Dash dot, Long dash, Long Dash Dot, and Long Dash Dot Dot. 
        Tricks with CSS: css-tricks.com/examples/hrs/

A classic example of the "Use of Color Alone" issue:

A good example is a map of London Underground where the routes are 
distinguished only in color. For users who have color-blind impairments 
(about 10% of males and 5% of females) it is very hard to differentiate 
one route from another, that is why it?s very important to use another 
means to define those routes. Also, users with full color perception also 
interpret colors differently. Color is a matter of perception that is why 
you will not be able to make everyone see (be able to reference) the same 
colors as you see them (e.g. which blue line, sky blue or the light blue 
London Underground map:

The above is a classic description of the issue - but there are no 
examples (that I could find) on how best to solve (design) a solution for 
the London Underground!  Sure we could describe a simple solution for 5 or 
six line types, you know: dotted, dashed, solid, double thin, etc., but 
for my complex example above, I need 10 line types and 4 or more line 
styles to communicate the relationship without using color alone.
and ALSO work when CSS is turned off when in Windows High Contrast Mode!

Your ideas are welcomed.
Phill Jenkins, 
Senior Engineer & Business Development Executive
IBM Accessibility

(image/gif attachment: 01-part)

Received on Monday, 24 November 2014 21:22:02 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 13 October 2015 16:21:53 UTC