使用JavaScript/jQuery修改DOM是否会引发网页可访问性问题？

一、$(document).ready()中操作DOM的可访问性影响 #

把jQuery代码放在$(document).ready()里本身不会直接导致可访问性问题——这个时机是DOM完全加载后执行，动态修改的元素和页面初始渲染的内容在基础访问逻辑上是一致的。但需要注意两个关键细节：

• 焦点管理：如果修改涉及移除当前获得焦点的元素（比如删除一个正在被聚焦的按钮），必须手动将焦点转移到合适的容器、替代元素或页面导航节点上，避免键盘用户出现焦点丢失的情况。
• 内容更新通知：如果动态添加大量内容或关键信息，要通过aria-live区域告知屏幕阅读器用户内容已更新，否则屏幕阅读器不会自动读取新增内容，用户可能错过重要信息。

二、仅通过JS添加元素+正确ARIA的可访问性效果 #

只要严格遵循可访问性规范，动态添加的内容完全可以达到和原生DOM一致的可访问性水平，但要注意几个核心原则：

• 优先使用语义化HTML：能直接用<button>、<nav>这类自带可访问性特性的标签，就不要用<div>这类无语义标签。比如你例子里如果是要加可交互元素，用<button>比用<div>加ARIA更可靠，因为原生按钮默认支持键盘聚焦、回车/空格触发点击等特性。
• 非语义标签的ARIA补全要完整：如果必须用<div>这类标签，要补全所有必要属性：
  • 可交互元素需添加role="button"（或对应角色）、tabindex="0"，同时绑定键盘事件，支持回车和空格触发操作；
  • 隐藏元素要正确设置aria-hidden="true"，避免屏幕阅读器读取不必要的内容；
  • 状态变化要同步更新ARIA属性（比如折叠面板展开时，要把aria-expanded从false改成true）。
• 避免滥用ARIA：原生语义标签已经自带对应的role和状态，不要重复添加（比如<nav>不需要额外加role="navigation"），过度使用ARIA反而可能破坏原生可访问性特性。
• 维护文档结构合理性：动态添加的标题要遵循h1-h6的层级逻辑，不要打乱原有的页面大纲，屏幕阅读器依赖文档大纲帮助用户理解页面结构。

内容的提问来源于stack exchange，提问作者CatWilk