Skip to content →

rocioalvarado.ca Posts

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.

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.

5 Comments

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

Reviewing an authoring tool

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

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

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!

One 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

Podcast Five – Advanced Accessibility

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

Transcript of the podcast:

[Intro music] Welcome to podcast five of Thinking Accessible. On today’s podcast I will talk to you about some advanced features in accessibility.

First on the menu I will talk about accesskeys. Accesskeys are keystrokes that we can trigger on the keyboard to go directly to a certain element or a certain page of your website. Accesskeys are to be combined with different HTML attributes, different HTML tags: the a, the area, the button, the input, the label, the legend, and the textarea. These are your choices for accesskeys. It’s recommended to use numbers 1 to 0 (o to 9). Don’t get carried away! As long as you have shortcuts to important links, this should suffice. For example, the UK has established standards for their accesskeys and they have a list of 11 shortcuts (that they deem important to use.) I would recommend to look at these options and choose the most appropriate ones for your web page.

For my blog, at thinkingaccessible.com, I will only need skip navigation which is the S keystroke, home page which is the 1 keystroke, search which is good and is the keystroke number 4, and accesskey details which is the page that explains the accesskeys used and this is the keystroke zero.

For every accesskey, it is a good idea to put a title with it, to explain exactly where it is redirecting the user.

For example, the accesskey 1 which will be going to the home page, you can title it: “Back to the home page. Accesskey 1″.

Ex:

<a href=”home.html” title=”Back to the home page. Accesskey 1″ accesskey=”1″>Home</a>

I got all this information through a really great article. You can check it out through a link on my blog: Article on Accesskeys

Next up, I think it’s important to discuss labelling forms. Once you get this, it’s super simple! Let’s look at a really basic example. For instance, we have a field for a name, so you type in Name for your label and then you have your input. For this example let’s say that the name attribute is “fullname”. Now for it to be accessible we need to add a label tag to the label itself. In this case, the label we have is Name:, we have to wrap it with the label tag and then we have to for attribute. This for attribute can also be called “fullname”, but remember that your input has to have an id with the same exact name. These two things work together, the for of the label and the id of the input. They work as a combination.

Like this: <label for=”fullname”>Name:</label> <input id=”fullname” name=”fullname”/ >

That’s basically it, that’s all you need to remember.

I have a link to the article in which I got this information: Article on Labelling forms.

My next topic is CSS relative font size. Why is it important to put relative font sizes? It’s for people to be able to change the size of the text in whichever browser they use. Nowadays the more modern browsers zoom the page, so this is not a big issue, but the older browsers have the old way of doing things that was to increase the size, but if this size is an absolute size then it won’t move, it won’t budge. But if it is relative size then it will relatively expand or diminish depending on what the user does. This is why it’s important to do this.

The way of implementing this is that your main body, the main text that you use at the beginning of your CSS stylesheet make it an absolute to the size you want most of your page to be that way you don’t have to worry about it in the future. Some people put 12, I like to put 14 px, pixels. But it’s really up to you. All the subsequent font sizes that you use on your CSS stylesheet, should be a relative number. Either use ems or percentages because it’s much easier to follow.

[Exit music] Well that’s it for today’s podcast. I would love to hear from you. Please come to my blog at thinkingaccessible.com and post some comments. Until next time!

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

Leave a Comment

Podcast Four – Divide and Conquer

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

Transcript of the podcast:

[Intro music] Welcome to podcast four of Thinking Accessible. Today’s podcast is called Divide and Conquer. I will talk to you about layout versus content.

One of the keys of being successful in web standards is to divide the layout and the content.What I mean by this is that all the content related elements have to be in the HTML and everything else, like the style or the layout is in the CSS.

Your HTML code is strictly the tags that represent the content. So for example the <p> tag  is for paragraph, the <table> tag is for table, the <blockquote> tag is for big quote, etc. CSS is used to style the content. In other words, you use CSS to let’s say centre a page, make a certain <div> have a border, have a listed menu that is horizontal instead of vertical, remove or have different styles of image borders. So all it is is layout for us and it is done in the CSS.

Ok, now let’s see how this works. Please refer to thinkingaccessible.com for a textual transcript of this podcast where you can see exactly what I’m talking about.

So for example a horizontal menu. You would start by putting a <div> with an id, you can name it anything you want, but it should be something that you will recognize when you go to your CSS. I call (the id) menu. So you have your opening <div> with the id menu and then you can start your list. So it’s an unordered list and so you put the <ul> tag, and then you (place) your elements with the <li> tag, the list tag. It’s a menu so you have to put an <a href> tag with the location of that page and then you put the text, and you have the closing </a> tag, the closing </li> tag. So you repeat this as many times as your menu has items. You finish with a closing </ul> tag and the closing </div> tag.

<div id=”menu”>
<ul>
<li><a href=”home.html”>Home</a></li>
<li><a href=”about.html”>About</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</div>

So now let’s look at the CSS of this. To start this menu id you can use a div to differentiate it from other maybe classes or you can just start with the number sign and then the name of your id. So in this case I have div, number sign, menu. And this one has padding of the menu and also the size of the font, so font-size is included in this one. The next one is the ul, because you want it to specifically target this id, the menu id, you put the ul right after this menu id. It follows the same order as in the HTML. The list-style is none, the list-style is if you want there to be a little circle beside the (text). We don’t want this in this case and it’s always a good idea to void the margin and the padding. The next one is the li tag and again you put the menu id right before it. To make this menu horizontal you have the display at inline which makes it all horizontal, you can also add some padding here for every element in your menu.

div#menu {
padding: 128px 0 0 220px;
font-size: 70%;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu li {
display: inline;
padding: 0 5px 0 4px;
}

(This is what is looks like:)

Horizontal menu list of Home About Contact
Horizontal menu list of Home About Contact

That was a simple example of how you (divide) HTML and CSS to have a better separation between the content and the layout.

[Exit music] That’s it for this podcast. I hope you found it useful. You can also see other content at my blog thinkingaccessible.com. Until next time!

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

Leave a Comment

Did you know that…

Did you know that according to Statistics Canada in 2006 there was 1,289,420 Canadians with a hearing impairment, 835,960 Canadians with a seeing impairment, 2,856,820 Canadians with an agility impairment, and 752,110 Canadians with a learning impairment. In every case, around 70% of these Canadians said that they had used the Internet in the past year. Let me crunch the numbers.  That’s 5,734,310 Canadians with the above mentioned impairments of 31,612,897, the total population recorded that year. So…there’s roughly about 13% of Canadians, with these impairments, that use the Internet.  That’s a lot of people if you ask me!

Ok, nobody likes having numbers thrown at them, but I hope that at least it impresses on you how important it is to consider people with impairments or disabilities as active members of our society and as such they should to be able to access with ease all the information everyone else can access.

You can have a look at the complete survey at the Statistics Canada website.

Leave a Comment