如果您想让屏幕阅读器用户轻松导航到每个卡片，则列表是一种方法。这将允许他们使用L屏幕阅读器快捷键导航到列表，然后使用I（“眼睛”）快捷键导航到每个列表项。
如果您不想使用真实的的<ul>并设定其样式，使其不显示项目符号，则可以改用roles。

<div role="list">
  <div role="listitem">
    <div class="card">...</div>
  </div>
  <div role="listitem">
    <div class="card">...</div>
  </div>
  <div role="listitem">
    <div class="card">...</div>
  </div>
</div>

我总是鼓励在使用roles之前使用语义HTML元素，比如<ul>，但是对于列表，有时使用role更容易，这样就不必乱用CSS。
您没有指定卡片中的元素类型。如果每张卡片上都有标题，例如<h2>，则不需要将卡片放在列表中。屏幕阅读器用户可以使用H或2键导航到标题。

<div class="card">
  ...
  <h2>card 1 heading</h2>
  ...
</div>
<div class="card">
  ...
  <h2>card 2 heading</h2>
  ...
</div>

但你当然可以两者兼顾，既有列表又有标题。
另一种方法是将每张卡片作为一个地标区域。您可以使用<section>元素，也可以在<div>卡片上使用role="region"。无论是哪种情况，您都应该使用aria-label或aria-labelledby来指定区域标签。

使用<section>：

<section class="card" aria-label="card 1">
  ...
  <h2>card 1 heading</h2>
  ...
</section>
<section class="card" aria-label="card 2">
  ...
  <h2>card 2 heading</h2>
  ...
</section>

使用role="region"：

<div class="card" role="region" aria-label="card 1">
  ...
  <h2>card 1 heading</h2>
  ...
</div>
<div class="card" role="region" aria-label="card 2">
  ...
  <h2>card 2 heading</h2>
  ...
</div>

**注意：**以上代码示例在卡片中都有一个<h2>，它不在原始问题中。我只是从我的代码片段中复制/粘贴。如果您有一个节/区域容器，您不一定需要在卡片中有一个标题，但如果您有，区域标签应该使用aria-labelledby指向标题，或者区域aria-label应该与标题不同。没有必要在区域上有一个aria-label，它与标题重复或非常相似。