Geschreven door Chris Schmidt op 20 december 2022

Eye-Able Handmatig aanpassen aan uw eigen website

Toegankelijkheid

Eye-Able gebruikt de eigen website om te gebruikenLaptopbildschirm auf dem Programmiersprache zu sehen ist.

Doordat u zelf de configuratie kunt beheren, kunt u Eye-Able – los van de configurator – aanpassen aan uw eigen website.

Fotocredits Any IP Ltd, link naar de auteur Simplex - Webdesign Sydney 

Als u zelf de configuratie wilt beheren, kunt u Eye-Able – buiten de configurator om – aanpassen aan uw eigen website. De voordelen van een dergelijke aanpassing worden beschreven in het artikel "Wat zijn de voordelen van een initiële aanpassing?". Voor deze aanpassingen is een geavanceerde kennis van HTML en CSS vereist. Daarom bieden we voor elke website de mogelijkheid om Eye-Able volledig te testen en te optimaliseren. Sommige opties van deze aanpassing zijn echter te allen tijde beschikbaar voor gebruikers die geen beheeraccount hebben voor Eye-Able. De beschikbare instellingen worden hieronder weergegeven.

Opmerking: De volgende configuraties vormen slechts een subset van de parameters die beschikbaar zijn bij een volledige optimalisatie via Eye-Able.

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

Naast de directe integratie van de configuratie inline, kunnen wijzigingen in de Eye-Able-configuratie ook worden uitgevoerd via een aparte functie. Om zelf wijzigingen in de configuratie aan te brengen, kunt u de methode via de eyeAble_updateConfig() methode Daarom wordt het aanbevolen:

<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>

Parameters die niet gewijzigd mogen worden, kunnen worden uitgeschakeld door ze als commentaar te markeren.

Vergroting:

De volgende parameters zijn van toepassing om de vergroting te beperken:

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

  • maxMobileVergroting : [int] Beschrijft de maximale beweegbare vergroting (standaard: 3).

Positie:

De volgende parameters kunnen worden gebruikt om de positie van het hoofdicoon te wijzigen:

  • topPositie: [String] Stelt de bovenste positie van het pictogram op het bureaublad in % of px in (Standaard: "10%")

  • rechterPositie: [String] Stelt de rechterpositie van het pictogram op het bureaublad in pixels in. Als sidePosition is ingesteld op "left", wordt de linkerpositie ingesteld (standaard: "10px").

  • mobieleBottomPositie : [String] Stelt de onderste positie van het mobiele pictogram in % of px in (standaard: "15%").

  • mobieleRechtePositie : [String] Stelt de juiste positie van het mobiele pictogram in pixels in (standaard: "10px").

  • zijpositie : [String] Stelt in aan welke kant het pictogram verschijnt: "links" of "rechts" (standaard: "rechts")

Verschijning:

De volgende parameters kunnen worden gebruikt om het uiterlijk te wijzigen:

  • mainIconAlt: [int] Wijzig het hoofdicoon tussen drie varianten: 0, 1 of 2 (standaard: 0)

  • pictogramgrootte: [int] Wijzig de grootte van het pictogram op het bureaublad, aanbevolen waarden tussen 50-70 pixels (standaard: 70px)

  • mobileIconSize: [int] Wijzig de grootte van het mobiele pictogram, aanbevolen waarden tussen 35 en 50 pixels (standaard: 50px).

Schermlezer:

De volgende parameters kunnen worden gebruikt om de CSS-klassen voor aanpassing te wijzigen:

  • customSrBlacklistCSS: [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).

  • customSrTextCSS: [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 functies van Eye-Able. Dit is handig voor tekst die buiten de container valt bij het inzoomen, of voor elementen waarvan de kleuren niet moeten worden aangepast door het contrast of de nachtmodus. Elementen kunnen worden geselecteerd met behulp van native CSS-selectors. Meer informatie hier Meerdere CSS-selectors worden gescheiden door komma's. Deze uitzondering geldt ook voor alle kinderen van de geselecteerde elementen!

  • zwarte lijstContrast : [String] Elementen uitsluiten van de kleuraanpassing van de contrast- of nachtmodus.


BijvoorbeeldEs ist Code zu sehen.

  • blacklistFontsize : [String] Elementen uitsluiten van de lettertypevergroting.

Bijvoorbeeld

  • forceWhiteBackground : [String] Dwingt een witte achtergrond af wanneer de nachtmodus of contrastmodus is ingeschakeld.

Sebastian Fjeld

Sebastian Fjeld has been part of the team as a professional voiceover artist and copywriter at Eye-Able® since the beginning. He studied voice acting at a university and was trained by actors. Currently he is completing his education as an interpreter for various languages.

Meer bijdragen

Als het misschien iets meer is

Filter

Filter op categorie

Bevestig je selectie met de knop aan het einde van de lijst na het kiezen van de categorieën.

Filters resetten
Websitegrafiek met stijgende balken die groei door toegankelijkheid symboliseren

Wat kost het om jouw website aan de European Accessibility Act (EAA) te laten voldoen?

Lees verhaal
Blauw Eye-Able-embleem met de letters EAA op een lichte achtergrond

Waarom een nieuwe wetgeving Digitale Toegankelijkheid (EAA)?

Lees verhaal
Man met bril en gestreept shirt die een laptop gebruikt. Naast hem staat een illustratie van een checklist op een clipboard met vinkjes en het universele toegankelijkheidssymbool, wat het controleren van digitale toegankelijkheid en naleving van richtlijnen visualiseert.

Checklist! Voldoet jouw website aan de Wet Digitale Toegankelijkheid (EAA)?

Lees verhaal
Het is een Straßensperrung om te zien of een Straße Richtung Strand geblokkeerd is. Als de Sperrung een Schild ophangt, verschijnt de "Straße gesperrt" in het Engels. De achtergrond is Sanddünen en blauwer Himmel zu sehen.

Digitale toegankelijkheid en barrières herkennen: de meest voorkomende obstakels in het dagelijks leven

Lees verhaal

Heeft u meer informatie nodig?

Neem contact met ons op en we helpen u graag verder.

a man with down syndrome shows a woman something on the computer. they both laugh