Kurulum & yapılandırma

Önceden yapılandırılmış sürümler

• Drupal yükleyicisi
• WordPress yükleyicisi
• Kirby yükleyicisi (katkı)
• CraftCMS yükleyicisi (katkı)

Özel kurulum

Kendi uygulamanızı oluşturmak için bir dil paketinin, JS min dosyasının ve CSS min dosyasının yerel bir kopyasını indirin (veya bir CDN sürümüne başvurun) ve ardından yeni bir "Ed11y" örneği oluşturun.

ESM/JS modül içe aktarımları için:

Eski tarayıcılar ve sistemler için .umd JavaScript dosyalarını kullanın:

Parametreler

Eksiksiz bir uygulama yalnızca oturum açmış düzenleyiciler için çağrılır (site ziyaretçilerinizin denetleyicinizi görmesini istemezsiniz!) ve varsayılan parametrelerden herhangi birini geçersiz kılabilir.

Tüm parametreler için varsayılan değerlerin sağlandığını unutmayın; yalnızca geçersiz kılmak istediğiniz şeyleri ekleyin.

Kapsamlı biçimde özelleştirilmiş bir uygulama şuna benzeyebilir:

Anahtar teslim entegrasyonlar bu değişkenleri genellikle dinamik olarak ayarlar; örneğin sayfalar yakın zamanda düzenlendiyse "assertive" modunda yükler ve birkaç dakika sonra "polite" moduna geçer.

Tema oluşturma

Birçok parametre, tema seçmeye, renkleri geçersiz kılmaya ve CSS eklemeye olanak tanır.

Gelecekteki güncellemeleri kolaylaştırmak için yalnızca geçersiz kılmanız gereken parametreleri ekleyin.

Kullanışlı JS olayları

Tema geliştiricileri, gerektiğinde sayfayı tepki vermek ve değiştirmek için bu olaylara bağlanabilir.

Tipik tetiklenme sırasıyla:

• ed11yRunCustomTests: Sonuçlar nesnesi özel sonuçların eklenmesine hazır olduğunda gönderilir. Bu olayın gönderilmesi için customTests parametresinin çalıştıracağınız özel test işlevlerinin sayısına (…muhtemelen bir…) ayarlanması gerektiğini unutmayın. Ayrıntılar aşağıdaki bölümde.
• ed11yResults: Tüm denetimler tamamlandığında gönderilir. API entegrasyonları artık Ed11y.results nesnesinden veri toplayabilir.
• ed11yPanelOpened: Panel otomatik veya manuel olarak açılırsa gönderilir.
• ed11yShowHidden: Bir data-ed11y-result numarası ve bir viaJump boolean değeri sağlar. Yalnızca "ed11yShowHidden" parametresi ayarlanmışsa ve öğenin bir üst öğesi bir seçiciyle eşleşiyorsa gönderilir. Uyarıları henüz açık olmayan kaplarda (örn. akordiyon, sekme ve atlı karıncalar) ortaya çıkarmak için kullanılır. Sonraki bölümde kullanım örnekleri.
• ed11yPop: data-ed11y-result kimliğinin yanı sıra result ve tip nesnelerine başvurular sağlar. Bir ipucu göründüğünde gönderilir ve çalışma zamanında ipuçlarını değiştirmenize olanak tanır.
• ed11yShut: data-ed11y-result kimliği sağlar. Bir ipucu kapandığında gönderilir.
• ed11yDismissalUpdate: Bir kullanıcı uyarıyı kapattığında veya geri yüklediğinde genişletilmiş bilgi sağlar. API entegrasyonlarında kullanılır. Olay nesnesi şunları içerir:
  • dismissPage
  • dismissTest
  • dismissKey
  • dismissAction

Örnekler aşağıdaki bölümlerde bulunabilir.

İpuçlarını değiştirme

Yalnızca bir ipucunun metnini değiştirmek istiyorsanız, kütüphaneyi çağırmadan önce ed11yLang.en global nesnesindeki ya da çağırdıktan sonra Ed11y.M nesnesindeki öğeleri doğrudan geçersiz kılabilirsiniz. Drupal modülünde dil paketi Drupal.ed11yLang olarak adlandırıldığından örnek şöyle görünür:

Drupal.ed11yLang.lang.testNames.title = "Please write shorter headings."

Bu durum yerelleştirme dosyasındaki varsayılan anahtarlar veya etkin dile özgü çeviri için geçerlidir.

