Weboldal optimalizáció

Tippek a hatékony akadálymentesítéshez.

A Guidebot widget segít webhelye akadálymentesítésében. Az egyszerű telepítést követően azonnal működik, kiterjeszti webhelye elérhetőségét.

A Guidebot működik előre vásárolt sablonokon és egyedileg írt környezetben egyaránt. A tökéletes élmény érdekében néhány szempontot érdemes figyelembe vennie.


Az oldal nyelvének beállítása

Induláskor a Guidebot aktuális nyelvet több féle módon próbálja meghatározni. Amennyiben nincs előre beállított fix nyelv a widgetben, prioritásként a HTML címke lang változóját veszi. Ezt a címkét SEO szempontjából is érdemes kitölteni.

Példa az aktuális nyelv megadására: 

                            
<html lang="hu">
<head>
...

Képek alternatív szövege

Az ALT tag (Alternatív szöveg) a képfájl megjelenését írja le. Ez minden HTML-oldal kulcsfontosságú funkciója, mert számos szerepet tölt be a keresőmotorok és a felhasználók számára.

Az ALT szöveg javítja a látássérült felhasználók webes elérhetőségét. A Guidebot segít kiemelni a képek ALT szövegét így könnyebben érthetővé válik az oldal kontextusa.

Néhány tipp a megfelelő ALT szöveg megválasztásához:
• A szöveg legyen tömör, de a lehető legjobban írja le, hogy mi látható a képen
• Tartalmazzon értékes kulcsszavakat a szöveg, de tartsa a 125 karakteres korlátot
• Ahol nem meghatározható a képi megjelenés, használjon az oldalhoz kötődő kulcsszavakat
• Ügyeljen a helyesírásra

Példa a megfelelő ALT szöveg megadására: 

                            
<img src="fashion-show.jpg" alt="A kifutón nő sétál, vörös szoknyaruhát, sárga övet és nagy karimás vörös kalapot visel." />

ARIA címkék

Az ARIA címkék segítenek a látássérült embereknek akik például képernyő felolvasót használnak. A guidebot segít kiemelni az ARIA címkéket, a felolvasással pedig olyanok számára is elérhetővé válik az oldal akik ezek nélkül a funkciók nélkül nehezebben navigálnának.

Példa a megfelelő ARIA címke megadására: 

                            
<button type="button" aria-label="Mentés és bezárás">
    <svg xmlns="http://www.w3.org/2000/svg"><path d="m.967 14.217..." fill="#000"/></svg>
</button>