Drupal için Editoria11y

Temel özellikler

Drupal modülü, denetleyici kütüphanesini editoryal arka uca bağlar ve raporlama, yönetim ve yapılandırma için çok sayıda sunucu tarafı araç ekler.

Satır içi ipuçları bulunan Drupal editörü
Sorunlar hem ön uçta sayfa yüklenirken hem de CKEditor ve Gutenberg'de yazarken tespit edilir.
Bir bağlantının yalnızca "tıklayın" olarak adlandırıldığını gösteren ipucu.
İpuçları, düzenleyiciye atlamak, uyarıyı yoksaymak (aktif kullanıcı için) veya tamam olarak işaretlemek için (tüm kullanıcılar için) düğmeler kazanır. Tekrarlayan uyarılar sayfa genelinde veya site genelinde eylemler sunar.
İpucu başlığı ve içerik alanlarının yanı sıra öğe seçiciler ve dışlamaları gösteren özel test oluşturucu arayüzü.

CSA alt modülü şunları ekler:

  • Özel test oluşturucu
  • 40'tan fazla geliştirici testi
  • Kontrast denetimi
  • Site tarayıcıları
  • Okunabilirlik analizi
  • Geliştiriciler/editörler için ayrılmış yapılandırmalar
En çok sorun bulunan son sorunları ve sayfaları gösteren raporlama kontrol paneli.
Site genelinde bir kontrol paneli, uyarıların ve kapatmaların filtrelenebilir ve dışa aktarılabilir raporlarını sağlar.

Kurulum ve temel kurulum adımları

Drupal.org'daki paketlenmiş yükleyici birkaç modül içerir:

  • Editoria11y: temel içerik denetleyicisi ve kontrol paneli.
  • Editoria11y CSA: geliştirici testleri ve kontrol paneli bakım araçları.
  • Editoria11y Export: CSV raporlama araçları.

Diğer modüller gibi kurun ve ardından şu temel adımları izleyin:

  1. İzinleri kontrol edin. Güvenilir yazarların "Tamam İşaretle," "Yoksayıldı Olarak İşaretle" ve "Kontrol panelini görüntüle" izinleri olmalıdır.
  2. Tekrarlayan veya yararsız uyarılar için önemli sayfaları kontrol edin. Bunları ipucu üzerinde Tamam olarak işaretleyin veya seçici kullanarak öğeleri yoksaymak için yapılandırmayı ayarlayın.
  3. Görülmesi zor ipuçları arayın; ekran dışı, kesilmiş, diğer öğelerin arkasında veya gizli öğelerde bulunanlar. Düzeltmek için aşağıdaki "İpucu konumlandırmayı düzelt" bölümündeki ipuçlarını kullanın.
  4. Site zaten içerik barındırıyorsa ve bir CSA aboneliğiniz varsa, kontrol paneli "yeniden tara" sekmesini ziyaret edin ve site raporlarını önceden yüklemek için siteyi tarayın. Bu isteğe bağlıdır, ancak eski sayfalar oturum açmış bir kullanıcı tarafından ziyaret edilip taranana kadar raporlarda görünmez.

Yapılandırma seçeneklerine video girişini görüntüleyin (v2.4).

Yararsız uyarıları gizle

İyi yapılandırmalar yararsız uyarıları bastırır, böylece içerik yazarları düzeltmeleri gereken sorunlara odaklanabilir.

Testleri tamamen kapatabilseniz de, genellikle belirli öğeler veya sayfalardaki uyarıları gizlemek daha iyidir.


Her test çalıştırmasında Editoria11y, "Bu kaplardaki içeriği denetle" ayarından tek bir öğe kümesi toplar ve ardından bunu birkaç kez filtreler. Bir test çalıştırması şöyle görünür:

  1. Yapılandırma bu sayfa veya bu kullanıcı için denetimi engelliyorsa denetimi iptal edin.
  2. Topla belirtilen sayfa bölgelerindeki öğeleri, örneğin:
    body > *:not('.ed11y-element')
    Editoria11y CSA kullanıcıları için bunlar Geliştirici testleri sekmesindeki bölgelerdir.
  3. Bırak yoksay seçicileriyle eşleşen öğeleri, örneğin:
    .widgets, .utility-menu
    Editoria11y CSA kullanıcıları için bunlar Geliştirici testleri sekmesindeki seçicilerdir.
  4. Testleri çalıştır ve sonuçları kontrol paneliyle senkronize et.
  5. Ayrılmış yapılandırma etkinse ve kullanıcı bir içerik editörüyse, geliştirici sonuçlarını filtrele:
    • Bırak "Yalnızca geliştirici" olarak ayarlanan testlerin sonuçlarını.
    • Bırak belirtilen içerik bölgelerinin dışındaki öğelerdeki sonuçları, örneğin:
      main, footer
    • Bırak içerik yoksay seçicileriyle eşleşen öğelerdeki sonuçları.
    İkinci bir "toplama" aşaması olmadığını unutmayın. Geliştirici sayfa bölgeleri, içerik bölgelerini kapsamalıdır.
  6. Yapılandırma bir otomatik açma ayarıyla eşleşiyorsa paneli açın ve uyarıları çizin.

