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

[Webnauts]

Ranjan, to your fourth point I would not agree with you. Amimated gifs may definetely be used.
But the question is how.

Section 508 paragraph (j) forbids blinking and flickering between 2 and 55 Hz (Hz = cycles per second) and the WCAG 1.0 makes this a Priority 1 checkpoint (7.1).
For example the U.S NTSC video signals are at 60 HZ.
A strobe light at 10-15 HZ can induce seizures in people with certain genetic makeup.
A convenient thing would be creating strobe-like effects with rapid alternation between dark and light images.

Some further info about this topic:
http://www.webaim.org/howto/graphics...siblegraphics5

[Webnauts]

Here some info about colors and contrast:

http://www.lighthouse.org/color_contrast.htm

http://www.saila.com/usage/colour/

http://more.btexact.com/people/rigde...rs/colours.pdf

http://www.stcsig.org/usability/news...blindness.html

http://www.webtechniques.com/archives/2000/08/newman/

http://www.joeclark.org/book/sashay/...Chapter09.html

[matauri]

OK...I am jsut about to try this again for validation. However, one question first.


Ranjan, this white space issue and the code you supplied. I presume it is referring to this area of code (which is main index). I'm not quite sure on where you are telling me to place it.

CODE:
<div id="links">about us

portfolio

hosting

contact us

services

discussion</div>

CSS:

#links {
position: absolute ;
text-align: left;
vertical-align: bottom;
left: 2em ;
top: 2em ;
font-family: Arial, Helvetica, Verdana, sans-serif ;
font-size: 1em;
color : #000000;
margin: 0em 0em 0em 0em ;
}


Thanks for help on other issues guys, think I have them pretty much covered now :-)


Cindy

[ranjan]

You have used the br tag as seperator for the links. You should use any characters to seperate the links.

[matauri]

They are used as line breaks though, not as separators. How would you suggest I line break then? Or is it that they are on the same line in the code?


Cindy

[mikmik]

THE LINK TO RESOURCES :

"This is a collection of information about evaluation, repair, and transformation tools useful for Web content developers and Web users who wish to make the Web more accessible."

http://www.w3.org/WAI/ER/existingtools.html

How this document is organized
Tools are classified into 3 different sets:

Evaluation tools - Perform a static analysis of pages or sites regarding their accessibility, and return a report or a rating.
Repair tools - Once the accessibility issues with a Web page or site have been identified, these tools can assist the author in making the pages more accessible.
Filter and transform tools - These tools assist Web users rather than authors to either modify a page or supplement an assistive technology or browser.
There is also a list of other resources at the end of the document

[ranjan]

Replace the the brs with <span class="seperate">|</span>

Use CSS

.seperate {
display: none;
}
This will hide the seperator. Now you will have the problem of spacing the links into new lines and required spacing between them. Convert the links into block elements(display:block) and specify a required bottom margin to your "a" tag style.

Never use brs to space (position) elements. Use margins/paddings

[matauri]

Now you will have the problem of spacing the links into new lines and required spacing between them. Convert the links into block elements(display:block) and specify a required bottom margin to your "a" tag style.

OK...I was with you until the above part. I did as you said, replaced the
with the seperater, and made the (display:block), but try as I will, I cant get them to line up under each other. They stay on one line.

I am obviously doing something wrong.

NEW CODE:
<div id="links">about us<span class="seperate">|</span>portfolio<span class="seperate">|</span>hosting<span class="seperate">|</span>contact us<span class="seperate">|</span>services<span class="seperate">|</span>discussion</div>

CSS (with display:block added)
#links {
position: absolute ;
display: block ;
text-align: left;
vertical-align: bottom;
left: 2em ;
top: 2em ;
font-family: Arial, Helvetica, Verdana, sans-serif ;
font-size: 1em;
color : #000000;
margin: 0em 0em 0em 0em ;
}


Also...another question... I have a couple of 'failed' sections, that I'm also not too sure about.

1.4 Validate all pages have a Link Element pointing to P3P policy reference file When a web site is P3P enabled, every page should reference the web site P3P policy reference file. This can be done by either using an HTML LINK element in the head section of your page or through an HTTP header passed to user agents when pages are requested from your server. This check validates that a Link Element that points to a P3P Policy reference file is found in your page.
A Link Element that points to a P3P Policy reference file does not exist in this page.

3.1 Identify IMG Element web beacons This check identifies all IMG elements, if any, located on the page that have a src attribute pointing to an external web site.
The page contains IMG elements that have a src attribute pointing to an external web site.

Warning - IMG Element at Line: 52, Column: 71 - Points to http://www.w3.org/Icons/valid-xhtml10
Warning - IMG Element at Line: 52, Column: 348 - Points to http://jigsaw.w3.org/css-validator/images/vcss

(this above one is the W3C links)


Thanks guys :-)


Cindy

[matauri]

Also, I had the <div align=center> tag sitting there until I found one that would work in other browsers for the css file. {text-align: center} I can only get to work in IE.

However, I did find one tutorial on it for it to work in others also....
http://www.bcr.org/publications/afl/.../internet.html


Cindy

[ranjan]

#links is the div that contains the a tags. The #links should have a specific width (lets say 180 px). The a tags should have the style (display:block) and not the #links

[matauri]

Cool...I got that to work Ranjan! Thanks ! Next question, how can I space them further apart downwards, like a double line space?


Cindy

[ranjan]

"a" tag CSS should have a bottom margin defined. A bottom margin of 12 or 14 px will have double line spacing.

[matauri]

Thanks Ranjan. While I found the bottom margin didnt work, the line height did.

So, this leaves me with any takers on that privacy (p3p) issue, and the src attribute pointing to an external web site ?



Cindy

[ranjan]

For P3P microsoft has a good article
http://msdn.microsoft.com/workshop/s...vacypolicy.asp

There are a few editors that do the job too, one of them from IBM

http://www.alphaworks.ibm.com/tech/p3peditor

For external Links check my script

http://ranjan.ws/scripts/offsite.htm

[matauri]

Working on something else at moment, but will definately check those out later. Thanks Ranjan! But I was just wondering, is their inclusion important? Do you think its something I should include soon?

BTW...wasnt ingoring you there Mik, was having issues with that tag. Good resource that link! Bookmarked for future use! :-)

And thank you to all for some good resources. Learnt a lot!


Cindy

[ranjan]

Both P3P policy and showing of external links are not essential, but good to have