 |
Accessible Design: Best Practices |
 |
|
|
||||
|
Cascading Style SheetsUsing Style Sheets for Consistency || Linked v Embedded Styles || Guidelines for Style Sheets || Using Relative Sizes || Color and
Links || Spacing and Positioning
Using Style Sheets for Consistency.
If used properly, Cascading Style Sheets (CSS) can help you create a uniform "look" for your site by defining font type, colors, and backgrounds site-wide. The design benefits of using Cascading Style Sheets include:
Linked v Embedded Styles.
Style sheets can be employed using either embedded styles, where the style definitions are inserted between the HEAD element on each page, or linked styles, where a CSS file is created and linked to the pages using those styles. Embedded Styles.Here is an example of how to create embedded styles:
Embedded styles look and work just like a linked style. However, it is more difficult to keep the site consistent, because changes to one style class must be changed on each page of the site. Also, embedded styles are more likely to override user preferences in the browser. Linked Styles.Using linked styles involves two steps. First, you must create your styles in a separate CSS file (designated by using the .css extension in your file name -- e.g., wacstyles.css, mystyles.css, prettytext.css). CSS files can be created using a wizard in your web editor (e.g. Dreamweaver or FrontPage) or you can create it in a plain text editor, like NotePad. The style definitions look the same as the embedded styles. p { Next, you must link the CSS file to each of your pages using this style. Let's say this file is called "mystyles.css." In order to link this style sheet to a particular page in your site, your HTML would look like this:
By using the link method, changes made to styles in the mystyles.css file will update all the linked pages in the site, without changing any of the code in those pages. This is particularly helpful when changing the color scheme of a site and helps insure a consistent look across pages. Linking via the At-Import Method.You can also link your style sheet using the At-Import Method. This method also involves using the STYLE tag in the document HEAD: This method is typically used by advanced web designers who want more nuanced control over which style sheets get imported by which browsers. You can explore a list including lots of ways to do @import hacks, with corresponding browser support Guidelines for Using Style Sheets.
Specifically covered within this guideline: 1. Use the CSS 'font' property instead of the HTML FONT element to control font styles. -- WCAG CSS Techniques #8 Text Formatting and Position. Incorrect method: CSS method: CSS Example: This text is colored using CSS. Rationale: Unlike CSS formatting the FONT element in HTML is more likely to override user-selected formatting in the browser. For instance, if the FONT element is used to set the size of text on a page, the user cannot use the magnification settings in the VIEW menus of either Internet Explorer or Netscape Navigator to increase the text size. 2. Do not use incorrect HTML elements for formatting (e.g., using BLOCKQUOTE to indent, rather than creating an indent style) -- WCAG CSS Techniques #8 Text Formatting and Position. Incorrect method: CSS method: CSS Example: This text is indented using CSS. Rationale: Special HTML elements were created to identify special text and help assistive technology fully render the meaning of the text. For instance, whenever text is surrounded by the BLOCKQUOTE tag, JAWS screen-reader identifies the text as a "quote." Consider then, how JAWS would render this text: <p> I want you to focus on the text below,
so I'm going to indent it: JAWS would read this text as:
If much of the text on the page is indented in this fashion, you can image how annoying this technique can become for users of assistive technology. 3. Use style sheets to style text rather than representing text in images.-- WCAG CSS Techniques #7 Text Instead of Images. Incorrect method: CSS method: CSS Example: This text appears larger and a different color using CSS. Rationale: Text represented in images cannot be enlarged using built-in magnification tools in most browsers. And, if image-text is magnified, it typically becomes pixilated and unreadable. CSS formatted text will transform gracefully, regardless of the users screen or window resolution. Using Relative Sizes.
The goal of CSS is to make pages that transform gracefully regardless of users screen-size, resolution, or magnification. When designers set font and element sizes to absolute values, text and elements on the page cannot not "resize" to fit the needs of the user. Relative sizes create a relational system of size. For instance, if Header 2 text is set to be bigger than paragraph text and Header 1 text is set to be bigger than Header 2 text, the user can set the paragraph text to whatever size (i.e., 12 point, 14 point, or 20 point) and both the Heading 1 and Heading 2 text will increase in relation to that size. In the same way, defining the menu section of a page to take up 30% of the page and content 70%, versus 150 pixel width menu and 650 pixel width content, insures that users with smaller screens and lower resolutions will still see a page that is primarily content. 1. Use the "em" unit to set font sizes. Named after the letter "M", the em unit has a long-standing tradition in typography where it has been used to measure horizontal widths. For example, the long dash often found in American texts (--) is known as "em-dash" since it historically has had the same width as the letter "M". Its narrower cousin (-), often found in European texts is similarly referred to as "en-dash". In CSS, the em unit is a general unit for measuring lengths, for example page margins and padding around elements. You can use it both horizontally and vertically. 1 em unit equates to a 10 point font. Here is an example of a style defined using em: H1 { font-size: 2em } For more information on using the em unit of measure, see W3C's The amazing em unit and other best practices. For an excellent explanation of the pitfalls and considerations when using ems, see "Big Baer Explains CSS Font-Size" from Bigbaer.com. 2. Use relative length units and percentages. CSS allows you to use relative units even in absolute positioning. Thus,
you may position an image to be offset by "3em" from the top
of its containing element. This is a fixed distance, but is relative to
the current font size, so it scales nicely. Color and Links.Most web browsers use different colors to identify visited links (links to pages the user has seen before) and unvisited links (links to pages the user has not seen before). The generally accepted standard typically displays unvisited links in blue and visited links in either purple or red. In most cases, it is best to use this standardized color scheme to identify links on your pages. When non-standard link colors are used, users lose the ability to quickly identify which parts of the site they have already seen and which parts they have yet to visit.
Use these CSS properties to specify colors:
Spacing and Positioning.Spacing and positioning continues to be a difficult probelm for those conscious of accessibility issues. Many users have developed strategies for adding spaces and indents, such as manually entering spaces ( ) or incorrectly using the BLOCKQUOTE tag, which create an acceptable visual result, but also makes for less-accessible content. Creating and applying appropriate CSS definitions can help avoid this problem. Use CSS properties to create space between elements, words, and letters:
Creating User-Friendly Style Sheets.
One of the accessibility advantages to using style sheets is the option for the user to either override your style sheet with his/her own or to turn-off style sheets altogether and render the page in settings established by the user in the browser. Thus, the user can turn off color, change the default color scheme to increase contrast, or even change the font type and size to a more readable setting. To insure your site can accommodate these user preferences, you need
to test your site both with and without style sheets. When style sheets
are removed, does all the text appear in the correct order on the page?
Does the page maintain its hierarchy with headings indicating the structure
of the document? Do the default colors interfere with the readability
of the text? Developers should pay special attention when using CSS to create content, such as background images, lists, or content properties and when using CSS for layout. It should also be noted that most of these CSS techniques are not yet fully supported by browser technology. Be sure to test any CSS2 techniques in multiple browsers and versions. CSS Guides and TutorialsWant to learn how to create and use Cascading Style Sheets? Check out these WAC recommended online tutorials and guides:
Once you have created your CSS, you can use the W3C's
CSS Validation Service to insure it meets WCAG standards.
|
|
Organizing and
Naming Your Site | Layout | Header
Information | Navigation | Color
| Style Sheets | Lists
| Images and Multimedia | Image Maps | Tables
| Forms | Frames | Scripts |
Timed Response | | View the entire tutorial
in HTML format. | |
For more good ideas for formatting your text,
see W3C's Quality Assurance article: "
