Skip to main content
Accessly Logo
Početna

Dokumentacija

Sve što treba da znate o implementaciji i korišćenju Accessly-a

1Početak rada

Accessly je sveobuhvatno rešenje za pristupačnost weba koje pomaže da vaš sajt bude pristupačan svim korisnicima. Naš widget pruža podešavanja pristupačnosti na strani korisnika, dok naše profesionalne usluge osiguravaju WCAG usklađenost.

**Brzi početak:**

  1. Kontaktirajte nas da izaberete plan
  2. Primite vaš jedinstveni kod widgeta
  3. Dodajte kod na vaš sajt
  4. Podesite postavke (opciono)
  5. Vaš sajt je sada pristupačniji!

2Vodič za instalaciju

**Korak 1: Dobijte kod widgeta**

Nakon pretplate, dobićete jedinstveni JavaScript kod koji izgleda ovako:

html
<script src="https://cdn-accessly.mnikolic.work/modular/loader.js" data-api-key="VAŠ_JEDINSTVENI_KLJUČ" defer></script>

**Korak 2: Dodajte na vaš sajt**

  • •WordPress: Dodajte u footer.php vaše teme ili koristite plugin kao "Insert Headers and Footers"
  • •HTML/Statički sajtovi: Nalepite pre zatvarajućeg `</body>` taga
  • •React/Next.js: Dodajte u vaš _document.js ili layout komponentu
  • •Druge platforme: Kontaktirajte nas za specifična uputstva

**Korak 3: Proverite instalaciju**

Nakon dodavanja koda, osvežite sajt. Trebalo bi da vidite Accessly widget ikonu u uglu stranice.

3Funkcije widgeta

Accessly widget pruža sledeće funkcije pristupačnosti:

**Vizuelna podešavanja:**

  • •Poboljšanje kontrasta: Režim visokog kontrasta za bolju vidljivost
  • •Veličina teksta: Povećajte ili smanjite veličinu teksta
  • •Razmak teksta: Podesite razmak između slova i redova
  • •Opcije fonta: Alternativni čitljivi fontovi
  • •Podešavanja boja: Invertuj boje, sivi tonovi, monohromatski režimi
  • •Veličina kursora: Veći kursor za lakše praćenje

**Pomoć pri navigaciji:**

  • •Navigacija tastaturom: Puna podrška za tastaturu
  • •Indikatori fokusa: Jasni vizuelni indikatori fokusa
  • •Skip linkovi: Skok na glavni sadržaj
  • •Vodič za čitanje: Horizontalna linija koja pomaže pri čitanju
  • •Maska za čitanje: Istakni trenutnu oblast čitanja

**Podešavanja sadržaja:**

  • •Opisi slika: Prikaz alt teksta
  • •Isticanje linkova: Naglasi sve linkove
  • •Pauziraj animacije: Zaustavi automatski sadržaj
  • •Optimizacija za čitače ekrana: Poboljšana kompatibilnost

**Jezik i lokalizacija:**

  • •Podrška za više jezika
  • •Podrška za tekst s desna na levo (RTL)

4Opcije konfiguracije

**Pozicija widgeta**

Widget se podrazumevano pojavljuje na levoj strani ekrana. Korisnici mogu:

  • •Prebaciti stranu: Korišćenjem ugrađenog prekidača u widgetu za prebacivanje između leve i desne strane
  • •Pomeriti vertikalno: Drag-and-drop funkcionalnost omogućava korisnicima da pomere ikonicu widgeta gore ili dole po vertikalnoj osi

Pozicija se automatski čuva u pretraživaču korisnika i ostaje ista pri ponovnim posetama.

**Prilagođavanje boja**

Pretplatnici Business plana mogu prilagoditi boje widgeta da odgovaraju njihovom brendu. Kontaktirajte nas za više informacija o prilagođavanju:

  • •Primarna boja widgeta
  • •Boja ikonica
  • •Boja pozadine panela
  • •Boja teksta i akcenata

**Jezik interfejsa**

Widget automatski detektuje jezik sajta i prilagođava interfejs. Podržani jezici:

  • •Engleski (en)
  • •Srpski (sr)
  • •Nemački (de)
  • •Hrvatski (hr)
  • •Mađarski (hu)

Korisnici takođe mogu ručno promeniti jezik direktno u widgetu.

5WCAG usklađenost

**Šta widget pokriva**

Accessly widget pomaže u ispunjavanju mnogih WCAG 2.1 Level AA kriterijuma, uključujući:

  • •1.4.3 Kontrast (Minimum): Alati za poboljšanje kontrasta
  • •1.4.4 Promena veličine teksta: Skaliranje teksta do 200%
  • •1.4.8 Vizuelna prezentacija: Razmak i formatiranje teksta
  • •1.4.12 Razmak teksta: Kontrole za podešavanje razmaka
  • •2.1.1 Tastatura: Puna podrška za navigaciju tastaturom
  • •2.4.7 Vidljiv fokus: Poboljšani indikatori fokusa

