Best Practices for Web Writing

Click on a link to learn more about the WCAG 2.0 AA Standards for that topic.

 

General Best Practices

 

HTML Best Practices

 

CSS Best Practices

 

Common Web Writing Errors
View Error #1

Error #1: Missing heading tags

In this example, formatting, rather than semantic markup (like "h1" and "h2"), has been used to distinguish the headings from the content. In this case, a screen reader would not be able to provide a list of headings as a table of contents for the page:

Heading #1

Content Section #1

Heading #2

Content Section #2

 

HTML

<p class="header"><strong>Heading #1</strong></p>
<p>Content Section #1</p>
<p class="header"><strong>Heading #2</strong></p>
<p>Content Section #2</p>

 

CSS

.header {
font-size: 1.2em;
color: #46166b;
}

View Error #2

Error #2: Use of headers to achieve visual results, not structure hierarchy

In this example, h4 tags have been used to make the center line stand out:

Learn more by writing to us at:

1400 Washington Ave., Albany, NY 12222

And we'll send you the complete informational packet

HTML

 <p>Learn more by writing to us at:</p>

<h4>1400 Washington Ave., Albany, NY 12222</h4>

<p>And we'll send you the complete informational packet</p>
View Error #3

Error #3: Ambiguous/repetitive link text

In this example, a screen reader user navigating around the page by tabbing through links would simply hear "Click here, click here, click here" etc.:

 

  • Click here for more information about program costs and fees
  • Click here to learn more about your semester abroad
  • Click here to browse other study abroad programs
View Error #4

Error #4: Creating links that are not visually evident without color vision

In this example, the link is not underlined or bold, and is only distinguishable from the rest of the text because of its purple color:

Learn more about campus activities by visiting the Campus Center.

HTML

<span id="demo-link">Learn more about campus activities by <a href="https://www.albany.edu/campuscenter/">visiting the Campus Center</a>.</span>
 

CSS

#demo-link a { text-decoration: none; color: #462767; }