Installeren & Configureren

Vooraf geconfigureerde versies

• Drupal-installatieprogramma
• WordPress-installatieprogramma
• Kirby-installatieprogramma (contrib)
• CraftCMS-installatieprogramma (contrib)

Aangepaste installatie

Om een eigen implementatie te bouwen, download een lokale kopie (of verwijs naar een CDN-versie) van een taalpakket, het geminificeerde JS-bestand en het geminificeerde CSS-bestand, en maak vervolgens een nieuwe “Ed11y”-instantie aan.

Voor ESM/JS module-imports:

Gebruik de .umd JavaScript-bestanden voor oudere browsers en systemen:

Parameters

Een volledige implementatie wordt alleen geladen voor ingelogde redacteuren (u wilt niet dat uw sitebezoekers uw checker zien!), en kan elk van de standaardparameters overschrijven.

Standaardwaarden zijn voor alle parameters opgegeven; voeg alleen toe wat u wilt overschrijven.

Een sterk aangepaste implementatie kan er als volgt uitzien:

Kant-en-klare integraties stellen deze variabelen vaak dynamisch in — bijvoorbeeld door pagina’s in de “assertive”-modus te laden wanneer ze onlangs zijn bewerkt, en na enkele minuten terug te schakelen naar “polite”.

Thema-aanpassing

Diverse parameters bieden de mogelijkheid om een thema te selecteren, kleuren te overschrijven en CSS in te voegen.

Voeg alleen de parameters toe die u wilt overschrijven om toekomstige updates te vereenvoudigen.

Nuttige JS-gebeurtenissen

Thema-ontwikkelaars kunnen naar deze gebeurtenissen luisteren om de pagina naar behoefte te laten reageren en aan te passen.

In de gebruikelijke volgorde van verschijnen…

• ed11yRunCustomTests: wordt verzonden wanneer het Results-object gereed is voor het injecteren van aangepaste resultaten. Let op: de parameter customTests moet worden ingesteld op het aantal aangepaste testfuncties dat u uitvoert (…waarschijnlijk één…) voordat deze gebeurtenis wordt verzonden. Details in de volgende sectie.
• ed11yResults: wordt verzonden wanneer alle controles zijn afgerond. API-integraties kunnen nu gegevens ophalen uit het Ed11y.results-object.
• ed11yPanelOpened: wordt verzonden als het paneel automatisch of handmatig wordt geopend.
• ed11yShowHidden: levert een data-ed11y-result-nummer en een viaJump-boolean. Wordt alleen verzonden als de parameter “ed11yShowHidden” is ingesteld en een bovenliggend element van het element overeenkomt met een selector. Wordt gebruikt om meldingen zichtbaar te maken in nog niet geopende containers, zoals accordeons, tabbladen en carrousels. Gebruiksvoorbeelden in de volgende sectie.
• ed11yPop: levert het data-ed11y-result-ID, evenals verwijzingen naar de objecten result en tip. Wordt verzonden wanneer een tooltip verschijnt, zodat u de tips tijdens uitvoering kunt aanpassen.
• ed11yShut: levert het data-ed11y-result-ID. Wordt verzonden wanneer een tooltip wordt gesloten.
• ed11yDismissalUpdate: levert uitgebreide informatie wanneer een gebruiker een melding negeert of herstelt. Wordt gebruikt voor API-integraties. Het gebeurtenisobject bevat:
  • dismissPage
  • dismissTest
  • dismissKey
  • dismissAction

Voorbeelden zijn te vinden in de volgende secties.

Tips aanpassen

Als u alleen de tekst van een tip wilt aanpassen, kunnen items in het globale object ed11yLang.en (vóór het laden van de bibliotheek) of Ed11y.M (na het laden van de bibliotheek) direct worden overschreven. Bijvoorbeeld in de Drupal-module, waar het taalpakket is gekoppeld aan Drupal.ed11yLang:

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

Dit geldt voor elk van de standaardsleutels in het lokalisatiebestand of de actieve taalspecifieke vertaling.

De Drupal-module voegt ook aangepaste bewerkingslinks toe aan de tips via de parameter editLinks. Let op “Page editor” en “Layout editor:”

