How to Improve Your Search Usability

Doing searches on websites is a pain when you are using assistive technology. There are ways to improve how you get to the results.

Why not add an HREF anchor like #maincontent, which we used for the “Skip Navigation” article to your “Search Results URL” so those using screen readers, other assistive technologies, keyboards only, or other non desktop web browsers to skip right to the results section of the page skipping all the header, primary navigation links, and secondary navigation, etc.

You also need to make sure you have a LABEL connected to your search box for screen reader and other assistive technology users to know what they are looking at. Below is some sample code you can use as a starting point, along with some CSS to hide the search LABEL visually off screen if your design calls for that kind of things.

Search Form Code

<div class=”SEARCH“>
<form name=”Skills_Search” action=”searchResults.html#MAINCONTENT“>
<label for=”search2“>Search</label>
<input type=”text” name=”search2″ id=”search2” />
<input type=”submit” value=”Search” />
</form>
</div>

Results of Search Code



To hide the word “Search“ just add to the hide class used for the skip navigation blog post this can be done easily by adding “.search label” to the CSS.

Here’s a live example of the search box and search results example page.

Hope this little change to your website was helpful to you and it will make accessing the internet for those using assistive technologies better.

If you have any questions or ways to improve this, please leave a comment or get in touch with me.

Anton Peck Made Me Write This!

Anton Peck did not really make me write this article, it was after reading his blog post the yesterday about “Beating Writer’s Block that got me thinking about my lack of writing blog posts too. Anton has been having trouble being able to write blog posts as of late. In his post he goes on to say how he was working to get around the problem. I like his analogy of blog post writing to taking a road trip. Sometimes when going on a road trip at first your not completely sure where your going, but all you know is you need to be going somewhere. Which means sometimes when writing you just have to start writing something and the idea or an article will come to you once you have begun.

My Problem

Part of my problem is not the same, as Anton’s with not knowing what to write. I seem to have the opposite problem in that I have some great blog posts and ideas for them, I just don’t have the drive or ambition to do them. I have about six to eight blog posts started, that I began last year. I usually create the article by coming up with subject (title) and then put a bunch of summary information about it into WordPress, that I go back to later create the post with.

My problem with getting my blog posts done is that normally they are more technical in nature and usually end up needing some kind of technical code example. These examples take time and I’m also trying to make sure the articles are written correctly, since I’m not an English major as I have always said, I’m a developer/coder.

The other thing that slows me down is once I get writing an post it tends to be long and verbose. I never seem to write short blog post like my friend Justin Thorp. He usually writes posts that are three to five paragraphs that get right to the point, with a few sentences in each one (his last few seem to be bit longer than normal). His are still much shorter than mine.

Mine on the other hand, end up having a dozen or so long paragraphs with really long sentences. I might have to work on being more succinct with my writing for the readers sake and my own.

I believe this is part of the same reason I have been fiddling with a few web application ideas/prototypes off and on for like almost two years. I tend to get them started and then find a better way to do them, by making them more accessible or more efficient from new techniques I have learned. I have even started to re-write one so I can start to learn PHP, being that I have been a classic ASP developer that uses XHTML, CSS, and bit of JavaScript for the first attempt at them.

My Burnout

Another thing that might be putting a damper on my blog post writing and enthusiasm for doing other web work after hours was also brought to my attention again from the A List Aparts article about “Burnout” by Scott Boms. Over the course of my technology career, I think I have been burned out or at least darn close, probably a good half dozen times. This is not something to be proud of at all. It first started while I was in college trying to finish large school projects while working 20 to 40 hours a week.

It also happened a few other times over the last 20+ years while working on projects for work and being responsible for making sure the production mainframe nightly jobs worked and ran smoothly. Because of this I now believe I try and spend more time away from the computer after work, besides checking e-mail and twitter, so I have a better life balance.

Life Balance

To have more life balance, I seem to spend more time watching mindless TV, keeping up with friends on Twitter, and just a lot of time reading others blog posts, instead of spending my time DOING real work and getting things done. As of late I have been doing a lot of reading and thinking about ways to help myself get over these issues so I can get back to building and creating more blog posts and finishing my web applications.

The sooner I can do this the more likely I will be able to help others with them and maybe if I’m lucky make some money to at least pay for themselves (hosting costs). And if they really get going I might be able to do one or all of them full time. My other big issue is which web application should I build first or at all, instead of trying to work on all of them and not making any real progress.

Conclusion

