Entries for month: “July 2008”
Applications to help you create more accessible designs
Back in May, I wrote an article on tips for improving your web design. One small piece of that article discussed converting your design to greyscale so that you can get an idea of your color contrast ratio. Though I believe this is important to do, it is a bit time consuming when your in a design grove, and speed is of importance. Sometimes I just want a quick preview to see where I was going or how I was doing thus far in my process.
I remember seeing an online contrast analyzer and decided to look it up to see what it was about. My search turned up quite a few helpful tools that I just had to share with the rest of you. Before I get to the tools, let me take a minute to explain why we would want tools for testing contrast ratios in our designs.
→ Respond NowTags: Accessibility · CSS · Design · Freebies · Software · usability
iPhone Detection Scripts
With iPhones being all the rage these days, I am wondering if mobile versions of your pages might be useful. Viewing a site on an iPhone looks exactly as it does on your desktop. This is all well and good, but sometimes pages can be bloated with images, javascript libraries, and other markup that is not as important to your visitors. I am also a bit upset that the iPhone ignores the css media type of handheld. I wish there were an option to force Safari to render handheld styles as default, but I could not find any option for it. So I set out on a quest to find some alternatives for my iPhone experience.
Coldfusion – I was sure there was a way to get something from the cgi.http_user_agent but not sure if it would just read the agent as webkit. I didn't want to kill Safari desktop users, that would be bad. The Awesome Coldfusion Jedi Ray Camden already had a solution so here it is: (Sorry for the comments around the actual code. Seams that MangoBlog wants to parse the code and run it causing an error. So remove the comments from the cfif statement to make it work. I hope to get a fix for this soon)
<!--- detect iphone --->
<!---
<cfif findNoCase("iphone", cgi.http_user_agent)>
<cflocation url="iphone.html" addToken="false">
</cfif>
--->
Javascript, PHP, and MVC – I ran across a site called iPhone Toolbox that has a ton-o-info on developing for the iphone. (I will be spending some time here for sure.) There is a set of scripts linked up there dealing with how to detect an iPhone users that pretty much covers the rest of the developers. Here is that code
Client-side (javascript):
if (navigator.userAgent.indexOf('iPhone') != -1) {
/* iPhone user */
}
Server-side (example is PHP):
if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
/* iPhone user */
}
For sites that use an MVC coding pattern where the programming logic code is separate from the template, the following example is useful:
if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
$template = 'home/iphone.html';
}
else {
$template = 'home/index.html';
}
If you have any other cool resources, I would love to hear about them. I did run into another site with some code to detect iPhone's and iPod's, but I couldn't make it work, so I have no idea if you have to detect them separately or not. It does speak to the reason why Apple should have an option in the settings pane to make an iPhone or iPod use a handheld stylesheet. But for now at least there is a work around.
→ Respond NowTags: Code · ColdFusion · CSS · General
Accessibility Abuse
Now that I have been spending a fair amount of time behind a screen reader, I have noticed a few things we as developers can do to make our sites better for all visitors. Some of the ideas that I am about to share are not meant to be a guideline but rather a topic for discussion. I hope that I can meet with other people on this soon and get more feedback but I wanted to post at least an intro here on my site for some initial feedback.
What I have noticed recently, with all the talk and hype about accessibility and usability, developers are going a bit overboard with trying to make our sites accessible. I include myself in this category as I first noticed the problem while surfing my own site. Not a good thing for someone that honestly wants to make the web a better place for everyone.
I think sometimes we developers get so caught up in the rules that we don't always stop to consider the use and whether it is appropriate or not. Knowing when to break the rules is what makes a good artist great so why can't the same philosophy apply to web design?
Get to the point
There are html attributes that are available to allow developers to add meaning to particular piece of markup. Take for example the alt attribute. It is meant to provide an alternate text version for an image. Often times what I see happen is that a huge amount of text get's placed into the alt tag and it becomes way to verbose to be useful. Also, not every image requires alt text. Images like spacer gif's or presentational only graphics don't need an alt text. Simply having an empty space in the alt attribute is enough to make a screen reader skip right over it, and it still validates. If the graphic needs a detailed description, use the appropriate longdesc attribute. Don't abuse the alt attribute and keep your text short.
I personally don't use this, but the tabindex is another tag that is often misunderstood. I have seen it discussed on other sites as a good practice, but I am not so sure that it is. I have never needed it on my own sites. The default tab order has always been correct. The problem occurs when you place a tab index on a page below the main content. The tabindex over rides any other tab order that you have on a page. I see this most often on web blogs when the comment form has a tabindex set on the form items. When a user hit's the tab key, they are whisked away to the comments area instead of tabbing through the navigation links or the content of a page. It gets really wonkey when the tab order goes back to the top of a page again. Yikes! My advice: Forget tabindex unless you absolutely must use it.
The last tag that think gets abused is the title attribute. Many of the javascript libraries make use of the title attribute as a hook for something else. Scripts like lightbox that use the title attribute for the description are often abused as entire paragraphs are sometimes placed into the title attribute. Perhaps the developers of these libraries can figure out a way to use the longdesc attribute instead. Another offender for the title attribute is repeating words already used as the link text. The title should tell the user something else about the destination assuming the link text does not already do so.
For the most part I believe developers mean well and want to make their sites more accessible, but sometimes knowing when to break the rules will go along ways towards making a site more accessible for everyone.
→ Respond NowTags: Accessibility · usability
10 Sites to Waste Your Day
As if we don't already live in a environment that is filled with enough distractions, that we need yet more things to waste our time. However sometimes on those rare occasions, a need arises and we need to disconnect - unplug from our daily grind and clear our minds. Maybe you have time to kill and want to goof around for a bit. This is not a luxury I personally get to enjoy all that often. I would like to believe that someday I will have more time to goof around. In the meantime I will continue ro bookmark pages so that when that day does comes, I will have plenty of options. Below are 10 sites that you can waste your time with starting today if you like.
→ Respond NowTags: Freebies · Inspiration · General
Text Selection Color
CSS3 brings some cool new features to the web. Some features are highly discussed like rounded corners, borders, and layout control. I am really looking forward to these items becoming standard in the near future. However, I am happy that my two favorite browsers Firefox and Safari already support many of the CSS3 specs. This gives me the ability to use some lesser known items without killing my design for IE. I enjoy some of the simpler things, like the ability to change the text color and background color when text is selected on the page. IE does not currently support this but thats ok… I don't care that much for IE anyway.
Want to add this effect to your site? It's simple. Add this code to your css stylesheet.
*::-moz-selection { background:#FFFFCC; } /* FOR MOZILLA */
*::selection { background:#FFFFCC; } /* FOR SAFARI */
If you want to know more about this tag check out quirksmode.org for additional info and examples. A word of caution must be noted here, If you must validate for css level 2.1 then you will want to forgo this trick as it's not CSS2 compliant.
→ Respond NowTags: Code · CSS · General
