Category Archives: Search

How to Improve Your Search Usability

Posted on by

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.

Why I’m Building Hold An Event

Posted on by

I created Hold An Event because all the other event registration web applications are not accessible to those using assistive technologies, like screen readers (JAWS, NVDA, Window Eyes, etc.), along with voice recognition software (Dragon Naturally Speaking). They are also difficult to use even on smartphones let alone an lesser phones. I found this out while running my first Accessibility Camp DC back in October of 2009 and then with our follow-up monthly event, Accessibility DC. People would show up without registering because they deemed the service I had chosen not to be accessible, even though these people would be considered by most to be power assistive technology users.

After the first Accessibility Camp DC and a few monthly meetings, I started looking into event registration systems and everything I found was inaccessible in one form or other. I mostly looked at all the larger ones is all. So over the last two and a half plus years, when I have had five minutes here or a half hour there, at coffee shops, on the train, or wherever, I put notes into my iPhone about creating a web-based event registration application. At first, I used the iPhone’s built-in notes application, until a few people suggested I use Simple Note. This was because it had an iPhone application, along with a web application. By gathering all the different pieces of information you would need to create and run events over time, I had the time to really think about the roles/personas needed for an event.

The type of people I came up with could be people putting on the event, the attendees, paid attendees if that applies, sponsors, speakers, and even event staff. These roles work if you are holding a simple birthday party, the monthly book club, a tech event, or even a large conference. So we are talking a great amount of information, and I really had to think this through.

At times, I was like this is way too much work for just one person or I had other things to do and would do nothing about it for weeks or even months. No matter how hard I tried, the problem never seemed to go away and kept coming back to me. So after reading a lot of books, articles, etc. about start-ups, web applications, usability, and the like, as most would say I just needed to start and see where it would go.

When I Started

So over the summer of 2011, I finally started building the prototype to make sure I had the correct process, flow, and usability of the web application down before really starting the difficult work of making this a true working application. I even started with the mind-set of Mobile First (great book), which some are great ideas from Luke W. and others. My guess was that if I started coding the web application using web standards and accessibility in mind from the start, and if a person could do everything they needed to on their phone, then it should work wonderfully in a browser or on a tablet.

I started out simple and built a few of the needed input forms, which got me playing with responsive design and media queries. I made a concerted effort to get those few main screens right before building out a ton of pages. Once I got most of that complete, I moved on to the next set of forms.

My goal was to have the ability to make Hold An Event’s web application to seem like it was processing real information such as a search for events, to registering for an event, etc. This was done by passing parameters in the URL to tell each page what static content to place on the page. This idea seems to be working fairly well, since when showing friends lately what Hold An Event looked and acted like, they asked what kind of database, etc. I’m using. I would then explained what I had done to make it a look like a fully-functional application.

By the middle of October 2001, I had a bunch of pages that worked well enough to start showing people at that month’s Accessibility DC event and then more people at my annual Accessibility Camp DC event. Once those events were over, I didn’t do any more coding until New Year’s Eve 2011, sitting at my parents kitchen table coding from like 11 PM to 1:30 AM, because everyone else in the house more or less had gone to bed by 10:30 PM. Since then, I have been doing something to improve the Hold An Event web application just about every night and on the weekends too. Sometimes it was a little tweak here or there; other times it’s been to add a new page.

At one point, I added a few different smaller non geek/tech events to be able to show people different types of events types and how the process worked. I also had to add in some code to display the different navigation paths people used, depending on what type of user they were. For example, is the person running the event or attending the event, which are the two types I’m worrying about now.

How You Can Help

The next step is to let people play with Hold An Event themselves instead of me demoing it on my iPhone, which means making it look and act better on a tablet or in a computer browser. Currently it’s not the prettiest thing in a web browser, but it will do as a prototype.

Other big tickets items I’m going to have to think about are the security of peoples’ information like name and e-mail address to start, along with taking money, once I get to that point, which is far off in the future. I’m only working on this a few hours some nights after work and then 6 hours max on the weekends, for a total of 10 to 15 hours a week.

So here’s to making more progress over the next few months.

Where to find the Hold An Event Prototype

For those wanting to look at the current prototype, start by using the “tab” key on the Hold An Event’s home page, doing so will let you find the link to the demo/prototype web application. Remember this “prototype will not save” anything you place in it at all. So please don’t try and create an event to invite people to it and think it will work because it won’t. Once you’re there, use the search box to find events in “DC”, which will currently give you a list of nine events to view.

If you want to sign in to see the process of creating and viewing current events you’re running, your past events, or ones you’re attending, all you need to do is make sure you place at least one character in the user name and password fields. It doesn’t matter what they are, just as long as there is something there.

Feedback Welcome

P.S. Have fun and please send me feedback about what needs to be done, improved, etc. I’m a big guy and can take the the bad with the good. I’m mostly looking for ways to improve things.

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

Posted on by

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.

Further Explanation of My Accessibility Presentation

Posted on by

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.

Finally My Notes from An Event Apart Chicago 2007

Posted on by

Finally got around to finishing up my post about the actual two days at the An Event Apart conference in Chicago on August 27 – 28, 2007. I had  a great time both at the conference and at the different gatherings each evening. I learned as much if not more at the evening events as I did during the day at the conference.

Please download all my notes, below is just an overview of some of the things I learned. The following is a summary of what happened by day ad speaker.

DAY – 1

The first speaker of the conference was Eric Meyer and his topic of discussion was “Secrets of a CSS Jedi“. He showed that you could use tables and CSS to create pages that end up displaying graphs. I had seen his earlier article about this and had worked on creating forms to allow you to enter the amounts and then put out the graphs. It is now time to work on this again, since Eric has changed the graphs from being pixel based to now be EMs based.

The next presenter was Jeffrey Zeldman and he talk3d about “Writing the User Interface“. His three big points were:

  1. Content is King.
  2. Design helps people read less.
  3. When people read less every word counts.

Next to speak was Jason Santa Maria on the topic of “Designing Your Way Out of a Paper Bag“. His main topics were:

  1. Branding.
  2. Layout.
  3. Hierarchy and focal Point.

Jason also recommended three different books during his talk.

  1. “Thinking with Type” Ellen Lupton
  2. “Grid Systems (Raster Systeme)”
  3. “Making and Breaking Grids“ – Timothy Samara

After Jason finished talking we had like an hour and a half  lunch break. The food was great and I ate way to much.

This made the first afternoon talk by Lou Rosenfeld (“Search Analytics for Fun and Profit“) a bit uncomfortable because I ate a great deal. Lou talked a lot about making sure you review your website search information to see what people are looking for and where they go once they have searched. You might be able to make a few changes to your website that will greatly improve peoples ability to find certain information. Here are a list of his points:

Querying you Queries and Getting Started

  1. Most frequent unique queries.
  2. Frequent queries retrieving quality results.
  3. Click through rates.
  4. Most frequently clicked results/query.
  5. Frequent queries with zero results.
  6. What are referrer pages for frequent queries.

You should look for what type of meta data people are looking for in their searches.

By typing “site:jfciii.com” into Google’s search box will give you search results from the website you put after the”site:“.

Next, Liz Danzico talked about “The Seven Lies of Information Architecture”

  1. Navigation should be consistent between pages on a website give or take a little bit.
  2. Allow users may need to get to any part of the website at any given time or place.
  3. User experience must be seamless.
  4. Shorter is better.

Dan Cederholm – “Interface Design Juggling”

He suggests starting with colors and use two colors or less. Meaning stay in the same color range just use different tones and hues. He sometimes just goes to Photoshop and starts dumping paint using the paint can.

Two add texture use noise filter.

Make sure you read “Web Design is 95% Typography“.

Get on mailing lists for type foundries.

  1. Hoefler & Frere-Jones
  2. myfonts.com
  3. veer.com

Dan was the final speaker for day 1.

DAY – 2

Jermey Keith – Adactio.com and ClearLeft.com

Presentation slides

Be Pure with how you write your code and do your work.

You need

  1. content
  2. structure
  3. presentation
  4. behavior
  5. HTML
  6. CSS

Be Vigilant and try not to put in extra stuff to your code or content.

To build an AJAX website first build a plain website and once working correctly then add in the AJAX.

Show where things were changed or updated when using AJAX. Look at 37 signals “Yellow Fade“.

Test early and test often.

Luke Wroblewski – “Best Practices for Form Design” – Yahoo

Why Forms Matter?

  1. They make money.
  2. Give access to communities.

Label Alignment depends on what you are doing.

  1. Top alignment is better for familiar data.
  2. Right alignment is better for more difficult data. It makes you think before answering the questions.
  3. Left alignment is better for unfamilar information.

Matteo Pemzo has a great article on “Eye Tracking Data“.

Group data on forms of like kinds together using fieldsets.

Take data user gives you and format it yourself. Only give error if completly incorrect.

Derek Featherstone – “Accessibility Lost in Translation” – Box of Chocolates and FutureAhead

Presentation slides

Create an accessible user experience.

Remember to use keyboard and mouse interaction.

Require fewer page refreshes.

Screen readers need “alt text”if there is none, it reads source attribute which can be very weird.

Size forms and everything in EMs to make it scale for even borders, padding, etc. this makes it better and does not break pages easily.

Submit button should be last in code order.

Eric Meyer – “The State of CSS in an IE7 World”

He talked about IE7 adding the followig items.

  • min-width, max-width, min-height, and max-height
  • Attribute selections
  • Child selector
  • :first child
  • Alpha channelin PNG images
  • they fixed FIXED Â

and  a whole lot of other things.

Jeffrey Zeldman- “Selling Design”

Jeffrey mentioned that you should have a process. Be calm and methodical.

Remind client each time you see them of what you talked about at the last meeting, phone call, or last week.

Learn to translate what they said into something you and they understand.

Sell design not pixels.

Last but not least was

Jim Coudal – “Dealing With the Both of You” – coudal.com

He talked about

  • You need a cool flash of insperation for your projects or websites.
  • Learn quickly and be curious.
  • Value taste over everything else.
  • Work with others and have adult conversations.

He also showed three movies that he and his cmpany made.

  1. Copy Goes Here
  2. Regrets I Have a Few – Hobbies
  3. Subway – Ad Agency video

Please download all my notes, below is just an overview of some of the things I learned. Hopefully they are helpful to you and anyone else yu pass them on to.