Drupal modülü ayrıca editLinks parametresini kullanarak ipuçlarına özel düzenleme bağlantıları ekler. "Sayfa düzenleyicisi" ve "Düzen düzenleyicisi"ne dikkat edin:

Bu parametreyi ayarlayan kodun basitleştirilmiş versiyonu:

Drupal modülü daha sonra ipuçları gösterildiğinde bağlama göre düzenleme bağlantısını dinamik olarak gösterip gizlemek için ed11yPop olayını kullanır.

Bu olay, result ve tip nesnelerine başvurular sağlar:

Özel testler

customTests parametresi bir sayıysa, Editoria11y denetim sırasında bir "ed11yRunCustomTests" olayı gönderir ve ardından belirtilen sayıda "ed11yResume" olayını dinlerken 500 ms'ye kadar bekler.

Bu mekanizma, özel testler içeren istediğiniz sayıda komut dosyasını çağırmak için kullanılabilir; bu komut dosyaları ipuçları çizilmeden önce sonuçlarını sonuçlar dizisine ekleyebilir.

Örneğin, gizlenmiş URL'lerle e-postalardan yapıştırılan bağlantıları işaretlemek için şu ipucunu oluşturmak isterseniz:

Yapmanız gerekenler:

1. ed11yRunCustomTests olayı için bir dinleyici ekleyin
2. Eşleşen öğeleri bulun
3. İpucu mesajını tanımlayın
4. Editoria11y'nin ipucunu çizmesine izin vermek için "resume" olayını gönderin:

Gizli veya boyut kısıtlamalı içeriklerdeki uyarılarla başa çıkma

Birçok etkileşimli bileşen (sekmeler, kaydırıcılar, akordiyonlar) içeriği gizler. Editoria11y bilgi paneli, sorunlara doğrudan atlamak için ileri/geri düğmeleri içerir. Editoria11y, sorunun ipucunun şu anda görünmez olduğunu düşünüyorsa kullanıcıyı bir sorun olduğu konusunda uyarır ve ardından ilk görünür atayı vurgular; örneğin bir akordiyon etrafındaki div öğesi.

İdeal olarak temanız, Editoria11y'nin görünürlük denetimi çalışmadan önce bu öğeleri görünür kılar; böylece her şey kullanıcılarınız için sihir gibi çalışır — atlı karıncalar otomatik olarak ilerler ve akordiyonlar sorunu görüntülemek için otomatik olarak açılır.

Bunu panel ilk açıldığında yapmak için (örn. sorunları olan tüm akordiyon panellerini açmak) ed11yPanelOpened için bir JS olay dinleyicisi ekleyin, ardından ilgili ed11y-element-result öğeleri için querySelectorAll çalıştırın ve temanızın sayfanın bu bölümünü göstermek için kullandığı işlevi tetikleyin.

jQuery tabanlı bir örnek. Panel açıldığında yapışkan bir menüyü devre dışı bırakır (öğelerin örtülmemesi için), ardından kapalı akordiyon öğelerinin içindeki ed11y-element-result öğelerini arar ve açma/kapama düğmelerine tıklamayı simüle eder:

Yalnızca panel'in "sonraki" düğmesi aracılığıyla belirli bir ipucuna atlarken içeriği göstermek için (örn. kapalı bir sekmede veya sonraki atlı karınca slaytında), parametrelerinizde hem hiddenHandlers'ı ilgili CSS seçicilerine hem de checkVisible'ı TRUE olarak ayarlamanız gerekir. Ardından ed11yShowHidden olayı için bir olay dinleyicisi ekleyin. Bu olay, Editoria11y bir ipucunun seçenekler listesinde sağlanan hiddenHandlers seçicilerinden biriyle eşleşen bir kap içinde olduğunu fark ederse tetiklenir. Bu JS olayı, açmak üzere olduğu ipucunun kimliğini içerir. Editoria11y, JS'nize öğeyi görünür kılmak için zaman tanımak amacıyla bu olayı gönderdikten sonra kısa bir süre duraklar.

Penn State uygulamasından bir örnek. Sağlanan kimlikle eşleşen öğeyi bulur, ardından üst etkileşimli bileşen kabını bulur ve açma/kapama olayını tetikler:

Son not: bazı temalar görünürlük denetimiyle uyumlu değildir; örneğin <main> kabının yüksekliği 0 pikseldir. Bu tür siteler, checkVisible'ı false olarak ayarlayarak tüm görünürlük denetimini devre dışı bırakmalıdır.