我在客户的站点上使用 Intersection Observer 来延迟加载页面的昂贵部分，直到用户将它们部分滚动到视图中。
例如，HTML 可能如下所示：
<html>
<body>
<header>
<h1>Page Title</h1>
</header>
<section aria-labelledby="section-1-title">
<h2 id="section-1-title">Section One Title</h2>
<p>Lorem ipsum, dolor sit amet...</p>
</section>
<section aria-labelledby="section-2-title">
<h2 id="section-2-title">Section Two Title</h2>
<p>Lorem ipsum, dolor sit amet...</p>
</section>
<section data-lazyload="true" aria-labelledby="section-3-title"> <!-- Clearly poor aria use here. Could use aria-label, but is that best? -->
<!-- This content would be programmatically rendered once scrolled into view -->
</section>
</body>
</html>
我的问题是：
我应该考虑和准备哪些无障碍问题？
这种延迟加载方法如何影响文档的辅助功能树？
加载新内容后文档的辅助功能树是否刷新？
我可以做些什么来更好地帮助辅助技术用户导航页面内容？
是否有我应该学习的最佳实践或更多信息？
加载页面中昂贵的部分，直到用户将它们部分滚动到视图中。
我应该考虑和准备哪些无障碍问题？
屏幕阅读器用户通常不需要滚动页面来阅读更多内容。他们可以遍历整个 DOM（实际上是“可访问性树”，但与 DOM 类似）并听到整个页面。如果您在他们滚动之前不加载内容，则可能会非常混乱，除非他们收到有关该行为的通知。也就是说，屏幕阅读器用户可以通过页面上的所有标题进行导航，以了解页面结构，但如果某些标题在滚动到视图中之前才加载，则用户将无法获得完整的图片页面。
这种延迟加载方法如何影响文档的辅助功能树？加载新内容后文档的辅助功能树是否刷新？
如果 DOM 发生变化，可访问性树将会更新。因此向页面添加新元素将会更新 a11y 树。如果你在一个元素上设置 CSS
display:none，它将更新 a11y 树。如果更改 ARIA 属性的值，例如
aria-checked如上所述，如果存在延迟加载，请确保用户知道它。