Difference between revisions of "Web Accessibility:Presentation and Styles"
Jump to navigation
Jump to search
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{Web toc:Access}} | {{Web toc:Access}} | ||
| + | Styles is a mechanism for adding presentation attributes like font styles and size, color, positioning and other visual elements to a web page. Styles are associated with structural elements allowing each element to have its own set of visual attributes and position on the page. Since they are associated with the structural elements, styles do not affect the underlying semantic structure of the document. Styles can be specific to the page (internal), associated directly with an element (inline) or in an associated document called a Cascading Style Sheet (external). | ||
| + | |||
| + | '''Below you will find a list of recommended best practices that will make your web pages more accessible:''' | ||
| + | |||
| + | ---- | ||
| + | |||
*Use external styles sheets for presentation and minimize use inline or internal styles. Many browsers provide mechanisms to allow users to switch between style sheets letting the user set their own style. | *Use external styles sheets for presentation and minimize use inline or internal styles. Many browsers provide mechanisms to allow users to switch between style sheets letting the user set their own style. | ||
*Write the page in the correct reading order and then use <nowiki><div></nowiki> tags and CSS positioning to construct the physical layout of the web page. | *Write the page in the correct reading order and then use <nowiki><div></nowiki> tags and CSS positioning to construct the physical layout of the web page. | ||
*Avoid fixed font sizes like 12 points or 12 pixels as they cannot be magnified. Use relative sizes like <nowiki><font=3></nowiki>, <nowiki><font=120%></nowiki> or <nowiki><font=1.5 ems></nowiki>. Some browsers, however, do not support EMS values less then 1. | *Avoid fixed font sizes like 12 points or 12 pixels as they cannot be magnified. Use relative sizes like <nowiki><font=3></nowiki>, <nowiki><font=120%></nowiki> or <nowiki><font=1.5 ems></nowiki>. Some browsers, however, do not support EMS values less then 1. | ||
*Avoid using multiple font types or colors on one page as they can created a busy and cluttered appearance | *Avoid using multiple font types or colors on one page as they can created a busy and cluttered appearance | ||
| − | *Use relative sizes for container elements like tables, margins, <nowiki><div></nowiki>s etc. | + | *Use relative sizes for container elements like tables, margins, <nowiki><div></nowiki>'s etc. |
*Provide a good contrast between background and foreground colors | *Provide a good contrast between background and foreground colors | ||
*Do not use color only to convey meaning | *Do not use color only to convey meaning | ||
*Avoid blinking and moving text. Do not use <blink> or <marque> tags. | *Avoid blinking and moving text. Do not use <blink> or <marque> tags. | ||
| + | |||
| + | ---- | ||
| + | '''Resources''' | ||
| + | |||
| + | [http://www.nypl.org/styleguide/] NYPL Style Guide | ||
| + | |||
| + | [http://people.engr.ncsu.edu/jthurtea/articles/2006/csslayout.html] The Illuminating Web | ||
| + | |||
| + | [http://www.w3.org/MarkUp/Guide/] W3.org HTML Markup Guidelines | ||
| + | |||
| + | [http://www.w3.org/TR/REC-CSS2/] W3C CSS Guidelines | ||
Latest revision as of 12:38, 19 December 2006
Styles is a mechanism for adding presentation attributes like font styles and size, color, positioning and other visual elements to a web page. Styles are associated with structural elements allowing each element to have its own set of visual attributes and position on the page. Since they are associated with the structural elements, styles do not affect the underlying semantic structure of the document. Styles can be specific to the page (internal), associated directly with an element (inline) or in an associated document called a Cascading Style Sheet (external).
Below you will find a list of recommended best practices that will make your web pages more accessible:
- Use external styles sheets for presentation and minimize use inline or internal styles. Many browsers provide mechanisms to allow users to switch between style sheets letting the user set their own style.
- Write the page in the correct reading order and then use <div> tags and CSS positioning to construct the physical layout of the web page.
- Avoid fixed font sizes like 12 points or 12 pixels as they cannot be magnified. Use relative sizes like <font=3>, <font=120%> or <font=1.5 ems>. Some browsers, however, do not support EMS values less then 1.
- Avoid using multiple font types or colors on one page as they can created a busy and cluttered appearance
- Use relative sizes for container elements like tables, margins, <div>'s etc.
- Provide a good contrast between background and foreground colors
- Do not use color only to convey meaning
- Avoid blinking and moving text. Do not use <blink> or <marque> tags.
Resources
[1] NYPL Style Guide
[2] The Illuminating Web
[3] W3.org HTML Markup Guidelines
[4] W3C CSS Guidelines