Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Metin Semantiği: Heading, Paragraph, List, Link, Button ve Inline Element'ler
Kullanıcıyı başka bir adrese götüren şey a, sayfada bir aksiyon yapan şey button'dır; href="#" ve tıklanabilir div klavyeyle ya hiç ya da yarım çalışır. Bu yazıda strong/em ile b/i farkını, dl ile kitap künyesini, time, abbr, code/kbd/samp, blockquote/q/cite ve figure'ı Chromium'un accessibility tree'sinde görüyor, link ile button farkını gerçek bir klavye testiyle ve target="_blank"'in implicit noopener davranışını iki motorda ölçüyoruz.
Semantic HTML ve Landmark'lar: header, nav, main, article, section, aside, footer ve search
Semantic element'ler accessibility tree'de landmark'a dönüşür; ama adsız section region olmaz, article içindeki header banner olmaz ve section içindeki h1 hâlâ birinci seviyedir. Bu yazıda Bookstore'un kitap detay sayfasını div soup'tan semantic yapıya taşıyor, her adımı Chromium'un accessibility tree'sinden okuyor, section/article/div kararını, search element'ini, tek main kuralını ve outline algoritması olmadan heading hiyerarşisini kuruyoruz.