Monthly Archives: December 2007

Use of UL or OL in HTML Forms

Posted on by

I just finished re-reading Roger Johansson’s wonderful article entitled “Use the label element to make your HTML forms accessible“.

I agree with everything he said, except I think by putting the label and the input elements as part of an un-ordered list (UL) or an ordered list (OL) the screen reader will announce how many items are in the list. By doing so you can then place an UL or OL inside a FIELDSET, which will inform you of how many fields you need to be filled in. This number might be greater than the actual number of items if you have lines of text in the middle of the form field list.

I found this great piece of information about using UL or OL in forms from Justin Stockton when he was looking over a form I was building. He either asked “Why I was using the <BR> tag?” or “Why I had form elements inside of a <P> tag”. I told him that was how I learned to create my forms from articles I had read. He suggested using the UL or the OL for form items. After that, by like only a day or so I was listening to either one of Derek Featherstone, Aaron Gustafson, or boths podcasts about accessibile forms and they mentioned the same thing.

Here is a short  code example for filling out personal information on a form:

<fieldset>
<legend>Personal Information</legend>
<ul>
<li>
<label for=”first_name”>First Name</label>
<input type=”text” name=”first_name” id=”first_name” />
</li>
<li>
<label for=”last_name”>Last Name</label>
<input type=”text” name=”last_name” id=”last_name” />
</li>
<li>
<label for=”company”>Company</label>
<input type=”text” name=”company” id=”company” />
</li>
<li>
<label for=”title”>Title</label>
<input type=”text” name=”title” id=”title” />
</li>
</ul>
</fieldset>

Now here is what the code looks like as a form:

Personal Information




Of course you will need to use a bit of CSS to make this look better. You can remove such things as the fieldset border and do a bunch of other things to it. Here is the same example with CSS added, nothing fancy. When you use UL or OL in the fieldset you will be improving the accessibility of the form in my opinion.Please give me your thoughts on this matter of using UL or OL inside a fieldset.

A Few Quick Things About the OLPC

Posted on by

Yesterday I met Justin Thorp, Rodney DeGracia, Stewart, and Partica over at Murky Coffee in Arlington, VA with our One Laptop per Child machines (OLPCs). We had a good time talking about our new laptops. Stewart even mentioned that the OLPC he had brought with him was his daughters. He had purchased it for her and when he got to using it he like it so much that he did the Give 1 Get 1 again, before the dead line of December 31, 2007, so he could have one for himself.

We played the memorize game with each other over the mesh network. Justin and Stewart used the mesh network to collaborate on a document. It was fun watching Stewart type in his version of the document and then the changes happen on Justin’s in an instant.

There were three items that I had noticed before and wanted to re-test and look at with others there to make sure I was not imagining things.

The first thing was that if you have fixed width website that is greater than 800 pixels you will have to scroll your screen horizontally. The width might be slightly less than 800 pixels, I’m not sure the exact number. I know that my main website, which is 750 pixels wide fits in just fine. One of the OLPC websites does not fit on the screen has to be scrolled and I can’t remember which one right now. You would hope that their own website would fit on their machine. I figure they’re busy and have other things to do that are more important right now.

The second item was that when you fill out a form field or URL that you have done before it does not give you a list of what you have already typed before. This is not a big problem just a nuisance for someone that has used computers for years, but for someone that never has they will not know this information. It looks like the OLPC will let you save cookies, since I marked my Hotmail to remember me  on it and it did I will have to check this out more to make sure it is correct.

The final item and the one I find more interesting and troublesome is that if you have an application that puts up an alert box up it never comes up. I found this out by trying to delete a Twitter message that I had typed wrong on my Twitter account while using the OLPC. On Twitter when you request to delete a message it puts up an alert box that says “Sure you want to delete this update. There is NO undo!”. If you are using a normal machine it comes up fine and give you the option to hit “OK” or “Cancel”. Well when using the OLPC browser this message never came  up. You click the trash can to get the delete function to work and the little circle just spins for awhile, stops, and then nothing happens.

I know that most of the web forms and applications that I have built or maintain now have alert boxes that come up to show errors in the page, etc.. Time to test this out on a few other pages first to make sure I’m correct on this assumption. This could be a problem that makes it difficult for people with these machines to accomplish different tasks that include forms. This puts a barrier up and makes it an accessibility issue to those people using the OLPC. Hopefully it is only a temporary thing until they get it fixed. I know of a lot of web applications will show you a list of errors by putting them in an alert box. By using web standards for your websites I think you will keep away from problems that the OLPC can not handle.

Have any of you noticed either of these problems with your OLPCs or is there any other things I might have missed using my machine. This information would be helpful to me and others for when we are building web pages ad applications to make sure they work on as many devices as possible. If things go well there will be millions of these out in the world in a short time.

More Helpful Information for the OLPC

Posted on by

Today I have found a few more useful resources for the OLPC.

  1. http://dev.laptop.org/ – for bug tracking and source code for the OLPC
  2. http://lists.laptop.org/listinfo/ – mailing list for the OLPC
  3. http://www.olpcnews.com/ – One Laptop per Child News
  4. http://wiki.laptop.org/go/USB_ethernet_adaptors – USB ethernet adaptors, so you connect the OLPC to the internet without wifi

To the question “Have I been able to get to the internet using the mesh network?”. I have not yet connected to the internet using the mesh network. I have gotten on to the internet using wifi at a few different coffee shop and even to other open wifi hotspot.

