Thanks, again for all of you coming out to here a talk on Accessibility.
Here are the “Is Your Website Accessible” slides from my presentation on 2008/01/17.
I had a great time this evening doing this. It was worth all the late nights getting ready for the Refresh DC meet-up.
I will be giving an Accessibility presentation at the Janruary 17, 2008, meeting of Refresh DC. The following is the important information:
Thursday, January 17, 2008 7:00 PM – 8:00 PM
Greater Washington Board of Trade
1725 I Street NW, Suite 200
Washington , District of Columbia 20006
Please make sure to register on Upcoming so they have an idea of how many people are coming.
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:
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.
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.
Today I have found a few more useful resources for the OLPC.
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.
