Skip to content →

Tag: good practices

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 www.prettysimple.co.uk/blog and contests like at www.accessibilityinfocus.co.uk 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

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

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

Evaluating a website for accessibility

The W3C has extensive information on how to properly evaluation a sites accessibility. Here are the underlining steps to ensure that your evaluation is full-proof:

For a preliminary review, select a page that is representative of the whole site or that most people will see. Try to choose a page that has tabular data, images and scripts. And then:

  • Examine this page for alternative text,
  • Divs instead of tables for page layout,
  • Use the keyboard instead of the mouse for navigation,
  • Test with different font-sizes and screen resolutions.

The Firebug and Web Developer extensions in Firefox will make your life easier in accessing the code and disabling images and even resizing your browser size. It might be a good idea to try a screen reader, and not to mention an Web accessibility evaluation tool like AChecker. These will enhance your understanding of the sites limitations and successes.

Another important part of evaluating a site is to get people with disabilities involved in the process. Some may have insights that other users will not.

For a complete procedure of website evaluation you have to go to the W3C – Web Accessibility Initiative page.

Although a little outdated, the WAI also provides a comprehensive checklist of accessibility guidelines (WCAG 1.0) and an useful template for the final accessibility report. They really thought of everything!

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

Yet another post on Web Standards

What are web standards?

Simply put, they are a set of guidelines for web development and web designing. It represents the good practices of the profession. When I started creating websites I had no idea their were rules, but now that I know they exist and I know why I need to use them I cannot code without them. There are several sets of guidelines around the world, but the most widely known is the World Wide Web Consortium (W3C) web standards. Found at www.w3.org. This site is a little overwhelming for someone just starting to look into web standards, so I will attempt to provide some basic guidance and to list the most important elements.

Web standards are important because without them web accessibility is impossible. Web Standards make it easier for usability and even for code maintenance, reduce bandwidth use and increase cross-browser compatibility. Another great advantage of web standards is SEO (search engine optimization). Sure you can get all these even if you don’t follow the standards, but it will cost you.

The only disadvantage that I can think of, even if it’s not a valid reason to avoid web standards, is time. Time to learn it, time to implement the guidelines and time to test it.

Leave a Comment