Zephyrnet Logosu

"detaylar" hakkında daha fazla ayrıntı

Tarih:

Ol' etrafında bir sürü gevezelik

ve

Son zamanlarda elementler! gördüm Lea Verou geçenlerde bir gözlemi tweetledi eleman hakkında display davranış ve bu sorta, insanlardan daha fazla gözlem ve kullanım notuna ayrıldı. yeniden canlanan tartışma olup olmadığına

etkileşimli öğeler içermesine veya içermemesine izin verilmelidir.

Birleştirilecek çok nokta var ve burada tam olarak bunu yapmak için elimden geleni yapacağım.

İç içe geçmiş öğelerin görüntüsünü değiştirebilir miyiz?

eleman?

Süper tuhaf! DevTools'u açarsak, kullanıcı aracısı stil sayfası bize şunu söyler:

bir blok öğesi olarak görüntülenir.

gerekli dikkat edin

eleman ve iki ek

orada. geçersiz kılabiliriz display, sağ?

Bekleyebileceğimiz şey şu ki

şimdi açık bir yüksekliğe sahip 40vh ve üçüncü satırın ilk ikisinden kalan alanı kapladığı üç satır. Bunun gibi:

Bir foo ve bir sarı ve bir mavi olmak üzere iki alt öğenin bir özetini içeren ayrıntılar öğesini açın. Mavi öğe, özetin ve ilk alt öğenin bıraktığı boşluğun geri kalanını kaplar.

Ugh, ama üçüncü sıra bunu… yapmaz.

Bir foo ve bir sarı ve bir mavi olmak üzere iki alt öğenin bir özetini içeren ayrıntılar öğesini açın. Özet ve iki alt öğenin tümü aynı yüksekliktedir.

Görünüşe göre uğraştığımız şey, ızgara öğelerine ızgara davranışı uygulayamayan bir ızgara kabı. Ancak HTML spesifikasyonu bize şunları söylüyor:

The details eleman olarak sunulması bekleniyor blok kutusu. Elemanın ayrıca bir dahili olması bekleniyor gölge ağacı ikisiyle yuvaları.

(benimki vurgula)

Ve biraz sonra:

The details elemanın ikinci yarık sahip olması bekleniyor style öznitelik "olarak ayarlandıdisplay: block; content-visibility: hidden;" ne zaman details elemanı yok open özniteliği. sahip olduğu zaman open öznitelik, style özniteliğin ikinciden kaldırılması bekleniyor yarık.

(Yine benimki vurgulayın)

Yani, teknik özellik ikinci yuvayı söylüyor - iki ek

örnekten s — yalnızca şu durumlarda blok eleman olmaya zorlanır:

kapalı. Açık olduğunda -

— kullanıcı aracısı stilini geçersiz kılan ızgara görüntüsüne uymaları gerekir… değil mi?

Tartışma budur. anladım slots için ayarlandı display: contents varsayılan olarak, ancak iç içe öğeleri yuvalara sıkıştırmak ve bunları stillendirme yeteneğinin kaldırılması yanlış görünüyor. İçeriğin yuva olması belirli bir sorun mu yoksa geçersiz kılamadığımız bir tarayıcı sorunu mu? display kutu ağacında olsalar bile mi? Daha akıllı insanlar beni aydınlatabilir ama yanlış bir uygulama gibi görünüyor.

Is

bir kapsayıcı mı yoksa etkileşimli bir öğe mi?

Birçok insan kullanma

menüler arasında geçiş yapmak için açık ve kapalı. Bu bir alıştırma GitHub tarafından popüler hale getirildi.

DevTools, ayrıntılar öğesi turuncu renkle vurgulanarak açılır.

Mantıklı görünüyor. Spesifikasyon kesinlikle izin verir:

The details eleman temsil kullanıcının ek bilgi edinebileceği bir ifşa etme aracı veya kontroller.

(benimki vurgula)

Tamam, yani bunu bekleyebiliriz

kapsayıcıdır (bir dolaylı olarak role=group) Ve

kapsayıcıyı ayarlayan etkileşimli bir öğedir. open durum. beri mantıklı

ima var button rol bazı bağlamlarda (ancak karşılık gelen WAI-ARIA rolü yoktur).

Fakat Melanie Sumner biraz kazı yaptı. bu sadece bununla çelişiyor gibi görünmekle kalmıyor, aynı zamanda

bir menü olarak muhtemelen en iyi şey değil. bakın ne zaman olacak

olmadan işlenir

eleman:

Bir eksik olduğunda tam olarak spesifikasyonun önerdiği şeyi yapar.

- kendi yapar:

İlk summary elemanın eleman çocuğu, varsatemsil ayrıntıların özeti veya efsanesi. çocuk yoksa summary öğesi, kullanıcı aracısı kendi açıklamasını sağlamalıdır (örn. "Ayrıntılar").