Een vereenvoudigde versie van de code die die parameter instelt:

De Drupal-module gebruikt vervolgens de ed11yPop-gebeurtenis om de bewerkingslink dynamisch te tonen en te verbergen op basis van de context wanneer tips worden weergegeven.

Deze gebeurtenis levert verwijzingen naar de objecten result en tip:

Aangepaste tests

Als de parameter customTests een getal is, verzendt Editoria11y een “ed11yRunCustomTests”-gebeurtenis tijdens de controle, en pauzeert vervolgens maximaal 500 ms terwijl het luistert naar dat aantal “ed11yResume”-gebeurtenissen.

Zo kunnen meerdere scripts met aangepaste tests worden aangeroepen; elk script kan zijn resultaten in de resultatenarray invoegen voordat de tips worden getekend.

Als u bijvoorbeeld deze tip wilt aanmaken om links te markeren die uit e-mails zijn geplakt met versleutelde URL’s:

U dient het volgende te doen:

1. Voeg een luisteraar toe voor de ed11yRunCustomTests-gebeurtenis
2. Zoek overeenkomende elementen
3. Definieer het tipbericht
4. Verzend de “resume”-gebeurtenis om Editoria11y de tip te laten tekenen:

Omgaan met meldingen op verborgen of qua grootte beperkte inhoud

Veel interactieve componenten (tabbladen, sliders, accordeons) verbergen inhoud. Het Editoria11y-infopaneel bevat knoppen voor vorige/volgende om direct naar problemen te springen. Als Editoria11y denkt dat de tooltip van een probleem momenteel onzichtbaar is, waarschuwt het de gebruiker dat er iets mis is en markeert het de eerste zichtbare bovenliggende container – bijvoorbeeld de div rondom een accordeon.

Idealiter zorgt uw thema ervoor dat die elementen zichtbaar zijn voordat de zichtbaarheidscontrole van Editoria11y wordt uitgevoerd, zodat alles vanzelf werkt voor uw gebruikers — carrousels gaan automatisch verder en accordeons openen automatisch om het probleem te tonen.

Om dit te doen wanneer het paneel voor het eerst wordt geopend (bijvoorbeeld door alle accordeonpanelen met problemen uit te vouwen), voegt u een JS-gebeurtenisluisteraar toe voor ed11yPanelOpened, doet u vervolgens een querySelectorAll voor relevante ed11y-element-result-elementen en roept u daarna de functie aan die uw thema gebruikt om dat deel van de pagina zichtbaar te maken.

Hier is een op jQuery gebaseerd voorbeeld. Wanneer het paneel wordt geopend, schakelt het een vastgezet menu uit (zodat elementen niet worden bedekt) en zoekt het vervolgens naar alle ed11y-element-result-elementen in gesloten accordeonitems en simuleert een klik op hun schakelknop:

Om inhoud alleen zichtbaar te maken bij het springen naar een specifieke tip via de knop “volgende” in het paneel (bijvoorbeeld in een gesloten tabblad of de volgende carrouseldia), stelt u zowel hiddenHandlers in op relevante CSS-selectors als checkVisible op TRUE in uw parameters. Voeg vervolgens een gebeurtenisluisteraar toe voor de ed11yShowHidden-gebeurtenis. Deze wordt verzonden wanneer Editoria11y herkent dat een tip zich bevindt in een container die overeenkomt met een van de opgegeven hiddenHandlers-selectors. Dit JS-event bevat het ID van de tip die op het punt staat te worden geopend. Editoria11y pauzeert vervolgens even na het verzenden van deze gebeurtenis, zodat uw JS de tijd krijgt het element zichtbaar te maken.

Hier is een voorbeeld van een Penn State-implementatie. Het zoekt het element op dat overeenkomt met het opgegeven ID, vindt vervolgens de bovenliggende container van het interactieve component en activeert zijn gebeurtenis om de schakelaar te activeren:

Tot slot: sommige thema’s zijn simpelweg niet compatibel met zichtbaarheidscontrole — bijvoorbeeld wanneer de <main>-container een hoogte van 0px heeft. Zulke sites moeten alle zichtbaarheidscontrole uitschakelen door checkVisible in te stellen op false.