结帐摘要的标记和 aria 角色

Question

我正在处理预约结账，我将在页脚中添加预订摘要 - 当您完成结账流程的每个步骤时，您会知道随着您的选择而更新的内容类型。这个看起来像这样：

Appointment Summary
  Location__________
  Service___________
  Practitioner______
  Date______________
  Time______________

我的问题是关于 HTML5 和可访问性：

1) 您是否应该以任何特定方式标记摘要？ <aside> 标签似乎最有可能，但我认为它并不真正相关，因为<aside> 旨在用于与主要内容相关的信息。

2) 如果一个简单的<section> 元素就足够了，我应该记住与 Aria 相关的任何内容吗？我正在考虑在更新摘要时添加一个 Aria 实时区域，但可能在每一步之后都会有点烦人。此外，role="complementary" 似乎与<aside> 相似，但here 的描述似乎留下了足够的回旋余地以使其相关。屏幕阅读器用户是否希望在complementary 区域中找到此类摘要信息？

Answer 1

根据您的信息，我认为这条信息“补充”了主要内容。在这种情况下，正常部分就可以了，您可以使用免费角色。

作为屏幕阅读器用户，我真的希望这些信息不要在每一步都重复。这是一大块信息，当我单击“下一步”时，让我的屏幕阅读器开始阅读它是非常出乎意料的。如果您想提醒用户步骤已更改，您可以执行以下操作之一：

1. 有一个不可见的 HTML 元素，其中 aria-live 属性设置为礼貌，并使用它来报告内容已更改（即通过添加诸如“更新摘要”之类的文本）。
2. 通过在文本中明确提及，当您完成每个步骤时，摘要将更新。