여러 개의 header, footer, h1 요소: 실제로 접근 가능한 것은 무엇인가?

Source: Dev.to

The Core Principle: Semantics Over Superstition

HTML은 약간만 구부려도 접근성을 깨뜨리는 깨지기 쉬운 규칙 집합이 아닙니다. 문서 구조를 설명하도록 설계된 의미론적 언어입니다.
핵심 질문은 “이 요소들을 몇 개까지 사용할 수 있나요?” 가 아니라 “이 요소들이 내용의 구조를 정확히 설명하고 있나요?” 입니다.

Multiple header Elements

Is it allowed? Yes. You can have multiple header elements in a single document. A header represents introductory content for its nearest sectioning ancestor, such as body, main, article, section, or nav.

Example

<header>
  <h1>Site name</h1>
</header>

<article>
  <header>
    <h2>Article title</h2>
  </header>

  <p>Article content…</p>
</article>

This structure is both valid HTML and accessible. Each header introduces its own section, and screen readers expose headers as structural landmarks tied to their sections.

Multiple footer Elements

Is it allowed? Also yes. Like header, the footer element is section‑scoped. A footer contains information related to its nearest ancestor section (author info, related links, metadata, etc.).

Example

<article>
  <p>Post content…</p>

  <footer>
    <p>Written by Alex</p>
  </footer>
</article>

<footer>
  <p>© 2026 Example site</p>
</footer>

Screen readers announce top‑level footers as landmarks; nested footers are treated as part of their section, which is expected behavior.

Multiple h1 Elements

Is it allowed? A strong yes. HTML5 explicitly allows multiple h1 elements. Each h1 represents the top heading of its sectioning context.

Example

<article>
  <h1>Article title</h1>

  <section>
    <h1>Introduction</h1>
    <p>…</p>
  </section>
</article>

<article>
  <h1>Another article</h1>

  <section>
    <h1>Overview</h1>
    <p>…</p>
  </section>
</article>

The Real Accessibility Question About Headings

The issue isn’t the number of h1s but whether the heading hierarchy makes sense. A good heading structure reflects the content hierarchy, avoids arbitrary level skipping, and clearly defines sections.

Poor Heading Structure

<h1>Main title</h1>

<h4>Subsection</h4>

Skipping levels creates confusion for screen‑reader users who navigate by headings.

Screen Readers and Navigation

Many assistive‑technology users navigate pages by headings, landmarks, or regions. Proper use of header, footer, and heading levels enables faster navigation, clear mental models of the page, and predictable reading order. The problem is not multiplicity; it is misrepresentation.

Practical Guidelines

• Use header and footer to introduce or conclude meaningful sections, not as generic wrappers.
• Headings should reflect the real structure of the page rather than visual styling choices.
• Prioritise clarity over rigid or outdated rules, and test heading navigation with a screen reader.
• If the structure makes sense to a human, it usually makes sense to assistive technology.

Conclusions

Using multiple header and footer elements is both valid and accessible when they correctly describe their respective sections. Multiple h1 elements are also allowed and often appropriate, especially in documents composed of distinct articles or regions.

Accessibility depends on providing a clear, logical hierarchy that accurately represents the content, not on counting elements. HTML accessibility is ultimately about expressing meaning rather than following myths or arbitrary conventions.