943,686 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Design your pages for accessibility
Ad:
You are currently viewing page 1 of this multi-page discussion thread
Permalink
Jan 10th, 2009
0

Design your pages for accessibility

Expand Post »
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.
Last edited by MidiMagic; Jan 10th, 2009 at 11:01 am.
Similar Threads
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Permalink
Jan 10th, 2009
0

Re: Design your pages for accessibility

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?
Reputation Points: 178
Solved Threads: 15
Nearly a Posting Virtuoso
roryt is offline Offline
1,282 posts
since Oct 2005
Permalink
Jan 10th, 2009
0

Re: Design your pages for accessibility

Quote ...
I would be interested in seeing what mainstream websites meet your criteria?
Perhaps Google (homepage).


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

Quote ...
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).
Last edited by kanaku; Jan 10th, 2009 at 12:06 pm.
Reputation Points: 70
Solved Threads: 15
Posting Whiz
kanaku is offline Offline
378 posts
since Jan 2007
Permalink
Jan 10th, 2009
0

Re: Design your pages for accessibility

Click to Expand / Collapse  Quote originally posted by kanaku ...
Perhaps Google (homepage).
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.
Reputation Points: 178
Solved Threads: 15
Nearly a Posting Virtuoso
roryt is offline Offline
1,282 posts
since Oct 2005
Permalink
Jan 10th, 2009
0

Re: Design your pages for accessibility

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.)
Last edited by ccube921; Jan 10th, 2009 at 8:00 pm.
Reputation Points: 13
Solved Threads: 6
Junior Poster in Training
ccube921 is offline Offline
93 posts
since Oct 2008
Permalink
Jan 11th, 2009
0

Re: Design your pages for accessibility

Click to Expand / Collapse  Quote originally posted by 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.
I second that, can we see your website? It would atleast let us see your views in practise.
Reputation Points: 178
Solved Threads: 15
Nearly a Posting Virtuoso
roryt is offline Offline
1,282 posts
since Oct 2005
Permalink
Jan 11th, 2009
0

Re: Design your pages for accessibility

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...
Reputation Points: 10
Solved Threads: 1
Newbie Poster
SteveKubrick is offline Offline
11 posts
since May 2008
Permalink
Jan 11th, 2009
0

Re: Design your pages for accessibility

already covered in the css standard for screen readers
as imported .css files or as a portion of a standard .css
css Syntax (Toggle Plain Text)
  1. <style>
  2. @media reader {
  3.  img { display:none; }
  4. .rollover { display:none; }
  5. body, div, p, span, a, {margin:5px; padding:5px;} /* any element you need to separate for accessibility */ 
  6. .b { width:97%; margin:1%; } /* three lines create tables without tables */
  7. .lt { width:30%; float:left; text-align:right;}
  8. .rt { width:30%; float:right; text-align:left;}
  9. }</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
HTML and CSS Syntax (Toggle Plain Text)
  1. <body>
  2. <div class='b' >
  3. <!-- menu html 9 items tabindex 1-9 -->
  4. </div>
  5. <div class='b'>
  6. <div class='l' tabindex=10>explanatory text for input</div>
  7. <input tabindex=12 type='text' name='idontcare'></div>
  8. <div class='b' tabindex=13>
  9. <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>
  10. </div>
  11. </body>
by now every designer should have at least
@media screen
@media print
@media reader
@media handheld
stylesheets
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Jan 13th, 2009
0

Re: Design your pages for accessibility

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.
Reputation Points: 178
Solved Threads: 15
Nearly a Posting Virtuoso
roryt is offline Offline
1,282 posts
since Oct 2005
Permalink
Jan 16th, 2009
0

Re: Design your pages for accessibility

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.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: CSS and Forms
Next Thread in HTML and CSS Forum Timeline: fixed divs





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC