Are You Using Skip Navigation?

Skip navigation is a great thing to have on your website for a lot of reasons. Here is a list of just a few of them the greatest ones being the first two, that they make websites more accessible to all.

  • People using screen readers are forced to listen to a long lists of navigation links, sub-lists of links, and other elements before arriving at the main content.
  • Keyboard users are forced to tab through all of the top links in order to reach the main content.
  • Main content is not usually the first thing on the page or in the source order.
  • People using Blackberries, Treos, etc. have to scroll through a huge list of links.

Now that I have listed some of the reasons for skip navigation here is the code that I use in my websites.

<body>
<div class=”hide”> <a href=”#MAINcontent”>Skip to Main Content</a> </div>

“navigation and other stuff goes here”

<a name=”maincontent”></a>
<p>This is the first paragraph</p>

Please notice that the HREF anchor has “MAINcontent” in the link part, by using “MAIN” in front of it you can still use “content” as an anchor somewhere else on the page for some odd reason. The other point to notice is that link text is “Skip to Main Content” because some screen readers or their voices might mis-pronounce the link text if it was “Skip to Content“. The screen readers have issues with the word content.

Below is the CSS that I use in my websites to not display the skip navigation link(s) accept for the first time you tab through it then after you use it it does not show up on the screen anymore. I changed the ID information from the ones used in the original article by WebAIM on how to implement skip navigation (thanks, Justin Thorp). The article uses the ID of “skip“, I figure you might want to use it hide other items or you might want to have more than one “skip” type link, so I changed it to be a “CLASS” instead of an “ID“. The reason I changed the “ID” to .HIDE from the article was so you could use the CLASSs for other things like visually hiding the word “Required” for web FORM LABELs.

Reminder please do not use “DISPLAY: NONE” in your CSS, since screen readers will not see it.

CSS below was updated on January 29, 2014.

.hide a, .hide a:hover, .hide a:visited {
display: block;
position: absolute;
left: -10000px;
top: auto;
width: 100%;
height: 3em;
font-weight: bold;
text-align: center;
}

.hide a:active, .hide a:focus {
background: #fff; /* change to whatever your color scheme is */
color: #3d3d3d; /* dark gray */
position: static;
width: auto;
height: auto;
padding: 1em;
margin: auto;
}

As you can see the CSS positions the link absolutely with a position of “LEFT” zero pixels and a “TOP” negative 500 pixels. This will allow screen readers, Blackberries, Treos, etc. to see it but not browsers.

I hope this post is useful and further explains skip navigation from my Accessibility presentation “Is your Website Accessible?” at Refresh DC.

Another Long Frustrating and Sometimes Fun Week

Last week was a bit frustrating and somewhat fun at the same time.

Work was busy and somewhat of a pain. I need to get about four projects done before I head to SXSW on the 6th of March, 2008. A bunch of my users/clients want all the work completed, but do not have time to give me the necessary information or they just have no time to just review the finished work so we can move it to PROD.

On one project I finally, suggested that we put in what we had, which was about 90 – 95% of what was needed. This way they could start using the much better version of the web application instead of waiting. they agreed and next week I still have to work on three pages that are still in the old layout and then I will be done with this pass. We finally moved the new pages to PROD on Tuesday.

After work on Tuesday’s most of you know I normally go to a wine tasting/class. Well this Tuesday the Washington, DC, metro area had some really bad weather. It consisted of some rain, freezing rain, sleet, or snow depending on where you lived. So I figured I would just stay home and do stuff around the house, since people around here just need to learn to drive in bad weather. After talking with a bunch people I usually meet there, we all decided to try and make it to class, which is normally a 30 – 40 minutes drive (12 miles).

I suggested that a few of us that live near each other should carpool. I told one of my friends I would pick her up and then we would go to another friends that is on the way. They both live like two or three miles from me in different directions. I left for the first friends at like 6:45 PM, but first I had to remove ice from car. This drive usually takes ten minutes or less on a bad day, since it is all of 2.25 miles and has a few stoplights. The second half of my trip should take 15 minutes to go to our other friends place and then a final drive of eight miles (15 minutes).

Well, as you can imagine the first part took forever. I was on the phone most of the time off and on keeping everyone inlvolved informed of me progress, which was going poorly. The first three quarters of a mile went well. Once I got to the hill on Braddock Road that’s when the problems started. It took over an hour to get to the top of the hill and it is only like a quarter of a mile long. We moved about two or three car lengths about every few minutes. A few times I had to put the emergancy brake on after putting the car in neutral so I could get the feeling back to my feet. This is the one big problem with having a manual car in this town.

The second friend decided to leave without us. He got to class before I even made it half way to my other friends place. The first friend ended up having enough time to balance their checkbook, watch a full episode of “The Simpson’s”, have dinner, and do a few other things. A few people told me to just head home and call it a night. I told them it was not that easy, since the road going the other direction was backed up too, so I could not make a U turn.

