Many tags in HTML were developed not to assist formatting but to provide information on the structural hierarchy of a document. In order to facilitate accessibility as well as standards, it is best to use the tags for the intended purpose in the information hierarchy rather than for pure formatting purposes. In many cases, this will make your document easier to edit as well.
Use the H1, H2,...H6 tags as indicators of information hierarchy within a document, not just as formatting elements. Screen readers in particular may just scan a page for appropriate H1, H2 and H3 elements. See Header examples below.
If you need to indent text, it is generally preferable to use the BLOCKQUOTE tag rather than a UL unordered list tag. The UL tag should be reserved for true lists containing LI elements.
Use the P paragraph tag to separate paragraphs instead of multiple breaks (e.g. BR BR ). This encloses blocks of text within their own structural elements. Some screen readers are able to jump from P to P but not BR to BR.
Experts recommend using cascading style sheets for specifying font color, font-size, font-face and backgrounds (versus the FONT tag). This allows a user with color vision or low vision to override a problematic stylesheet with one that they prefer.
Use the H tags to mark document headers instead of changing FONT sizes.
In this example, the <font size="+1" color="#000066" (navy) > and <b > tags have been used to create large sub headings.
Topic 1
Content
Topic 2
Content
A screen reader set to a scanning mode would not list these as topics.In addition the code contains more formatting tags than needed.
<p > <font size="+1" color="#000066" > <b > Topic
1 </b > </font > </p >
In this example the H2 tag has been used and has been styled so that it is automatically navy.
Content
Content
A screen reader set to a scanning mode would list "Topic 1" then "Topic 2"
h2 {color: #000066}
...
< body >
< h2 > Topic 1 </h2 >
Do not use the H tags just to format text to a larger size.
In this example, the H1 tag is used to increase font size in the table cells. The screen reader in scanning mode will read all the H1 cells out of context.
| Vader | Luke | Obi-Wan |
|---|---|---|
| Strong technical skills, but too quick to use them in an aggressive manner. Counseling on family issues may be needed. | Technical skills still weak, but has excellent communication and relationship skills. May need to develop assertiveness. | Strongly improved management and mentoring skills. Has clearly learned much from previous mistakes. |
A screen reader scanning H1 tags would read Vader Luke Obi-Wan
Site Menu:
Home Page/Main Menu
| Section 508 Guidelines
| Quick Checklist
| Details by Tag
| Links
| I.T.S. Seminar Page
| Sitemap
©1999-2006 Pennsylvania State University.
This Web page is hosted by (by Teaching and Learning with Technology, a unit of Information Technology Services. Please contact the Webmaster if you have any questions.