Design your pages for accessibility

[MidiMagic]

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.

[roryt]

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?

[kanaku]

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

Perhaps Google (homepage). :D

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

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.

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).

[roryt]

Perhaps Google (homepage). :D

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.

[ccube921]

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.)

[roryt]

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

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

[SteveKubrick]

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...

[almostbob]

already covered in the css standard for screen readers
as imported .css files or as a portion of a standard .css

<style>
@media reader {
 img { display:none; }
.rollover { display:none; }
body, div, p, span, a, {margin:5px; padding:5px;} /* any element you need to separate for accessibility */ 
.b { width:97%; margin:1%; } /* three lines create tables without tables */
.lt { width:30%; float:left; text-align:right;}
.rt { width:30%; float:right; text-align:left;}
}</style>

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

<body>
<div class='b' >
<!-- menu html 9 items tabindex 1-9 -->
</div>
<div class='b'>
<div class='l' tabindex=10>explanatory text for input</div>
<input tabindex=12 type='text' name='idontcare'></div>
<div class='b' tabindex=13>
<img src='./img/image.jpg' alt='Accurate description of the image which is read by the screen reader' tabindex=14> large block of text for reader</div>
</div>
</body>

by now every designer should have at least
@media screen
@media print
@media reader
@media handheld
stylesheets

[roryt]

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.

[MidiMagic]

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.

[ccube921]

Can we see your website?

[MidiMagic]

Can we see your website?

http://geocities.com/[e-mail]/index.htm

I normally follow those rules. There are a few exceptions:

1. No angry fruit salad.

I never do this. And I especially avoid the "swoop" image in the upper left corner that so many sites use.

2. No text on top of graphics.

Never.

3. Don't change link colors.

Never.

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

Moving images have been used solely for the purpose of showing a sequence of events in tutorial pages. There are no sounds.

5. No mouseovers.

Never. I hate them.

6. No dropdown menus.

Never. I want all of the links to be visible all of the time. So I use menu pages instead. I do use a rainbow of background colors for the links on some menu pages.

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

I use tables for my link tables.

Occasionally I use a table for layout purposes, but only where div+css needs a kludge to work, or won't do the job right.

8. No rotating galleries or moving banners.

Never.

9. Don't make anything blink.

Never.

10. Leave space between items.

Always. But I discovered that the latest version of IE doesn't always render things as I intended, and I haven't yet had time to fix all of them. Lists within lists are banging into the next outer list item below them in IE, but not other browsers. I am still troubleshooting this to find a kludge-free method that works.

Note that I have no control over what Yahoo puts in the ad pane. But there is a button to close the pane.

All of my code validates with W3C. The Yahoo ad won't validate under any doctype.

[kanaku]

Jakob Nielsen's website isn't exactly pretty... *sigh*

[roryt]

http://geocities.com/[e-mail]/index.htm

Midi,

Although you have designed by those rules it really isn't much of a design at all! It is really quite unattractive. I would really like to see a list of popular websites that follow your rules.... I can't find any at all.

[superjay70]

Hello I am new to Daniweb and I want to create a website. Please tell me how to do that. Does Daniweb have website tools that I can use? How do I access them? Thank you

[roryt]

You need to find some html tutorials on the internet. Create a thread on daniweb with a specific question if you are stuck with something. It may be useful for you to use a program like adobe dreamweaver. You will also need a image editting program to create any graphics. So it may be worth getting a version of adobe cs4 with photoshop and dreamweaver in it.

Good luck

[robertrak]

I would have to agree. most sites are not accessible. By Phone Iphone, treo 650 or treo 700 and more

what about .mobi domain name coming out?

[MattEvans]

Midi,

Although you have designed by those rules it really isn't much of a design at all! It is really quite unattractive. I would really like to see a list of popular websites that follow your rules.... I can't find any at all.

I found the content on midis website quite interesting, and there was way more content than I had leisure to read. Things were also laid out quite intuitively.

Good content, being able to find things, and not having to leave because a site is totally flash-centric ( or because a feature -- like navigation -- wont work in my browser ) beats good design everytime IMHO. Quite often, the sites I find most useful are either minimalist or practically text only. If a source of information, e.g. some kind of documentation, is available either intermixed within a flashy distracting scenescape or as plain black-on-white linked pages, guess what I always pick?

You can follow most of this advice without going completely minimalist. Often it's just a case of getting a good graphic designer for backgrounds/layout, and laying off the dizzy gimmicks. Take any popular site as an example: if it has any of these purported 'bad features', could it work without them? Quite often, it could, and quite often, it wouldn't take a complete -- or even non-trivial -- redesign. Unfortunately, for the most part, subtlety seems to be a forgotton art these days.

I won't claim to follow these rules myself. When I worked in web dev I did whatever the client told the boss was wanted. Flash only sites, blinking images, drop-down menus, recolored links, etc.

[ccube921]

I dont believe in flash only sites nor do I believe in blinking images or overly flashy backgrounds, but, simple colors just to meld nicely is a necessity, as it actually hurts my eyes to look at some sites. Unfortunately, I don't believe in plain white pages with black text, but do think that the most near perfect mix I could think of offhand would be wikipedia. Its a nice looking site, not completely void of design, but text is readable. Is that agreeable with your philosophy?

[MidiMagic]

Wikipedia is a nice site.

[ccube921]

We both agree on something!!!!

[kanaku]

Typography layouts (the well-done ones) might be the best examples of what midimagic wants us to see. They call attention to headings and important parts of the page through contrast (relative size, darker or lighter colors) and not images or flash effects.

I still think that there are some rules that can be bent if you're designing for a specific audience. (Like a site showcasing the latest model of a car --- usually for men and their "eye-candy") Watermarks can be useful for copyright-ing things (like in stock photo galleries), etc.

BTW, whoever said that midimagic's site content was good... is right. =) I've been reading through it but with all that stuff I think it'll take weeks.

I also think midimagic's site content would have gotten more attention if it was published in wordpress (even a minimalist layout/theme would work) instead of geocities... =(

Mr. Midimagic, show your content some love! =p

[MidiMagic]

I use Geocities because:

1. I can't afford to pay for a separate site. I get a Geocities website free with my ISP contract.

2. My ISP charges extra for FTP capabilities. I have to use their file upload utility to avoid paying extra. So I can't upload pages to other sites.

3. I have in the past four years had to regather my usual users TWICE, after suddenly losing each of two site urls my site used to be on. In each case, I lost the url with very little advance warning.

- The first time, the company I used to work for had a free url as a perk of employment. They had to change the free site urls, because the old one contained "php" (for "personal home page"). PHP sued them over the use of their trademark, even though the company I worked for had the urls before PHP was PHP. But instead of paying a lawyer, they changed the urls.

- The second time, the company division I worked in closed. They downsized me. Since I don't work there anymore, I lost my url again. That's when I moved to Geocities, because I already subscribed to my ISP at home.

I do not want to make my regulars have to change where to look for me again.

[ccube921]

Interesting ISP? Would you share with us which one?

[MidiMagic]

I don't mind watermarks on images, because I don't need to read them. I mind watermarks under text (both become an unintelligible jumble), and text on top of graphics (can see the graphics, but can't read the text).

The watermark stays on the quick reply window until the scrollbar appears.

[kanaku]

Actually, the watermark on the quick reply window has an erratic behavior. Sometimes it disappears as soon as I click on the textarea, sometimes it changes after I've typed quite a lot of text.

As for the hosting, I think you need a server/host with PHP because you have a lot of content and I couldn't imagine how you manage to update all of them. =(

I just feel you can do better. My sub-site is hosted for free by someone. (Not a corporate free host) It has all the perks of a 'paid' hosting except it isn't paid.

[MidiMagic]

Actually, the watermark on the quick reply window has an erratic behavior. Sometimes it disappears as soon as I click on the textarea, sometimes it changes after I've typed quite a lot of text.

I noticed it too. I think it depends on when the page must be redisplayed. Sometimes it disappears if I scroll the main page after I type.

As for the hosting, I think you need a server/host with PHP because you have a lot of content and I couldn't imagine how you manage to update all of them. =(

I just feel you can do better. My sub-site is hosted for free by someone. (Not a corporate free host) It has all the perks of a 'paid' hosting except it isn't paid.

I update pages one at a time. Most of them do not change. Some of them need updating, because a change in IE made some of my older techniques fail.

I still couldn't service it through my ISP, because I would have to pay extra for the ftp capability to reach other sites.

And I still don't want to make my regulars move bookmarks again. I can't email all of them, because I don't know all the addresses.

Get me a job that pays more, and then I could afford two sites.

[MidiMagic]

Typography layouts (the well-done ones) might be the best examples of what midimagic wants us to see. They call attention to headings and important parts of the page through contrast (relative size, darker or lighter colors) and not images or flash effects.

There are two reasons for that, not necessarily connected to the accessibility issue:

1. The pages load fast.

2. My ISP has limits for the free web page service. You have to pay for more services, and that requires a change in the url that I don't want. There is a storage limit of 15 MB, and a 4.2 MB/hr download limit.

I still think that there are some rules that can be bent if you're designing for a specific audience. (Like a site showcasing the latest model of a car --- usually for men and their "eye-candy")

Just realize what will happen if a disabled person reaches your site by accident (e.g. Googling for something else), and some of the items I listed are present. The disabled person reaches your site, thinks something is wrong with his computer because it is changing pages by itself, and calls tech support for a pay service call. Your bells and whistles might cost him money.

Watermarks can be useful for copyright-ing things (like in stock photo galleries), etc.

I didn't say to avoid watermarks. I said to avoid placing text on top of complex items (including other text) if the text is to be read.

[MidiMagic]

I am going to add some more rules, based on some experiences I had with students this week:

11. Don't open a browser window with the browser controls removed, and don't disable the back button.

Disabled users (and other users) depend on the BACK button to get back to where they were before

12. Make sure your code is browser-independent.

If you design for only one browser, someone using another browser gets a mess. This is especially true if the code uses nonstandard extensions.

13. Don't change the size of the browser window.

Often disabled people use helper aids in certain parts of the screen. Changing the window size often hides these tools.

[ccube921]

Good rules! Many people can design a site, but to design an accessible site(w/o it looking ugly) takes skill.