return to home
Confused about getting a
.com? Answers are here.

Dave's Web Design 
Tutorial & Guide: Tips and Tutorials

Web Design Guide: Tips and Tutorials

Design Chapter 02

Making Your Web Site Available to All (Site Accessibility)

Chapter One covered two key points about accessibility: screen size (resolution) and the free flow concept that you can consider as an alternative to fixed-width design.

This chapter will discuss some common things designers need to think about before taking on a large-scale project (and some great talking points if you have a website design coffee shop ethics debate).

#1 - Things get turned off. This includes Image Loading, JavaScript features, and Flash content. Be well aware of it!

- Image Loading

You might have a great opening image on your web site. You will be impressed with yourself and your friends will be impressed. But some people will never see it. People turn off image loading.

Turning off images is not incredibly common, but you need to be prepared for it. It's actually not something that is hard to be prepared for. Simply set the exact width and height of each image (if you're hand coding, that'd be width= and height=) and set an alt text, so something will show in the spot where the image would normally load (in hand coding that'd be alt=).

Design Basics Dave has a New Course for your iPad!
Download HTML and CSS Web Design Basics Right Now!
Or Search for "Web Design Basics" in AppStore!
site builder banner

If your image is very important to the page's readability, for example, a visual chart you made, consider placing the numeric data in a table next to the chart, just for added accessibility. This is pretty useful if your site is scientific and your data would be useful to other researchers. It's easy to pull data from a table, but nearly impossible to pull data from a visual chart you made!

Example: You have charted the top temperature in all twelve months of 2008. You can make a table next to it with the month and the temperature. Example snippet of three months below:

High Tempature Chart (Three Months)
MonthHigh Temp (F)

Having this chart with a data table makes the data easier to access.

- JavaScript Loading

JavaScript is a really great technology: It lets you do all sorts of things that were not possible before with plain HTML. Easy interaction. Awesome drop down menus. In-page calculators. All sorts of great stuff.

But people turn it off. Many people. Heck, some people don't even have it enabled. (Think cell phones. Some have it enabled, many, many do not even have turning it on as an option!)

Some people with a full-fledged web browser disable it for safety reasons.

Don't just assume it's there. Assume the features you have are worth having it there, but make sure your site can be accessed when someone has it turned off.

One of the most common web site features that uses JavaScript is the dropdown "mouseover" menu system. I honestly recommend people use this feature, so long as they enable the base of the menu to work without JavaScript enabled.

An example will make this a lot easier to take in.

Let's head back to our "Seasons" example. Okay, four seasons, our menu would look like this:

Four Seasons of the Year Menu Example

But, with JavaScript disabled, the seasons will never appear! How do you make the season available? Place a link to a web page where it reads "Seasons." Then on that "Seasons" page, use standard HTML links to each season. Pretty easy!

This is just one basic technique. Look at all the parts of your site that use JavaScript, and think to yourself, "Will someone with no JavaScript be able to get around my site and use its features?" If the answer is no, you need to think about making it more accessible.

- Flash

Flash is awesome. I love Flash. Most people love Flash. It lets you do all sorts of cool things. But not everyone loves Flash. Not everyone can access Flash. There was a rule of thumb when Flash sites first came out: If you have a Flash site, you need to have a text version that has the same information. People hated this, and people still hated it, because they felt it "doubled" the work they had to do.

Don't assume someone has Flash enabled, or will want to use your Flash site. Some Flash sites are huge (take a lot of bandwidth) and come to a crawl on a shared Internet connection, public wi-fi hot spot, or a broadband wireless laptop card used in the field by many professionals. If your website loads too slow, people probably won't come back.

Oh, and by the way, please make a mute button if your Flash site has sound. People hate closing a web site because they can't shut off the sound!

#2 - Some People Have Accessibility Needs Beyond Technology

If you already have a web site, and it got a significant number of visitors, it may have already been visited by a deaf or blind person. Color-blind? Probably a certainty. Someone who might have trouble moving a mouse across the screen (or a computer geek who lost their mouse...) Yes, someone with that challenge, too.

Not everyone will have vision, or perfect vision, coming to visit your site.

Not everyone can hear, or has technical capabilities to hear (speakers, J&R headphones, soundcard, etc) who comes to your site.

Not everyone can see perfect color distinction (lots of people are colorblind).

Not everyone will have an easy time moving a mouse across the screen. Some people rely on the keyboard exclusively to get around the web. Do your tab and arrow keys allow you to navigate around?

You need to think about these things. Legally, you might not be required to make a site widely accessible. But you very well may be. Check out this country-by-country list of Web Acessibility Requirements.

For me personally, it's easier to imagine a site without any sound than without any sights. To test for sound, turn your sound down all the way, and visit your site. Does moving around requirement audible instructions?

Want to test site access to the blind? Turn off your monitor after enabling a web screen reader. That's pretty close to what you can imagine a blind person accessing your site as. (You could wear a blindfold so you also couldn't see your keyboard.)

I'm not claiming to be an expert on accessibility, but please start to consider these concerns when you're considering fresh site designs.

#3 - Your site can be changed by the browser, No Questions Asked!

People with visual challenges can easily change the font colors, font sizes, and background colors of your site, automatically. This is a setting in most web browsers. This won't affect how your site looks to regular, standard visitors, but be aware your red text might be yellow, and your black background might be green! It's not your job to predict how an impaired user will view it, just be aware of it!

On the same topic, people with larger screens may increase the font size for better readability on their screen. You might set your font size to be 14 point, but they may view it as 16 or 18 point. Does your site look good when you use the "Increase Size" or "Decrease Size" feature of your web browser?

I named the section of #3 for dramatic effect. Your site won't literally be changed by the visitor's browse. But it may look a lot different than you intend depending on who the visitor is.

continue to next chapter > home ----- Copyright © 2009 dave kristula. all rights reserved.
Follow me on Twitter @firstdave