**Šta zahteva dodatni rad**

Sam widget ne garantuje potpunu WCAG usklađenost. Takođe vam je potrebno:

  • •Pravilna HTML struktura: Semantička oznaka, hijerarhija naslova
  • •Alt tekst: Opisni tekst za sve slike
  • •Labele formi: Pravilno označena polja formi
  • •ARIA atributi: Gde je potrebno za složene komponente
  • •Nezavisnost od boja: Informacije ne prenose se samo bojom
  • •Titlovi za video: Titlovi i transkripti za multimediju

**Profesionalne usluge revizije**

Naš Business plan uključuje profesionalnu WCAG reviziju za identifikaciju i rešavanje ovih dodatnih zahteva. Kontaktirajte nas za više informacija.

6Rešavanje problema

**Widget se ne pojavljuje**

  • •Proverite da li je skript dodat pre `</body>` taga
  • •Proverite konzolu pretraživača za JavaScript greške
  • •Uverite se da je vaš jedinstveni ID tačan
  • •Očistite keš pretraživača i osvežite
  • •Proverite da li Content Security Policy (CSP) blokira skript

**Widget ne radi pravilno**

  • •Ažurirajte na najnoviju verziju widgeta (automatski)
  • •Proverite JavaScript konflikte sa drugim pluginovima
  • •Privremeno onemogućite ekstenzije pretraživača
  • •Testirajte u incognito/privatnom režimu

**Konflikti stilova**

- URL vašeg sajta - Pretraživač i verzija - Screenshot problema

  • •Widget koristi izolovani CSS da spreči konflikte
  • •Ako imate problema, kontaktirajte podršku sa:

**Zabrinutost oko performansi**

  • •Widget je optimizovan i učitava se asinhrono
  • •Tipično vreme učitavanja: <50ms
  • •Nema uticaja na Core Web Vitals
  • •Funkcije se učitavaju samo kada se koriste

**I dalje imate problema?**

Kontaktirajte našu podršku na support@accessly.net sa:

  • •URL vašeg sajta
  • •Opis problema
  • •Informacije o pretraživaču i uređaju
  • •Screenshots ili snimci ekrana (ako je moguće)

7API Referenca (Napredno)

**Programska kontrola**

Za napredne korisnike, možete kontrolisati widget preko JavaScript-a:

```javascript // Otvori widget window.Accessly.open();

// Zatvori widget window.Accessly.close();

// Uključi/isključi specifičnu funkciju window.Accessly.toggle('highContrast');

// Dobij trenutna podešavanja const settings = window.Accessly.getSettings();

// Slušaj widget događaje window.addEventListener('accessly:ready', function() { console.log('Accessly widget je spreman'); });

window.addEventListener('accessly:change', function(e) { console.log('Podešavanje promenjeno:', e.detail); }); ```

**Dostupne metode:**

  • •`open()` - Otvori widget panel
  • •`close()` - Zatvori widget panel
  • •`toggle(feature)` - Uključi/isključi funkciju
  • •`enable(feature)` - Omogući funkciju
  • •`disable(feature)` - Onemogući funkciju
  • •`reset()` - Resetuj sva podešavanja na podrazumevana
  • •`getSettings()` - Dobij trenutna podešavanja korisnika

**Događaji:**

  • •`accessly:ready` - Widget učitan i spreman
  • •`accessly:open` - Widget panel otvoren
  • •`accessly:close` - Widget panel zatvoren
  • •`accessly:change` - Podešavanje promenjeno

8Podrška i resursi

**Dobijte pomoć**

  • •Email podrška: support@accessly.net
  • •Vreme odgovora: U roku od 24 sata (Business plan: Prioritetna podrška)
  • •Dokumentacija: Ova stranica i naša baza znanja
  • •Kontakt forma: Dostupna na našem sajtu

**Dodatni resursi**

  • •WCAG smernice: https://www.w3.org/WAI/WCAG21/quickref/
  • •WebAIM: https://webaim.org/
  • •Checklista pristupačnosti: Kontaktirajte nas za našu sveobuhvatnu checklistu

**Obuka i konsalting**

Nudimo:

  • •Obuku o pristupačnosti za vaš tim
  • •WCAG konsalting usklađenosti
  • •Prilagođena rešenja pristupačnosti
  • •Kontinuirano praćenje pristupačnosti

Kontaktirajte nas na legal@accessly.net da razgovaramo o vašim potrebama.

Kontaktirajte nas

Kontakt
Accessly - Pristupačan web za sve korisnike