1.1 |
Use "em" or % for properties that need to change
|
GL
1.3 Level 1 SC 1 , GL
4.2 Level 3 SC 2
|
S |
|
O |
I think a good idea, but user agents should allow resizing regardless what units used |
1.2 |
Use px for properties that do not need to change: height and width of
raster images, margins, borders, Tim Boland created a list of all CSS
2.1 properties that support length units (of both relative and absolute
values). Should we test all to determine accessibility issues related
to use of px, %, and em for each property? Issue 728. Is it ok to have
fixed width layout specified in pixels and text specified in ems? Issue
1013. Also, Issue 1020.
|
GL
1.3 Level 1 SC 1 , GL
4.2 Level 3 SC 2
|
S |
|
O |
Ibid |
2.1 |
Use :first-letter, :first-line, or span to select individual characters
or lines.
|
GL
1.3 Level 1 SC 1
|
S |
UA support issues
|
O |
Not sure this technique is required to fulfill guideline in any baseline |
2.2 |
Provide alternative presentations of attribute values (optional)
Related to text equivalents to reduce cognitive load?
|
GL
1.1 Level 1 SC 1
|
? |
UA support issues
|
O |
Nice to have but a UA responsibility |
3.1 |
Optimize presentation for a variety of devices by providing
media-specific style sheets Wording needs work
|
GL
4.1 Level 1 SC 1 , GL
1.3 Level 1 SC 1
|
S |
|
S# |
|
4.1 |
Use style sheets to create borders around groups of content.
|
GL
1.3 Level 1 SC 1
|
S |
|
O |
More of a good idea than a technique |
4.2 |
Use 'margin', 'margin-top', 'margin-right', 'margin-bottom',
'margin-left' to create space on four sides of an element's content.
|
GL
1.3 Level 1 SC 1
|
S |
|
S |
Should follow this technique, but it's an "instead of doing something evil in HTML" technique |
5.1 |
Use 'direction' and 'unicode-bidi' to specify direction of text.
|
GL
3.1 Level 1 SC 1
|
S |
UA support issues
|
S |
|
5.2 |
Use 'text-indent', 'text-align', 'word-spacing', 'font-stretch' to
control spacing. Use 'text-align: center' instead of the deprecated
html:center element.
|
GL
1.3 Level 1 SC 1 , GL
3.2 Level 2 SC 1 , GL
4.2 Level 3 SC 2
|
S |
|
S |
Also an "instead of doing something evil in HTML" |
5.3 |
Use 'float', 'position', 'top', 'right', 'bottom', 'left' to control
position.
|
GL
1.3 Level 1 SC 1
|
S |
|
O |
There are various ways to position stuff. Sounds like presenting ways to work around needing HTML layout tables, but unsure if we need to repeat the CSS Positioning chapter here. |
5.4 |
Placeholder
|
GL
1.1 Level 1 SC 1
|
S |
UA and AT support issues with diisplay:none and visibility:hidden
|
O |
|
5.5 |
Use CSS to hide labels for form controls which are not visually
necessary
|
GL
4.2 Level 2 SC 1
|
S |
|
O |
This is a repair technique for bad design and again in the category of "just a suggestion". The real technique is "...but always provide a label". |
6.1 |
Provide a text equivalent for important images generated by style
sheets via the 'background-image', 'list-style', or 'content'
properties. Is the intent of this to say, "if something important is
included via css, either do not include via CSS or describe in the HTML
somewhere?" However, this conflicts with "generate content to help
identify structure."
|
GL
1.1 Level 1 SC 1
|
S |
open issues
|
S# |
|
6.2 |
Use :before and :after to provide additional structural information
|
GL
1.3 Level 1 SC 1
|
S |
UA support issues
|
O |
|
6.3 |
Use CSS, not images, to change list bullets.
|
GL
1.1 Level 1 SC 1
|
S |
|
S |
Not exactly a CSS technique but saying "don't mangle your HTML" |
7.1 |
Use 'color,' 'background-color,' 'border-color,' 'outline-color,' and
dynamic pseudo-classes to specify colors
|
GL
1.3 Level 1 SC 2
|
S |
|
O |
Not clear this technique fulfils an SC. It's a "how to use CSS". |
7.2 |
For best user agent support use a numerical hex value to specify
colors.
|
GL
1.3 Level 1 SC 1
|
S |
|
O |
|
7.3 |
Ensure that foreground and background colors contrast well.
|
GL
1.4 Level 2 SC 1
|
S |
but not really CSS specific
|
S |
This should be a general technique |
7.4 |
If specifying a foreground color, always specify a background color as
well (and vice versa).
|
GL
1.4 Level 1 SC 1
|
S |
open issues about UA override
|
S |
|
8.1 |
Always specify a fallback font.
|
GL
1.3 Level 1 SC 1 , GL
1.4 Level 1 SC 1
|
S |
open issues- does this affect accessibility
|
S |
|
8.2 |
Use font-family, font-size, font-size-adjust, font-stretch, font-style,
font-variant, and font-weight to control font characteristics.
|
GL
1.3 Level 1 SC 2 Level 1 SC 3 , GL
1.4 Level 1 SC 1
|
S |
|
O |
As opposed to other methods of achieving those effects |
8.3 |
Placeholder (specifying font sizes)
|
GL
1.1 Level 1 SC 1
|
S |
|
O |
(About font size) UA should handle |
9.1 |
Use style sheets to style text rather than creating images of text.
|
GL
1.3 Level 1 SC 3 Level 1 SC 2 Level 1 SC 1 , GL
1.4 Level 1 SC 1
|
S |
|
S |
|
9.2 |
Make images of text accessible using background and positioning
|
GL
1.3 Level 1 SC 3 Level 1 SC 2 Level 1 SC 1 , GL
1.4 Level 1 SC 1
|
S |
|
O |
This seems like a way of getting around a way of getting around a problem. |
9.3 |
Use text-indent to indent text.
|
GL
1.3 Level 1 SC 3 Level 1 SC 2 Level 1 SC 1 , GL
1.4 Level 1 SC 1 , GL
3.2 Level 2 SC 1 , GL
4.2 Level 3 SC 2
|
S |
|
S |
CSS instruction, don't mangle HTML. Unsure that this relates to all the SC referenced. |
9.4 |
Use letter-spacing, word-spacing, and white-space to manage space
between letters, words, and other white space
|
GL
1.1 Level 1 SC 1
|
S |
|
S |
CSS instruction, don't mangle HTML. |
9.5 |
Use 'text-transform' to change case
|
GL
1.3 Level 1 SC 2
|
S |
|
O |
CSS instruction, don't mangle text. Don't see as relevant to referenced GL. |
9.6 |
Create shadow effects with 'text-shadow'
|
GL
1.1 Level 1 SC 1
|
S |
|
O |
CSS instruction, don't mangle text. Don't see as relevant to referenced GL. |
9.7 |
Underline, overline, or blink with 'text-decoration'
|
GL
2.2 Level 2 SC 1
|
S# |
use with JS to turn off but limited UA support
|
O |
CSS instruction, don't mangle text. Don't see as relevant to referenced GL. |
10.1 |
Use 'empty-cells' to display empty table cells
|
GL
4.1 Level 3 SC 1
|
S |
UA support issues?
|
O |
CSS instruction, don't mangle text. Don't see as relevant to referenced GL. |
11.1 |
Use style sheets to outline groups of content.
|
GL
1.3 Level 1 SC 1
|
S
|
UA support issues
|
O |
|
12.1 |
Use ACSS or SSML to create auditory presentations
|
GL
1.4 Level 1 SC 1
|
O? |
|
S |
|
13.1 |
Use structural markup and document order to design content that makes
sense when CSS is not applied
|
GL
1.3 Level 1 SC 1
|
O |
although certainly a best practice
|
S |
|
13.2 |
Placeholder( scripting and style sheets)
|
GL
1.1 Level 1 SC 1
|
? |
|
S# |
|
13.3 |
Placeholder(conveying symantics via presentation)
|
GL
1.1 Level 1 SC 1
|
? |
|
S# |
|