If you have any suggestions on ways to help me or others with any of these issues I would be glad to hear about them. Here’s hoping others will help you write that much needed blog post or build the next big thing.

Thanks, Anton Peck for making me write this blog post!

How to Hide “Required” from Visual Users, but Make it Available for All Others

How do most people usually designate that a field is “Required” in a web FORM? I would think that it is with an asterisk (*) after the actual INPUT field and it is sometimes made “bold” and “RED”. There are other ways to do this that are simple, use web standards, good design principles, and are 508 compliant.

When creating a FORM you should not make all fields required. By doing that nothing stands out to the person filling in your very important FORM. If most fields are required you should state at the top of the FORM or in the directions the fields that are NOT required.

Instead of just placing an asterisks after either the LABEL or the INPUT field in a FORM for a required field as most people do. You can actually place the word “Required” within the LABEL. Of course your using LABELs for your FORMS, along with FIELDSETs and LEGENDs.

Here is how to accomplish this for a web FORM and it can be easily accomplished by using a little CSS to hide the text that a field is “Required” to be filled in. The way to do this, that I use is to make it part your input fields LABEL. Here is an example of a few lines of code on how the code might look.

<label for=“username”><em>Required<em>User Name</label>

To hide the word“Required” you will be able to use the same CSS used for hiding “SKIP NAVIGATION” by adding a new class or stating that LABELs with an “EM“ in them will be displayed.hidden off the page.

Reminder please do not use “DISPLAY: NONE” in your CSS, since screen readers will not see it. Below is the CSS to visually hide the word “Required” from browsers.

.skip a, .skip a:hover, .skip a:visited, label em {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

As you can see the CSS positions the link absolutely with a position of “LEFT” minus 10,000 pixels and a “TOP” position of auto. This will allow screen readers, Blackberries, Treos, etc. to see it but not browsers. That is as long as their CSS in turned on.

You can also place extra notes or instructions for a field inside the INPUT field with lighter text that is that will not go away once you start typing in the field. This can be done by using more CSS. Below is the XHTML code to accomplish this.

<label for=“username”><em>Required<em>User Name<strong>must not contain spaces<strong></label>

<input type=“text” name=“username” id=“username” size=“25” maxlength=“50” value=“”/>

The CSS to do this is fairly simple and follows below.

label strong {
color: #aaa;
font-size: .85em;
font-style: normal;
position: absolute;
top: 0;
right: -275px;}

Here is what the CSS is doing for the extra notes and instructions. It is first taking any STRONG elements within the LABEL and making it light gray color, the FONT-SIZE smaller and normal weight. After that it is absolutely positioned at the top left of the INPUT FORM field, as long as the LABEL is left or right justified to it and finally placing the information negative 275 pixels from the right of the beginning of the INPUT field.

Don’t forget to listen to your FORMs by using the Firefox extension Fire Vox. Here is an example how placing extra notes or instructions would look in a FORM, along with some “Required” field examples.

I hope this post is useful and further explains how to hide visual the word “Required” from my Accessibility presentation “Is your Website Accessible?”, please look for the most current presentation closer to the top of the list.

Key Points Learned at PodCampDC 2008

This blog post about PodCampDC (April 20, 2008) is way over do. I noticed it in my work in progress post list. I had started the post a long time ago and decided I would still post the few items I had listed. That I after making them into full thought and not just a short scribble of a few words.

Below are the main points I took away from the day.

When creating a podcast you should have consistent branding and highlight the program or product not the people in podcast. That way if you ever have to get new people for the show it will be less likely to die.

Justin Thorp said “You should make stuff sharable across communities”. Meaning that if you have content you need to let others be able to get at it no matter the way or where they are.

It is very important to make sure to use the same name across communities (MySpace, Facebook, Twitter, blog, Mixx, Digg, etc.) so people can easily find you. When new applications/websites start up make sure to get your use name and any other user names that you are know for so other can not grab them and then start bad mouthing you or your products.

I noticed during Aaron Brazell (Technosailor.com) and Geoff Livingston’s live podcast District of Corruption some people where getting hung up on names of websites and the like. Sometimes a website may start out as one thing and then morphed into what it is today. The real important piece is the content not the name.

There were a few things that I thought could have been better and they were? Not needing two locations, meaning that I saw no point in having to get to the Spectrum Theatre an hour early just to go over to the final location after about ten minutes of announcements. The other issue had to do with having multiple five plus rooms on three different floors and having to take the stairs to get to them.

Hope these points are useful even though they are like two months over do.

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.