尽管屏幕尺寸会更改功能，但如何在组件中保持良好的可访问性？

Question

我目前正在构建一个由三个无序列表组成的响应组件，每个列表都有相关的标题。该代码看起来像这样：

<div>
  <section aria-labelledby="heading1">
    <h3 id="heading1" data-state="open">Heading 1</h3>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </section>
  <section aria-labelledby="heading2">
    <h3 id="heading2" data-state="open">Heading 2</h3>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </section>
  <section aria-labelledby="heading3">
    <h3 id="heading3" data-state="open">Heading 3</h3>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </section>
</div>

在较大的屏幕上，CSS将其作为三列和较小的屏幕呈现，它变成了手风琴，单击标题将切换相邻列表的显示。打开/关闭功能由JavaScript处理，只需在打开和关闭之间打开数据状态即可。

这一切都很好，但是当涉及到可访问性时，我有点困难。我想与辅助技术进行交流，即标题是按钮（使用角色=“按钮”，或通过将标题文本包裹在按钮元素中），但这只有在作为手风琴显示时才正确。在三列模式下，标题不应是按钮，只是标题。

任何帮助将不胜感激！

Answer 1

所以DOM保持不变？在响应视图中没有添加其他HTML元素？

如果是这样，那有点棘手，但可能您可以使用“模式，然后在完全屏幕模式下调整元素上的属性。

Accordions consist of:

• The accordion element – A collection of panels contained within an outer pane (often a list)
• Accordion header – The labeled area(s) of the accordion panel that are expandable and collapsible
• Accordion panel – The area (container) that contains the content specific to each header

The title of each accordion header is contained in a or an带有角色=“按钮”的元素。

每个手风琴标头按钮都包裹在＆lt; hx＆gt;元素中，其级别适合页面的信息体系结构。按钮元素是标题元素内部的唯一元素。

如果可见与手风琴标头关联的手风琴面板，则标头按钮元素的aRIA扩展将设置为“ true” 。如果面板不可见，则ARIA扩展将设置为“ false” 。面板本身应具有ARIA隐藏适当设置或使用CSS隐藏（display：none）。

手风琴面板具有prole =“ region”和aria-labelledby，其值指的是控制面板显示的按钮。

这非常接近您发布的代码。您的列表中有一个容器（＆lt; Section＆gt;），其中具有 region>区域 的默认角色，您通过将其指向标题来标记该部分。

因此，一旦拥有手风琴代码，就可以在显示只是一个简单的三列列表时确定不需要该结构的哪些部分。

<!-- main accordion container -->
<div>
  <h2>
    <button aria-expanded="false" id="accordion1id">first accordion section</button>
  </h2>  
  <section aria-labelledby="accordion1id">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>    
  </section>
  <h2>
    <button aria-expanded="false" id="accordion2id">second accordion section</button>
  </h2>  
  <section aria-labelledby="accordion2id">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>    
  </section>
</div>

这确实接近您的原始代码。当您只需要列表结构（桌面视图）时，您应该能够在所有roun =“呈现”中添加到所有＆lt; button＆gt; elements extress＆gt; emements> “其中的元素，从本质上将它们变成纯文本，因此您剩下的就是带有儿童文字的标题。屏幕阅读器只会知道有一个标题，然后是带有嵌入式列表的部分。

您也应该从按钮中删除ARIA扩展的，因为该属性仅在按钮上有效而不是纯文本元素。

如果愿意，还可以在＆lt; e节上删除aria-labelledby，然后将删除 landmark 这些元素的角色，因此屏幕读取器也会忽略它们。 The code would look something like this:

<!-- main accordion container -->
<div>
  <h2>
    <button role="presentation" id="accordion1id">first accordion section</button>
  </h2>  
  <section>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>    
  </section>
  <h2>
    <button role="presentation" id="accordion2id">second accordion section</button>
  </h2>  
  <section>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>    
  </section>
</div>

What the screen reader sees will effectively be:

<div>
  <h2>
    first accordion section
  </h2>  
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>    
  <h2>
    second accordion section
  </h2>  
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>    
</div>

Update

Thanks, @Robin, you are correct. ARIA属性仅是提示的辅助技术，并且不会影响行为，因此添加角色=“呈现”在＆lt;按钮＆gt;，虽然它确实使按钮不再以按钮宣布，但这并不能阻止用户对其进行表达或单击它，因此您需要tabindex =“ - 1” < /代码>在按钮上以防止选项卡，您需要将按钮上的事件处理为NO-OPS。您可能还需要应用CSS，以使该按钮看起来也不像按钮。这都是可行的，但有时更容易交换和分离不同的组件。