Installera & konfigurera

Förkonfigurerade versioner

• Drupal-installationspaketet
• WordPress-installationspaketet
• Kirby-installationspaketet (bidrag)
• CraftCMS-installationspaketet (bidrag)

Anpassad installation

För att bygga en egen implementation, ladda ner en lokal kopia (eller referera till en CDN-version) av ett språkpaket, JS-min-filen och CSS-min-filen, och skapa sedan en ny “Ed11y”-instans.

För ESM/JS-modulimporter:

Använd .umd JavaScript-filerna för äldre webbläsare och system:

Parametrar

En komplett implementation anropas bara för inloggade redaktörer (du vill inte att dina webbplatsbesökare ska se din kontroll!), och kan åsidosätta vilken som helst av standardparametrarna.

Observera att standardvärden finns för alla parametrar; ta bara med de saker du vill åsidosätta.

En kraftigt anpassad implementation kan se ut så här:

Nyckelfärdiga integrationer ställer ofta in dessa variabler dynamiskt – t.ex. läser in sidor i “assertive”-läge när de nyligen redigerats, och växlar tillbaka till “polite” efter några minuter.

Tematisering

Flera parametrar gör det möjligt att välja ett tema, åsidosätta färger och injicera CSS.

Ta bara med de parametrar du behöver åsidosätta för att göra framtida uppdateringar enklare.

Användbara JS-händelser

Tematiserare kan koppla in sig på dessa händelser för att reagera på och modifiera sidan efter behov.

I typisk ordningsföljd…

• ed11yRunCustomTests: skickas ut när Results-objektet är redo för att anpassade resultat ska injiceras. Observera att parametern customTests måste anges till antalet anpassade testfunktioner du kommer att köra (…förmodligen en…) för att den här händelsen ska skickas ut. Mer information i följande avsnitt.
• ed11yResults: skickas ut när alla kontroller är klara. API-integrationer kan nu hämta data ur Ed11y.results-objektet.
• ed11yPanelOpened: skickas ut om panelen öppnas, automatiskt eller manuellt.
• ed11yShowHidden: tillhandahåller ett data-ed11y-result-nummer och ett viaJump-booleskt värde. Skickas bara ut om parametern “ed11yShowHidden” är inställd och en förälder till elementet matchar en selektor. Används för att visa varningar i ännu inte öppnade behållare, t.ex. dragspelspaneler, flikar och karuseller. Användningsexempel i nästa avsnitt.
• ed11yPop: tillhandahåller data-ed11y-result-ID samt referenser till result- och tip-objekten. Skickas ut när ett verktygstips visas, vilket gör att du kan modifiera tipsen i realtid.
• ed11yShut: tillhandahåller data-ed11y-result-ID. Skickas ut när ett verktygstips stängs.
• ed11yDismissalUpdate: tillhandahåller utökad information när en användare avfärdar eller återställer en varning. Används för API-integrationer. Händelseobjektet innehåller:
  • dismissPage
  • dismissTest
  • dismissKey
  • dismissAction

Exempel finns i följande avsnitt.

Modifiera tips

Om du bara vill ändra texten i ett tips kan poster i det globala objektet ed11yLang.en (innan biblioteket anropas) eller Ed11y.M (efter att biblioteket anropats) åsidosättas direkt. T.ex. i Drupal-modulen där vi aliasade språkpaketet till Drupal.ed11yLang:

Drupal.ed11yLang.lang.testNames.title = “Please write shorter headings.”

Detta gäller för alla standardnycklar i lokaliseringsfilen eller den aktiva språkspecifika översättningen.

Drupal-modulen lägger också till anpassade redigeringslänkar i tipsen via parametern editLinks. Notera “Page editor” och “Layout editor:”

En förenklad version av koden som ställer in den parametern:

Drupal-modulen använder sedan händelsen ed11yPop för att dynamiskt visa och dölja redigeringslänken baserat på sammanhang när tips visas.

Den här händelsen tillhandahåller referenser till result- och tip-objekten:

Anpassade tester

Om parametern customTests är ett tal skickar Editoria11y ut en “ed11yRunCustomTests”-händelse under kontrollkörningen och pausar sedan i upp till 500 ms medan den lyssnar efter det antalet “ed11yResume”-händelser.

Detta kan utnyttjas för att anropa så många skript med anpassade tester som du vill, vilka kan pusha sina resultat till resultatarrayen innan tipsen ritas upp.

Om du till exempel vill skapa det här tipset för att flagga länkar som klistrats in från e-post med dolda URL:er:

Så här gör du:

1. Lägg till en lyssnare för händelsen ed11yRunCustomTests
2. Hitta matchande element
3. Definiera tipsmeddelandet
4. Skicka ut “resume”-händelsen för att låta Editoria11y rita tipset:

Hantera varningar om dolt eller storleksbegränsat innehåll

Många interaktiva komponenter (flikar, reglage, dragspelspaneler) döljer innehåll. Editoria11y-infopanelen innehåller nästa/föregående-knappar för att hoppa direkt till problem. Om Editoria11y bedömer att problemets verktygstips för tillfället är osynligt varnar den användaren om att något är fel och markerar sedan den första synliga förfadern – t.ex. div:en runt en dragspelspanel.

Helst bör ditt tema göra dessa element synliga innan Editoria11ys synlighetskontroll körs, så att allt bara fungerar som magi för dina användare — karuseller avancerar automatiskt och dragspelspaneler öppnas automatiskt för att visa problemet.

För att göra detta när panelen öppnas för första gången (t.ex. vika ut alla dragspelspaneler med problem) lägg till en JS-händelselyssnare för ed11yPanelOpened, gör sedan en querySelectorAll för relevanta ed11y-element-result-element och utlös sedan den funktion ditt tema använder för att visa den delen av sidan.

Här är ett jQuery-baserat exempel. När panelen öppnas inaktiverar det en klibbig meny (så att element inte täcks), letar sedan efter eventuella ed11y-element-result-element inuti stängda dragspelsobjekt och simulerar ett klick på deras växlingsknapp:

För att visa innehåll enbart när du hoppar till ett specifikt tips via panelens “nästa”-knapp (t.ex. i en stängd flik eller nästa karusellbild) måste du ange både hiddenHandlers med relevanta CSS-selektorer och checkVisible som TRUE i dina parametrar. Lägg sedan till en händelselyssnare för händelsen ed11yShowHidden. Denna utlöses om Editoria11y känner igen att ett tips finns inuti en behållare med en av de listade hiddenHandlers-selektorerna i alternativlistan. Den här JS-händelsen inkluderar ID:t för det tips som är på väg att öppnas. Editoria11y pausar sedan kort efter att ha skickat ut den här händelsen för att ge din JS tid att göra elementet synligt.

Här är ett exempel från en Penn State-implementation. Det letar efter elementet som matchar det angivna ID:t, hittar sedan dess överordnade interaktiva komponentbehållare och utlöser dess händelse för att aktivera dess växling:

En sista notering: vissa teman är helt enkelt inte kompatibla med synlighetskontroll — t.ex. om <main>-behållaren har höjden 0px. Sådana webbplatser bör inaktivera all synlighetskontroll genom att sätta checkVisible till false.