Question

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

我是否应该使用组或列表框的角色来正确描述内容？我通过咏叹调可访问性规范读了一段时间。

基本结构：

<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属性。所需要的只是语义标记。我希望这会有所帮助。

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

1 个答案: