Hack University - Semantic layout and accessibility

Semantic layout tags

A whole page could be built out of one generic container element, div. Semantic tags instead say what each region is.

<body>
  <header>logo, site title</header>
  <nav>main menu links</nav>
  <main>
    <section>one thematic chunk</section>
    <article>a self-contained piece (a post, a card)</article>
  </main>
  <footer>copyright, contact</footer>
</body>

Consumer	What it gets from semantics
people	nothing extra, they see the pixels
screen readers	landmarks, so `nav` and `main` are one jump away
search engines	explicit structure to interpret

Landmarks beat scrolling, and a screen reader user on a semantic page reaches the content in one keystroke instead of walking past the whole menu.

div is still correct when no semantic tag fits. It is a styling hook rather than a meaning, which is exactly why it should not be the default.

The classic page skeleton: named landmark regions instead of anonymous boxes.

Accessibility is not an add-on

Most of the basics are already covered, without being labelled as accessibility work.

Habit	Lesson
`alt` text on images	2-3
a `label` for every input	3-1
heading levels used in order	2-2
semantic landmarks	this lesson

Two more habits are worth starting now.

Use real buttons and links. A click handler on a div cannot be reached with the keyboard, while button and a are focusable and keyboard-operable for free.

Never rely on color alone. Saying errors are shown in red excludes colorblind users, so pair the color with an icon or with text.

Accessibility is often shortened to a11y, from the letter a, eleven letters, and the letter y. It gets checked in real code reviews at real companies, so it is best learned as part of how HTML is written rather than as a bonus topic.

Real buttons against clickable divs

A button beats a div with a click handler because buttons are keyboard-focusable and announced as buttons by screen readers.

A div with a click handler works for mouse users only, while a real button can be tabbed to, pressed with Enter or Space, and announced correctly, all with no extra code.

Capability	`button`	`div` with a handler
reachable by Tab	yes	no
responds to Enter and Space	yes	no
announced as a button	yes	no

Rebuilding those three behaviors on a div takes a tabindex, a keydown handler, and a role, and it is still easier to get wrong. Using the right element is the cheaper path in every direction.

The same page, written semantically

Semantic tags in place of anonymous div elements. The rendering is unchanged, and the meaning is not.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Study Group</title>
  </head>
  <body>
    <header><h1>Study Group</h1></header>
    <nav>
      <a href="#about">About</a>
      <a href="#join">Join</a>
    </nav>
    <main>
      <p>We meet twice a week to build web pages together.</p>
    </main>
    <footer><p>Contact: hi@studygroup.dev</p></footer>
  </body>
</html>

Region	Semantic tag	Announced as
site title	`header`	banner
menu	`nav`	navigation
primary content	`main`	main
contact line	`footer`	contentinfo

Each of these renders exactly like a div, so the visual result is identical. Converting a page means changing both the opening and the closing tag of each region, which is where a hurried find-and-replace usually leaves a mismatched pair behind.