Best Practices for Page Structure

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

 

Script Best Practices

 

Common Page Structure Errors
View Error #1

Error #1: 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 #2

Error #2: Duplicate element IDs

In this example, both the paragraph and the span element have an id equal to "demo-text":

Title Here

Text here

HTML


 <div id="demo-box">

 <span id="demo-text">Title here</span>

 <p id="demo-text">Text here</p>

 </div>
View Error #3

In this example, CSS has been improperly used to create a set of columns

AboutAdmissionsAcademicsAthleticsUndergraduate StudentsGraduate Students

HTML


 <div class="menu-box">

 <span class="menu1">About</span>

 <span class="menu2">Admissions</span>

 <span class="item1">Academics</span>

 <span class="item2">Athletics</span>

 <span class="item4">Undergraduate Students</span>

 <span class="item3">Graduate Students</span>

 </div>

 

CSS


 .menu1 {
 position: absolute;
 top: 0;
 left: 10px;
font-family: sans-serif;
 font-size: 120%;
 color: #462767;
 background-color: white
}
.menu2 {
 position: absolute;
 top: 0;
 left: 80px;
 font-family: sans-serif;
 font-size: 120%;
 color: #462767;
 background-color: white
}
.item1 {
 position: absolute;
 top: 20px;
 left: 10px;
}
.item2 {
 position: absolute;
 top: 40px;
 left: 10px;
}
.item3 {
 position: absolute;
 top: 20px;
 left: 80px;
}
.item4 {
 position: absolute;
 top: 40px;
 left: 80px;
}
.menu-box {
 position: relative;
 margin-left: 10px;
 height: 100px;
}
View Error #4

Error #4: Identifying content by shape or location

In this example, the navigation instructions depend entirely on the distinction between left and right:

To go to next page, press the button to the right. To go back to previous page, press the button to the left

View Error #5

Error #5: Ambiguous page title

In this example, the title element does not identify the contents or purpose of the webpage:


 <title>Untitled Document</title>