Bir tanım listesinde () tanım terimini (<dl>) gizlemek (göster: yok:) tamam mı?

Question

Dolayısıyla, menü öğelerinin bir listesini kullanıyorum ve her bir öğenin özellikleri için sınıf özniteliklerine veya tanım listelerine sahip yaylar kullanmam gerekip gerekmediğini anlamaya çalışıyorum. İşte iki seçenek ben düşünüyorum şunlardır:

Seçenek 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: "$"; } 
} 

Seçenek 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; } 
} 

Şu anda 1. seçeneği kullanarak, ancak bazı nedeni seçeneği için iki görünür bana ediyorum ürünü tanımladığı için semantik olarak daha zengin olmak. Hangi seçenekle birlikte gitmeli ve neden?

Answer 1

Eğer ikinci ile gidecekseniz display: none; kullanmamalısınız. Ekrandaki metinleri ekrandan ayırmak daha iyi olur, böylece ekran okuyucuları buna ulaşabilir.

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

Answer 2

Semantik olarak daha zengin kod (2) ile devam edip dt dosyasını saklıyorum. Belki de sakladığınız dts hakkında daha spesifik olun: article.menu-item.dt {display: none }. Metni daha okunabilir hale getirecek ve kodunuzdaki yayılma ve div çorbasından kaçınılacaktır.