Stark

Stark je sada nástrojů na přístupnost webu, tedy na to, aby e-shop zvládli používat i lidé se zrakovým nebo jiným omezením. Je to hlavně plugin do Figmy a Sketche, ve kterých grafici kreslí návrhy webu, a rozšíření do prohlížeče na kontrolu hotových stránek. Kontroluje kontrast barev podle WCAG (Web Content Accessibility Guidelines, mezinárodní pravidla přístupnosti webu), navrhne vyhovující barvy a simuluje, jak návrh vidí lidé s vadami zraku. Výhodou je, že chybu zachytíš ještě v návrhu, dřív než se šablona naprogramuje. Vyvíjí ho americká firma Stark Lab.

• Kontrola kontrastu textu i tvarů podle úrovní AA a AAA (úrovně WCAG), při nevyhovujícím kontrastu nabídne vyhovující barvu popředí nebo pozadí
• Simulátor vad zraku: 4 typy barvosleposti a 6 dalších vad zraku, ve Figmě si simulace vygeneruješ jako nové plochy
• Pořadí fokusu (v jakém pořadí stránkou projde klávesnice), oblasti stránky (landmarks) a alternativní texty obrázků
• Kontrola velikosti klikacích ploch (touch targets) a čitelnosti písma
• V rozšíření prohlížeče Live Preview: navržené barvy a velikosti písma vyzkoušíš rovnou na živé stránce
• WCAG Audit v prohlížeči: skóre, počet porušení, prvky k ruční kontrole a report ke stažení, podle ceníku v placeném Premium
• V placených tarifech automatické hledání a oprava chyb ve Figmě a v týmových tarifech hlídání stránek, kódu a mobilních aplikací

1. 1Založ si účet zdarma na getstark.co.
2. 2Ve Figmě otevři Community, vyhledej „Stark“, na záložce Plugins ho vyber a spusť ho v návrhu přes Plugins v horním menu. Na kontrolu hotového e-shopu si nainstaluj rozšíření do prohlížeče.
3. 3Kontrast: zvol Plugins, Stark, Contrast a vyber vrstvu s textem nebo tvarem. Stark sám odhadne, které barvy porovnat, text bere jako popředí.
4. 4Když kombinace neprojde úrovní AA, vyber z nabízených barev popředí nebo pozadí, nebo barvu uprav a změř znovu.
5. 5Simulace: zvol Plugins, Stark, Vision Simulator, vyber plochu a typ vady zraku. Na záložce Generate si simulace vygeneruješ jako nové plochy.
6. 6Hotový e-shop pak projdi i na živých stránkách, rozšířením Stark nebo nástrojem WAVE.

Když chystáš nový web, novou šablonu nebo redesign a grafik je kreslí ve Figmě nebo Sketchi. Kontrast, velikost písma a klikacích ploch vyřešíš v návrhu. Hotové stránky pak ještě projdi nástrojem, který kontroluje celou stránku.

• Zdarma začínáš s kontrolou kontrastu a simulátorem vad zraku. Automatické hledání a oprava chyb je jen ve Figmě a jen podle ceníku v placeném Premium, automatické kontroly WCAG v prohlížeči taky.
• Premium Pack se kupuje nejméně na 3 licence, tedy od 594 USD ročně.
• Generátor simulací ve Figmě zatím nefunguje na obrázcích, jen na barvách a přechodech v tvarech a textu.
• Peníze za měsíční a čtvrtletní předplatné výrobce nevrací, zrušit ho musíš před obnovou. U ročního se o vrácení můžeš ozvat do 7 dnů po obnově.
• Po zrušení předplatného přijdeš na konci období o placené funkce a účet se vrátí na Free.
• Zákon č. 424/2023 Sb. o požadavcích na přístupnost platí od 28. 6. 2025 i pro e-shopy, které prodávají spotřebitelům. Netýká se mikropodniků (méně než 10 lidí a roční obrat nebo bilanční suma do 2 mil. EUR) a podle nápovědy Shoptetu ani e-shopů, které prodávají jen firmám. Rozsah povinností konzultuj s právníkem.
• Shoptet podle nápovědy upravuje platformu podle WCAG 2.1, za barvy šablony, texty a obrázky, které vložíš, odpovídáš ty.