ARIA：如何扩展扁平化的部分列表？

Question

假设我有一个太长的平面列表，所以我将只显示几个项目，“最后一个项目”是“更多按钮”。 关于如何让有读者的人可以访问它并且不影响 SEO 的任何提示？

因为列表是扁平的，所以没有可扩展嵌套节点https://www.w3.org/WAI/GL/wiki/Using_the_WAI-ARIA_aria-expanded_state_to_mark_expandable_and_collapsible_regions#Example_2:_Collapsing_and_expanding_subtrees_of_a_tree的选项

我不想将列表分成两个独立的带有列表的块并破坏连续性。

例子：

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li><button type="button">Show more</button></li>
<li hidden>Item 6</li>
<li hidden>Item 7</li>
<li hidden>Item 8</li>
<li hidden>Item 9</li>
...
</ul>

点击显示更多按钮后，隐藏的项目将被显示，按钮将从 DOM 中移除。

有什么简单的想法吗？我还只有不理想的复杂想法。

编辑 2021-09-08

我考虑过，我认为它能够以不同的方式做到这一点。使所有列表项都可用于辅助技术并且对 SEO 可见。

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li role="none" aria-hidden="true"><button type="button">Show more</button></li>
<li class="clip-hidden">Item 6</li>
<li class="clip-hidden">Item 7</li>
<li class="clip-hidden">Item 8</li>
<li class="clip-hidden">Item 9</li>
...
</ul>

按钮onClick 事件将删除整个<li> 和role="none"。选项卡索引将保留在该区域中，因此如果 <a> 是 <li> 的子项，则下一项将关注用户操作。

对于评估技术/SEO 中的 UL，role="none"/aria-hidden="true" 是否存在任何潜在问题？

Answer 1

幸运的是，现在搜索引擎正试图根据用户的感知来进行评分。如果用户点击一个承诺“第 6 项”的搜索结果，然后他们没有看到该项目，他们会转过头来认为搜索结果具有误导性。因此，隐藏内容的评级通常较低或根本没有，您会通过隐藏项目来影响 SEO。

我不了解 Google 目前如何确定可扩展内容，但如果您以可访问的方式进行操作，您的机会肯定会更大：

如果您坚持隐藏这些内容的想法，我相信这里最好的选择是应用 disclosure pattern (show/hide) 并且不删除按钮。

如果确实删除了按钮，则至少需要将焦点设置在列表或第一个新列表项上，以确保用户不会丢失上下文。

<li>Item 5</li>
<li tabindex="-1" id="item6">Item 6</li>

button.onclick = () => { showMore(); item6.focus() }

<ul> 等列表的一个功能是告诉屏幕阅读器用户此列表中的项目总数。由于您在单击按钮时更改了此数字，因此向列表添加一个可访问的名称可能会很有用，该名称会宣布总数，例如 <ul aria-label="9 items"> 或类似名称。

一般来说，如果您在点击按钮之前告诉用户他们可以期待多少个项目，这将有助于提高可用性。

<button aria-expanded="false">Show 4 more</button>