Capstone: Accessibility Audit

An accessibility audit is a structured review of a page against a set of requirements. It is not a tool scan — automated tools catch about 30% of accessibility issues. The rest require you to read the HTML, navigate with a keyboard, and think about how a screen reader user would experience each part of the page.

This lesson walks through a complete audit of the Summit Trail Outfitters site using every technique you have learned in Module 10.

Why audit, not just build

Even when you build correctly, it is easy to miss an unlabeled input, an image without alt, or an <h4> that skips <h3>. An audit is the habit that catches those gaps before users do.

Professional accessibility reviews use the Web Content Accessibility Guidelines (WCAG) as a reference. At this level, you are targeting WCAG 2.1 Level AA compliance for the specific areas covered in this module.

The audit checklist

Use this checklist on every page of the Summit Trail Outfitters site.

Document structure

<!DOCTYPE html> is present
<html lang="en"> is on the root element
<meta charset="UTF-8"> is the first element in <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> is present
<title> is present, descriptive, and unique to this page

Heading hierarchy

Exactly one <h1> per page
No heading levels are skipped (h1 → h2 → h3, no jumps)
All headings describe the content that follows them
No heading is used for visual styling

Landmark structure

<header> wraps the site header
<nav> wraps navigation menus; multiple <nav> elements have aria-label
<main> appears exactly once and contains the page’s primary content
<footer> wraps the site footer
<aside> is used for sidebar or complementary content where present
<section> elements with headings serve as named regions

Images

Every <img> has an alt attribute
Informative images have descriptive alt text (not “image” or empty)
Decorative images have alt=""
Images inside links have alt text describing the link destination

Forms

Every <input>, <textarea>, and <select> has an associated <label>
Labels are connected via for/id or by wrapping
Radio buttons and checkboxes are inside <fieldset> with <legend>
No input relies on placeholder as its only label
Submit controls are <button type="submit"> with a clear label

ARIA

ARIA is only used where native HTML is insufficient
Multiple <nav> elements have distinct aria-label values
Icon-only buttons have aria-label
Decorative icons or SVGs have aria-hidden="true"
No role="button" on non-button elements

All interactive elements (links, buttons, inputs) are reachable by Tab
No interactive content is only accessible by mouse
Focus order follows a logical reading sequence

Page-by-page review

Work through each page of the Summit Trail Outfitters site.

index.html — Homepage

The homepage has the most content to check: hero section, tour previews, testimonials, newsletter form.

Heading outline: h1 (hero) → h2 (Popular Tours, Who We Are, What Our Guests Say, Stay in the Loop) → h3 (tour names)
Newsletter form: one email input with a label, one submit button
Tour preview images: descriptive alt text for each trail photo
Logo link: alt text that identifies the site name

tours.html — Tours

Heading outline: h1 (Our Tours) → h2 (each tour category) → h3 (individual tour names)
Tour images: each tour photo has alt text describing terrain and activity
No form on this page unless there is a “Book” control

about.html — About

Heading outline: h1 → h2 sections (story, guides, values)
Team member photos: alt text includes person’s name if not already in caption text

blog.html — Blog Index (if present)

Heading outline: h1 → h2 per article preview
Preview images: alt text describing the article topic, not just “article image”

blog-article.html — Blog Article

Heading outline: h1 (article title) → h2 (section headings within article)
<article> element wraps the article content
<aside> is inside <main> but outside <article>
<header> and <footer> inside <article> are article-level, not page-level

contact.html — Contact

Heading outline: h1 → h2 (form section)
Contact form: every input labeled, radio/checkbox groups in <fieldset>
No placeholder-only fields

After reviewing the HTML, do a keyboard navigation pass on each page:

Press Tab from the top of the page. Focus should move to the first interactive element (likely the logo link or first nav link).
Continue pressing Tab. Every link, button, and form input should receive focus in a logical order — top to bottom, left to right.
Press Enter on a link. The page should navigate.
Tab to a form input. Press Tab to move between fields. Press Enter or Space on the submit button.

If any interactive element is unreachable by keyboard, find out why. Common causes: display: none without a visible trigger, pointer-events: none, or an element that is not actually interactive HTML.

Common issues to fix

If your audit reveals problems, here are the most common and how to resolve them:

Issue	Fix
Input with no label	Add `<label for="id">` and matching `id` on input
Image with no `alt`	Add `alt` attribute (descriptive or empty)
`<h4>` skipping `<h3>`	Change `<h4>` to `<h3>`
`<p>` used as heading	Replace with appropriate `<h2>` or `<h3>`
Two `<nav>` elements, no labels	Add `aria-label="Primary"` and `aria-label="Footer"`
`<div>` used as a page region	Replace with `<header>`, `<main>`, `<section>`, etc.
Radio group without `<fieldset>`	Wrap in `<fieldset>` and add `<legend>`

Module 10 Recap

Over eight lessons you have:

Defined web accessibility and who benefits from it
Understood how semantic HTML is the foundation of accessibility
Audited and corrected heading hierarchy across the Summit Trail Outfitters site
Confirmed landmark elements are used correctly on every page
Written alt text for every image — informative descriptions or empty for decorative
Labeled every form control and grouped radio/checkbox inputs with <fieldset>
Learned what ARIA is, when it is appropriate, and why incorrect ARIA is worse than none
Performed a complete accessibility audit of the full Summit Trail Outfitters site

The Summit Trail Outfitters site is now a complete, correctly structured, accessible HTML site. It uses semantic elements, has proper heading hierarchy, labeled forms, descriptive images, and consistent metadata.

Deploying to GitHub Pages

The Summit Trail Outfitters site is complete structured HTML — no build step required. You can publish it directly from your repository.

1. Initialize the repository and push to GitHub

git init
git branch -m main
git add .
git commit -m "initial commit"
git remote add origin https://github.com/<your-username>/summit-trail-outfitters.git
git push -u origin main

Create the repository on GitHub first (no README, no .gitignore).

2. Enable GitHub Pages

Open the repository on GitHub
Go to Settings → Pages
Under Branch, select main and leave the folder as / (root)
Click Save

Your site will be live at https://<your-username>.github.io/summit-trail-outfitters/ within a minute or two. Any future changes are published with a git push.

What comes next

The next course is CSS Foundations — styling the Summit Trail Outfitters site you built here. You will apply layout, typography, color, and responsive design. The accessible structure you built in HTML is the foundation that CSS will enhance — not replace.

Everything you learned about semantic elements will matter more in CSS, because CSS applies to HTML structure. A page with correct semantic HTML is far easier to style than a page built with divs — selectors are meaningful, document flow is predictable, and component patterns emerge naturally.

You are ready.

Start CSS Foundations →