Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Blogs about accessibility

Colorblindness Simulation with JavaScript.

3.7.2015

Around 4% of humans have some form of colorblindness. Since that's a significant portion of your web site traffic, it's probably worth doing some testing for how your site would look to those users. One way is the simulate.js from http://mudcu.be/labs/. For each image in an array of images, this JavaScript adds a new canvas element with shifted colors. Below is an example usage for Deuteranope type vision. The script also includes functions for Protanope and Tritanope type vision.

var images = scope.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
  Color.Vision.Simulate(images[i], {
    type: "Deuteranope",
    callback: function(canvas) {
      document.getElementById("lid_623").appendChild(canvas);
    }
  });
}

Below is the script in action: the fruit bowl and rainbow images are shown normally, and below each is simulated with deuteranopia, protanopia finally tritanopia.

Alessi fruit bowl, filled by Dirk Ingo Franke / CC 1.0 Public Domain http://commons.wikimedia.org/wiki/File%3AFruit_basket_alessi.JPG Rainbow from Budapest by Takkk / CC 3.0 http://commons.wikimedia.org/wiki/File:Rainbow_in_Budapest.jpg

The canvas element seems a tad unreliable - refresh the page once or twice to get the new images to load. It also can't be added when Codepen.

Screen Reading.

9.10.2007

I was listening to the Boadworld Web Design podcast recently, and there was an eye opening section about screen readers, which included hearing a screen reader attempt to parse some web pages. A screen reader is a piece of software (typically used by folks with no or low vision) that reads a computer screen aloud. The cold staccato Steven Hawking voice of the screen reader had a terrifyingly difficult time reading Amazon's pages in particular. If you want to know why CSS is good, and table based layout is bad, I highly recommend that you take a listen - scroll down to the "Ask an Expert" section. As you listen, consider the internet's most influential blind user of all - Google.

A CSS Styled Form.

7.18.2007

Why can't clients just tell me when they go live?!? Are the fifty billion little bullet points that ask them to do so not enough? Gah!

Now that I've got that out of my system, I feel it's time I shared some more code with you. I present, the CSS-styled form!




This example is taken from Web Design in a Nutshell, 3rd Edition.

Here's the CSS that gets it done.

<style type="text/css">
form
  { font-family: Arial, Verdana, Helvetica, sans-serif;
    border: solid #FFFFFF 1px;
    width: 28em;
    margin: 5px;
    padding: 5px;
    }
label
  { width: 6em;
    float: left;
    text-align: right;
    margin: .5em 1em;
    clear: both;
    }
input, textarea
  { font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: small;
    margin: .5em 0;
    width: 17em;
    }
input[type="submit"]
  { float: none;
    clear: both;
    width: auto;
    margin-bottom: 1em;
    margin-left: 8em;
    }
br { clear: both; }
</style>

Notes: