AAA Issues

[matauri]

I decided I would make my business sites 'accessible', but when I test them for AAA in Bobby, I keep getting told that there are colour issues with the site. I can see maybe the links being a colour issue, but, with accesskeys doesnt that balance that out somewhat?

Anyone that can help with an ideas to get this passed for a AAA, I would appreciate hearing them.

http://attitude-emedia.net/
(only first page uploaded)


Thanks!


Cindy

[mikmik]

Hey, what is AAA?
I saw something quick about Bobby and the color thing, but I don't know if it means CONTRAST or COLOR IMPAIRMENT, ie. red/blue.
Then I will know if I see something.

[matauri]

When testing Mik, these are the errors that come back from Bobby. W3c Accessibility checklist HERE.

1. If you can't make a page accessible, construct an alternate accessible version.
2. If style sheets are ignored or unsupported, are pages still readable and usable?
3. If you use color to convey information, make sure the information is also represented another way. (9 instances) Lines 23, 34, 64, 66, 68, 87, 90
4. If an image conveys important information beyond what is in its alternative text, provide an extended description. (9 instances) Lines 23, 34, 64, 66, 68, 87, 90
5. Make sure header elements are not used only for bold text.
6. Check that the foreground and background colors contrast sufficiently with each other. (9 instances) Lines 23, 34, 64, 66, 68, 87, 90
7. Mark up any quotations with the Q and BLOCKQUOTE elements.
8. Do not create a blinking effect with animated gif images. (6 instances) Lines 23, 34, 64, 66, 87
9. Separate adjacent links with more than whitespace. (8 instances) Lines 43, 45, 47, 49, 51, 53, 55, 90

1. If I cant get 2-9 complying, then #1 wont.
2. I cant see it matters where there images end up, as long as the text & links are still readable.
3. I tested in monochrome and cant see prob there.
4. As far as I can see all my alt & title tags read appropriately
5. I know..slightly guilty of this
6. I think my foreground & background colours contrast well.
7. I dont have any quotations to quote.
8. I dont have any animated images
9. This may be the bottom links in question, but I still separated them with a | like it says to.


Suggestions? Or anything I am not seeing that someone else is?


Cindy

[mikmikmik]

You know what, mat? (it's me, mikmik lol)When I was in my frenzy yesterdat, I punched your page in another online test, I think it was 508???

But it had stuff on bobby's BS 9lol)
and anyway, it generated a 4 page report that only had about 5 warnings and 1 only NO.

What Criteria are you looking for to pass, or SPECIFICATION?

I am up here at 4 am and need a break already from my sh...tuff!

I just wanted to leave a note that I saw this, I will look for the test I used and get back!

I learn more from you, this is all good area of focus
(everybody!) lol

I will be more clear after a cuppa...


Actually, the #3, about colour, What the *$@#? Is it talking aboot contrast or color impairments???
I have been trying to send you and e-mail for 16 hrs. asking that!!! LOL

[mikmikmik]

(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

Why is this provision necessary?
When colors are used as the sole method for identifying screen elements or controls, persons who are color blind as well as those people who are blind or have low vision may find the web page unusable.


---RIGHT, SO FAR? CAN"T SEE THE PAGE !!-----

Does this mean that all pages have to be displayed in black and white?
No, this provision does not prohibit the use of color to enhance identification of important features. It does, however, require that some other method of identification, such as text labels, must be combined with the use of color. This provision addresses not only the problem of using color to indicate emphasized text, but also the use of color to indicate an action. For example, a web page that directs a user to "press the green button to start" should also identify the green button in some other fashion than simply by color.

Is there any way a page can be quickly checked to ensure compliance with this provision?
There are two simple ways of testing a web page to determine if this requirement is being met: by either viewing the page on a black and white monitor, or by printing it out on a black and white printer . Both methods will quickly show if the removal of color affects the usability of the page.


-----WHAT THE HELL???----

It says if they can not see - that's what blind means, doesn't it ???? lol, so how is Black and White, or printing clearly, going to help them????

I need more than coffee RTFOL ;o))

[mikmikmik]

1. If I cant get 2-9 complying, then #1 wont.

2. I cant see it matters where there images end up, as long as the text & links are still readable.
3. I tested in monochrome and cant see prob there.
4. As far as I can see all my alt & title tags read appropriately
5. I know..slightly guilty of this
6. I think my foreground & background colours contrast well.
7. I dont have any quotations to quote.
8. I dont have any animated images
9. This may be the bottom links in question, but I still separated them with a | like it says to.

You say that if you get #2 - #9, then #1 won't.
But you don't need #1 if you have #2 - #9, do you??
(Scratches head, time for more coffee, lol) I'm not sure either....

In the meantime, here are some more links (!):






Why_Bobby_Approved_is_not_Enough

http://evolt.org/article/Why_Bobby_A...278/index.html

colourcontrast Giving away bidtime secrets here!lol This is deadly site
http://<br /> http://www.juicystudi...urcontrast.asp


Color contrast verification tool:
http://h10014.www1.hp.com/accessibility/color_tool.html
GIVES THIS - :
Results of Test
.........brightness difference:
...................(should be >= 125)
.........color difference:
...................(should be >= 400)
.........are colors compliant?

[matauri]

LOL...Thanks Mik...as usual amongst the confusion I eventually undertand what your talking about. I really must teach you to speak aussie!

Not that fussed about Sect 508, coz our laws are a little stricter. What I am after is the AAA from W3C, and the only validator I can find is Bobby (tho I think Bobby talks thru his hat!) Originally I went throught the W3C critria & thought I passed it all, so I did the check thru the Bobby validator and it came up with the problems above. And as you can see, the are talking double dutch!

I will check out those links tho..thanks!


Cindy

[mikmik]

Matauri wrote:

LOL...Thanks Mik...as usual amongst the confusion I eventually undertand what your talking about. I really must teach you to speak aussie!

Ripper, sheila! Aym Back of Bourke, though, s'truth!
If I wasn't such a an O.S. ocher, and I could make a quid Ozzie-ways, I'd hooroo the homestead and join ya's.
(ouch, me noggin! lol)
Not the full quid enough, ah'm afraid, wonder if the sand groper's would take me LOL
(sandies are ridgie didge, s'truth)
Bit of a dag, then, I am. Arvo.

[Webnauts]

This is a great thread!!!

[redcircle]

here's a link that lets you check to see what your webpage for people with different types of color blindness. www.vischeck.com

[TheWebDoctor(tm)]

I decided I would make my business sites 'accessible', but when I test them for AAA in Bobby, I keep getting told that there are colour issues with the site. I can see maybe the links being a colour issue, but, with accesskeys doesnt that balance that out somewhat?

Let's take one issue at a time.

Accesskeys: Accesskeys become known to individuals using screen readers or other assistive technology. Accesskeys do not become known to individuals with color-blindness. The colors you use do not provide the level of high contrast required for individuals that can see only shades of grey. For individuals that have red, green or blue you may find some challenges there as well. For high contrast against black you need extremely light colors such as white, ivory, ligher shades of grey, or other similar colors.

Now, let's discuss Bobby for a moment. Bobby does not provide any assurances that a web site is accessible. AskCindy and the other programs are limited as well. WCAG will always require accessibility reviewers to make determinations on their own.

To achieve AAA accessibility you will need to separate your links with more than just white-space. White-space is considered any non-character or image not used as a link. When I achieve this level I often use pipes '|'. You can enclose your links in square brackets []. The choice is yours.

Identifying information by color is simple. Here's an example: Should you make your site accessible? Yes or No. The correct answer is in red.

If you can see red, then you can easily choose the correct answer. If you can't see red or green, then you cannot discern the correct answer and are therefore left with a guess.

Now, your images at the bottom leave the color-blind individual with the inability to read those images.

I hope this helps everyone.

[redcircle]

Matauri, I took a look at your website. the text You Are Only Limited By Your Imagination is hard for me to read also all the headers on the rest of the pages that have that foreground and background. Btw, I'm color blind, not that bad but I did need crayons with the color names on them when I was a kid.. Brown/Green looks the same most the time. also blues and purples. My eyes are all messed up.

The site that I posted earlier. vischeck.com the examples of where the letters are supposed to pop out.. nah.. don't see those.

[matauri]

Funny you should mention those Red, I was jsut thinking about those headers last nite. I think yes I will change them.

So in anyones opinions...how far off am I having it reach AAA standards? (not taking Bobbys word for it)

After the SOCOG affair I want to be able to advertize accessible sites. So thats why I am being kinda fussy with wanting to get that rating.



Cindy

[mikmik]

http://bobby.watchfire.com/bobby/bob...l=sec508&test=

# If you use color to convey information, make sure the information is also represented another way. (9 instances)
Lines 23, 34, 64, 66, 68, 87, 90
# Make sure users can skip repetitive navigation links.
# If an image conveys important information beyond what is in its alternative text, provide an extended description. (9 instances)
Lines 23, 34, 64, 66, 68, 87, 90

[mikmik]

Okay, so I plug in your URI at this site:
http://www.usablenet.com/

And it is e-mailing me a 5 page report!

Yar :o)

The results will be here:
http://liftonline.usablenet.com/lofn...3N6/index.html

It has been analysing for several minutes now. I'm getting scared, in fact lol

Ok, gotta go, buy

http://www.w3.org/TR/WAI-WEBCONTENT/wai-pageauth.html

http://vischeck.homeip.net/uploads/10751309064657/

[Webnauts]

All in one validators: http://www.webnauts.net/check.html

I highly suggest for accessibility evaluation to use Cynthia Says: http://www.cynthiasays.com/

[matauri]

Thanks Webnauts for Cynthias checker. Seems like I am not as far off the mark as I thought I was, just a couple of small things to fix.

One thing though. It discusses the offsite link to the WW3 validation. I noticed this in other checkers too. Surely W3C would provide links to being validated that actually did validate themselves...wouldn't you think?


Cindy

[Webnauts]

Originally Posted by Matauri

Thanks Webnauts for Cynthias checker. Seems like I am not as far off the mark as I thought I was, just a couple of small things to fix.

One thing though. It discusses the offsite link to the WW3 validation. I noticed this in other checkers too. Surely W3C would provide links to being validated that actually did validate themselves...wouldn't you think?

Cindy

I visited your homepage, and I found two issues which you might would like to know about:

Line 23: The "align" attribute may not be used with the "div" element in an XHTML 1.1 document. Instead of align="center", consider using the CSS "text-align: center" instead.

Line 52: The "style" attribute has been used but a default style sheet language has not been defined (note that HTML Validator would not see this declaration if it is sent as an HTTP header by a web server). HTML 4.01 and XHTML require this for valid documents. For example, include this in the "head" section of your document to specify "text/css" as the default style sheet language: <meta http-equiv="Content-Style-Type" content="text/css" />. See http://www.w3.org/TR/html4/present/s...#default-style If you are using HTML Validator's integrated editor, then you can add this from the Tags menu and/or from the Tag Inserter.

What do you think?

[Webnauts]

And some tools for testing colors, contrast, etc:
http://www.pixy.cz/apps/barvy/index-en.html

[mikmik]

Good work, webnauts, that is the best all-in-one validation page I have come across yet!!
And I have been focusing on this lately.
I would like to give a special link to you from my site, which is about 30% done, but I just can't seem to get to...
I will PM you.

Matauri, Webnauts, here is a page that looks to have some good links to accessability resources, and they have a little 'toolbox' of bookmarklets that you can use to check your pages with for specifics, like how it looks greyscale, without the stylesheet, and shows the images that don't have proper 'alts'. The resource page : http://www.508compliant.com/resources.htm

The "ToolKit" :

http://www.508compliant.com/tools.htm I have a few others that are good, and they are so handy - they go in your favourites, or make a link right on your browser toolbar. You can then check pages with them with just one click.

I know that you are very busy and can't keep checking all my millions of links that I 'throw' at you Mat!

I just want to put them up for others as well.
I'm glad you found out that your page is really quite well done. I wish I could speak better, that's sort of what I was trying to say, and the report I did (one of them) said that you had NO WARNINGS or ERRORS ! Congrats.

[ranjan]

Cindy,

Firstly, there are a few check that bobby has automated, and few that can never be automated because only a human being can confirm validity

Let us look at your errors in bobby

1. If you use color to convey information, make sure the information is also represented another way.

Since bobby cannot determine what colors you have used, it cannot verify this error. generally if you have used contrasting colors, then you are ok

2. If an image conveys important information beyond what is in its alternative text, provide an extended description

Bobby cannot determin if your alt attribute sufficiently conveys what the image link represents. Most cases you don't need long desc attribute. so you are fine her

3. Check that the foreground and background colors contrast sufficiently with each other.

See 1

4. Do not create a blinking effect with animated gif images

See 1

5. Separate adjacent links with more than whitespace

As per WCAG-AAA you have to seperate adjecent links with more than a whitespace like using "|".

<span class="seperate">|</span> will do the trick if you set class seperate to a display:none in CSS