Semantic HTML Markup for Editorial Teams: Formatting for Accessibility

In the design of high-end editorial publications, typographic styling is prioritized to create visual hierarchy and clean reading grids. However, a website’s visual presentation represents only half of the reader experience. For users navigating with screen readers, keyboard interfaces, or cognitive assistive software, the foundation of accessibility is the site’s underlying code structure.

If an editorial team formats articles using generic container tags (like <div> or <span>) styled with custom CSS rather than native HTML elements, assistive tools cannot navigate the content, blocking access for disabled readers.

This developer style guide and formatting manual outlines semantic HTML markup, ARIA structures, and heading rules to comply with WCAG 2.2 accessibility standards.

---

The Core Principle: Semantic Elements vs. Generic Styling

Semantic HTML refers to using HTML tags that describe the meaning of the content they contain rather than how that content should look on the screen.

The Code Contrast

Consider two approaches to rendering a sidebar callout block:

• Non-Semantic Approach:

  <div class="bold-sidebar-callout">
    <span class="callout-header">Important Notice</span>
    <span class="callout-body">This laboratory benchmark was verified on bare-metal.</span>
  </div>

  Screen readers treat this code as generic, unstructured text blocks, forcing the user to read through it sequentially without context.

• Semantic Approach:

  <aside aria-labelledby="callout-heading">
    <h3 id="callout-heading">Important Notice</h3>
    <p>This laboratory benchmark was verified on bare-metal.</p>
  </aside>

  The <aside> tag informs assistive tools that the content is related to the main article but stands apart. The aria-labelledby property links the container to the heading, providing context.

---

Strict Heading Hierarchies (H1 to H6)

Assistive technologies rely on heading structures to generate logical directories of pages, allowing keyboard users to jump directly to specific sections.

We enforce the following heading rules:

• A Single <h1> Per Page: Reserved exclusively for the main article title.
• Nested Heading Sequences: Headings must follow a strict sequential order. Never jump from an <h2> directly to an <h4> to achieve a smaller font layout; use CSS class overrides instead.
• Heading Text Density: Headings should be descriptive, summarizing the content in the section below rather than using vague single-word labels.

---

Tables and Tabular Data Accessibility

Data tables (such as parameter comparison matrices) are difficult for screen readers to interpret unless they are marked up with structural cell headers.

To format accessible tables:

1. Wrap all column headers in <th> tags.
2. Use the scope="col" or scope="row" attribute to declare whether the header applies to a column or row.
3. Include a <caption> tag summarizing the table’s purpose.

<table>
  <caption>Core Architecture Latency Benchmarks</caption>
  <thead>
    <tr>
      <th scope="col">Hardware Tier</th>
      <th scope="col">Read Latency</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Bare Metal</th>
      <td>Sub-millisecond</td>
    </tr>
  </tbody>
</table>

---

Semantic HTML Elements Comparison

The following table compares the accessibility roles of standard HTML tags:

HTML Element	Structural Role	Screen Reader Navigation Impact	Common Misuse
<article>	Wraps self-contained content	Declares reading bounds, allows article skips	Used for generic layout rows
<aside>	Wraps tangential sidebar text	Identifies supplementary blocks	Used for nested site navigation panels
<nav>	Wraps navigation link lists	Groups main site links, screen reader skip target	Used for footer copyright boxes
<figure>	Wraps images with captions	Pairs illustration targets with <figcaption>	Used for empty spacer blocks

---

Key Takeaways

• Semantic Intent: Use HTML elements that describe content meaning, ensuring assistive software can navigate pages.
• Heading Discipline: Maintain sequential heading levels (H1 to H6) to provide logical site directories.
• Structured Tables: Use table headers (<th>) and scopes to make tabular data accessible to screen readers.

---

FAQ

Here are answers to the most frequently asked questions about this topic:

What is the role of ARIA labels in HTML?

Accessible Rich Internet Applications (ARIA) attributes are code properties added to HTML elements to provide extra accessibility context when native HTML elements cannot fulfill the role (e.g. adding aria-expanded="true" to custom mobile menus).

How do I check my publication’s accessibility profile?

Audit your website using automated accessibility testing engines (like Google Lighthouse, axe-core, or WAVE). These tools check your markup structures for heading hierarchy errors, missing image alt tags, contrast issues, and tab navigation blockers.

---

Related Inquiries

• Learn more about loss functions.
• Learn more about vector databases.