Skip to content → Posts

em, a unit of measure

The secret of the “em” is proportions. Keeping the appropriate proportions regardless of the size. Let’s use font-sizes as an example.

First, set a parent font-size as an absolute measurement. Let’s say 16 pixels in the body. All subsequent sizes use the following formula: child pixels/parent pixels = child ems. So if you want an h1 to have a pixel size of 24, then its em unit would be 1.5 (from 24/16).

Nested elements require particular attention, because they multiply on each level. If you have a div inside a div and the outer div has a font-size of 1.5em, then the inner div (div div) should be 1em to cancel its inheritance.

Now that the how is settled, let’s go to the why.

Other than WCAG 1.0 recommending the use of relative units (ei. em or %) as opposed to absolute units, there’s the fact that not all browsers deal with resizing in the same way. Some older browsers like IE6 won’t resize any absolute pixels.

The proper implementation of this guideline might be daunting for larger style sheets. My initial advice would be to break it down to specific sections. Have parent pixels on primary divisions and set your inner relative ems accordingly.

[Source: CSS for accessible web pages by Richard Rutten]

Leave a Comment

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


The deal with opening hyperlinks in a new window or tab.

The main consensus is to avoid them. Why you say? Well because it’s not necessary. If you really want to open a link in another tab or window, you can do it yourself:

In Firefox, hover over the link you want to access, right-click your mouse to get a menu and click on “Open Link in New Tab” or “Open Link in New Window”.

Firefox Right Click Menu

In Internet Explorer, hover over the link you want to access, right-click your mouse to get a menu and click on “Open in New Tab” or “Open in New Window”.

Internet Explorer Right Click Menu

I found other compelling reasons to avoid this habit on Accessify Forum. Kyle J. Lamson wrote“…Forcing new windows can confuse people when it opens behind the window and they do not realize it and it is really iritating when we are reading and it blocks our view.” He also mentions that some browsers or applications do not support multiple windows. He continues by adding “If I want to return to your site, I will… either back button or because usually I open links in new tabs. But if I am just using your site as a jump off point to somewhere else… then i do not wish to remain at your site and you should not force me to.”

I agree with Kyle, it’s all about giving choices and not forcing anything on the user.

So use the back button or get to know your browser. Simple and efficient shortcuts will help make your web browsing experience a better one.

Leave a Comment

Pushing for Web Standards

Websites dedicated to online awareness and magazines alike are pushing more and more the importance of Web Standards. Sites like A List Apart has been an advocate for Web Standards and Web Accessibility for years. WordPress, Joomla and other content management systems have embraced the principles of accessibility. Forums like Accessifyforum have also seen increased interest.

Governments and now Educational Institutions, mainly Universities are taking the matter into their hands.

Blogs like and contests like at encourage and pursue the issue in terms of content, design and context. I even came across a guild for accessible web designers. It is hopeful to see that web professionals consider web standards as an important facet of the web experience.

Leave a Comment

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

Getting Lists right

Lists can be tricky, but as long as you keep a consistent structure and the correct sequence, lists are a piece of cake.

Here are the basics to remember:

  • Make your menus into unordered lists,
  • Place the list inside a div,
  • Have an H2 header with menu title (hide it if not need to be visible),
  • The ul has no left indentation (for browser compatibility),
  • Use display:inline for horizontal lists,
  • Breadcrumbs use nested lists,
  • Be diligent.

To read more about lists: CSS Design: Taming Lists

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.


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

I was going to do an evaluation of an authoring tool, but the WAI have thought of it already at

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

Page done with authoring tool Amaya
Page done with authoring tool 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.

Leave a Comment