Thinking Accessible » Reviews

Make it readable

Rocío — Sun, 21 Feb 2010 18:10:05 +0000

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

Accessible Web Search for the Visually Impaired

Rocío — Sat, 02 Jan 2010 12:37:20 +0000

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?

W3C has a new look!

Rocío — Sat, 17 Oct 2009 13:06:32 +0000

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!

Pretty and accessible design

Rocío — Sun, 27 Sep 2009 15:42:41 +0000

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.

Check My Colours

Rocío — Sat, 26 Sep 2009 15:32:54 +0000

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.

Case Study

Rocío — Sat, 13 Jun 2009 16:05:48 +0000

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 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
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.

Another Firefox add-on

Rocío — Tue, 02 Jun 2009 15:55:09 +0000

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

Examples of assistive technologies

Rocío — Sun, 24 May 2009 15:49:32 +0000

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.

Useful before and after demonstration

Rocío — Fri, 22 May 2009 19:11:25 +0000

The W3C have a super neat online demonstration of visually representing web accessibility. The inaccessible pages have several “barriers”, key elements that make the page inhospitable. For example, the before home page demonstrates a lack of alternative text for each image, an inconsistency in the content order, a negligence with headings and lists, an inaccuracy with link texts and font sizes.

Even by visually comparing both inaccessible and accessible pages you can see the subtle, yet important, differences. I suggest to examine one page at a time. Carefully look at the before and after of the home page, then read the “accessible barriers”. When you understand the “barriers” then go on to the next page.

If you want to see how to go from a non-compliant site to an accessible one, you need to read this document, the before and after demo at: http://www.w3.org/WAI/EO/2005/Demo/Overview

Firefox Accessibility Extension

Rocío — Wed, 06 May 2009 23:47:48 +0000

Firefox 2 and Firefox 3 let the user add plugins to the browser. There are about a million of them that you can find either on the menubar under Tools and Add-ons or at their website at addons.mozilla.org. The add-ons that any web developer must have are Firebug, to debug the code and make adjustments on the fly; Web Developer, to disable, highlight, display, outline, and validate just about anything on any web page; and a recent discovery of mine Firefox Accessibility Extension.

Although Firefox Accessibility Extension has similar features than the Web Developer add-on, it’s still pretty sweet. Not only does it give the user a toolbar, but also an extra heading on the menubar, between Tools and Help, which I personally prefer rather than having a bunch of toolbars taking up space on my browser. The greatest feature of this extension for a web developer is that you can validate your web page for accessibility. Its FAE Rule Set is based on Functional Accessibility Evaluator 1.0.1 developed by the University of Illinois at Urbana-Champaign.

FAE on the menubar

If you have any mistakes these are listed in a window with a description of the error. Obviously there’s a learning curve where you have to know the terms that the report is referring to, nothing a little research won’t solve. These rules are very straightforward, but not exhaustive. This tools gives you a simple and fair reading of your page and this is already a very good starting point.