Of course I did not turn around and go home, since now it had became a matter of principal.

At some point I made it to a street that I thought I could get to my friends from. I called her and had her work me through the neighborhood to her place. At one point she told me to make a right on a road that I thought was going the wrong way. She told me now that I was heading uphill I should look for some street, I can’t think of now. I told her I was headed downhill and she said “No, you I should not be”. She had gotten confused to which way I was traveling , because this street was a big loop and she normally comes in to that street another way. After I got turned back around things where just fine.

I then picked up my friend at her place and the last part of the trip to wine class was like ten miles and took all of 18 minutes to get there. Even the Key bridge (named after Francis Scott Key the same guy that wrote the “Star-Spangled Banner”) had no traffic on it, which is really odd, since that is one of the places that I spend most of my time getting to class normally.

When we finally got to class about an hour after it started the other 15 or 20 people started to cheer that we had finally made it. By being this late we had to catch up on like three wines that they had already tried. Not that hard to do, since I could use a drink after spending almost two hours in my car.

On an unrelated note while at class my second friend mentioned that the wine blog, I started for our wine group had gotten a bit of spam comments under one of the blog posts that with the title “Two Blondes, a Brunette and Five Reds – Big Bodacious Blends Part 1“. I have him set up be one of the authors to the blog so I don’t have to do all the work. He said he had deleted about 70 or 80 spam comments. I said I would look into it when I got home.

When I got home we had like 40 or so more comments. I had forgotten to turn Akismet on this blog for some reason, which would have made this a bit easier. So this meant I had to manually delete all the comments from the posts. Just what I wanted to do. I tried to activate Akismet and it was looking for an activation key, which I could not find the e-mail with it in it. I figured it would stop soon anyway and I was tried and needed to sleep. When I woke up early after like six hours of sleep I noticed the spamming had not stopped. I had to delete another 180 comments. What a pain in the rear.

At this point I found my Akismet activation key and got it going, but the spam continued coming. I noticed that it was just a bunch of comments that dealt with casino’s, gambling, slot machines, lounges, etc. and all coming from one I.P. address – 195.225.178.29. It is from a company called “RIPE Network Coordination Centre” in Amsterdam, NL. It finally stopped after like a day and a half. At this point Akismet had stopped about 100 or more comments by Thursday afternoon. I still do not get why comment spammers do this.

The fun part of the week was when about five other single friends (four women, my buddy, and myself) of mine got together on Valentine’s Day at my friends house to have nice relaxing evening. The night consisted of a bunch of appetizers the rest of us brought, that included champagne (really sparkling wine from France), shrimp with cocktail sauce, shrimp cooked in basil pesto sauce, a bread bowl with different types of flat breads, crackers with pate, olive spread, and a cheese spread.

Once all that was done we got to the dinner part, which was just fabulous. We started the meal with a roasted pumpkin soups shooter with one shrimp. Next we got to the dinner, which was filet mignon seared and placed in a beef stock, shallot, and course ground mustard sauce. With all this we had broccoli rabe and roasted fingerling potatoes. During dinner we drank three different years of the same wine the same producer from Argentina.

The following is the list of wines we had during the evenings events in the order that we had drank them.

  • NV – Kirkland Rose Champagne
  • 2000 – Concha y Tora Don Melchor Cabernet Puente Alto – Chile
  • 2001 – Concha y Tora Don Melchor Cabernet Puente Alto – Chile
  • 1999 – Chateau Lalande Saint-Julien
  • 2004 – Concha y Tora Don Melchor Cabernet Puente Alto – Chile

If all this was not enough my buddy was reading reviews about the wines from the internet. He mentioned that the second wine we had was similar to French wines from the Saint Julian region. One of the women that was there said something to the effect of I have never had one of those. So what did my buddy do, he went to where he stores his wines and brought out a 1999 of one of them. Great wine drinking just wonderfully now.

We finished the the night off with a flourless chocolate tart with home made fresh whipped cream and a dusting of coco power. the final thing to top off the evening was my friend had made each of the women a box of home made chocolate truffles. He had asked me to get a single rose for each one , which I told him I had thought of doing. From what I heard from all the women these two things topped off and already perfect night.

Now that the fun is done it’s back to work projects. I moved my second project’s the code into PROD on Friday without any error checking, since it is only used by one maybe two people. I figured that they can be careful for a few days while I get that done. The only reason I’m doing it this way is they really need to get to entering information into the system and they know they should enter information for every field and there is field formatting examples as part of the LABEL text. Now I can get going on two other projects and at least move the new and improved code for now. There is still going to be a second phase to add new fields, reports, and functions in the near future (after SXSW) anyway.

