A review of 3 amazing UX Tools: WAVE, Readability and Color Contrast

I decided to test each of these UX tools on two of my personal web projects: my website for Archimedes’ Quadrature of Parabolic Segments and my Sensation Seeking Questionnaire website. The end result was to make the websites more accessible and get a feel for these tools.

WAVE: WEB ACCESSIBILITY EVALUATION TOOL

This is one of my most useful recent discoveries! It’s free and all you have to do is paste in the URL and then it gives you the original web page with embedded icons that reveal issues in the accessibility of that page. Let’s take a look:

ArchimedesWAVEscreenshot

Luckily, only 1 major error shows up. The red speech bubble at the top of the website informs me that the language of the document is not identified. According to the W3C recommendation you should declare the primary language for each Web page with the lang attribute inside the tag. So, I updated the html tag to include lang=”en”.

There are several alerts referring to the fact that the Alternative text contains insufficient information. I tend to use alt tags as placeholders to remind myself what the picture should look like, in case it doesn’t load properly. But sometimes what is informative as a note to myself does not convey enough information to others. So here I changed the alt tag from “image of the first slide” to the much more informative title of this slide: “To create a parabolic segment, we draw a line through a parabola, such that it intersects it in two points.” And I made these corrections for each of the other three slides.

ArchimedesWAVEscreenshot2

The free readability tool at http://www.online-utility.org evaluates text based on different reading scales and suggests which sentences are too complex and should be rewritten. I pasted the following text in from my Archimedes site (removing the paragraph and image tags):

“Archimedes was an ancient Greek mathematician, scientist and inventor. He lived from circa 287 BC – 212 BC but is still considered one of the greatest mathematicians of all time.

The Quadrature of the Parabola was one of his proofs. It is a treatise on geometry, stating that the area of a parabolic segment (a region bound by a parabola and a line) is 4/3 that of a certain inscribed triangle.

One of the reasons this treatise is so interesting is that Archimedes made this discovery more than 2,000 years before Isaac Newton and Gottfried Leibniz developed integral calculus. Furthermore, finding the area under a curve solved the problem of finding volumes of cylinders and spheres, which was essential for fair trade.

Archimedes used the Method of Exhaustion, which finds the area of a curved shape by inscribing successively smaller triangles until the shape is filled.”

Here are the results:

Readability

I rewrote the first two sentences, to make them simpler, as you can see below. But I decided to leave the third sentence as it was. You don’t want to oversimplify to the point that you miss some of the concepts.

  1. Interestingly, Archimedes made this discovery over 2,000 years before Isaac Newton and Gottfried Leibniz developed integral calculus.
  2. It states that the area of a parabolic segment (a region bound by a parabola and a line) is 4/3 that of a certain inscribed triangle.

My final UX tool is Color Contrast by AccessColor.

AccessColor examines the color contrast and color brightness between the foreground and background of all elements in the Document Object Model to make sure that the contrast is high enough for people with visual impairments (e.g. when viewed by someone with low vision or colour blindness, or when viewed on a black and white screen.) Just as a sidenote, AccessColor had trouble reading the URL for my Archimedes website for some reason that wasn’t clear, so I decided to use it on my Sensation Seeking Quiz website.

SensationSeekingscreenshot

The results can be seen below:

ColorContrast

Good news! Despite my worries about having used a dark purple font on a lighter purple background, the site is accessible.

We have 3 fantastic free UX tools here that you can use online to quickly evaluate the accessibility of your website. As I said in my 7th blog entry, accessible web design not only helps disabled users to interact with the Web, but also those with temporary injuries or problematic work environments. It is well worth investing the time to make your website accessible to everyone.

Leave a comment