Since text is also common among webpages, it is imperative to assure the textual elements are accessible. Properly-formatted text is easier to read and conveys information better; thus improving the entire website by making the textual elements accessible.
The advent of "what you see is what you get" (WYSIWYG) web authoring tools such as Microsoft FrontPage and Macromedia Dreamweaver help make HTML authoring as easy as working with a word processor like Word or WordPerfect. The advantage is that these tools often "hide" the details of HTML tags and the workings of creating webpages. But, the disadvantage is that these tools often create non-accessible HTML.
To make textual elements accessible, you need an understanding of how to structure documents using header tags ("H1", "H2", etc.) and how to work with style sheets.
By following proper guidelines in working with textual elements, web documents are formatted to provide increased flexibility, the document's content separated from its presentation. This allows users to apply their own preferences; thus, making these documents more accessible to their individual needs.
In order to make textual elements like paragraphs, headers, and other text accessible, it is imperative that you understand some of the options available to you in formatting text. Most likely, you have worked with visual HTML editors that allow you to format text, applying various fonts, colors and other common elements to your text; this is a quick way of creating good-looking webpages, but the results are typically not accessible.
To make textual elements fully accessible, you must separate the formatting (i.e. the "look and feel") of the text from the content of the text (what is "being said"). The overall goal is to preserve your desired look and feel of the fonts while still allowing for locally-defined styles and preferences to override your formatting. This is essential since you do not necessarily know the needs and preferences of the user of your webpage; thus, if the user has created custom styles, the user's style should prevail.
Before you can properly format an HTML document, you must have an understanding of cascading style sheets.
A cascading style sheet, which is commonly referred to as CSS, specifies how the elements of an webpage are displayed. Cascading style sheets separate the style (or look and feel) of the document from the structure (or the content and ordering of information).
While certain fonts, colors, and text sizes (or styles) may be desired by the developer of a webpage, it is vital to allow a user's defined viewing preferences (or personalized style sheet) to override. For example, if a user with a visual impairment has defined a style sheet that increases the font size for the text of a webpage, it is vital to honor that preference. For this user, it is more important that the text be readable than display with the color or font desired by the developer of a webpage.
and CSS Techniques for Web
Content Accessibility Guidelines .
To allow for user preference and promote cost-time savings in web management, the desired styles should be defined externally in a separate file rather than "hard-code" formatted in the webpage. Another benefit of having external styles is that all webpages can reference one file and use the same styles; thus, subsequent changes can be made in one place and will take place in all webpages (vs. editing one page at a time).
The file for a cascading style sheet ends with a ".css"
and holds all the styles with their designated values. For an external style
sheet to be applied to a webpage, a link to the style sheet must be placed between
the <head> start tag and the </head> end
tag of the webpage; this "head" section is located after the <html>
start tag and before the <body> start tag.
<html>
<head>
<title>Document Title</title>
<link href="my_style_sheet.css" rel="stylesheet" type="text/css">
</head>
<body>
Content goes here ...
In the past, a useful way of defining the "look and feel" for the
elements of a web document was to "hard-code" the formatting. For
example, the <font> tag was commonly used to specify a font-size,
type, and color for text. If you wanted some text to be red in the font type
of "Futura Extra Bold" at a 24-point size, the code would look like
this:
HTML
CSS
<font> tag<font face="Futura Extra Bold" size="24" color="red"><p>This
is some sample text</p></font>
However, "hard-code" formatting such as the <font> tag, does not allow a user's defined viewing preferences (or personalized style sheet) to prevail and is non-compliant with the Web Content Accessibility Guidelines. Hence, to be accessible, styles should be defined in an external style sheet by the HTML element or with a specialized name that relates to how or where the style will be used.
.
font-size:200%;
color: rgb(255,0,0); font-family:Futura Extra Bold; background-color: #ffffff;
. STYLE_NAME { ATTRIBUTE1: value; ATTRIBUTE2: value ; }
<font> tag:p {font-size: 200%; color: rgb(255,0,0); font-family:Futura Extra Bold;
background-color: #ffffff; }
This is some sample text
Relative sizing is based on percentages while fixed sizing is set for a specific value (i.e. 15px). Relative sizing, especially for font-size, should be used so the webpage can correctly display in different screen sizes and for various viewing preferences. In this example, whether the user is working on a PDA or laptop, the size of the text within the paragraph will adjust accordingly.
The value for color of a style can be represented by words (i.e. red) , 6-digit
hexadecimal value (i.e. #000000 for black), or RGB value (i.e.
rgb(255,0,0)). The words for colors have variable support in different
Web browsers and thus, should not be used. Rather, it is best to use the 6-digit
hexadecimal value or the RGB value in which the color information is defined
for each color with respect to its red, green, and blue components. In the RGB
value, the first value represents the red (0-255), the second value represents
the green (0-255), and the third value represents the blue (0-255). The numeral
0 represents none of the color, whereas 255 represents 100% of the color. For
example, red, is rgb(255,0,0); green is rgb(0,255,0);
blue is rgb(0,0,255), and a pastel purple ( half tones of red and
blue) would be rgb(128,0,128).
.notetext (could
apply to a special note on a webpage).text-align:center;
color: #000000; font-weight: bold; background-color: #efefef;. .notetext { text-align:center; color: #000000; font-weight: bold; background-color:
#efefef;}
"class" within the HTML element to apply
the style to the whole element. <p class="notetext">Be sure to complete
the assignment before class!</p>.<span> tag and "class"
to apply the style to specific text or an instance. <p>Be sure to <span class="notetext">complete
the assignment</span> before class!</p>.<div> tag and "class"
to apply to multiple text or an area. <div class="notetext"><p>Homework:
Read Chapter 1</p><p>Be sure to complete the assignment before
class!<p><div>."class"
for a paragraph:Be sure to complete the assignment before coming to class!
<span>
tag to some text in a paragraph:Be sure to complete the assignment before coming to class!
<div>
tag to two paragraphs:Homework: Read Chapter 1
Be sure to complete the assignment before coming to class!
.The next page presents information on textual elements within HTML.
College of Architecture (COA)
Fax: 404-894-9320
Phone: 404-894-4960 (v/tty)
User Agreement
Previous Page