Last night (Friday) I went back and checked to see if the spamming had stopped and of course it had started again. Now they are trying to post to another one our spots that has the title “Two Blondes, a Brunette, and Five Big Bodacious Reds Redux“. We are now up to almost 700 spam comments from them stopped by Akismet, since Wednesday morning, plus the 250 or so we manually deleted. They are spamming the website every four or five minutes from different websites and blog posts, but the same I.P. address.

So in conclusion if you want to get your blog post comment numbers really high without having to write a really lot of ground breaking information and not getting hit by Mixx, Digg, or Slashdot, just have a post titled with the words “Two Blondes and a Brunette” in it. By writing about this subject I could be asking for comment spam on this blog too.

Have any of you had similar stories of getting spammed, just because of a blog post title? If so what did you do to stop it?

Further Explanation of My Accessibility Presentation

Over the next few weeks YEARS, I will post in more detail different sections of my “Is Your Website Accessible” presentation.

Two of the topics I have already covered on my blog are:

  1. Use of UL or OL in HTML Forms
  2. CLiCk Speak Firefox Extension

The new ones I will be going over to an excessive degree (just kidding) are:

  1. The “Fire Vox” Firefox extension is a FREE screen reader
  2. Part of CSS3 “Say-Instead
  3. Are You Using Skip Navigation?
  4. How to Use Access Keys
  5. How to Hide “Required” from Visual Users, but Make it Available for All Others
  6. You Need Color and Contrast
  7. How to Create Web Standard Accessible Tables
  8. How to Improve Your Search Function
  9. Advanced Forms Information
  10. Improve Your “Return to TOP” of Page Link

Please leave a comment if you would like me to explain other items covered in my talk at greater length or even something I did not cover that deals with accessibility.

Long Week in Technology Last Week

It’s been a long week in technology for me this week. I spent about five or six hours on both last Saturday and Sunday working on the website for my accessibility talk for the Refresh DC meet up on Thursday night. This is the prototype for the DC Tech Skills website I’m building so the Washington, DC, technology community can post their skills and then find others that either have the same skills or might need help on projects for skill they need.

Monday was long day at work  with one meeting that ended up needing a few changes and a few other meetings were canceled. The rest of Monday night was spent updating the “Accessibility“ slides I had prepared for “BarCamp DC“ talk back in mid August, 2007.

Tuesday was spent working on getting stuff ready for a move of code to PROD, which never happened. I took a few hours off in the beginning of Tuesday night to go to the “Opportunities & Challenges of the One Laptop Per Child (OLPC) Project” meet up. It was really cool to be able to get to use some of the other features of the OLPC has besides the internet. We had a “Chat” going  and afterwards demonstrated the “Write” and “Memorize” activities to people. Then it was home for about three more hours of presentation work.

Wednesday was filled with meetings and luckily a few were canceled. I’ve had more meeting in the last few days than I normally have in a month. I got approval to move code to PROD for one project. I have like two others that just need user/client review and approval and I’m good to go to PROD.

I got home from work around 5:00 PM and started working on  the final dozen or so slides. Things were going well so I took an hour off to watch the Discovery Channel. I forget what the show was, but it must have been good that i took and hour off to watch it. Once that ended I started back on the presentation. The first thing after the TV show my laptop would not type. There was a problem with the keyboard. I saved things and re-booted.

Around 12:15 AM my keyboard  stopped working a second time. I used the mouse to save everything before re-booting the PC.  The only problem was that it never re-booted. At that point I guess I must have said a few four letters words, since I had not uploaded a copy of my presentation to the server or made a backup in over a day.

After walking into the living room and then the bedroom to try and figure out what I might have to do next. I remembered my friend from Rochester, NY, saying that COMPAQ laptops sometimes won’t re-boot if you have them plugged in all the time and don’t let the battery drain every so often.

So the first thing I did was take the battery out and just used the power cord and that did not work. Next was put the battery back in and unplug the PC and that worked. First thing after twittering about the problem now at like 1:45 AM I put a copy of everything on the server, and two different thumb drives. By 1:00 AM, I was back and finishing the presentation.

I ended up finishing it around 2:15 AM and spent the next bit of time re-copying the updated information to the server, thumb drives, and into another folder on my machine. It was then 2:30 AM and I tried to get to sleep but was to wound up. Finally went to sleep after 3:00 AM. The latest night in five days. All the other nights it had been between 1:00 and 2:00 AM.  I’m getting to old to stay up five night that late.

Thursday morning it started sinking in that close to 100 people were now going to show up to listen to me talk about accessibility. It was just a bit surreal, since when I was at SXSW 2007, I went to most of the accessibility talks and only 50 or 60 people where there to listen to the likes of Derek Featherstone, Ian Lloyd, Patrick Lauke, Glenda Simms (Glenda the Good Witch),  and many others.

