Masaüstünde Akordiyon Menü: Ne Zaman Kazandırır, Ne Zaman Engel Olur

Akordiyon menü sayfayı kısaltmaz, kaydırma maliyetini tıklama maliyetine çevirir. Bu takas mobilde çoğu zaman kârlıdır, masaüstünde çoğu zaman değildir. Aşağıda takasın nerede döndüğünü ve kapalı içeriğin gerçekten kaybolup kaybolmadığını ayırıyoruz.

Bileşen tam olarak ne yapıyor

Akordiyon bir başlık listesi ve her başlığın altında açılıp kapanan bir içerik bölgesinden oluşur. Sayfa açıldığında kullanıcı yalnızca başlıkları görür, yani sayfanın küçük bir içindekiler tablosunu. Kazanç burada: on paragraflık bir metin yerine on satırlık başlık listesi, aradığım şey bu sayfada var mı sorusuna saniyeler içinde cevap verir.

Bedel ise her açma işleminde ödenir. Kullanıcı k bölüme bakacaksa k tıklama yapar, her açılışta gözünü yeniden konumlandırır ve açılan panel altındaki başlıkları aşağı ittiği için sayfa düzeni sürekli kayar. Beş bölümün üçüne bakması gereken biri için akordiyon, düz metinden yavaştır. Oran tersine döndüğünde, yani kullanıcı tipik olarak bir bölüme bakıp çıkıyorsa, kazanç gerçektir.

Kapalı içerik gerçekten kayıp mı

En sık atlanan nokta sayfa içi arama. Native <details> ve <summary> ile kurulmuş bir akordiyonda Chrome ve Edge, Ctrl+F ile arama yapıldığında eşleşmenin bulunduğu kapalı bölümü otomatik açar. Kendi JavaScript'inizle yazdığınız, paneli display:none ile gizleyen bir akordiyonda bu çalışmaz; metin sayfada yokmuş gibi davranır. Aynı davranışı özel işaretlemede istiyorsanız gizleme yöntemini hidden="until-found" olarak değiştirmeniz gerekir, bunu üç satırla çözersiniz, üçüncü parti bir bileşen kütüphanesine gerek yok.

Arama motoru tarafı daha basit: DOM'da bulunan metin okunur, kapalı olması indekslemeyi engellemez. Yani sorun SEO sorunu değil, kullanıcının o metni görüp görmediği sorunudur. Bu ikisini karıştıran ekipler yanlış yeri optimize eder.

Masaüstünde nerede yeri var

Akordiyon, içeriğin kendisi paralel seçeneklerden oluştuğunda işe yarar. Sıkça sorulan sorular, teknik özellik grupları, farklı kullanıcı tiplerine ayrılmış kurulum adımları: kullanıcı bunların hepsini değil, kendisine uyanı okur.

Düz bir yazıyı akordiyona bölmek ise yanlış işi çözer. Metin uzun geliyorsa sorun uzunluk değil, sırasının ya da içindeki tekrarın bozuk olmasıdır. Masaüstünde akordiyon çoğunlukla içerik fazlalığını gizlemek için kullanılıyor (bunu bir çözüm değil erteleme sayıyorum).

Kullanıcılar uzun sayfayı okumaz sözü de bu yüzden yanıltıcı. İlgilenmediği konuda kimse kaydırmaz, ilgilendiğinde sonuna kadar iner. Kaydırma davranışı içeriğin uzunluğunu değil, ilk ekranda verilen sözün tutulup tutulmadığını ölçer.

Uygularken kırılan yerler

Akordiyonun görsel tarafı kolay, doğru çalışan tarafı birkaç ayrıntıya bakar:

• Başlık tıklanabilir bir div değil gerçek bir button olmalı; klavyeyle sekme sırasına girmesi ve Enter ile Boşluk tuşuna yanıt vermesi buna bağlı.
• Butonda aria-expanded durumu açılıp kapandıkça güncellenmeli, aria-controls ile panele bağlanmalı. Ekran okuyucu kullanıcısının kapalı bir bölümün varlığını bilmesinin tek yolu bu.
• Bir bölüme doğrudan bağlantı verilebilmeli. Adres satırındaki # parçasıyla gelen ziyaretçiye ilgili bölüm açık gelmiyorsa, o bağlantı boş bir sayfaya açılıyor demektir.
• Yazdırma stilinde tüm paneller açık gösterilmeli, yoksa çıktıda yalnızca başlıklar kalır.
• Birden fazla bölümün aynı anda açık kalmasına izin verin. Yeni açılan bölümün öncekini kapattığı davranış, karşılaştırma yapmak isteyen kullanıcıyı ileri geri tıklamaya mahkûm eder.

Bu beş maddeyi karşılamayan bir akordiyon, sayfayı derli toplu gösterse bile kullanıcıya net bir kayıp yazar.