Lab 01 Practice: HTML & Accessibility Mistakes

Practice guide for identifying and fixing semantic structure errors.

Exam Practice Table

The following table identifies common errors in semantic HTML and accessibility, specifically focused on the requirements for Lab 01.

Common HTML structure and accessibility mistakes with corrections
UI Element / Issue Wrong HTML (with mistake) Correct UI Element Correct HTML
Two h1 tags on a single page 
<header><h1>Norman's Analysis</h1></header>
<main><h1>GOMS Analysis</h1></main>
 One h1 for the page title; h2 for main sections. 
<h1>Interaction Analysis</h1>
<h2>Norman's Analysis</h2>
<h2>GOMS Analysis</h2>
Missing alt attribute on images 
<img src="syringe-pump.png">
 Informative images must have descriptive alt text. 
<img src="syringe-pump.png" 
alt="Automatic syringe pump interface with increment buttons">
Improper Heading Hierarchy (Reversed) 
<h2>Norman's Analysis</h2>
<h1>First Step</h1>
 Headings must follow a logical numerical order. 
<h1>Norman's Analysis</h1>
<h2>First Step</h2>
Using div instead of Semantic Tags 
<div class="nav">...</div>
<div class="content">...</div>
 Use <nav> for menus and <main> for primary content. 
<nav>...</nav>
<main>...</main>
Vague Link Text 
To learn about GOMS, 
<a href="goms.html">click here</a>.
 Link text must describe the destination when read out of context. 
Read the 
<a href="goms.html">GOMS methodology overview</a>.
Missing scope in Table Headers 
<tr>
  <th>Model</th>
  <th>Time</th>
</tr>
 <th> requires scope="col" or scope="row". 
<tr>
  <th scope="col">Model</th>
  <th scope="col">Time</th>
</tr>
Broken Form Association 
<label>Name:</label>
<input type="text" id="user-name">
 Labels must use the for attribute to match the input id. 
<label for="user-name">Name:</label>
<input type="text" id="user-name">
Missing nav structure 
<nav>
  <a href="index.html">Home</a>
  <a href="cv.html">CV</a>
</nav>
 Navigation links should be structured as a list (ul > li). 
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="cv.html">CV</a></li>
  </ul>
</nav>