General Techniques - Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content.

Submitter's Name: Sheena McCullagh
Submitter's Email: sheena.mccullagh@blueyonder.co.uk

Technique ID: UNKNOWN
Short Name: Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content.
Technique Category: General Techniques
Guideline Reference: visual-audio-contrast-visual-presentation
Success Criterion Reference: UNKNOWN

Applicability:
All technologies.

UA Issues:
Most browsers allow the user to change the color settings to override Web author's CSS and HTML color schemes. This includes IE, all versions of Firefox, Mozilla, Netscape and Opera after version 6.

 

However when specified colors are overridden in Firefox and Netscape, most Javascript pop-up boxes and drop-down menus become unusable. Pop-up boxes gain a transparent background, superimposing the text of the box on the text of the page, and drop-down menus either become transparent or gain a dark-grey background.



Likewise IE 6 will not override background colors in the browser unless the same background color has also been selected in the system settings.

Description:
The objective of this technique is to ensure that users needing specific color combinations of text and background in order to read the main content of the page can select those colors while avoiding the problems detailed in the User Agent and Assistive Technology Support Notes section above.



When a web author refrains from specifying the colors of the text and background of the main content, it is possible, in most popular browsers, to change colors of unspecified areas without the need for the user to over-ride, so maintaining visual clues to navigation etc. Color is an important aid to recognising menu content when reading is difficult.



In order to meet this success criterion, the web author would design the page so that it works with browsers that have these controls, and the author does not override these controls.



Note that when a user overrides the foreground and background colors of all text on a page it may hide visual clues to the grouping and organization of the web page, making it much more difficult to understand and use.



With this technique the author avoids having to do any contrast measures in relation to the main content by simply not specifying the text color and not specifying the background color of this area.  As a result the colors of both are completely determined by the user agent.

Example 1 Description:
A Web page is designed using HTML. CSS is used to specify the text and background colors of all secondary content.  Neither the text color nor background of the main content is specified.  The user sets their own color preferences in the browser.  They can view the main content in colors and contrasts that work well for them.

Related Techniques:
G17
G18
G145
G148
G156

Test Procedure:
1.	Open the web page in a browser that can change colors.

2.	Change the text, link and background colors in the browser settings so they are different than those currently set in the browser and different to those specified in the secondary content.  NB Make sure that you do not select the option that tells the browser to ignore the colors specified in the page.

3.	Return to the page and check that it is displaying the main content in the new text, link and background colors.

4.	Check that the secondary content is still displaying in the specified colors and not in the browser selected colors.



Expected Result:
Numbers 3 and 4 are true.

Additional Notes:
I know it said that for General Techniques user agent issues should be left blank.  However I have included in here the same ones that are in G156, which had been added by yourselves when I pointed out the problems.  I hope you will leave them in this technique as well.



Related Techniques - In addition to those I've selected (five in total), I'd also like it linked to 'Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors.', which I'm about to submit.

No example 1 header was submitted!
No example 2 header was submitted!
No example 2 description was submitted!
No resource 1 title submitted!
No resource 1 URI submitted!
No resource 2 title submitted!
No resource 2 URI submitted!
No test file 1 was submitted!
No test file 1 pass/fail was submitted!
No test file 2 was submitted!
No test file 2 pass/fail was submitted!


------------------------------------------------

<technique id="UNKNOWN">
<short-name>Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content.</short-name>
<applies-to>
<guideline idref="visual-audio-contrast-visual-presentation" />
<success-criterion idref="UNKNOWN" />
</applies-to>

<applicability>
All technologies.
</applicability>
<ua_issues>
Most browsers allow the user to change the color settings to override Web author&#039;s CSS and HTML color schemes. This includes IE, all versions of Firefox, Mozilla, Netscape and Opera after version 6.

 

However when specified colors are overridden in Firefox and Netscape, most Javascript pop-up boxes and drop-down menus become unusable. Pop-up boxes gain a transparent background, superimposing the text of the box on the text of the page, and drop-down menus either become transparent or gain a dark-grey background.



Likewise IE 6 will not override background colors in the browser unless the same background color has also been selected in the system settings.
</ua_issues>
<description>
The objective of this technique is to ensure that users needing specific color combinations of text and background in order to read the main content of the page can select those colors while avoiding the problems detailed in the User Agent and Assistive Technology Support Notes section above.



When a web author refrains from specifying the colors of the text and background of the main content, it is possible, in most popular browsers, to change colors of unspecified areas without the need for the user to over-ride, so maintaining visual clues to navigation etc. Color is an important aid to recognising menu content when reading is difficult.



In order to meet this success criterion, the web author would design the page so that it works with browsers that have these controls, and the author does not override these controls.



Note that when a user overrides the foreground and background colors of all text on a page it may hide visual clues to the grouping and organization of the web page, making it much more difficult to understand and use.



With this technique the author avoids having to do any contrast measures in relation to the main content by simply not specifying the text color and not specifying the background color of this area.  As a result the colors of both are completely determined by the user agent.
</description>

<examples>
<ex_head_1>

</ex_head_1>
<ex_desc_1>
A Web page is designed using HTML. CSS is used to specify the text and background colors of all secondary content.  Neither the text color nor background of the main content is specified.  The user sets their own color preferences in the browser.  They can view the main content in colors and contrasts that work well for them.
</ex_desc_1>
<ex_head_2>

</ex_head_2>
<ex_desc_2>

</ex_desc_2>
</examples>

<resources>
<resources_title1>

</resources_title1>
<resource_uri1>

</resource_uri1>
<resources_title2>

</resources_title2>
<resource_uri2>

</resource_uri2>
</resources>

<related_techniques>
<related_technique>
G17
</related_technique>
<related_technique>
G18
</related_technique>
<related_technique>
G145
</related_technique>
<related_technique>
G148
</related_technique>
<related_technique>
G156
</related_technique>
</related_techniques>

<tests>
<procedure>
1.	Open the web page in a browser that can change colors.

2.	Change the text, link and background colors in the browser settings so they are different than those currently set in the browser and different to those specified in the secondary content.  NB Make sure that you do not select the option that tells the browser to ignore the colors specified in the page.

3.	Return to the page and check that it is displaying the main content in the new text, link and background colors.

4.	Check that the secondary content is still displaying in the specified colors and not in the browser selected colors.


</procedure>
<expected_result>
Numbers 3 and 4 are true.
</expected_result>
<test_file_1>

</test_file_1>
<pass_fail_1>

</pass_fail_1>
<test_file_2>

</test_file_2>
<pass_fail_2>

</pass_fail_2>
</tests>

</technique>

Additional Notes:

I know it said that for General Techniques user agent issues should be left blank.  However I have included in here the same ones that are in G156, which had been added by yourselves when I pointed out the problems.  I hope you will leave them in this technique as well.



Related Techniques - In addition to those I&#039;ve selected (five in total), I&#039;d also like it linked to &#039;Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors.&#039;, which I&#039;m about to submit.

Received on Thursday, 24 April 2008 20:16:56 UTC