ARISE AFRICA NETWORK VOCATIONAL COURSE (AAN)

Learning Objectives

• Use lists (ordered/unordered), definition lists and nested lists correctly for content structure.
• Build accessible and semantic tables for tabular data (thead, tbody, caption, scope).
• Create HTML forms with appropriate input types, labels, validation attributes and accessible practices.
• Handle form data in the browser (prevent default, read values) and simulate submissions offline.
• Understand when to use lists, tables and forms, and common anti-patterns.

Key Terms & Definitions

Detailed Theory — Lists, Tables & Forms (conceptual, examples, and best practices)

3.1 When to use lists vs tables

Use lists for sequences or collections of items (navigation menus, bullet points). Use tables only for true tabular data — information that belongs in rows and columns (financial data, schedules).

3.2 Ordered and unordered lists

Ordered lists (<ol>) are used for sequences where order matters (instructions). Unordered lists (<ul>) are for collections without implicit order. For definitions, use <dl>.

<ol>
  <li>Install software</li>
  <li>Create project folder</li>
</ol>

<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

3.3 Lists accessibility tips

Keep list items concise. Avoid using lists for layout-only purposes. Screen readers announce lists and item counts, which helps navigation.

3.4 Tables — structure and semantics

A well-formed table includes a <caption>, a header row (<thead> with <th>), and a body (<tbody> with <td> cells). Provide scope="col" or scope="row" on headers when helpful.

<table>
  <caption>Monthly Sales</caption>
  <thead><tr><th scope="col">Item</th><th scope="col">Qty</th></tr></thead>
  <tbody>
    <tr><td>Apples</td><td>120</td></tr>
  </tbody>
</table>

3.5 Tables: when not to use them

Avoid using tables for page layout. Tables can be hard to read on mobile if not made responsive. For layout use CSS grid or flexbox instead.

3.6 Forms — anatomy and input types

Forms are composed of controls with labels. Use the correct input type to leverage built-in validation and mobile keyboards:

3.7 Labels, ids and accessibility

Always label inputs. Use <label for="id"> to explicitly connect text with a control. This increases click targets and helps screen readers.

<label for="email">Email</label>
<input id="email" name="email" type="email" required />

3.8 Client-side validation and patterns

HTML5 provides simple validation via attributes like required, min, max, and pattern. Custom validation can be added with JavaScript for better UX.

<input type="text" pattern="[A-Za-z ]+" title="Letters and spaces only" />

3.9 Handling form submission offline

For this course we will handle forms with JavaScript: prevent the default submission, serialize values, and show a success message or store locally (localStorage).

Interactive Playground — Forms & Table Demo

Edit the HTML on the left to change the form or table. Press Run to preview and test validation.

Practical Labs — Step-by-step

Lab 1 — Create an accessible contact form

1. Create contact.html with a form that collects name, email, phone and a short message.
2. Use label for attributes and add required where necessary.
3. Add a fieldset grouping for contact preferences with a legend.
4. Implement simple JS to prevent default form submission and append values to a table below the form (simulate storage).

Lab 2 — Build a product table with sorting

1. Create products.html and add a table with columns: Product, Category, Price.
2. Use <thead> and <tbody>, and add a caption describing the table.
3. Add simple JavaScript to sort rows by price (ascending/descending) when clicking the Price header.

Lab 3 — Form validation & UX

1. Enhance the contact form to show inline validation messages (e.g., "Please enter a valid email").
2. Use input.setCustomValidity() to present custom messages, and clear them when corrected.

Exercises (for mastery)

1. Create a multi-step form (two pages) that saves the first step in localStorage and completes submission on the second.
2. Design a responsive table: on narrow screens collapse rows into card-style displays using CSS and visually-hidden headers for accessibility.
3. Research and implement ARIA attributes for form error descriptions (aria-describedby).