Text Styling Overview

Overview

One of the most important aspects of accessible design is using structural markup elements of HTML to represent the sections of a web page to create navigation and orientation landmarks. Structural markup is often ignored or misused by web authors who are unfamilar with accessible design and find they can acheive the graphical rendering they want in their designs through inline styling elements. This makes it more difficult for people with disabilities to navigate the content of a web page and restyle content to meet their perceptual needs. It also becomes harder for the developer to maintain websites and create new web pages since inline styling needs to be carefully added and maintained when web sites are updated. The larger the web site, the greater the chance the web developer will mistype or forget to add inline styling.

Benefit to People with Disabilities

  1. When structual HTML markup is used, it is easier for people with disabilities to navigate and orient the content of a web page.
  2. When CSS is used to style content it is easier to restyle content to meet perceptual needs.

Benefits to All Users

  1. Web pages that use CSS for styling will be more consistent and therefore more predictable to users.
  2. CSS-based web pages are compatible with a wider range of rendering technologies, including cell phones, Personal Digital Assistants and speech browsers.

Benefits to Developers

  1. Developers benefit from using external CSS style sheets rather than inline styling through the reduction of web page code and the ability to style content in new web pages automatically with CSS selectors. Styling changes made on one style sheet can affect all the pages that reference it, making styling changes much easier and more efficient.

Related Resources

  1. CSS Zen Garden
  2. CSS Max Designs
  3. WESTCIV: CSS Tutorial Resources

HTML Markup Details

font element
The font element is a deprecated (outdated) feature of HTML 4.0 and was orginally defined to provide inline styling changes to text content.
If the text content being styled by the font element is a section heading, then the heading elements (h1-h6) should be used in place of the font element. If the text content is a paragraph, sentence, phrase or word then CSS color, font-family and font-size properties should be used to achieve author styling preferences.
center element
The center element is a deprecated feature of HTML 4.0 and was orginally defined to center text content.
If the text content being styled by the center element is a section heading, then the heading elements (h1-h6) should be used to replace the center element. If the text content is not a heading but a paragraph, div or other block level elements with the CSS text-align property should be used to achieve text content centering.
u element
The u element is a deprecated feature of HTML 4.0 and was orginally defined to underline text.
If the text content being styled by the u element is a section heading, then the heading elements (h1-h6) should be used to replace the u element. If the text content is a paragraph, sentence, phrase or word, then the CSS text-decoration property with a value of underline should be used.
b element
The b element is a deprecated feature of HTML 4.0 and was orginally defined to bold text.
If the text content being styled by the b element is a section heading, then the heading elements (h1-h6) should be used to replace the b element. If the text content is a paragraph, sentence, phrase or word, then the CSS font-weight property with a value of bold should be used.
i element
The i element is a deprecated feature of HTML 4.0 and was orginally defined to italicize text.
If the text content being styled by the i element is a section heading, then the heading elements (h1-h6) should be used to replace the i element. If the text content is a paragraph, sentence, phrase or word, then the CSS font-style property with a value of italic should be used.
blink element
The blink element has never been a part of any W3C HTML specification, but is supported by many browsers and can be used to create a blinking effect on text. Blinking text should be not be used due to accessibility issues with people with visual impairments and photosenstive epilepsy.
marquee element
The marquee element has never been a part of any W3C HTML specification, but is supported by many browsers and can be used to create a scrolling text effect. Scrolling text should be not be used due to accessibility issues with people with visual impairments.

Related Accessibility Requirements

Illinois Information Technology Accessibility Standards
1.1 Use valid, standard web programming code.
1.2 Use appropriate markup to convey document structure.
2.2 Use relative sizes for fonts.
Section 508
none
W3C Web Content Accessibility Guidelines 2.0
1.3.1 Info and Relationships
W3C Web Content Accessibility Guidelines 1.0
3.3 Use style sheets to control layout and presentation.
3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values.
11.1 Use W3C technologies when they are available and appropriate for a task and use the latest versions when supported.
11.2 Avoid deprecated features of W3C technologies.