1

これに似たデザインの場合、マテリアライズで使用される画像カード: 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

これはフィグキャプション付きのフィギュアだと思います。

これを次のようにマークアップします（ジェイドで）：

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 に答える