validity – rocioalvarado.ca

Top Accessible WordPress themes

Published 5 January 2011 by Rocío

This assessment is very simplistic and constitutes a basic preliminary review. It is not comprehensive nor exhaustive.

I chose themes from the Free Theme Directory and searched for Web Accessible and Accessibility. I narrowed my selection by considering which theme would be easily customizable, have good contrast between foreground and background, have elements in a convenient location and be aesthetically pleasing as is.

I then used the plugin Demo Data Creator to generate more content for posts, pages, comments and categories.

The following themes made the cut:

Precious version 4.0.1
At first glance the layout is pretty simple and effective. Convenient breadcrumb on top of page. Upon disabling the style sheets, nothing is out of order. Validates for XHTML 1.0 Transitional and CSS2.

Stardust version 2.7
Very stylish out of the box with flexible width. Has “Skip to content” and “Skip to menu” without CSS. By disabling the images, the date for each post is too dark. Validates for XHTML 1.0 Strict, but not in CSS with 6 CSS2 errors.

Whitepress version 1.1.7
This theme includes a skip to content, navigation and search form when disabling CSS. Has a nice javascript for going through the sidebar items, but also works when javascript is disabled. Uses fixed width for 1024×768 resolution. Validates for XHTML 1.0 Strict, but not in CSS with 1 CSS2 error.

Dodo version 1.2.1
This theme is what this website is based on. The color of the posts date and other meta information is also too light. By disabling the images, the text of the main menu has not enough contrast with its background. With a little tweek here and there, it’s really nice. Fails to validate with XHTML 1.0 Strict with 1 error, but passes CSS2.

Precious and Stardust passed the Firefox Accessibility Extension 1.5.61.0 rule set with only warnings signaled .The themes Whitepress (2 Fails) and Dodo (1 Fail) did not pass.

For validation, I used Markup Validation Service and The W3C CSS Validation Service.

9 Comments

Check My Colours

Published 26 September 2009 by Rocío

www.checkmycolours.com is a website for you to easily check if the colours on your website are accessible.

This tool takes all of the references to colour from your web page including your CSS and nicely compares the background colours to the foreground colours. The report that gets tabulated shows very bluntly what instance is acceptable and what instance is not. The system analyses three things: Contrast Ratio, Brightness difference, and Color difference. By clicking on the rows, it also allows the user to find another colour that would replace the current one. Unfortunately, this feature is a little hard to click on.

The site can give the user an idea of what is lacking in terms of colour accessibility, but does not offer a comprehensive understanding of what the guidelines are. Explaining what the categories and the numbers mean might clarify the systems results.

Let me demystify it for you.

Contrast Ratio: Contrast is measured using a formula that gives a ratio ranging from 1:1 (no contrast) to 21:1 (maximum contrast). AA and AAA refers to the level of priority. Level AA are strongly recommended (mininum contrast is 4.5:1) to allow most users accessibility. Level AAA are suggested (mininum contrast is 7:1) to allow some users accessibility.

Algorithm for luminosity contrast ratio in Web Content Accessibility Guidelines 2.0 Glossary.

Brightness difference: Another formula that evaluates the difference between the background brightness, and the foreground brightness. This should be greater than 125.

Color difference: This formula refers to the difference between the background colour and the foreground colour and should be greater than 500.

Formulas are explained in the document Techniques For Accessibility Evaluation And Repair Tools.

The limitation of these types of applications is that we cannot check the colour balance from images. This is one of the reasons that it is not recommended to make any text into images. They cannot be viewed by external reading programs.

Reviewing an authoring tool

Published 17 June 2009 by Rocío

I was going to do an evaluation of an authoring tool, but the WAI have thought of it already at www.w3.org/WAI/AU/2002/tools.

I found that the reviews were all a little outdated and I didn’t get a definite conclusion from any review. So I finally decided to go ahead and check out an authoring tool myself. I went for the markup editor developed in collaboration with the W3C, Amaya. It’s a WYSIWYG editor/browser. Many distributions are available. I will be looking at the Windows one.

I opened an existing file that I know is made to standard and it came out all distorted. I then created a page from scratch. I must admit that I’m not used to any kind of authoring tool. I have been using Notepad++ for a while. So it was a little strange. At first it took me some time to get used to the application itself, but after a while of playing with it, it was fairly simple to use. I did a trivial page with a menu, an unordered list, a form and an image.
Page done with Amaya

Formatting done to some text resulted in inlining style, there were extra open and close paragraphs, inserting the image required to enter an alternative text, and as for the other elements they were pretty intuitive.

It’s clear that you still need to know some basic concepts in web standards to make any web page complaint or accessible. This tool might be good for someone just starting, but I think I’ll just stay with my simple text editor.

Forget CSS Opacity for now

Published 8 May 2009 by Rocío

It’s been trendy for a while now to play with transparency to simulate layers, but guess what? Yeap, you know it. It’s not valid under CSS2.

Stuff like opacity: .4 -moz-opacity: .4 filter: alpha(opacity=40) for the moment out of the question. We all have to wait patiently until CSS3. Yeah you heard me CSS3. If you did’t know, CSS2 is the current cascading style sheet language recognized by most of your browsers and it’s getting a face lift. Alas, the due date is unknown at this point.

If you want more information on this check out these important websites:
www.css3.info
www.w3.org/Style/CSS/current-work

Tag: validity

Top Accessible WordPress themes

Check My Colours

Reviewing an authoring tool

Forget CSS Opacity for now