Semantic HTML Elements I Stopped Replacing With Divs

说明与用途

用原生语义标签替换<div onClick>可提升可访问性并简化代码。

问题

Using <div onClick> for interactive elements leads to accessibility and maintainability issues.

结果

Switching to semantic elements removed multiple lines of JavaScript, improved keyboard and screen reader support, and shortened code.

工作流

• Identify interactive <div onClick> elements
• Replace with appropriate semantic tag (e.g., <button type="button"> for actions)
• Remove tabindex, keydown listeners, role, aria-disabled, and custom styling
• For dialogs, use <dialog> and call showModal() to get focus trap and Escape handling
• For accordions, use <details> and <summary> to get disclosure widget behavior
• Wrap major navigation blocks in <nav> with optional aria-label
• Wrap dates/times in <time datetime="..."> for machine readability

证据

A <div onClick> looks fine. It renders, it fires the handler, the demo works.

来源

A real <button> gives you all of that in eleven characters.

来源

The native <dialog> element does the hard parts. Call showModal() and the browser traps focus inside the dialog...

来源

The native version is <details> with a <summary> inside, and it needs no JavaScript at all.

来源

<nav> marks a block of navigation links as a landmark.

来源