材料设计卡的区域角色组或列表框？

Question

对于与此类似的设计，用于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>

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

Answer 1

我认为这是一个有插图的人物。

我将标记如下（在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属性

。所需要的只是语义标记。我希望这会有所帮助。