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
Browservenster met de slogan "Toegankelijk voor iedereen" en een menu met overlay-functies ernaast.

Een overlay maakt een website niet vanzelf toegankelijk

Lees verhaal
Illustratie met het woord “SEO” in grote blauwe letters. Rondom staan pictogrammen voor toegankelijkheid en content, zoals een oog (zichtbaarheid), een boek (leesbaarheid), een netwerkstructuur (structuur) en het universele toegankelijkheidssymbool. De afbeelding verbindt SEO met digitale toegankelijkheid

Digitale toegankelijkheid en SEO: waarom ook Google van deze websites houdt

Lees verhaal
Bovenaanzicht van een laptop waarop een website wordt getoond, met twee handen die op het toetsenbord typen. Links naast de laptop staat een blauw toegankelijkheidspictogram met een persoon-icoon.

"Digitale toegankelijkheid is nu geen prioriteit" - en dat kost je elke dag omzet

Lees verhaal
iPhone en Apple Watch met toegankelijkheidsfuncties in beeld. Op het iPhone-scherm zijn opties zoals Live luisteren, geluidsniveau van koptelefoons en ondertiteling zichtbaar. Op de Apple Watch wordt live transcriptie getoond. Het toegankelijkheidssymbool en het Apple iPhone-logo benadrukken inclusieve functies voor gehoorondersteuning.

Toegankelijkheid iPhone: zo haal je alles uit de toegankelijkheidsinstellingen

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