1

对于与此类似的设计，Materialize 上使用的图像卡：http: //materializecss.com/components.html# 截图：http: //i.imgur.com/zvncUFz.png

我应该使用组或列表框的角色来正确描述内容吗？通过 aria 可访问性规范，我有点迷失了。

基本结构：

<div class="card">
          <div class="card-image">
            <img src="images/sample-1.jpg">
            <span class="card-title">Card Title</span>
          </div>  
          <div class="card-content">
            <p>Card Content</p>
            <a href='#'>Authors</a>
          </div>
          <div class="card-action">
            <a href="#">This is a link</a>
          </div>
</div>

关于可能如何正确处理多个作者的链接的附带问题。

4

1 回答 1

3

我认为这是一个带有 figcaption 的数字。

我将其标记如下（在 Jade 中）：

figure
    div.card-image
        img(src="", alt="If needed, any descriptive text here will be spoken by a screen reader, but will not be visible")
        span.card-title Card Title
    figcaption Anything within this figcaption tag will automatically be spoken by the screen reader
    a.card-action(href="#") This is a link

在这种情况下，根本不需要使用任何 ARIA 属性。所需要的只是语义标记。我希望这有帮助。

于 2014-12-29T06:55:12.867 回答