General Techniques - Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors.

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

Technique ID: UNKNOWN
Short Name: Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors.
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 successfully understand the contents of the Web 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 any text and background it is possible, in most popular browsers, to change these colors without the need for the user to over-ride, so maintaining visual clues of different color borders. 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, including changing any border color to that of the text, making it much more difficult to understand and use.



Note that this technique may be more appropriate to web pages with a simple design, eg single column layout with horizontal navigation bars and few banners and/or features.  For more complex designs, including those using background colors to delineate areas of the page, "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 (future link)" may be used to permit the user to control the colors of the main text while retaining the visual structure of the Web page.



With this technique the author avoids having to do any contrast measures by simply not specifying the text color and not specifying the background color.  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 border colors around discrete areas of the page.  Neither the text color nor background is specified.  The user sets their own colors in the browser.  They can view the page 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.  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 page in the new text, link and background colors.

4.	Check that the border is still displaying in the specified color and not in the browser selected text color.

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 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.', which I've just submitted.



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 borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors.</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 successfully understand the contents of the Web 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 any text and background it is possible, in most popular browsers, to change these colors without the need for the user to over-ride, so maintaining visual clues of different color borders. 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, including changing any border color to that of the text, making it much more difficult to understand and use.



Note that this technique may be more appropriate to web pages with a simple design, eg single column layout with horizontal navigation bars and few banners and/or features.  For more complex designs, including those using background colors to delineate areas of the page, &quot;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 (future link)&quot; may be used to permit the user to control the colors of the main text while retaining the visual structure of the Web page.



With this technique the author avoids having to do any contrast measures by simply not specifying the text color and not specifying the background color.  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 border colors around discrete areas of the page.  Neither the text color nor background is specified.  The user sets their own colors in the browser.  They can view the page 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.  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 page in the new text, link and background colors.

4.	Check that the border is still displaying in the specified color and not in the browser selected text color.
</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 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.&#039;, which I&#039;ve just submitted.

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