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.
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:
Ugh, ama üçüncü sıra bunu… yapmaz.
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ı bekleniyorstyle
öznitelik "olarak ayarlandıdisplay: block; content-visibility: hidden;
" ne zamandetails
elemanı yokopen
özniteliği. sahip olduğu zamanopen
ö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.
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.
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, varsa, temsil ayrıntıların özeti veya efsanesi. çocuk yoksasummary
öğesi, kullanıcı aracısı kendi açıklamasını sağlamalıdır (örn. "Ayrıntılar").(benimki vurgula)
Melanie bunu bir HTML doğrulayıcı aracılığıyla çalıştırdı ve — sürpriz! - geçersiz:
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ı:
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.
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:
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:
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.