Asennus & konfigurointi

Valmiit integraatiot

Mukautettu asennus

Jos haluat rakentaa oman toteutuksen, lataa paikallinen kopio (tai viittaa CDN-versioon) — tarvitset kielipaketin, JS-minimoidun tiedoston ja CSS-minimoidun tiedoston — ja luo uusi Ed11y-instanssi.

ESM/JS-moduulituonteja varten:

Käytä UMD-JavaScript-tiedostoja vanhempien selainten ja järjestelmien kanssa:

Parametrit

Täydellinen toteutus otetaan käyttöön vain kirjautuneille sisällöntuottajille (et halua sivustosi vierailijoiden näkevän tarkistinta!), ja se voi ohittaa minkä tahansa oletusparametreista.

Huomaa, että kaikille parametreille on oletusarvot; sisällytä vain ne, jotka haluat ohittaa.

Kattavasti mukautettu toteutus voi näyttää esimerkiksi tältä:

Valmiit integraatiot asettavat nämä muuttujat usein dynaamisesti — esim. lataamalla sivuja "assertiivisessa" tilassa juuri muokkauksen jälkeen ja palaamalla "kohteliaiseen" tilaan muutaman minuutin kuluttua.

Teemoittaminen

Useat parametrit mahdollistavat teeman valitsemisen, värien ohittamisen ja CSS:n injektoinnin.

Sisällytä vain ne parametrit, jotka sinun täytyy ohittaa, jotta tulevat päivitykset olisivat helpompia.

Hyödylliset JS-tapahtumat

Kehittäjät voivat liittyä näihin tapahtumiin ja muokata sivua tarpeen mukaan.

Tyypillisessä esiintymisjärjestyksessä…

  • ed11yRunCustomTests: lähetetään, kun Results-objekti on valmis vastaanottamaan mukautettuja tuloksia. Huomaa, että customTests-parametri täytyy asettaa suoritettavien mukautettujen testifunktioiden lukumääräksi (…todennäköisesti yksi…), jotta tämä tapahtuma lähetetään. Lisätietoja seuraavassa osiossa.
  • ed11yResults: lähetetään, kun kaikki tarkistukset on suoritettu. API-integraatiot voivat nyt lukea dataa Ed11y.results-objektista.
  • ed11yPanelOpened: lähetetään, jos paneeli aukeaa automaattisesti tai manuaalisesti.
  • ed11yShowHidden: tarjoaa data-ed11y-result-numeron ja viaJump-boolean-arvon. Lähetetään vain, jos "ed11yShowHidden"-parametri on asetettu ja elementin vanhempi vastaa selektoria. Käytetään paljastamaan varoitukset ei-vielä-avoimissa säilöissä, esim. akordeoissa, välilehdissä ja karuselleissa. Käyttöesimerkkejä seuraavassa osiossa.
  • ed11yPop: tarjoaa data-ed11y-result-ID:n sekä viittaukset result- ja tip-objekteihin. Lähetetään, kun työkaluvinkki ilmestyy, jolloin voit muokata vinkkejä ajonaikaisesti.
  • ed11yShut: tarjoaa data-ed11y-result-ID:n. Lähetetään, kun työkaluvinkki sulkeutuu.
  • ed11yDismissalUpdate: tarjoaa laajennetut tiedot, kun käyttäjä hylkää tai palauttaa ilmoituksen. Käytetään API-integraatioissa. Tapahtumaolion sisältö:
    • dismissPage
    • dismissTest
    • dismissKey
    • dismissAction

Esimerkkejä löytyy seuraavista osioista.

Vinkkien muokkaaminen

Vinkin tekstin muokkaamista varten voit suoraan ylikirjoittaa ed11yLang.en-globaalin (ennen kirjaston alustamista) tai Ed11y.M:n (alustamisen jälkeen) arvoja. Esim. Drupal-moduulissa, jossa aliasoimme kielipakin Drupal.ed11yLang:ille:

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

Sama toimii mille tahansa lokalisointitiedoston oletusavaimista tai aktiivisesta kielikohtaisesta käännöksestä.

Drupal-moduuli lisää mukautettuja muokkauslinkkejä vinkkeihin editLinks-parametrin avulla. Huomaa "Sivueditori" ja "Layouteditori":

Työkaluvinkki, johon on lisätty "Sivueditori"- ja "Layouteditori"-linkit.

Yksinkertaistettu versio koodista, joka asettaa kyseisen parametrin:

Drupal-moduuli käyttää sitten ed11yPop-tapahtumaa muokkauslinkin dynaamiseen näyttämiseen ja piilottamiseen kontekstin perusteella, kun vinkkejä näytetään.

Tämä tapahtuma tarjoaa viittaukset result- ja tip-objekteihin:

Mukautetut testit

Jos customTests-parametri on luku, Editoria11y lähettää "ed11yRunCustomTests"-tapahtuman tarkistuksen aikana ja odottaa enintään 500 ms kuunnellen kyseistä määrää "ed11yResume"-tapahtumia.

Tämän avulla voidaan kutsua useita mukautettuja testiskriptejä, jotka syöttävät tuloksensa tuloslistaan ennen kuin vinkit piirretään.

Esimerkiksi, jos haluaisit luoda tämän vinkin merkitsemään sähköposteista liitetyt linkit, joilla on hämärretyt URL-osoitteet:

Vinkki, jossa lukee "URL is Safe Link Encoded"

Tekisit:

  1. Lisää kuuntelija ed11yRunCustomTests-tapahtumalle
  2. Etsi vastaavat elementit
  3. Määritä vinkkiviesti
  4. Lähetä "resume"-tapahtuma antaaksesi Editoria11y:lle luvan piirtää vinkki:

Varoitukset piilotetussa tai rajatun kokoalueella olevassa sisällössä

Monet interaktiiviset komponentit (välilehdet, liukusäätimet, akordeonit) piilottavat sisältöä. Editoria11y-tietopaneeli sisältää eteen/taakse-painikkeet hypätäkseen suoraan ongelmiin. Jos Editoria11y arvelee ongelman työkaluvinkin olevan tällä hetkellä näkymätön, se varoittaa käyttäjää jostakin viasta ja korostaa sitten ensimmäisen näkyvän esivanhemman — esim. akordeonin ympäröivän divin.

Ihanteellisesti teemasi paljastaa nämä elementit ennen Editoria11y:n näkyvyystarkistusta, jolloin kaikki toimii saumattomasti — karusellit etenevät automaattisesti ja akordeonit avautuvat automaattisesti näyttääkseen ongelman.

Tehdäksesi tämän, kun paneeli ensin avautuu (esim. avaamalla kaikki ongelmalliset akordeonilevyt), lisää JS-tapahtumakuuntelija ed11yPanelOpened-tapahtumalle, tee sitten querySelectorAll oleellisille ed11y-element-result-elementeille ja käynnistä sitten mikä tahansa teemasi käyttämä funktio kyseisen sivun osan paljastamiseksi.

jQuery-pohjainen esimerkki: kun paneeli avautuu, koodi poistaa kiinteän valikon käytöstä (ettei se peitä elementtejä), etsii kaikki suljettujen akordeonikohteiden sisällä olevat ed11y-element-result-elementit ja simuloi napsautusta niiden vaihtopainikkeessa:

Sisällön paljastamiseksi vain hypättäessä tiettyyn vinkkiin paneelin "seuraava"-painikkeella (esim. suljetussa välilehdessä tai seuraavassa karusellin diassa), sinun täytyy asettaa sekä hiddenHandlers oleellisille CSS-selektoreille että checkVisible arvoon TRUE parametreissasi. Lisää sitten tapahtumakuuntelija ed11yShowHidden-tapahtumalle. Tämä lähetetään, jos Editoria11y tunnistaa vinkin olevan säilössä, jolla on yksi luetelluista hiddenHandlers-selektoreista. Tämä JS-tapahtuma sisältää sen vinkin ID:n, jonka se aikoo avata. Editoria11y odottaa sitten hetken tämän tapahtuman lähettämisen jälkeen antaakseen JS:llesi aikaa tehdä elementti näkyväksi.

Tässä esimerkki Penn Staten toteutuksesta. Se etsii annetulla ID:llä vastaavan elementin, löytää sitten sen ylätason interaktiivisen komponenttisäilön ja käynnistää sen tapahtuman vaihtopainikkeen aktivoimiseksi:

Viimeinen huomio: jotkin teemat eivät yksinkertaisesti ole yhteensopivia näkyvyystarkistuksen kanssa — esim. <main>-säilön korkeus on 0px. Tällaisten sivustojen tulisi poistaa kaikki näkyvyystarkistukset käytöstä asettamalla checkVisible arvoon false.