Download Coding Conventions Sec. 508 Compliant HTML

4/27/2009
Page 1
Sec. 508 Compliant HTML
Coding Conventions
I. Introduction
To be ADA Sec. 508 compliant, there are certain required coding conventions to be followed when
creating and updating your html files. A discussion of these conventions follows:
II. Page Title
At the top of the file you’ll have a title tag:
<title>Center for Human Resources</title>
The template was designed with the title tag set to “Page Title,” – a note for you to remember to
insert the title of the page between the title open and end tag; i.e.
Template: <title>Page Title</title>
Set to…
<title>Staff / Contacts</title>
<title>Links</title>
<title>Income Protection Benefits</title>
Remember, a page title is not the file name; i.e., index.htm is a file name for page titled “CHR
Home.”
III. Primary vs. Secondary Pages
Primary Pages
The main page, “CHR Home” and main page for each Service Area: “Benefits, Director’s Office,
Employment, HRIS, Payroll, Training & Professional Development, and Workers’ Compensation”
are your primary pages. These pages will have page headers, “Center for Human Resources,” as
the first header <H1> and <H2> set to the Service Area names. For example:
<H1>Center for Human Resources</H1>
<H2>Benefits</H2>.
The example above is the Benefits home page, where the file name is index.htm and Page Title is
Benefits. The header bar will have the first header of Center for Human Resources and the
second header Benefits.
Below this area is a bread crumbs trail with links to:
Business and Financial Affairs > Administration > Center for Human Resources.>
Finally, under the bread crumb trail is the marquee or message ticker.
Secondary Pages
Any page linked to the home page is considered a secondary page. Different formatting rules
apply to it. An example is the Benefits, Staff / Contact page. The top header should be “Benefits”
for the Service Area and “Staff / Contacts” for the secondary page name. In addition, the page title
should also be “Staff / Contacts.” Remember the file name is staff.htm, but the page title is “Staff /
Contents.” The html code follows:
<title>Staff / Contacts</title>
<H1>Benefits</H1>
<H2>Staff / Contacts<H2>
ADACompliantHTLM.doc
Prepared by University Computer Operations
4/27/2009
Page 2
Below the header is the bread crumbs trail. In this case you will need to add a link back to the
calling page. For example, the Benefits page has a link to Staff / Contacts. Therefore, we must
include a link to the Benefits page, or calling page in the bread crumbs trail for the secondary
page, Staff Contacts. In this example, the bread crumb should be:
Business and Financial Affairs > Administration > Center for Human Resources >
Benefits >
Secondary pages do not have the marquee or message ticker. When building new secondary
pages from the template, remember to delete the ticker. Search for the marquee tag and delete:
<marquee scrollamount="4" style="font-family: Verdana; font-size: 10px; font-weight:bold"
scrolldelay="73">Please Visit Us Again!&nbsp; We Are Always Happy To
Help.</marquee>
The body of the page should begin with an <H3> tag if required. Recall in the header we have
<H1> followed by <H2>. For people with disabilities, an example may be someone with a broken
who cannot use the mouse to advance through the page; using header tags allows the disabled
person to hit the “tab” key to advance the cursor to the next header tag.
This is especially important to blind people, who use screen-reader technology. To advance to the
next page section, they will hit the “tab” key, without suffering the screen reader, which will readaloud every sentence on that page.
IV. Format Pages using CSS Classes not Tables
An important rule for accessibility is to apply all page-formatting with CSS properties and remove
all formatting from the page content (text). An example is two column texts. Don’t format the text
using a two-columned table embedded in your html. Tables are used to display data, not to be
used to format the page. Rather use CSS classes to define two columns and apply it to your text.
An example is:
<div id="columnone">
<ul>
<li>Emotional wellness</li>
<li>Marital/relationship issues</li>
<li>Family issues</li>
<li>Communication skills</li>
</ul>
</div>
<div id="colunmtwo">
<ul>
<li>Stress management</li>
<li>Alcohol and drug issues</li>
<li>Work-related issues</li>
<li>Grief issues</li>
</ul>
</div>
<div id="reset">
ADACompliantHTLM.doc
Prepared by University Computer Operations
4/27/2009
Page 3
V. Editing Conventions
So that Web pages of all departments of Business and Financial Affairs have a consistent look
and feel, we must follow the SDSU Editorial Style Guide instructions. Some common errors
follow:
1. Hide email addresses by setting the e-mail name to “E-mail” followed by the e-mail address.
2. PDF files must have the pdf icon and link to the Acrobat Reader Web page following it. This
ensures that someone without Acrobat installed on their computer will be directed to a site
where they can download it, in order to open the pdf-formatted file.
3. Phone numbers should start with the area code followed by a dash. Do not enclose the area
code within parenthesis.
4. Do not apply CSS classes to normal paragraphs, ordered lists, and unordered lists. Do use
CSS classes to format emphasis. For example:
<p> The Benefits staff in Human Resources provides information and consultation on the
various benefits options available to San Diego State University’s faculty and staff.</p>
<p>If you have a <span class=”textitalics”>work-related</span> injury or illness please
see the Workers’ Compensation Web site for information.</p>
5. The end of a sentence period should be followed by one blank space, not two. Two blank
spaces following a sentence put empty white space between sentences. Let the CSS class
rules control the use of white space in paragraphs for you.
6. Never capitalize the word university when used by itself. For example, “I currently attend the
university.” Do capitalize university when referring to San Diego State. For example, ”I attend
San Diego State University.”
7. Don’t capitalize the word state when used by itself. For example, “The state shall increase
revenue through tax increases.” Do capitalize state when used as a proper noun. For
example, “San Diego State University,” and “State of California.”
8. Capitalize the name of a department when used as a proper name. For example, “Contact
the Workers’ Compensation department, if you are injured on the job.”
9. Never use the phrase him/her or he/she. Always use the plural noun, they or their.
10. Room should be capitalized when followed by a room number. For example, “ESC 4th Floor
Room 406.”
11. Always capitalize the word, “Web,” and in “Web site.”
12. When referring to hyperlinks in your text, never use “click here.” To a blind person, here
means nothing. Try to use a descriptive title in your hyperlinks instead, “See, The Center for
Human Resources Web site.”
13. When applying global changes to a document’s structure; i.e., rename “Forms / Documents”
to “Documents / Forms” and re-ordering the alphabetized left navigation bar, main section,
found on every page -- first make the change to the template, apply the template to every
page, and edit the navigation page as required.
VI. AccVerify
Part of your Web development methodology should be to check your pages for Sec. 508
compliance before posting them to any SDSU Web server. AccVerify is a program which will scan
your htlm page, following a set of Sec. 508 compliant checkpoints. If errors are found, audit
reports will display showing the page, line number, and column number where the error was
found, followed by an error message and information on correcting the error.
If you do not have AccVerify, obtain your free copy from the TNS Help Desk along with
instructions for installing it. You might also review SDSU’s accessibility site for more information.
ADACompliantHTLM.doc
Prepared by University Computer Operations
4/27/2009
Page 4
References Cited
SDSU Accessibility and Information Resources http://access.sdsu.edu/.
SDSU Editorial Style Guide http://bfa.sdsu.edu/editorial/.
ADACompliantHTLM.doc
Prepared by University Computer Operations