Category Archives: Helping Others

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.

Cleaning Up My Life

Posted on by

Don’t worry, nothing like that, I am just cleaning up the apartment (first floor of two family home I rent) and my part of the basement. Kind of was forced into doing this, since the people upstairs noticed bugs. I had seen some over the course of the last year or two when the old tenant and his new wife lived here and thought nothing of it.

The new tenant contacted the landlord about them, which they then had an exterminator come check on it. After looking around I guess they found that we had some cockroaches, while I was at Access U conference. I had lived here almost seven years and noticed the bugs recently and never paid attention to what I was squishing. So the landlord informed me that the exterminator would not spray/treat the house until we got rid of all our (neighbors and myself) cardboard boxes and old papers, since what they eat is the glue and cardboard.

Landlord’s Freaking (just a little bit)

The landlord was a bit freaked out because there were bugs in their rental property along with the fact that the couple upstairs is due to have a baby in like four weeks or so. They want it done yesterday so they can spray or whatever they are gong to do before the baby is in the house.

So for the last two weeks after work and on weekends when I have not had other obligations I have been first going through all the crap, as my mother would call it in my apartment. This has been helpful in the form of having me go through boxes of stuff that I have not looked at in years and tossing, saving, or as much as possible donating things to charity. I have recycled as much paper and others items that I can. I really don’t want fill up a landfill with more junk. No, I’m not a tree hugger, not that there is anything wrong with that, I just want to recycle/reuse as much as I can.

Donations to the Poor

I have donated a ton of clothes (work, casual, jeans, dress shirts, etc.), shoes, ties, and a lot more to Martha’s Table, so they can help out others less fortunate than myself. Even made two trips so far and I might have one more before I’m all done. I ended up getting rid about half of the clothes I owned, since I have not worn most of them in years for whatever reason.

Was at a fairly good point with the upstairs, so spent a few hours Saturday afternoon/evening going through boxes in the basement that contain stuff in them that have not moved or been looked, since I got here almost 7 years ago. I found at least one box so far that contained 5+ year old magazines in it. I had a lot of old magazines upstairs too. Pointer to others once you have read them unless it’s important to you because you, family, or a friend are in it, recycle them or just recycle them once your done reading.

I used to shoot a bunch of model photography back in the day as they say and had boxes and boxes of photos. I ended up transferring them from their cardboard boxes into new plastic containers with lids. Glad Target had 18 gallon plastic bins with lids on sale last week for $6, so I could buy 20 of them. Did not get all the miscellaneous boxes sorted yet since I have to go through to see if there are any important papers in them, like tax form, old bills with bank, or SSN information in them.

Spent Time with Friends

Spent about five hours Sunday(6/14) in the basement with a good friend of mine and her sister helping me consolidate, move, re-box wines. If your wondering why it took so long, it was because I have close to 600 bottles of wine just in my basement. I’m a wine collector, which made one of the landlords request to get rid of all boxes extremely difficult. How am I going to store 600 bottles of wine with no cardboard boxes, without spending thousands of dollars on wine racks, which won’t work downstairs, since floor slopes into center of room? Luckily I have been gathering and saving wooden wine boxes over the last few years, when I could get them.

I finally took my two 47 bottle wine frigs out of their boxes and started them up. Just in case you were wondering the number of bottles they say will fit is incorrect if you are trying to put Burgundy or long odd shaped bottles in them. Now they are loaded with a total of about 60+ bottles, which removes over five boxes from the basement.

Still need to go downstairs the next few nights to finish sorting and dumping the 20 or so boxes I have not looked at in the basement. The slowest part has been going through the old bills and removing the check receipt and bill to be shredded and placing them in one container and everything else  in a recyclable one. Anyone have suggestions to getting rid of old software. I recycled the boxes, but am trying to figure out what to do with all the CD’s and a lot of 2.5 inch diskettes.

A few friends and co-workers have asked if this has helped me feel lighter, less clutter free, and I have told them I will tell them once all of it is done. Right now it is feeling like a second job that needs to be worked on every night after work. I can’t imagine what is like for someone that is a hoarder to have to do a task like this.

Conclusion

If you have  suggestions for doing any of this better or stories similar to mine I would like to here about them.

Hopefully if nothing else you all start, recycling, donating extra stuff, and keep up with stuff on a regular basis so your not forced into having to “clean up your life” all at one time.

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.