Uyarıları kapat

Testler kütüphanede hata veya uyarı ("manuel kontrol") olarak yapılandırılabilir. Uyarılar kapatılabilir. Her ipucunun alt kısmından iki tür kapatma mevcuttur:

  • "Yoksay", bir kullanıcı tercihi olarak depolanır: uyarı artık geçerli kullanıcı için gizlenir, ancak yalnızca bu kullanıcı için.
  • "Tamam İşaretle", uyarıyı tüm kullanıcılar için gizler.

Bir kullanıcının uyarıyı kapatıp kapatamayacağı, Drupal'ın kullanıcı izinlerinde rol düzeyinde kontrol edilir. Çoğu yazara uyarıları kapatma izni verilmelidir. Bir öğeyi kontrol etmiş olarak işaretleyemiyorlarsa birine manuel kontrol atamak anlamsızdır.

Öğeleri yoksay

Bu iki yapılandırma ayarı en önemlileridir!

İçerik yazarlarının düzenleyebildiği sayfa içeriğinin herhangi bir bölümünü dahil etmek için birincisini ayarlayın. Örneğin, main içerik alanını, .sidebar'ı ve .footer-column-two'yu düzenleyebiliyorlarsa bunları içerik denetim alanı olarak ayarlayın.

Alt bölümleri "devre dışı bırakmak" için ikincisini kullanın. Örneğin, main yalnızca geliştiricilerin değiştirebileceği çeşitli widget'lar ve gömülü öğeler içeriyorsa bunları listeleyin: .widget-1, .social-embed;

Ayrılmış yapılandırmayı kullanıyorsanız Geliştirici Testleri sekmesinde benzer bir ayar çifti göreceksiniz:

Developer check area

Geliştirici denetim alanları hakkında bilinmesi gereken temel şey, içerik denetim alanlarından bağımsız olmadığıdır. Ayrılmış bir yapılandırmada geliştirici alanları denetlenir ve ardından bu sonuçlar içerik alanlarıyla eşleşecek şekilde filtrelenir. Geliştiriciler için hariç tutulan alanlar içerik editörleri için de hariç tutulur. Düzenlenebilir içerik alanlarını hariç tutmayın!

Bazı testler, yalnızca etkilenen öğelerdeki belirli uyarıları gizlemek için daha hassas yapılandırmaya olanak tanır. Bunları şu başlıklar altında arayın:

  • İçerik testleri: Denetlenecek bağlantılar
  • İçerik testleri: Denetlenecek gömülü öğeler
  • İçerik testleri: Dinamik ve gölge içeriği algılama
  • Geliştirici testleri: Kontrast

Belirli sayfalar veya kullanıcılar için gizle

Bunu yapmanın en kolay yolu, bu seçeneklere CSS sınıfları veya kimlikleri iletmektir:

Birincisi, denetimlerin çalışmasını engeller ve araç çubuğu gösterilmez.

İkincisi, denetleyiciyi küçültülmüş olarak başlatır ve tüm sorunları (hatalar dahil) mevcut kullanıcı için otomatik olarak "Yoksayıldı" olarak işaretler. Bu, testlerin çalışmasına ve kontrol panelini güncellemesine izin verirken kullanıcıyı rahatsız etmez.

Hangi kullanıcıların denetleyiciyi göreceğini kontrol etmek için bunları kullanmak istiyorsanız, temanızı bir sınıf çıkarmak için ayarlamanız gerekebilir, örneğin .user-247

Site genelinde sonuçları yönetin

Sonuçları tarama ve güncelleme

Editoria11y, gerçek zamanlı bir izleme aracıdır, tarayıcı değildir. Site genelindeki raporlar yazarlar sayfaları görüntülediğinde güncellenir, bu nedenle düzenli tarama genellikle gerekli değildir. CSA modülü bir tarayıcı içerir, ancak yalnızca şu üç durumda gerekli olabilir:

  1. Editoria11y'yi çok sayıda sayfası olan mevcut bir sitede ilk kez kurarken. Sayfaların kontrol panelinde görünmesi için ziyaret edilmesi gerekir, bu nedenle hızlı bir başlangıç taraması zamandan tasarruf sağlar.
  2. Tema veya modül güncellemeleri, ziyaret edilene veya taranana kadar görünmeyecek birçok sayfada sorunları düzeltebilir (veya neden olabilir).
  3. Yönetici arayüzündeki sayfaları silme veya yeniden yönlendirme gibi toplu işlemler, artık var olmayan veya taşınmış sayfaların sonuçlarını geride bırakma eğilimindedir. Bu durumlarda sayfa URL'lerini yenilemek ve silinen sayfaları tespit edip bırakmak için "Yenile" sekmesinin bakım eylemlerini kullanmak yardımcı olur.

