Semantic HTML and Accessibility

🎯Learning Objectives

Level 09 organized information with lists and tables and collected input with forms. This lesson asks a different question: can a learner understand and operate the page without relying on its visual appearance? You will give page regions, headings, controls and images a clear meaning.

By the end, build a small workshop page that works with a keyboard, exposes useful structure, and explains its controls. You will also distinguish an actual accessibility check from a visual guess.

🧠Semantic HTML — Meaning Before Appearance

A semantic element communicates the kind of content it contains. A heading identifies a heading; a button identifies an action; a navigation region groups navigation. A large, bold paragraph does not become a heading because it resembles one.

Consider two workshop cards that look identical. One uses h2 for its title and a native button for an action. The other uses styled div elements. Their appearance can match while their meaning and keyboard behavior differ. CSS controls presentation; meaningful HTML supplies a foundation that browsers and assistive technology can interpret.

Use div and span when a neutral grouping is appropriate. They are useful tools, but they do not automatically supply a heading, landmark or interactive behavior.

<h2>HTML Workshop</h2>
<p>Learn to build a clear document structure.</p>
<button type="button">Show workshop details</button>

Read the example: the title is available as a heading, the description is ordinary text, and the action is a button. The button still needs a real action if you include it in a working page.

🗺️Landmarks — A Map of the Page

A landmark describes a major page region, such as the main content or navigation. It helps a reader locate the part they need without visiting every item in the page. A useful landmark map is small and purposeful; assigning a region to every decorative card creates noise.

A page-level header and footer can provide banner and content-information landmarks. main marks the dominant content; nav marks navigation; aside can mark related, complementary information. A header inside an article serves that article and is not the page banner.

If you have two navigation regions, distinguish them with concise names such as aria-label="Primary" and aria-label="Course". The label describes the purpose. Do not label every region simply “Navigation.”

🏠header and footer — Scope Matters

header groups introductory material for the page or its nearest relevant section. It may contain a title, author or navigation. footer groups footer information such as authorship or related links. Neither tag forces a fixed screen position.

A document can contain an article header as well as a site header. An article footer can contain that article’s author information, while the page footer contains site-wide information. Judge scope from the surrounding structure, not from the word “header” alone.

<article>
  <header>
    <h2>Understanding semantic HTML</h2>
    <p>Prepared for the workshop.</p>
  </header>
  <p>The article content belongs here.</p>
  <footer><p>Author: Workshop Team</p></footer>
</article>

Expected structure: a self-contained article has an introduction, content and closing information. Its nested header and footer do not replace the site-level header and footer.

📖main and nav — Content and Navigation

Use one visible, correctly placed main for the page’s dominant content. It should not contain the repeated site header and footer merely because they are visible on every page. Do not nest another main inside an article or inside an existing main to create a smaller content panel.

Use nav for a meaningful collection of navigation links, such as primary navigation, course navigation or a table of contents. A single ordinary link within a paragraph does not need its own nav element. Name multiple nav regions when their purposes differ.

<nav aria-label="Course">
  <a href="html-lists-tables-forms.html">Lists, tables and forms</a>
  <a href="semantic-html-accessibility.html" aria-current="page">Semantic HTML</a>
</nav>
<main id="main-content">
  <h1>Semantic HTML Workshop</h1>
  <p>Today we will organize the document.</p>
</main>

aria-current="page" identifies the current page link. It does not disable the link or change keyboard navigation by itself.

🧩article, section and aside — Choose by Purpose

A section is not a replacement for every div. Ask whether the group has a coherent topic and whether its heading helps the reader. A decorative wrapper around two buttons can remain a div.

An aside is not defined by being drawn on the right side of a screen. A related note remains related information when the layout places it below the article on a phone. Similarly, an article does not need a border or card appearance. The tag follows meaning.

A section with a suitable accessible name can be exposed as a region landmark. Do not assume every unnamed section becomes a useful landmark, and avoid giving dozens of tiny panels landmark names.

🔠Headings — Write a Useful Outline

Heading ranks express relationships. Use a descriptive page heading, then headings for major topics and lower-ranked headings for their subdivisions. In this course pattern, the lesson title is h1, main lesson sections are h2 and their topics are h3.

For a beginner page, one clear h1 makes the main topic easy to identify. Heading structure should follow the content hierarchy rather than whichever heading happens to look smaller. Use CSS to change size. Avoid jumping from h2 directly to h4 when opening a subsection. Returning from an h4 subsection to a new h2 topic is a different operation: the smaller subsection has ended.

<h1>Web Workshop</h1>
<h2>Preparation</h2>
<h3>Tools</h3>
<h3>Prerequisites</h3>
<h2>Registration</h2>

Expected outline: Preparation and Registration are peers. Tools and Prerequisites belong under Preparation. Adding section tags does not automatically repair wrongly chosen heading ranks.

