Instalare & configurare

Versiuni preconfigurate

Instalare personalizată

Pentru a construi propria implementare, descărcați o copie locală (sau referențiați o versiune CDN) a unui pachet de limbă, a fișierului JS minificat și a fișierului CSS minificat, și creați o nouă instanță „Ed11y".

Pentru importuri ESM/JS module:

Folosiți fișierele JavaScript .umd pentru browsere și sisteme mai vechi:

Parametri

O implementare completă se va activa doar pentru editorii autentificați (nu doriți ca vizitatorii site-ului să vadă verificatorul!), și poate suprascrie oricare dintre parametrii impliciți.

Rețineți că valorile implicite există pentru toți parametrii; includeți doar parametrii pe care doriți să îi suprascrieți.

O implementare cu configurare avansată ar putea arăta astfel:

Integrările turnkey setează adesea aceste variabile dinamic — de exemplu, încărcând paginile în modul „assertive" când au fost editate recent, și revenind la „polite" după câteva minute.

Tematizare

Mai mulți parametri permit alegerea unei teme, suprascrierea culorilor și injectarea de CSS.

Includeți doar parametrii pe care trebuie să îi suprascrieți, pentru a simplifica actualizările viitoare.

Evenimente JS utile

Creatorii de teme pot folosi aceste evenimente pentru a reacționa și modifica pagina după necesități.

În ordinea tipică de apariție:

  • ed11yRunCustomTests: trimis când obiectul Results este pregătit pentru injectarea rezultatelor personalizate. Rețineți că parametrul customTests trebuie setat la numărul de funcții de test personalizate pe care le veți rula (…probabil una…) pentru ca acest eveniment să fie trimis. Detalii în secțiunea următoare.
  • ed11yResults: trimis când toate verificările sunt finalizate. Integrările API pot acum extrage date din obiectul Ed11y.results.
  • ed11yPanelOpened: trimis dacă panoul se deschide, automat sau manual.
  • ed11yShowHidden: furnizează un număr data-ed11y-result și un boolean viaJump. Trimis doar dacă parametrul „ed11yShowHidden" este setat și un părinte al elementului se potrivește unui selector. Folosit pentru a dezvălui alerte în containere încă nedeschise, de ex., acordeoane, tab-uri și carusele. Exemple de utilizare în secțiunea următoare.
  • ed11yPop: furnizează ID-ul data-ed11y-result, precum și referințe la obiectele result și tip. Trimis când apare un tooltip, permițând modificarea sfaturilor în timp real.
  • ed11yShut: furnizează ID-ul data-ed11y-result. Trimis când un tooltip se închide.
  • ed11yDismissalUpdate: furnizează informații extinse atunci când un utilizator respinge sau restaurează o alertă. Utilizat pentru integrări API. Obiectul evenimentului conține:
    • dismissPage
    • dismissTest
    • dismissKey
    • dismissAction

Exemple pot fi găsite în secțiunile următoare.

Modificarea sfaturilor

Dacă tot ce doriți este să modificați textul unui indiciu, elementele din obiectul global ed11yLang.en (înainte de apelarea bibliotecii) sau Ed11y.M (după apelarea bibliotecii) pot fi suprascrise direct. De ex., în modulul Drupal unde am aliased pachetul de limbă la Drupal.ed11yLang:

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

Acest lucru este valabil pentru oricare dintre cheile implicite din fișierul de localizare sau traducerea specifică limbii active.

Modulul Drupal adaugă, de asemenea, linkuri de editare personalizate la sfaturi, folosind parametrul editLinks. Rețineți „Page editor" și „Layout editor":

Tooltip cu linkuri „Page editor" și „Layout editor" inserate.

O versiune simplificată a codului care setează acel parametru:

Modulul Drupal folosește apoi evenimentul ed11yPop pentru a afișa și ascunde dinamic linkul de editare în funcție de context atunci când sfaturile sunt afișate.

Acest eveniment furnizează referințe la obiectele result și tip:

Teste personalizate

Dacă parametrul customTests este un număr, Editoria11y va emite un eveniment „ed11yRunCustomTests" în timpul verificării și apoi va face pauză până la 500 ms așteptând acel număr de evenimente „ed11yResume".

Aceasta poate fi utilizat pentru a apela oricâte scripturi cu teste personalizate doriți, care pot introduce rezultatele lor în matricea de rezultate înainte ca indiciile să fie desenate.

De exemplu, dacă doriți să creați acest indiciu, pentru a semnala linkuri copiate din emailuri cu URL-uri ofuscate:

Sfat care citește „URL is Safe Link Encoded"

Procedați astfel:

  1. Adăugați un handler (ascultător) pentru evenimentul ed11yRunCustomTests
  2. Identificați elementele corespunzătoare
  3. Definiți mesajul indiciului
  4. Emiteți evenimentul „resume" pentru a permite Editoria11y să deseneze indiciul:

Gestionarea indiciilor pe conținut ascuns sau cu dimensiuni limitate

Multe componente interactive (tab-uri, slidere, acordeoane) ascund conținut. Bara de instrumente Editoria11y include butoane înainte/înapoi pentru a sări direct la probleme. Dacă Editoria11y detectează că indiciul problemei este momentan invizibil, va avertiza utilizatorul că ceva nu este în regulă și va evidenția primul strămoș vizibil — de ex., div-ul din jurul unui acordeon.

Ideal, tema dvs. va face acele elemente vizibile înainte ca verificarea vizibilității Editoria11y să ruleze, astfel totul funcționează perfect pentru utilizatorii dvs. — caruselele avansează automat și acordeoanele se deschid automat pentru a afișa problema.

Pentru a face acest lucru când panoul se deschide prima dată (de ex., desfășurând toate panourile acordeonului cu probleme) adăugați un ascultător de evenimente JS pentru ed11yPanelOpened, apoi faceți un querySelectorAll pentru elementele relevante ed11y-element-result, și apoi declanșați orice funcție utilizează tema dvs. pentru a dezvălui acea parte a paginii.

Iată un exemplu bazat pe jQuery. Când panoul se deschide, dezactivează un meniu sticky (pentru ca elementele să nu fie acoperite), apoi caută orice elemente ed11y-element-result din interiorul elementelor acordeon închise și simulează un click pe butonul lor de comutare:

Pentru a dezvălui conținut doar când săriți la un sfat specific prin butonul „next" al panoului (de ex., într-un tab închis sau următorul slide al caruselului), va trebui să setați atât hiddenHandlers la selectori CSS relevanți, cât și checkVisible la TRUE în parametrii dvs. Apoi adăugați un ascultător de evenimente pentru evenimentul ed11yShowHidden. Acesta este aruncat dacă Editoria11y recunoaște că un sfat se află în interiorul unui container cu unul dintre selectoarele hiddenHandlers enumerate furnizate în lista de opțiuni. Acest eveniment JS va include ID-ul sfatului pe care urmează să îl deschidă. Editoria11y va face pauză scurtă după trimiterea acestui eveniment, pentru a oferi JS-ului dvs. timp să facă elementul vizibil.

Iată un exemplu de la o implementare Penn State. Caută elementul corespunzător ID-ului furnizat, identifică containerul componentei interactive parent și declanșează evenimentul pentru a activa comutarea sa:

Notă finală: unele teme nu sunt compatibile cu verificarea vizibilității — de exemplu, containerul <main> are o înălțime de 0px. Aceste site-uri ar trebui să dezactiveze verificările de vizibilitate setând checkVisible la false.