弹窗标题须用语义化标签（如h2/h3）并配合aria-labelledby关联，关闭按钮需置于右上角、尺寸≥44×44px、调用dialog.close()且带明确aria-label，dom顺序应为标题→关闭按钮→正文以保障焦点流。
弹窗里的标题和关闭按钮不是靠 <title></title> 或随便加个 <h1></h1> 就完事的，得兼顾语义、可访问性、交互逻辑和视觉习惯。
弹窗标题必须用语义化标签包裹，并与弹窗主体建立明确关联
标题不是装饰，是弹窗内容的核心标识。用 <h2></h2> 或 <h3></h3>（根据页面结构层级）放在弹窗内容区顶部，同时通过 aria-labelledby 指向它，让屏幕阅读器能准确播报“这是什么弹窗”。例如：
<dialog id="shareDialog"><div class="dialog-content" role="document">
<h2 id="shareTitle">分享这篇文章</h2>
<button class="close-btn" aria-label="关闭分享面板">×</button>
<!-- 其他内容 -->
</div>
</dialog>
然后 JS 初始化时绑定：
const dialog = document.getElementById('shareDialog');
dialog.setAttribute('aria-labelledby', 'shareTitle');
关闭按钮要满足四个硬性条件：位置合理、尺寸达标、行为可靠、语义清晰
- 位置：右上角是通用预期，用
position: absolute; top: 1rem; right: 1rem;控制 - 尺寸：移动端点击区域 ≥44×44px，可用
min-width: 44px; min-height: 44px;+padding保证 - 行为：必须调用
dialog.close()，不能用display: none或remove()—— 否则open属性不更新、close事件不触发 - 语义：必须带
aria-label，且不能只写“×”，要说明功能，如aria-label="关闭分享面板"
标题与关闭按钮的 DOM 顺序影响键盘焦点流，需按操作逻辑排列
用户 Tab 进入弹窗时，焦点应先到标题（帮助理解上下文），再自然移到关闭按钮，最后才是正文内容。所以 HTML 结构里，标题在前，关闭按钮紧随其后，不要把按钮塞到标题内部或丢到底部。
避免常见错误组合
- ❌ 用
<title></title>标签放弹窗标题（它只作用于浏览器标签页） - ❌ 关闭按钮只写
×没有aria-label（屏幕阅读器读不出意图） - ❌ 把标题和关闭按钮都放在
<dialog></dialog>外层（破坏模态上下文，焦点管理失效） - ❌ 用
window.close()关闭弹窗（浏览器拦截，静默失败）
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