🖼️figure, figcaption, time and address

figure groups a self-contained figure such as a diagram, example or illustration. figcaption supplies its caption. Place a figcaption as the first or last child of its figure. A caption can explain what the figure teaches; it does not automatically replace an image’s appropriate text alternative.

time can attach a machine-readable value to a human-readable date or time. address is for contact information associated with the nearest article or the document, not for any text that happens to contain a postal address.

<figure>
  <pre>Header → Main content → Footer</pre>
  <figcaption>Reading order of the workshop page.</figcaption>
</figure>
<p>Session date: <time datetime="2026-10-10">10 October 2026</time></p>
<address>Workshop contact: <a href="mailto:support@codebhavya.com">Email CodeBhavya support</a></address>

These elements add meaning to existing information. They do not schedule the event, send an email automatically or draw the diagram for you.

🖱️Links and Buttons — Destination or Action?

A link with href takes the learner to a destination: another page, a document or a location within the page. A button performs an action: showing details, resetting a quiz or changing a selected state. Choose the native element before designing its shape.

A div with a click handler does not automatically become keyboard-operable. Adding role="button" names a role, but does not supply focusability, Enter and Space behavior, disabled handling or a real action. A native button is usually the simpler and more reliable starting point.

Write link text that explains its destination in context. Repeated “Click here” links make scanning harder. On a workshop page, “View preparation checklist” gives a clearer purpose. Buttons also need labels that explain the action they perform.

<a href="#preparation">View preparation checklist</a>
<button type="button" id="showDetails" aria-expanded="false">Show details</button>

A disclosure button’s script must update the displayed content and its expanded state together. An attribute alone does not create the interaction.

⌨️Keyboard, Focus and Skip Links

Try the page using Tab and Shift+Tab. Focus should move through meaningful interactive elements in a logical order. A native button can be activated with Enter or Space; a link is ordinarily activated with Enter. Keep a visible focus indicator so the learner knows which control is active.

A skip link lets a keyboard user move past repeated navigation to the main content. Use a matching target ID and ensure the destination can receive focus when necessary. A tabindex="-1" target can receive programmatic or fragment-related focus without becoming another stop in normal Tab order.

Avoid positive tabindex values to force a custom order. Fix the document order first. Do not remove outlines globally; if you replace the default indicator, supply a visible alternative. A menu or dialog also needs suitable focus behavior, not just a visually attractive panel.

<a class="skip-link" href="#main-content">Skip to main content</a>
<main id="main-content" tabindex="-1">
  <h1>Workshop</h1>
</main>

