Tag: guidelines

HTML5 For Web Designers – A must read

Published 4 March 2012 by Rocío

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:

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

Designing a website: Top 15 things to consider for web accessibility

Published 17 March 2011 by Rocío

Here are the main things to think about when designing a website:

Maintain a design and layout consistency throughout the site,
Avoid clutter,
Include written transcript for any audio and visual media,
Avoid multiple level menus. Do not have more than two levels,
Include a sitemap when your site has embed pages,
Avoid making the width of content too large,
Any one link should have the same title,
Make the titles of the pages clear,
Content must be simple and to the point (Especially if your target audience is broad.),
Do not add default value in form fields,
Make sure that the colours of the background and foreground are well contrasted,
Have a decent font-size. (14px is good.),
Avoid images with text on them,
Don’t use “Read more” links, instead use “Read more about THE TITLE OF THE PAGE”,
All links in the content should be underlined.

Maintain a design and layout consistency throughout the site

I have rarely seen an effective switch in design or layout within the same site. If it is absolutely required, make all changed subtle. Having differences in webpages of one site can be confusing and frustrating for a visually-impaired person and even for a new visitor. A visually-impaired person often uses a screen reader to read the content of the site to them. If within the same site the structure of the site changes from one page to the other, it can be disorienting. The norm is to maintain the same look and feel throughout a site, your new visitor might feel lost when jumping to another page with a completely different look.

Avoid clutter

Keep the layout as clear as possible. This makes it easier for the visitor to find the destination they are looking for.

Include written transcript for any audio and visual media

It’s fair to say that this demand is not obvious to produce. But it’s not fair to those who do not possess all senses. Food for thought!

Avoid multiple level menus. Do not have more than two levels

Not only do multiple level menus often not work properly in different browser, especially older ones, but they are very hard to navigate by keyboard only. Next time you see a multiple level menu try going through the menu by click on the tab key on your keyboard. You’ll see, it won’t be easy to get to the third level or even the second level.

Include a sitemap when your site has embed pages

If your site does have many sub-pages within a page, make it easier for your visitor to get to those pages through a complete sitemap.

Avoid making the width of content too large

When the width of a paragraph is too long, it is often harder on the eyes. The reader gets tired more quickly. Those affected may include people with learning disabilities, newbies, but even people with no known deficiencies.

Any one link should have the same title

You should avoid having the same link with different titles. For example, the link to the contact page with the title “Contact us” should not named “Reach us” elsewhere. We want to avoid any type of confusion that the visitor may encounter.

Make the titles of the pages clear

Be as accurate as possible when naming your pages. Think that you will be using these titles as your page’s main heading.

Content must be simple and to the point

Do not be verbose. Use lists whenever possible. Keep your sentences short. Use words effeciently. Read the W3C Writing Style section.

Do not add a default value in the text input field

The label of the text input field should be enough as to determine the desired input.

Make sure that the colours of the background and foreground are well contrasted

Colour contrast can be measured with applications like the Contrast Analyser by The Paciello Group. Download the application, install it and with the pipette determine if your chosen background and foreground colours satisfy the required contrast ratio.

Have a decent font-size

Make it as easy as possible to read your content. For a font like Arial, use a font-size of 14px.

Avoid images with text on them

If you must have text in your images, make sure to describe the image in the alt attribut.

Don’t use “Read more” links

Instead of linking to your full page with the very commun “Read more” link or the like add the title of what you are linking to. So if the title of the page the link is directing to is called “The Greatest Article Ever” have your link be “Read more about The Greatest Article Ever”. It might be redundant for sighted people, but when you consider that these links might be read out of context by screen reader, then it makes sense.

All links in the content should be underlined

In terms of usability, we want to inform the visitor when a textual information is linked to another page. Making the link a different colour may be indistinguishable to visitors with color blindness.

Many of these points have other implications when implemented in practice. We’ll leave those for another post.

One Comment

Pushing for Web Standards

Published 3 January 2010 by Rocío

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

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.

Leave a Comment

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.

Leave a Comment

Evaluating a website for accessibility

Published 15 June 2009 by Rocío

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!

One Comment

Case Study

Published 13 June 2009 by Rocío

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:

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

Podcast Three – My four golden rules

Published 29 May 2009 by Rocío

[podcast]http://thinkingaccessible.com/podcasts/four_golden_rules_podcast_three.mp3[/podcast]

Transcript of the podcast:

[Intro music] Welcome to podcast three of Thinking Accessible. On today’s podcast, I will talk to you about my four golden rules for web accessibility.

Rule number 1:

Provide alternative text for non-textual content. What do it mean by this? Images are non-textual content. Audio and video are non-textual content. So for each of these elements you need to provide a text alternative. So for images in the HTML code you have to write an alternative tag to it. So in the tag of IMG for image you have to add ALT. for alternative text and here you would put basically a general idea of what the image represents.For audio feed, like for example this podcast, it would be nice to put a transcript of the audio because some people might not be able to hear it. And for video, you should put obviously captions for all the text (speech) in the video. Sure these are not easy to do, there are time consuming, but in the end it is good, for one, the person that cannot hear or see you media and also for search engines, because they will actually have the textual reference for these medias. So it’s a win, win situation.

Rule number 2:

Make it simple and consistent. Making your website simple will help people with cognitive impairments, elderly people and new web users that are not used to big and elaborate websites. Consistency is also important because if you have a lack of consistency your user might be confused, won’t know what’s going on with the website, might be lost. So we want to minimize this because if a user feels frustrated in your website, they are more likely to leave that website and go somewhere else. You can make your website simple by simply (sorry for this repetition) using normal vocabulary that anybody can understand. Do not be too verbose and just be clear with what you can to express. Consistency is to basically keep the same layout through out your website and you should be fine.

Rule number 3:

Colour contrast. In order to make your website legible it is important to consider colour. For example if you want to have a black background you shouldn’t really consider a colour for the text to be dark grey because this will be illegible for a lot of people. For me this rule is just for you to use common sense. I mean if you think that the colours you have chosen for the foreground and the background are not going to be legible or not easily legible by let’s say your grandmother, then don’t use them because it won’t be legible for a lot more people.

Rule number 4:

The last rule. Respect those HTML tags. Ok, so here it is. If it’s a <p> tag, then it’s a paragraph, then use it as a paragraph. If it’s a <table> tag, then use it as a table. Tables should (only) be used for tabular data, for example a data in a spreadsheet and not for layout, not for your page layout. (Use CSS instead!)

So those are my four golden rules for web accessibility. Yes, I know, there’s more to it than that, but for just a quick rundown of the essential ideas in web accessibility, these four simple rules are a major step forward.

[Exit music] Well that’s it for today’s podcast. That was podcast three for Thinking Accessible. My name is Rocío. Until next time!

Audio from ccMixter entitled “Café Connection“ by Morgantj under Creative Commons.

Leave a Comment

No Canadian Section 508

Published 25 May 2009 by Rocío

Ok so Canada does not have the national equivalent to the United States section 508. But if you want to know what they recommend you can read their Common Look and Feel standards for the Internet documentation. Obviously the information is for government and public sector websites, but it could be useful to get another perspective on standards and accessibility. It basically lists out the main things we need to remember for guidelines and best practices.

Leave a Comment

Useful before and after demonstration

Published 22 May 2009 by Rocío

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

Leave a Comment