To connect to the internet you need to go to the neighborhood page and look for circles that do not have a lock on them. Once you have found one that has as full a circle as possible. If they have a lock on them then you will need to have the password to connect using hotspots. The fullness of the circle indicates how strong the signal is. Next make sure that it is not one of the three different mesh network channels (1, 6, or 11). Now click on the circle you have chosen to see if it connects. You might have to do this a few times to get it to connect. This information is on the how to connect to the internet from the OLPC wiki it is very useful and helpful in much more detail and has images.

More General Information about the OLPC

Posted on by

There are a few things that I have noticed over the course of the day using the OLPC, the XO Laptop, or the $100 Laptop. One of the big ones is that if you take it to a coffee shop people will look at you and then the laptop and look at the laptop some more.

I had a lot of people come up to me and ask if it really worked. I said “Yes, it does and you can get one for yourself even” and went into how they can order the OLPC themselves from OLPCs Give 1 Get 1 website.

I had a lot of people ask “Is that one of those green laptops”, or “Is that one of those $100 laptop”.  I got the most questions from older people asking “Isn’t that the laptop we saw them talking about one CBS”? I assume they saw the “60 Minutes” piece on the OLPC. Each time I would stop reading about the laptop and offered them a chance to use it.

One lady I guess was going to order one for someone or she already had, so she wanted to see it and touch it. She had a young girl who was eleven if I remember correctly use it. The young girl said it was easy for her to type on. Of course she tried to go to one of the Disney websites, which asked for the latest Flash plug-in to see most of the website, not that accessible of a website. A Disney website is probably not the first place someone from third world country would go or at least it shouldn’t be.

Another gentleman asked what kind of software you could put on it, since someone he knew or he was going to a third world country and wanted get a few to let people there use it if it could do a bunch of activities.

One women I know asked if you could look up porn on the laptop. I told I figured you could, since I had not heard that they had software to stop it. Really wanted to know if kids could look up porn. So when she got hold of the OLPC she went to the Playboy website and started laughing when she got to their home page. I grab the OLPC back from her to get rid of it, since we were sitting the middle of the coffee shop with a lot of little kids and older adults.

I did get some reading done about the OLPC on how to get started, how it works, and what activities the OLPC has on it. They even have a wiki, which contains information about hardware, software, content, testing, educators, developers, and a whole lot more. They have some cool rollovers explaining what certain parts of the machine are for. One of the ones I just found was the page that has information on what the keyboard does. They also have a page that shows which features the OLPC has.

With all the question and people playing with it I did not get to do as much as I wanted today on learning about the activities on the OLPC. It was like three different “Tam Tam” activities. They are:

  • “Tam Tam mini” – an application that allows for people to perform music and play instruments.
  • “Tam Tam Edit” – an application allows you to generate music using a colorful and intuitive graphical interface.
  • “TamTam Jam” – the music performance activity. Sounds are played by striking individual keys on the keyboard. This is designed more for younger children.

Other activities that the OLPC has are: (this information was mostly taken from the activities webpage)

  • “Chat“ -simple environment for discussion, whether it is between two individuals or an entire classroom.
  • “Memorize“ – is the classic memory game of finding and matching pairs with a twist: a pair can consist of any multimedia object, such as images, sounds,and text.
  • “Record” – provides a simple way for children to take pictures, view slideshows, and record video and audio all content that can be shared via the mesh network.
  • “Journal“ – is an automated diary of everything a child does with his or her laptop.
  • “Draw“ – provides a canvas for a child or a group of children to express themselves creatively.
  • “Pippy“ – a simple and fun introduction to programming in Python, the dynamic programming language underlying much of the software on the laptop.
  • and a whole lot more

The final cool thing on the activities page is the last item, which  is the part about downloads for the OLPC. The download page has like 50+ items to download and use like (some is games others is source code):

  • “Domino“ – classic space game
  • “Image Quiz“ – a simple concept: one question, one image, one click
  • “3D Pong“ – three dimensional wireframe arcade game
  • “SimCity“ – construct and maintain your own city
  • “Block Party“ – Tetris-inspired game
  • and a whole bunch of other things

The woman across the table from me at Murky Coffee in Arlington said, “I should bring the OLPC out with me, it might actually be better than having a puppy or a baby with me for getting people to stop and talk to me”.

Hopefully this blog post is usefully for those that do not have their OLPCs yet, are waiting until Christmas to open with their kids, want to read up on what it has, what is being developed, or what you can do with it.

First Blog Post from my new OLPC – (One Laptop per Child)

Posted on by

This is really cool to be able to connect to the internet by wireless from another persons mesh network, I don’t have wireless.

The typing on this key board is difficult since the keys are so small. They seem to be made for like ta five to eight year old or someone with really small hands. The good part about the small keys is you have to type much slower, which means hopefully less errors.

This OLPC will be great for taking to the coffee shop and t0 do just a bunch of reading. This keyboard makes it tough  and the buttons near the mouse pad are really small and if your not careful you end up moving the cursor and then typing somewhere else after you hit the left click.

That’s enough for now time for a bunch more reading on how to use this new device. Longer posts with photos will go up in the next day or so.

My new One Laptop per Child (OLPC) next to my older 16 inch laptop

UPDATE – Added photo of both my laptops on the larger one, since I have not yet read enough to be able to do it from the OLPC.