定義リスト（）に定義用語（<dt>）を非表示（表示：なし;）できますか？

Question

私はメニュー項目のリストを持っており、各項目の特性についてクラス属性または定義リストでスパンを使用すべきかどうかを判断しようとしています。

オプション1）

// HAML Markup 

%article.menu-item 
    %span.name 
    Cereal 
    %span.price 
    4.00 
    %span.description 
    We carry Cap'n Crunch, Frooty Loops and Count Chocula. Milk included. 

// Styling 

article.menu-item { 
    .price:before { content: "$"; } 
} 

オプション2）私は現在、オプション1を使用しますが、私にはいくつかの理由のオプションのための2つが表示されています

// HAML Markup 

%article.menu-item 
    %dl 
    %dt 
     Item 
    %dd 
     Cereal 
    %dt 
     Price 
    %dd 
     4.00 
    %dt 
     Description 
    %dd 
     We carry Cap'n Crunch, Frooty Loops and Count Chocula. Milk included. 

// Styling 

article.menu-item { 
    .price:before { content: "$"; } 
    dt { display: none; } 
} 

：ここで私が検討しています2つのオプションがありますそれが製品を定義するので意味的に豊かになる。どちらのオプションを使うべきですか？その理由は何ですか？

Answer 1

もしあなたが二番目に行くつもりならば、display: none;を使うべきではありません。あなたはスクリーンリーダーがまだそれを得ることができるようにテキストをスクリーンから外す方が良いでしょう。

dt { 
    position: absolute; 
    left: -9999px; 
    top: -9999px; 
} 

Answer 2

私は、より意味のあるより豊富なコード（2）に行き、dtを隠すと言う。多分あなたが隠しているdtsについてより具体的なものになるでしょう：article.menu-item.dt {display: none }。テキストをより読みやすくし、コード内のスパンとdivスープを避けます。