Html 如何使我的新闻卡设计易于访问？

我制作了以下卡片设计，以在新闻页面上显示：

为了便于访问，我希望

h2

标题位于HTML格式的图像前面，如：

<div class='news'>
  <h2>Title</h2>
  <img alt="temporary placeholder image" src="https://via.placeholder.com/400x300.png">
  <small class="news--published">6-3-2020 1:27:20</small>
  <div class="body">
    <p>Lorem ipsum dolor.</p>
  </div>
  <a aria-label="Read more about {{node.title}}" href="/url">Read more<span aria-hidden="true" class="icon icon-arrow"></span></a>
</div>

<article class='news'>
  <div class="content image">
    <img alt="temporary placeholder image" src="https://via.placeholder.com/400x300.png">
  </div>
  <div class="content text">
    <h2>Title</h2>
    <small class="news--published">6-3-2020 1:27:20</small>
    <div class="body">
      <p>Lorem ipsum dolor.</p>
    </div>
    <a aria-label="Read more about {{node.title}}" href="/url">Read more<span aria-hidden="true" class="icon icon-arrow"></span></a>
  </div>
</article>

标题
6-3-2020 1:27:20
洛雷姆·伊普苏姆·多洛

这样做的最佳解决方案是什么？是否有一种方法可以使用css创建此设计，例如使用flexbox或grid，从上面提到的html创建此设计？或者可以通过将html包装成

---

要问自己的问题是“这张图片在这一点上是否添加了任何有用的信息”。此时，您有两个选择：

图像没有添加任何内容 答案可能是否定的，图片在文章列表中没有添加任何有价值的内容

虽然你会经常看到我提倡为残疾人提供尽可能相似的体验，但我也提倡提供出色的用户体验

将大量图像作为文章列表的一部分读出并不是一种很好的体验，因为这会减慢体验的速度。此外，文章缩略图通常是抽象的（没有提供有用的信息），并在实际页面的顶部重复（冗余）

因此，我的建议是完全隐藏图像。只需将

alt

属性更改为空字符串，即可完成此操作空字符串，而不是空字符串

所以

是好的，
不是

为完整起见，我还将在图像中添加
aria hidden=“true”
，尽管这是多余的，但当人们在代码中查找空
alt
属性时，这对他们来说很有用，因为这应该是隐藏的，而不是错误/缺少
alt
属性

<article class='news'>
  <div class="content image">
    <img alt="" aria-hidden="true" src="https://via.placeholder.com/400x300.png">
  </div>
  <div class="content text">
    <h2>Title</h2>
    <small class="news--published">6-3-2020 1:27:20</small>
    <div class="body">
      <p>Lorem ipsum dolor.</p>
    </div>
    <a aria-label="Read more about {{node.title}}" href="/url">Read more<span aria-hidden="true" class="icon icon-arrow"></span></a>
  </div>
</article>


看起来你按下enter键太早了，不要让我悬而未决我们应该添加什么：-）呵呵。我对原始HTML和你发布的内容有一些建议：由于OP的主要关注点是使
H2
元素更加突出，我会在
标记上添加
aria labelledby
属性，然后在heading元素上使用ID。通过这种方式，
元素将被大声读取，如果内容不吸引，允许选项完全跳过文章…标题…使用语义：2019年9月17日伟大的建议，显然有很多事情可以做来改进HTML，但这是一个值得添加到我的答案。