Tarama sırasında sitenizden hiçbir veri çıkmaz. CSA tarayıcısı bir bulut aracı değildir; kendi sitenizin sayfalarını yüklemek ve denetlemek için tarayıcınızı kullanır. Bu yaklaşımın dezavantajı, tarayıcıların arka plan sekmelerini duraklatmasıdır. Tarama sırasında bilgisayarınızı açık ve uyanık tutmanız gerekecektir. Tarayıcı için yeni bir pencere açmayı ve çalışırken o pencerenin ön plan sekmesi olarak kalmasını sağlamayı planlayın. Başka bir pencerede çalışmaya devam edebilirsiniz. Tarayıcı, her sayfa grubundan sonra tahminini güncelleyecektir.

Raporları görüntüleme

  • Son bölümü, bireysel uyarıları incelemeye olanak tanır. Bu bölüm, aynı uyarı türünün tüm örneklerini bulmak, son içeriklerde sık görünen uyarıları veya hangi yazarların aynı hatayı yapmaya devam ettiğini görmek gibi şeyleri yapmanıza olanak tanır.
  • Sayfalar, sayfaya göre gruplandırılmış uyarı sayılarını gösterir. Bu bölüm, en çok sorunu olan sayfaları bulmayı ve içerik türü ile yayınlanma durumu gibi sayfa özelliklerine göre filtrelemeyi sağlar.
  • Uyarılar, sorunları türe göre gösterir.
  • Kapatmalar, yazarların doğru şekilde kapatıp kapatmadığını izlemeye olanak tanır ve kapatılan uyarıları geri yüklemek için "sıfırla" düğmeleri içerir.
  • Dışa Aktar, CSV indirme hazırlamak için filtrelenebilen Sayfalar, Uyarılar ve Kapatmalar raporlarının versiyonlarını içerir. CSV Dışa Aktar alt modülü tarafından sağlanır
  • Yenile, silinen sayfalardan gelen uyarıları kaldırmaya, /search?query=example gibi parametreli sahte sayfalardan gelen uyarıları kaldırmaya, depolanan sayfa başlıklarını ve URL'lerini güncellemeye ve manuel tarama çalıştırmaya yarayan kontrol paneli bakım araçlarını içerir. CSA alt modülü tarafından sağlanır

Gizli veya ekran dışı ipuçlarını düzelt

Modül, ipuçların yerleştirilme biçimini değiştirmek için kütüphanenin iki yapılandırma seçeneğine alan sağlar:

Bazı temalar, yatay veya dikey taşmayı gizleyen sütunlar veya widget'lar içerir. Kütüphane, bir açma/kapama düğmesinin sayfanın görünür kısmının dışına düşeceğini otomatik olarak algılar. Kütüphaneye belirli kapların taşmayı gizlediğini söylemek, ipuçlarını bu kaplardaki öğeler için de sınırları içinde konumlandırmaya çalışmasını sağlar.

Bazı temalar, içeriğin görünürlüğünü değiştiren widget'lara sahiptir (akordiyonlar, sekmeler ve slayt gösterileri gibi). Bu öğelerin içindeki ipuçları da gizlenecektir. Bu widget'lar için seçici listesi sağlamak, bir kullanıcı ileri veya geri düğmesiyle bu ipuçlarına atlamaya çalıştığında Editoria11y'nin kısa bir süre duraklaması anlamına gelir. Drupal temaları ve modülleri daha sonra gizli içeriği göstermek için gizli içerikte ipuçlarıyla başa çıkma konusundaki kütüphane bölümündeki yönergeleri takip edebilir.

Kendi yapılandırmanızı yazın

PHP'de: Drupal modülü, bir modül veya temada drupalSettings.editoria11y içeriğini değiştirmek için bir hook_editoria11y_alter_config sağlar. Örneğin:

drupalSettings'ı değiştirmek yalnızca modül JS'i bu değeri kütüphaneye iletecek şekilde zaten kurulmuşsa yardımcı olur. Ek parametreler eklemek için JS options nesnesini doğrudan değiştirmeniz gerekir. Modül, editoria11yOptionsOverride adında bir global JS değişkeni kontrol eder. Bu ayarlanmışsa modül veya temanda sağladığınız bir editoria11yOptions işlevine options nesnesini iletir. Artık kütüphane parametrelerinden herhangi birini ayarlayabilirsiniz.

Kendi testlerinizi yazın

Öncelikle modül yapılandırmasında testleri izlemesini bildirmek için "Özel testler" seçeneğine 1 ekleyin.

Ardından özel test yazma kütüphane kılavuzunu kullanarak testlerinizi içeren bir Drupal JS kütüphanesi oluşturun.

Safe Links için özel bir test olan Princeton'dan çalışan bir örnek. Editoria11y sınıfına Drupal.Ed11y. aracılığıyla eriştiğine dikkat edin.

Yardım alma

Topluluk destek seçenekleri için iletişim sayfasına bakın. @itmaybejj genellikle batı yarıküresinde güneş doğduğunda Drupal Slack'te çevrimiçidir.

CSA katkı seviyelerinin çoğu, kurulum ve yapılandırma konusunda doğrudan yardımı kapsayan yıllık bir görüşme içerir.