Dobrodošli

Zadnje ažurirano: 17.11.2021

Widget za pristupačnost

S widgetom možete, mijenjati veličinu fonta, kontrast, uključiti font za disleksiju, podcrtati sve linkove na web stranici/ aplikaciji. Postavke je moguće na jednostavan način spremiti.

Prvi korak

Skriptu je potrebno uključiti (include) na sljedeći način:


 <script type="text/javascript" src="https://pristupacnost.netlify.app/assets/js/pristupacnost_1.0.1.js"></script>

Ili preuzmite skriptu

Preuzmi

Broj preuzimanja: 314

Korištenje

Prvi korak

Skriptu je potrebno uključiti (include) na sljedeći način:


 <script type="text/javascript" src="putanja_do_widgeta/pristupacnost.min.js"></script>

Drugi korak

nakon toga je potrebno napraviti inicijalizaciju

inicijalizacija

window.addEventListener('load', function() {
    new  Pristupacnost();
         }, false);

Treći korak

Ikona od widgeta bi se sada treba pokazati i widget je spreman za korištenje.

Tip:

Skripta radi bez Jquery-a

Način korištenja

Widget možete lako konfigurirati prema vlastitim potrebama i preferencijama. Možete mijenjati naslove u widgetu, pozicionirati ikonu, onemogućiti neke od postavki.

Promjena naziva

var  labels  = {

    menuTitle:  'Pristupačnost (postavi novi naslov)',

    increaseText:  'Povećaj veličinu fonta (postavi novi naslov)',

    resetText:  'Poništi veličinu fonta (postavi novi naslov)',

    highContrast:  'Kontrast (postavi novi naslov)',

    dyslexicFont:  'Disleksija (postavi novi naslov)',

    underlineLinks:  'Podcrtaj linkove (postavi novi naslov)',

    saveSettings:  'Spremi (postavi novi naslov)'

    };

var  options  = { labels:  labels };

new  Pristupacnost(options);

Onemogućavanje pojedine opcije


options.modules  = {

    increaseText: [true/false],
    
    highContrast: [true/false],
    
    dyslexicFont: [true/false],
    
    underlineLinks: [true/false],
    
};

Pozicioniranje

Možete ikonu pozicionirati bilo gdje na ekranu, defaultna pozicija je* dolje -desno*.


var  options  = {

    icon: {

            circular:  true,

            img:  'accessibility',

            position: {

            bottom: {

            size:  2,

            units:  'vh'

        },

    left: {

            size:  2,

            units:  '%'

         },

    type:  'fixed'

    }, }}

new  Pristupacnost(options);

Ukoliko ne želite primjenjivati kontrast (highContrast) na određene elemente na stranici slike ili slično, to možete učiniti kroz Javascript na sljedeći način:



||  e.classList.contains("site-branding__logo")

U ovom slučaju, kontrast se neće primjenjivati na sliku s klasom site-branding__logo.

Dodavanje CSS-a

CSS se može dodati ukoliko widget u nekim slučajevima ne odradi dobro posao pa e potrebno napisati custom CSS klase kako bi se dobio željeni prikaz. Dodati CSS se može na način da unutar CSS datoteke dodate CSS klase:

 
html[data-dyslexic-applied="true"] .nazivKlase {

    margin-bottom: 20px;
    
    }

Kao što vidite iz primjera iznad, odnosi se na to kada je kroz widget primjenjen font za disleksiju, u tom slučaju navedenoj klasi ćemo dodati donju marginu od 20px.
Ispod se nalaze sve klase koje je moguće kombinirati i dodavati custom CSS klase kako bi dobili željeni učinak na stranici.

 
html[data-dyslexic-applied="true"][data-highcontrast-applied="true"][data-increasetext-applied="true"][data-underline-applied="true"] .nazivKlase {

    margin-bottom: 20px;
    
    }

Napomene

Planovi za budućnost

Omogućiti button za promjenu pozadine u bijelo i crni tekst

Omogućiti gumb s kojim bi se u potpunosti isključio CSS

Više opcija za povećanje - smanjenje fonta

Ograničenja

Skripta ne riješava sve probleme s pristupačnošću, ali odrađuje jedan veliki dio koji je potreban napraviti da bi se web/aplikacija uskladila sa zakonom.