Skip to content →

Category: Reviews

HTML5 For Web Designers – A must read

Even if you are just starting to use HTML5 or have been using it for a while, I highly recommend all web designers, developers and any one in between to read this book. It was an easy read with amazing layout, great graphics and images. The author was witty and concise, but also humble in his limitations.

Jeremy Keith, the author, summarizes the topics in six distinct chapters:

  1. A Brief History of Markup
  2. The Design of HTML5
  3. Rich Media
  4. Web Forms 2.0
  5. Semantics
  6. Using HTML5 Today

All chapters seems to be very carefully thought out. It is obvious that the author barely scratched the surface of what HTML5 can do in such a small book, but he managed to describe key elements with ease and clarity.

Leave a Comment

Top Accessible WordPress themes

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.

8 Comments

Make it readable

Have you ever been on a site that the text was simply unreadable. You know what I’m talking about! The colour of the text and the colour of the background just makes it hard to read, or either the font is just too small or the width of the line is too long. Well now you can customize those pesky texts into something you can actually read.

Readability is a simple tool that makes reading on the Web more enjoyable by removing the clutter around what you’re reading.”

This application made by Arc90 is quite easy to use. Just pick your settings and bookmark it on your favourite browser and use it at your leisure. Get it at Readability – An Arc90 Lab Experiment.

Read about it at: Readability | Arc90 Lab

2 Comments

Accessible Web Search for the Visually Impaired

Google cleaned up their search experience with their accessible search engine. Fairly similar to the regular search, but with some subtle differences that can aid a visually impaired person to search better.  The system is still being developed but basically it prioritizes results that are accessible.

Check it out a: Accessible Web Search at Google

To learn more: Making Search Accessible to Visually Impaired Users and Is your Web Site Optimized for Accessible Search?

Leave a Comment

W3C has a new look!

The new and beautified World Wide Web Consortium website is proof that it can be done. Those of us that visit that site regularly know how extensive the site is and a task this big is daunting. Nevertheless, the improvement is welcomed.

Things to notice:

  • It’s scalable width size,
  • More breathable (meaning that there’s less content on the page therefore it’s easier to read),
  • Colours work well together,
  • Changeable views for desktop, mobile and print,
  • The skip link to jump to the main content.

Congrats!

Leave a Comment

Pretty and accessible design

It is more and more apparent that accessibility can be beautiful. I came across Accessibility in Focus, a website for an accessible web award.

There was 4 finalist, one of them was the Salford City Council. A fairly large website. Its navigation is straightforward even if at first glance the site looks overwhelming. This site is proof that the size of a website is no excuse for accessibility.

The interactive award winner uses Flash. Although Orange Project conforms to the lowest priority level of the W3C WAI standards, I still think that Flash has a long way to go. While considering the site’s probable target audience, the design is a very successful one.

Leave a Comment

Check My Colours

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.

Leave a Comment

Case Study

So I recently re-did one of my old websites. My client wanted to had some images so I took the opportunity to give her an accessible site. I had done this site a few years ago. I wasn’t aware back then of web standards and web accessibility. I must confess of using tables for layout. But alas, I have done right by this website. I gutted it and made it new again. Although you can’t really see the difference between before and after! Let me show you what I mean:

Contact page before
Contact page before
Contact page after
Contact page after

They don’t look different, but I did change the code.

Here’s what I did:

  • I started by getting rid of the tables for layout purposes. I know!!! It’s all gone now.
  • Then I added the language to the html tag, lang=”en-US”, like this <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
  • I gave a more complete title to each page, like “Nadia Stevens Jin Shin Do Bodymind Acupressure Montreal”.
  • I repositionned some divs and wrapped them properly. Some classes and ids were not correctly placed, so I had to fix these. For instance, I had the same id used several times in the same file, so I changed these to classes.
  • Some images had misleading or inaccurate alternative text. Instead of “Fire” as the alt attribute for a chinese character representing fire, I wrote “Fire character”. In the instance where I had images that were not content related I made them blank text, like this: alt=””.
  • I got rid of widths and height attributes.
  • The menu of the page was not in a list, so a placed it in an unordered list.
  • For the maps, I added an onfocus attribute to every onmouseover attribute  and I added an onblur attribute to every onmouseout attribute.

The first page took me about 3 hours, additional pages took me 1 hour to 2 hours to renovate in the same way.

Ok so this site was easy to do because I had already a lot of div’s in the first place, but it really gave me an idea of how many things need to be thought of while in the process of revamping a site. This work is meticulous and a little repetitive, but if done with methodology, making any site accessible can be pretty painless.

Leave a Comment

Another Firefox add-on

Don’t you just love Firefox add-ons. I do! Especially because they make my life easier.

As a developer it is important to have a feel for what the user is getting out of your site. I found a good way to use a screen reader on any operating system (OS) without paying a dime. I am using Fire Vox. It utilizes the integrated screen reader application of any OS (Windows, MAC and Linux) and functions on your Firefox as an add-on. I tested it on a Windows XP and it worked pretty well. I got some choppiness in the sound but this is probably due to my old hardware. The only downfall for me is that I cannot easily turn it off. I would have liked to have this feature in the Fire Voxes options, but instead I have to go to the add-ons extensions list and completely disable it. Oh well, I’ll live

Leave a Comment

Examples of assistive technologies

So I saw this story on the news by Chris Brown and was happy to learn that assistive technologies are being researched actively in Canadian Universities.  The University of Victoria has a unit named CanAssist, they develop technologies and provide services for people with disabilities. Naturally this is relevant in terms of web accessibility because a lot of these devices interact with computers. I encourage you to read their technology showcase as it describes the uses of these technologies by people with different types of disabilities. For example, instead of using a mouse for navigation, it is possible to use one’s mouth. And as the news piece revealed, the team of researchers have created a device that detects the movement of the pupils and allows the cursor to move accordingly. Pretty ingenious!

It is obvious that these researchers and developers are not waiting for websites to get their act together in terms of web accessibility, but it just proves that this demographic has the possibility to access the world wide web. We can all make it a little bit easier for researchers to make these products more effective by implementing WCAG.

Watch the video entitled “Communication Research” at the CBC. Unfortunately, this video has no caption and thus not accessible.

Leave a Comment