Nowe narzędzie: Prosty język. Kliknij przycisk i wypróbuj na żywo

Ręczne dostosowanie Eye-Able do własnej strony internetowej

Zdjęcie przedstawia laptopa z otwartym programem komputerowym. Widoczny jest tam kod komputerowy.

Udostępnij post:

Jeśli sam sprawdzisz konfigurację, możesz dostosować Eye-Able do własnej strony internetowej - poza konfiguratorem.
Zdjęcie przedstawia laptopa z otwartym programem komputerowym. Widoczny jest tam kod komputerowy.

Ręczne dostosowanie Eye-Able do własnej strony internetowej

Udostępnij ten post:

Zdjęcie przedstawia laptopa z otwartym programem komputerowym. Widoczny jest tam kod komputerowy.
Jeśli sam sprawdzisz konfigurację, możesz dostosować Eye-Able do własnej strony internetowej - poza konfiguratorem.

Photo Credits: Any IP Ltd, Link do autora to https://anyip.io/ i Simplex - Web Design Sydney 

Jeśli samodzielnie sprawdzisz konfigurację, możesz dostosować Eye-Able - poza konfiguratorem - do własnej strony internetowej. Zalety takiego dostosowania zostały opisane w artykule "Jakie są zalety wstępnego dostosowania?". Aby dokonać tych dostosowań, wymagana jest zaawansowana znajomość HTML i CSS. Dlatego oferujemy opcję pełnego sprawdzenia i optymalizacji Eye-Able dla każdej strony internetowej. Jednak niektóre z tych opcji dostosowywania są dostępne dla niezarządzających użytkowników Eye-Able w dowolnym momencie. Dostępne ustawienia przedstawiono poniżej.

Uwaga: Poniższe konfiguracje są tylko podzbiorem parametrów dostępnych w pełnej optymalizacji Eye-Able.

Aby rozszerzyć konfigurację Eye-Able, należy dodać dodatkowe pary klucz-wartość do zmiennej eyeAble_pluginConfig. Przykładową konfigurację można znaleźć tutaj(https://www.eye-able-cdn.com/example.js)

Oprócz integracji konfiguracji bezpośrednio inline, zmiany w konfiguracji eye-ble można również wprowadzać za pomocą osobnej funkcji. W związku z tym zaleca się stosowanie metody eyeAble_updateConfig(), aby móc samodzielnie wprowadzać zmiany w konfiguracji:

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

Można zakomentować parametry, które nie powinny być zmieniane.

Powiększenie:

Istnieją następujące parametry ograniczające powiększenie:

  • maxMagnification: [int] Opisuje maksymalne powiększenie (domyślnie: 21).
  • maxMobileMagnification: [int] Opisuje maksymalne powiększenie mobilne (domyślnie: 3).

Stanowisko:

Istnieją następujące parametry umożliwiające zmianę położenia głównej ikony:

  • topPosition: [String] Ustawia górną pozycję ikony na pulpicie w % lub px (domyślnie: "10%").
  • rightPosition: [String] Ustawia prawą pozycję ikony na pulpicie w px. Jeśli sidePosition jest ustawione na "left", ustawiana jest lewa pozycja (domyślnie: "10px").
  • mobileBottomPosition: [String] Ustawia dolną pozycję ikony mobilnej w % lub px (domyślnie: "15%").
  • mobileRightPosition: [String] Ustawia prawą pozycję ikony mobilnej w px (domyślnie: "10px").
  • sidePosition: [String] Ustawia stronę, po której wyświetlana jest ikona "lewa" lub "prawa" (domyślnie: "prawa").

Wygląd:

Istnieją następujące parametry umożliwiające zmianę wyglądu:

  • mainIconAlt: [int] Zmiana głównej ikony pomiędzy trzema wariantami 0, 1 lub 2 (domyślnie: 0).
  • iconSize: [int] Zmiana rozmiaru ikony na pulpicie, zalecane wartości między 50-70 pikseli (domyślnie: 70px).
  • mobileIconSize: [int] Zmiana rozmiaru ikony mobilnej, zalecane wartości między 35-50 pikseli (domyślnie: 50px).

Czytnik ekranu:

Dostosowywane klasy CSS można zmienić za pomocą następujących parametrów:

  • customSrBlacklistCSS: [String] Zmienia klasę CSS dla elementów, które mają zostać wykluczone (domyślnie: eyeAble_SrSkip)
  • customSrStartCSS: [String] Zmienia klasę CSS dla nowego elementu startowego (domyślnie: eyeAble_SrStart).
  • customSrTextCSS: [String] Zmienia klasę CSS dla bloku do wstępnego odczytu (domyślnie: eyeAble_SrText )

Wyklucz elementy z funkcji:

Poniższych parametrów można użyć do wykluczenia niektórych elementów z funkcji Eye-Able. Jest to przydatne w przypadku tekstu, który wyłamuje się ze swojego kontenera po powiększeniu lub w przypadku elementów, których kolory nie powinny być dostosowywane przez kontrast lub tryb nocny. Elementy można wybierać za pomocą natywnych selektorów CSS (więcej informacji tutaj(https://www.w3schools.com/cssref/css_selectors.asp). Wiele selektorów CSS jest oddzielonych przecinkami. Wyjątek dotyczy również wszystkich elementów podrzędnych wybranych elementów!

  • blacklistContrast: [String] Wyklucza elementy z regulacji kolorów kontrastu lub trybu nocnego.

np.

Przykład wykluczenia elementów z kontrastu
  • blacklistFontsize: [String] Wyklucz elementy z powiększenia czcionki

np.

Przykład wykluczenia elementów z powiększenia

 

  • forceWhiteBackground: [String] Wymusza białe tło, gdy włączony jest tryb nocny lub kontrastowy.

 

Łatwy dla każdego

Jesteś zainteresowany? Z przyjemnością Ci pomożemy.

Dzięki ponad 25 funkcjom związanym z dostępnością cyfrową, Eye-Able pomaga również zmniejszyć bariery w dłuższej perspektywie. Możesz sprawić, że Twoje informacje będą dostępne dla wszystkich i nie wykluczać żadnych odwiedzających - w skrócie: możesz dotrzeć do nowej grupy docelowej bez dużych nakładów marketingowych.

Ikona przedstawia rysunek dostępności

Rozmowa doradcza

Niewiążące konsultacje w sprawie ogólnej dostępności cyfrowej

Ikona przedstawia rysunek dostępności

Analiza

Omówienie możliwego potencjału optymalizacji witryny

Ikona przedstawia rysunek dostępności

Demo na żywo

Prezentacja oprogramowania pomocniczego bezpośrednio na stronie internetowej

Dalszy wkład

Jeśli chcesz trochę więcej: