Design your pages for accessibility.

In my position as a college instructor, I see many places where fancy web page design gets people with visual problems, dyslexia, or learning disabilities into trouble. Here are my suggestions for making your web pages more accessible:

1. No angry fruit salad.

If you put a huge amount of intricate graphics on the page, it distracts the accessibility user, and he has trouble reading the text. My computer dictionary calls this explosion of graphics "angry fruit salad."

2. No text on top of graphics.

Some visual learning disabilities (including dyslexia) cause text placed on top of graphics to become unreadable. This also includes the text on watermark text in the submission window used to post this.

3. Don't change link colors.

People with learning disabilities use the standard colors to find links. They can also set their accessibility browsers to return the colors to standard. If you change the link colors, or if you place the link in an object with a colored background that matches a standard link color, they can't find the links.

4. No moving images for any purpose other than to show how something works.

Moving images trigger responses in certain individuals that attract the eye away from the text. So they never get to finish reading the text. If you must have a moving image, include a button to start the motion.

5. No mouseovers.

A mouseover function that makes something change usually makes the person with learning disabilities think something went wrong, or that the page he was browsing went away. This can be frightening for a beginner, because he thinks he did something wrong. Require a mouse click for each action.

6. No dropdown menus.

The person with learning disabilities can't find the link he wants, because he doesn't associate the name of the dropdown menu with the link he wants. And mouseover dropdowns have the same trouble other mouseovers have.

7. Don't use tables in non-tabular situations if you can avoid it.

Reading browsers for the blind give row and column information for each table cell. This is confusing if the table is used for other purposes. It is the reason the W3C wants tables to be avoided in non-table situations.

8. No rotating galleries or moving banners.

These combine the troubles of moving images with the "lost the page" fear from the mouseovers.

9. Don't make anything blink!

Blinking objects, especially those that blink fast, can cause epileptic seizures.

10. Leave space between items.

Some people, including many aged people, have trouble positioning a mouse with precision. Don't put clickable objects too close together.

I'm pretty sure you have called almost every site on the internet unaccessable in some way. There has to be a half way point. People with severe learning dissabilities tend to use a text only setting and/ or a screen reader. You can't always design websites with that in mind because then they look dated to the rest of the population.

I would be interested in seeing what mainstream websites meat your criteria?

Perhaps Google (homepage).


What about graphics/portfolio sites? Surely, the target audience does not include the 'disabled'?

I thought the watermark disappears when we start typing?


Don't get me wrong, midi, I'm not trying to antagonize you. It's just that these rules seem too limiting... Like "Thou shalt not use rotating banners." etc. and as roryt said, there should be some sort of compromise (specially if you have a different target audience).

I would agree BUT, there is actually a drop down menu for "more" at the top of the page. Also, they do use a table to display some of the page, which i think Midi said was wrong (i agree with that but i don't see how that effects people with learning disabilities).

I genuinely can't think of a single mainstream site that obeys your ten rules.

Personally, no offense or anything, but I want to see your website, do you have one? If so lets see your ideas in action.

As web designers we must cater to the many, being such, if a quarter of my users had disabilities I would attempt things. However, there are things which people with disabilities don't like, and aren't necessary for a normal page, such as:
1. Nothing blinks.

2. (Try to)Stay away from tables.

3. Try leaving space.

Otherwise I vehemently disagree.
(unless of course there was a JavaScript function which would detect learning/reading disabilities so we could redirect them to little empty page with some text and blue links on it.)

I second that, can we see your website? It would atleast let us see your views in practise.

Hi guys, I think it must be possible to make a site which looks good and caters for screen readers as well. If it is coded well the website should still work without the graphics on so maybe an option for the user to turn them off would help cater for more people.

I recommend playing with http://www.webbie.org.uk/ to see how frustrating it can be for disabled people to navigate soom of these sites. I used it with a screen reader and navigating around the bbc was like listening to a automated phone system...

already covered in the css standard for screen readers
as imported .css files or as a portion of a standard .css
and the html 'tabindex' and z-index attributes applicable to all elements controls the order that screen readers access elements
Its harder to get web designers who have been doing things the same way since prehistoric times, to read the standards
by now every designer should have at least
@media screen
@media print
@media reader
@media handheld
stylesheets

yes almostbob BUT people with dislexia may not use a screen reader so your page would still need to be made so they can access it... atleast according do Midi. Also people with sight problems may not use a screen reader because they can cope with most things but may struggle with some.

Further information:

1. No angry fruit salad.

The problem with huge amounts of graphics is that it upsets the process of reading the text. Regular viewers tend to use the back button too, because they can't find the info without spending a lot of time. If I need info in a hurry, I will back out of a complicated page with no obvious info.

2. No text on top of graphics.

The perception problems combine the text and graphics into an unreadable mess. And the watermark does NOT disappear from this posting window, until the post becomes large enough to scroll.

3. Don't change link colors.

Nobody ever NEEDS to change the link colors. Don't do it!

4. No moving images for any purpose other than to show how something works.

Moving images usually make a lot of people hit the back button. So do suddenly appearing sounds.

5. No mouseovers.

Are people too lazy to click the mouse? Why do you need to make actions they do not want to happen happen? Mouseovers are extremely annoying, especially if you are trying to do something the the mouseover covered up. Require a mouse click for each action.

We need usable pages, not fancy bells and whistles.

6. No dropdown menus.

Why hide the links? What's wrong with a table of links somewhere on the page? These are smells and bells and whistles. They say, "Look! I can make dropdown menus. See how smart I am?" Even Microsoft got rid of dropdown menus in the new Office.

Note that mouseover dropdowns are worse than regular dropdowns, because they appear when they are not wanted. They are quite annoying.

I particularly hate the ones on the weather channel, because they surrounded the search window with them, and the bottom ones open UPWARD. You have to cross one to get to the search window, and the dropdown then covers the search window. You have to do a tricky maneuver to use the search window.

7. Don't use tables in non-tabular situations if you can avoid it.

Normal W3C table policy takes care of this.

8. No rotating galleries or moving banners.

They are cute, but not necessary. At least use a button to start them, if you think they are necessary.

9. Don't make anything blink.

This isn't a TV ad. People want information, not cute tricks. You are not competing with a run to the kitchen for a snack during the commercial.

10. Leave space between items.

A good idea anyway.

-----

My web pages share my user name.

I obeyed all of these, except that I have some rainbow colors (one color per button) on some menu pages.