Category Archives: Helpful Tips

Your Website Needs Color and Contrast

Posted on by

NOTE – I found this old blog post in my drafts, so I did some time editing it, link checking, etc., and hit publish of an old draft.

To Read Your Content

To allow people to read your content, you need to make sure to have the color contrast as high as possible. So people can read what you have written. It shouldn’t be so high that it bothers people with low vision. Were too much contrast makes it difficult for them to read.

Putting light text on pastel or light backgrounds is not good for some people. You also have to think about the different types of color deficiencies (colorblindness). Meaning you don’t want to have red text on a green background, etc.

A Useful Tool

Below are a few different tools I use to check color contrast. The color contrast tool I use the most is Jonathan Snook’s web-based “Colour Contrast Tool”.  It’s the tool I use to check color contrast for the development team at work or if I have chosen will work.

W3C Recommendation for Color Contrast

Here’s the W3C recommended values from the WCAG 2.0 – 1.4.3 Contrast (Minimum) Level AA.

Following these guidelines ensures that foreground and background color combinations provide enough contrast. This pertains to those with color deficiencies. To pass your text and background need to have a color contrast ratio of at least 4.5:1 or higher to pass.

How High Should Your Color Contrast Be

You also have to think about how the web page or application is going to be used. Now, if it a heat index application that is likely going to be used outdoors. You have to consider most high heat index days will probably be in bright sunlight. So blaring sunny will not work well with a contrast ratio that passes b a little bit.

Color Deficiency or Colorblindness

Another tool is the “Color Oracle.” It’s used to simulate different types of colorblindness. They have Windows, Mac, and Linux versions created by Bernhard Jenny, Oregon State University (programming), Nathaniel Vaughn Kelso, and Stamen Design, San Francisco (ideas, testing, and icon).  The application places a color overlay for your entire main screen. You can set up different PF or function keys to turn on and off different types of colorblindness masks easily.

Doing this allows you to check against the three main types of color blindness. About 10% of the population is colorblind. Most of them are males. The three main types of color blindness are:

  • Deuteranopia or deuteranomaly (a form of red/green color deficit) – 7.5% of all males.
  • Protanopia or protanomaly (another form of red/green color deficit) – 2.5% of all males.
  • Tritanopia (a blue/yellow deficit- very rare) – Less than 0.3% of women and men.

More Tools

Next is the full list of tools I would you for building websites. Your choice will depend on how you work and what’s best for you.

I hope these tools are helpful to you in checking for color contrast issues.

Additional Reading

For a more detailed look at color contrast, you need to read Todd Libby’s color contrast article called “Contrasting Accessibility with Color Contrast“. You should also follow him on Twitter at @ToddLibby.

Any Recommendations

If you have any other tools that you use and think I should checkout, please leave a comment, and I will give them a look.

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.

Anton Peck Made Me Write This!

Posted on by

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

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.

Key Points Learned at PodCampDC 2008

Posted on by

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.