These people are proven accessibility experts. I felt like just some guy from Washington, DC consulting for the Army that is really passionate about accessibility.

I had sent the link to two friends to look over early in the morning. I got some feedback from one that I should run the presentation through a spell checker. I said it’s hard when it is done using “S5“, which is HTML based. A guy from the office said paste it into word and run it through, while overriding the code parts. I did this over my lunch. My friend read the whole thing over during his early lunch and liked most of it.  He thought the topic might be to long to get done in the hour I had along with a few other suggestions to improve it some. While on my lunch I made most of his changes along with using a bit of his wording, since it made more sense than what I had first written.

One of the people from work noticed that my accessibility talk was the most popular event on Upcoming for the DC area that day. Once I looked it up I got rid of the DC part and looked and it was the third most popular event  for that day anywhere in the world. The first place event was a  new Flickr feature meet up in San Francisco and then a “MacWorld” meet up in San Francisco. Our event was even about 25 people larger than the London “Pub Standards” meet up. This was just unthinkable to me. It put me in a bit of a panic most of the morning and early afternoon.

After the lunch of updating  my presentation I was much better and the panic slowly went away. The rest of the afternoon flew by because I had to finish some work and move other things to PROD server.

I headed home around 4:30 PM to pickup my computers and get to the Refresh DC meet up early to make sure everything was ready and working correctly. By this time it seemed like everything was okay and I was relaxed on the Metro trip there.

I guess I finally realized I had been thinking about this presentation for the last few months and what I wanted to present. So when it finally came to doing the presentation all the stress, lack of sleep, and everything just went away.

I thought the presentation just flowed out of me. Part way through the presentation I asked the audience if I was going to fast and if they were understanding it. They said no my pace was fine and that yes they understood my talk. I thought I was talking like a million miles a minute. At another point I asked how long it had been and they said like twenty minutes. I was not sure if that meant I had talked for that long or that was how much time I had left.

I got to questions around 8:14 PM (I looked at the computer clock). I guess I had kept the presentation to close to an hour, since we waited a little bit because of the poor weather (snow with rain at rush hour). During the question time I took two photos of the audience of about 50 or 60 people, while someone was answering an audience members question that I had no experience or answer for.

After the talk and then at Cafe Asia everyone I talked to really like the presentation and had only good things to say to me about it and this was other people than my friends.

Now for the general overview of my talk, for those that might have missed it.

  1. Explained a few personal stories of why I’m so passionate about accessibility. One being seeing all the soldiers that come to Pentagon from Walter Reed Medical Center. Meeting Pat Pound at the Knowbility booth in Austin, TX at SXSW 2007. Also having Charles L. Chen show me his great free software, which are two Firefox extensions. One being a page reader called “CLiCk Speak“and the other being “Fire Vox“, which is a paired down screen reader.
  2. The next section was on using “Skip Nav” and “Access Keys” and how useful they are to people that need them.
  3. After that I then talked a bit about the “Color and Contrast” of website and that Text plays an important part of usability for everyone that is sighted.
  4. It was then on to how to build proper data tables by having a “Summary” element to explain what the table contain, along with a “Caption” of the table instead of having header in front of it. The final piece about tables was that you need table headers and then information on you cells to identify what pieces go together.
  5. We got into the longest section of the talk which was about “Forms”. I explained that you need “Fieldsets” and “Legends” to group similar content together and say what it was. The next idea was to put “Labels” and “Input Controls” in either “UL” or “OL”, so screen readers will tell you how many items are there and people will know how many fields they need to fill in. I also explained all the other “Input Controls” in a form and their attributes.
  6. I explained how the “Search” box needs to have the word “SEARCH” in front of it so you can tell what it is, along with using the word “Required” on fields. This is done using the same technique that you used for “Skip Nav”.
  7. The last thing I talked about before questions putting error messages in the label, such as “User name can not contain spaces”.

A lot of the slides have examples of code or links to other articles or my examples of items in use.

The busy technology week did not end with my “Accessibility” talk, no I attended the “DC Adaptive Technology“ talk at the MLK library Saturday afternoon. Because of the issues with Metro maintenance I was not able to stay for the whole talk. The part I did see was about using “Dragon Naturally Speaking“ some scripting code to allow people with visual issues to use Microsoft Word and other products much easier. It was cool watching the guy giving the presentation talk into his microphone and then seeing the words on the screen. By using certain commands he could start, stop, or edit the files that he was in. He could even get software to open and close.

This has been a long week in technology for me and it probably will not be the last one like it. I have also been working on a few different accessibility blog posts to be posted in the next week or so.

Please tell me of similar weeks like this you have had or if you enjoyed my presentation.