:focus-visible { outline: 3px solid #126d96; outline-offset: 3px; }

In the interactive lab below, the preview is a separate document. Use its skip link and Tab through its controls to observe the behavior, then continue back to this lesson.

🏷️Accessible Names and Visible Labels

An accessible name identifies a control to assistive technology. For a normal text input, a visible label associated with the input provides a useful name and helps all learners understand the field. A placeholder is a hint inside the field; it is not a dependable replacement for a label.

Match a label’s for value to a unique input id. The input’s name is the submitted field key, which is a separate concept. Instructions can be associated with aria-describedby; these add descriptive context without replacing the control’s name.

<label for="learner">Learner name</label>
<input id="learner" name="student" aria-describedby="learnerHint">
<p id="learnerHint">Use a fictional name for practice.</p>

When a button contains visible words, those words usually provide its name. An icon-only button needs a meaningful name as well. Prefer a visible label when space permits. Avoid aria-label values that override useful visible wording with unrelated text.

🖼️Image Alternatives — Describe Purpose

Choose text alternatives according to what an image does in its context. An informative image needs an alternative that conveys the relevant information. A decorative image can use alt="" so it does not interrupt the reading sequence. A missing alt attribute is different from an intentionally empty alternative.

For an image that is the only content of a link or button, the alternative should communicate the destination or action. For a complex chart, a short alternative can identify the chart while nearby text explains the important data. Do not try to squeeze every detail into an enormous alt value.

<img src="workshop-room.jpg" alt="Workshop room with computers arranged in four rows">
<img src="decorative-divider.svg" alt="">

Practice decision: if the photograph is used only as decoration and the room arrangement is irrelevant, its alternative may instead be empty. The same file can have different roles in different contexts. These source paths are illustrative; your page must supply the actual files.

⚠️Instructions, Errors and Status Messages

Help the learner complete a task before showing an error. State the expected format, required fields and important limits near the relevant control. When a validation error occurs, describe the problem in words and explain how to fix it. Red color alone does not explain which value is wrong.

Use native form constraints when appropriate, then add task-specific checks where needed. If a script marks a field invalid, keep aria-invalid and the associated error message synchronized. Clear the invalid state when the problem is corrected.

For a result that changes without moving focus, an appropriate live region can announce a short update. Use polite announcements for ordinary status changes, and avoid announcing large blocks of text repeatedly. A status message does not replace a meaningful focus destination when a task requires one.

<label for="seats">Seats (1 to 4)</label>
<input id="seats" name="seats" type="number" min="1" max="4" required>
<p id="status" role="status"></p>

The native control checks the stated constraints. The status region remains empty until a script has a relevant message to show. Server-side validation remains necessary for real submissions.

🛡️ARIA — Add What HTML Cannot Express

ARIA can describe roles, states and relationships where the native markup does not communicate enough. Start with appropriate HTML and add only the missing information. A native button already has a button role, so adding that same role is normally redundant.

ARIA does not implement behavior. aria-expanded="true" must correspond to content that is actually expanded. aria-disabled="true" communicates a state but does not automatically block a click. aria-hidden="true" hides content from the accessibility tree; do not put it on a focusable control that a keyboard user can still reach.

Use a relevant name for repeated landmarks and a descriptive relationship for help text. Avoid adding role="application" to an ordinary tutorial page. It changes interaction expectations and is not a shortcut to making a page accessible.

💻Worked Example — A Complete Semantic Page

Copy this into a standalone HTML file and open it in your browser. The example has one main content area, a descriptive page heading, two topic headings, a labelled navigation region and a real native disclosure. The skip link is deliberately visible so its purpose is easy to observe.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Semantic HTML Workshop</title>
  <style>
    body { font: 18px/1.7 Arial, sans-serif; margin: 20px; }
    :focus-visible { outline: 3px solid #126d96; outline-offset: 3px; }
  </style>
</head>
<body>
  <a href="#main-content">Skip to main content</a>
  <header>
    <p>CodeBhavya Workshop</p>
    <nav aria-label="Workshop"><a href="#preparation">Preparation</a></nav>
  </header>
  <main id="main-content" tabindex="-1">
    <h1>Semantic HTML Workshop</h1>
    <section id="preparation">
      <h2>Preparation</h2>
      <ul><li>A code editor</li><li>HTML basics</li></ul>
    </section>
    <section>
      <h2>Learning task</h2>
      <p>Explain the landmarks and heading order of this page.</p>
      <details><summary>Show task hint</summary><p>Find main, nav and headings.</p></details>
    </section>
  </main>
  <footer><p>Workshop learning example.</p></footer>
</body>
</html>

Expected keyboard result: Tab reaches the skip link and navigation link, then the disclosure summary. Activating the summary opens the hint. The main target does not become an extra ordinary Tab stop.

Expected structural result: Preparation and Learning task are sibling topics under the workshop title. The footer appears after main. Your browser’s accessibility tools may present the details of the exposed tree differently; examine actual names and roles instead of memorizing a screenshot.

🧪Premium Interactive — Structure and Keyboard Lab

Compare four fixed teaching examples in the preview. These are local examples; the lab does not submit data or fetch another website. Inspect the scenario, read its markup, then use the keyboard to test its actual controls.

The findings describe known features of each example. They are not an automated screen-reader simulation or a certification. A scenario can pass these few checks while still needing contrast, zoom, assistive-technology and task-level review.

In the heading-gap scenario, look for h1 followed directly by h3. In the label scenario, focus the input and compare its placeholder with the missing persistent label. In the div-action scenario, observe that the styled div is not an ordinary keyboard stop.

🔎A Practical Review — Evidence Before a Pass

Record a finding with its location, trigger and expected behavior. For example: “In Registration, Tab skips the styled Show hint div. Replace it with a native button and connect it to the hint.” This is actionable because it describes a user problem rather than saying the page looks wrong.

Use browser accessibility inspection and relevant assistive technology to confirm names, roles and reading order. An automated tool can identify some issues but cannot decide every alternative text, interaction or task. A score alone is not evidence that every learner can complete the task.

💬Interview Questions — Flip to Explain

❓MCQ Practice — Understand the Explanation

💻Extra Practice — Specific Checks

📌Quick Revision

📖Glossary — Flip to Learn

🏆Final Challenge — A Workshop Page Anyone Can Navigate

Build a standalone workshop page combining Levels 09 and 10. Include prerequisites, a small captioned timetable, a labelled registration form, a clear page heading and a logical sequence of topic headings. Keep the page header and footer outside main and name navigation regions when needed.

Provide a visible skip link, a native details hint and meaningful labels. If you use images, document whether each one is informative, decorative or functional and choose its alternative accordingly. For the form, include clear instructions and explain the expected submitted values.

Test a complete keyboard path from the skip link through the form and disclosure. Inspect the structure in browser tools, check the layout when zoomed and record at least three observations. For a real published form, connect it to secure server processing; the lesson preview is a local teaching example.

Success criterion: explain why each element was chosen, demonstrate the task with a keyboard and state which checks you performed. Do not call the page fully accessible based only on the lab’s limited checklist.