(benimki vurgula)

DevTools, turuncu renkle vurgulanmış özet işaretlemeyle açılır.

Melanie bunu bir HTML doğrulayıcı aracılığıyla çalıştırdı ve — sürpriz! - geçersiz:

Hata, öğe ayrıntılarında gerekli bir alt öğe özeti örneği eksik.

Yani,

gerektirir

. Ve ne zaman

kayıp,

geçersiz işaretleme olarak aktarılsa da kendi oluşturur. Hepsi yakışıklı ve ne zaman geçerli

var mı:

W3C HTML doğrulayıcısından bir ayrıntı öğesi için işaretleme ve bir bağlantı öğesi içeren özet içeren başarı mesajı.

Tüm bunlar yeni bir soruya yol açar: neden ki

dolaylı olarak verilmiş button rol ne zaman

etkileşimli öğe gibi görünen şey nedir? Belki de bu, tarayıcı uygulamasının yanlış olduğu başka bir durumdur? Sonra tekrar, özellik her ikisini de şu şekilde kategorize eder: etkileşimli öğeler. Tüm bunların ne kadar kafa karıştırıcı hale geldiğini görebilirsiniz.

Her iki durumda da, Melanie'nin kullanmaktan kaçınmamız gerektiği nihai sonucu

menüler için, yardımcı teknolojinin nasıl okuduğuna ve duyurduğuna dayanır

etkileşimli öğeler içerir. Öğe duyurulur, ancak siz, er, etkileşim ile

. Ancak o zaman bağlantı listesi gibi bir şey duyurulacak.

Ayrıca, daraltılmış bir içindeki içerik

sayfa içi aramanın dışında tutulur (yazma sırasında daraltılmış içeriğe erişebilen Chromium tarayıcıları hariç), bu da bir şeyleri bulmayı daha da zorlaştırır.

Should

etkileşimli öğelere izin verilsin mi?

işte o sorulan soru bu açık konu. Fikir, böyle bir şeyin geçersiz olacağıdır:

Link element

Scott O'Hara güzel özetliyor bu neden bir sorun:

Bağlantı, sanal imleciyle gezinirken JAWS'a hiçbir şekilde keşfedilemez. Özet öğesine Sekme tuşu aracılığıyla gidiliyorsa, JAWS, öğenin adı ve rolü olarak “örnek metin, düğme” öğesini duyurur. Sekme tuşuna tekrar basarsanız, klavye odağı bağlantıda olmasına rağmen JAWS tekrar “örnek metin, düğme” duyurusunu yapar.

[...]

Özet için farklı AT'nin içerik modeliyle ilgili çeşitli sorunları hakkında devam edebileceğim daha çok şey var… ama bu, bu yorumu sadece gerekli olanın ötesine uzatır. tldr; Özet içerik modeli, AT kullanan kişiler için çok tutarsız ve bazen sadece düz kırık deneyimler üretir.

Scott, bu davranışı düzeltmek için biletler açtı: Krom ve WebKit. Teşekkürler, Scott!

Yine de, geçerli HTML'dir:

Ayrıntılar işaretlemesiyle birlikte W3C doğrulayıcısından gelen başarı mesajı.

Scott daha da ileri gider ayrı bir blog yazısı. Örneğin, nasıl tokat attığını açıklıyor. role=button on

yardımcı teknoloji tarafından sürekli olarak duyurulmasını sağlamak için makul bir düzeltme gibi görünebilir. olup olmadığı konusundaki tartışmayı da çözecektir.

etkileşimli öğelere izin vermeli çünkü düğmeler etkileşimli öğeler içeremez. Tek sorun, Safari'nin daha sonra tedavi etmesidir.

özelliğini kaybeden standart bir düğme olarak expanded ve collapsed devletler. Yani, doğru rol açıklandı, ancak şimdi durumu değil. 🙃

Şimdi nereye gidiyoruz?

kullanmaktan korkuyor musun

/

tüm bu sorunlar ve tutarsızlıklarla? Kesinlikle öyle, ancak yalnızca içindekilerin kullanıcılar için doğru türde deneyim ve beklentiler sağladığından emin olmak için.

Bu konuşmaların gerçekleşmesine ve açıkta gerçekleşmesine sevindim. Bu nedenle, içerik modelinin nasıl olduğu konusunda Scott'ın önerdiği üç çözüm hakkında yorum yapabilirsiniz.

tanımlanmış, biletlerini artırın ve kendi sorunlarınızı bildirin ve siz işteyken vakaları kullanın. Umarım, öğelerin nasıl kullanıldığını ve ne yapmalarını beklediğimizi ne kadar iyi anlarsak, o kadar iyi uygulanırlar.

spot_img

En Son İstihbarat

spot_img