Nieuw hulpmiddel: Eenvoudige taal. Klik op de knop en probeer het live uit

Eye-Able handmatig aanpassen aan uw eigen website

De afbeelding toont een laptop met een computerprogramma open. Daarop is computercode te zien.

Deel bericht:

Als je de configuratie zelf controleert, kun je Eye-Able aanpassen aan je eigen website - buiten de configurator om.
De afbeelding toont een laptop met een computerprogramma open. Daarop is computercode te zien.

Eye-Able handmatig aanpassen aan uw eigen website

Deel deze post:

De afbeelding toont een laptop met een computerprogramma open. Daarop is computercode te zien.
Als je de configuratie zelf controleert, kun je Eye-Able aanpassen aan je eigen website - buiten de configurator om.

Foto Credits: Any IP Ltd, Link naar de auteur is https://anyip.io/ en Simplex - Webdesign Sydney 

Als je de configuratie zelf controleert, kun je Eye-Able - buiten de configurator om - aanpassen aan je eigen website. De voordelen van zo'n aanpassing worden beschreven in het artikel "Wat zijn de voordelen van een eerste aanpassing?". Een gevorderde kennis van HTML en CSS is vereist om deze aanpassingen te maken. Daarom bieden wij de optie van een complete Eye-Able check en optimalisatie voor elke website. Sommige van deze aanpassingsopties zijn echter op elk moment beschikbaar voor niet-beheerde gebruikers van Eye-Able. De beschikbare instellingen worden hieronder weergegeven.

Opmerking: De volgende configuraties zijn slechts een deelverzameling van de parameters die beschikbaar zijn in een volledige optimalisatie door Eye-Able.

Om de Eye-Able configuratie uit te breiden, moeten extra sleutelwaardeparen worden toegevoegd aan de eyeAble_pluginConfig variabele. U kunt hier een voorbeeldconfiguratie vinden(https://www.eye-able-cdn.com/example.js)

Naast het direct inline integreren van de config, kunnen wijzigingen in de eye-ble configuratie ook via een aparte functie worden doorgevoerd. De methode via de eyeAble_updateConfig() methodewordt daarom aanbevolen om zelf wijzigingen in de configuratie te kunnen aanbrengen:

<script type="text/javascript" >
    function eyeAble_updateConfig() {
        eyeAble_pluginConfig.topPosition = "200px"; //Verändere die Top-Position des Icons
        eyeAble_pluginConfig.maxMagnification = 10;
        if(eyeAble_pluginConfig.blacklistContrast){
            //append to the existing rules, otherwise they get overwritten
            eyeAble_pluginConfig.blacklistContrast += ".myClass";
        } else {
            eyeAble_pluginConfig.blacklistContrast = ".myClass";
        }
    }
</script>

Je kunt parameters die niet gewijzigd mogen worden, uitcommentariëren.

Vergroting:

De volgende parameters beperken de vergroting:

  • maxMagnification: [int] Beschrijft de maximale vergroting (standaard: 21)
  • maxMobileMagnification: [int] Beschrijft de maximale mobiele vergroting (standaard: 3)

Positie:

De volgende parameters bestaan om de positie van het hoofdpictogram te wijzigen:

  • topPosition: [String] Stelt de bovenste positie van het pictogram op het bureaublad in % of px in (standaard: "10%").
  • rightPosition: [String] Stelt de rechterpositie van het pictogram op het bureaublad in px in. Als sidePosition is ingesteld op "left", wordt de linkerpositie ingesteld (standaard: "10px").
  • mobileBottomPosition: [String] Stelt de onderste positie van het mobiele pictogram in % of px in (standaard: "15%").
  • mobileRightPosition: [String] Stelt de rechterpositie van het mobiele pictogram in px in (standaard: "10px").
  • sidePosition: [String] Stelt in aan welke kant het pictogram verschijnt "links" of "rechts" (standaard: "rechts")

Uiterlijk:

De volgende parameters bestaan om het uiterlijk te veranderen:

  • mainIconAlt: [int] Verander het hoofdpictogram tussen drie varianten 0, 1 of 2 (standaard: 0)
  • iconSize: [int] Verander de grootte van het pictogram op het bureaublad, aanbevolen waarden tussen 50-70 pixels (standaard: 70px)
  • mobileIconSize: [int] Verander de grootte van het mobiele pictogram, aanbevolen waarden tussen 35-50 pixels (standaard: 50px)

Schermlezer:

De CSS-klassen voor aanpassing kunnen worden gewijzigd met de volgende parameters:

  • aangepasteSrBlacklistCSS: [String] Wijzigt de CSS-klasse voor de elementen die moeten worden uitgesloten (standaard: eyeAble_SrSkip)
  • customSrStartCSS: [String] Wijzigt de CSS-klasse voor het nieuwe startelement (standaard: eyeAble_SrStart)
  • aangepasteSrTekstCSS: [String] Wijzigt de CSS-klasse voor het blok dat moet worden voorgelezen (standaard: eyeAble_SrText )

Elementen uitsluiten van functies:

De volgende parameters kunnen worden gebruikt om bepaalde elementen uit te sluiten van de Eye-Able functies. Dit is handig voor tekst die uit zijn container breekt wanneer deze wordt vergroot, of voor elementen waarvan de kleuren niet mogen worden aangepast door de contrast- of nachtmodus. Elementen kunnen worden geselecteerd via eigen CSS-selectors (meer informatie hier(https://www.w3schools.com/cssref/css_selectors.asp). Meerdere CSS selectors worden gescheiden door komma's. De uitzondering geldt ook voor alle kinderen van geselecteerde elementen!

  • blacklistContrast: [String] Sluit elementen uit van de kleuraanpassing van de contrast- of nachtmodus.

bijv.

Voorbeeld van het uitsluiten van elementen van het contrast
  • blacklistFontsize: [String] Sluit elementen uit van de vergroting van het lettertype

bijv.

Voorbeeld van het uitsluiten van elementen van de vergroting

 

  • forceWhiteBackground: [String] Forceert een witte achtergrond wanneer de nacht- of contrastmodus is geactiveerd

 

Makkelijk voor iedereen

Heb je interesse? We helpen je graag verder.

Met meer dan 25 functies op het gebied van digitale toegankelijkheid helpt Eye-Able je ook om je barrières op de lange termijn te verlagen. Je kunt je informatie voor iedereen toegankelijk maken en geen bezoekers uitsluiten - kortom: je kunt een nieuwe doelgroep aanboren zonder grote marketingvolumes.

Pictogram toont toegankelijkheidscijfer

Begeleidingsgesprek

Niet-bindende raadpleging over digitale toegankelijkheid in het algemeen

Pictogram toont toegankelijkheidscijfer

Analyse

Bespreking van mogelijke optimalisatiemogelijkheden op uw website

Pictogram toont toegankelijkheidscijfer

Live demo

Presentatie van de assistentiesoftware direct op je website

Verdere bijdragen

Als je iets meer wilt: