Minimálny štandard prístupnosti slúži ako oficiálny podklad pre validáciu dizajnových návrhov, checklist pri code review a základ pre testovacie scenáre. Vďaka nemu dokážeme tvoriť weby, ktoré sú prístupné a komfortné pre všetkých používateľov.<blockquote>📚 Veľmi dobre spracovaný materiál o všetkých pravidlách WCAG špecifikácie nájdete na webe: <a href="https://aaardvarkaccessibility.com/wcag-plain-english/">WCAG in Plain English</a>.​</blockquote><h2>1. Sémantické HTML a prečo nepoužívať všade &lt;div&gt;</h2>HTML obsahuje množstvo tagov, ktoré sémanticky opisujú obsah na webe. Ak ho používame správne, napr. pre navigáciu použijeme <code>&lt;nav&gt;</code>, každému inputu vyplníme <code>&lt;label&gt;</code> alebo interaktívne prvky píšeme ako <code>&lt;button&gt;</code>, tak čítačky obrazovky budú lepšie rozumieť obsahu a štruktúre webu.&nbsp;Tip: Vygenerujte si sémantické HTML pomocou AI (odporúčam napr. Gemini PRO)“Vygeneruj mi z tohto screenshotu prístupné HTML bez štýlov”<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/Screenshot_pre_generovanie_kodu_864d974943.png" alt="Screenshot pre generovanie kódu.png">Gemini vygenerovalo:<pre><code class="language-html">&lt;section aria-labelledby="benu-nadpis"&gt;

 &lt;div&gt;
 &lt;img src="cesta-k-vasmu-obrazku.png" alt="Aplikácia Benu lekárne zobrazená na displeji mobilného telefónu."&gt;
 &lt;/div&gt;

 &lt;div&gt;
 &lt;h2 id="benu-nadpis"&gt;
 Creating a state-of-the-art experience for Benu pharmacies
 &lt;/h2&gt;

 &lt;dl&gt;
 &lt;div&gt;
 &lt;dt&gt;10K+&lt;/dt&gt;
 &lt;dd&gt;Average daily users&lt;/dd&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;dt&gt;99.9%&lt;/dt&gt;
 &lt;dd&gt;Cash free rate&lt;/dd&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;dt&gt;4.8*&lt;/dt&gt;
 &lt;dd&gt;App rating on Google Play Store &amp;amp; App Store&lt;/dd&gt;
 &lt;/div&gt;
 &lt;/dl&gt;

 &lt;a href="/case-study/benu-pharmacies" aria-label="Read more about the Benu pharmacies case study"&gt;
 Read more
 &lt;/a&gt;
 &lt;/div&gt;

&lt;/section&gt;</code></pre><h3>Zhrnutie prvkov prístupnosti (WCAG) v kóde:</h3><ul><li>Sémantická štruktúra: Použitie značiek <code>&lt;section&gt;</code>, <code>&lt;h2&gt;</code>, <code>&lt;dl&gt;</code> dáva obsahu logickú štruktúru.</li><li>Textová alternatíva: Atribút <code>alt</code> pri značke <code>&lt;img&gt;</code> zaisťuje, že informácia z obrázka je dostupná aj pre nevidiacich.</li><li>Označenie sekcie: Použitie <code>aria-labelledby</code> pomáha používateľom asistenčných technológií rýchlo sa zorientovať v obsahu stránky.</li><li>Jasné odkazy: <code>aria-label</code> pri odkaze <code>&lt;a&gt;</code> poskytuje jednoznačný popis cieľa odkazu, čo je kľúčové pre odkazy so všeobecným textom ako "Read more".</li><li>Sémantická presnosť: Zatiaľ čo <code>&lt;ul&gt;</code> (netriedený zoznam) je dobrý, <code>&lt;dl&gt;</code> (zoznam definícií) je ešte presnejší. Priamo komunikuje vzťah medzi hodnotou metriky (<code>&lt;dt&gt;</code>) a jej popisom (<code>&lt;dd&gt;</code>), čo asistenčné technológie dokážu interpretovať a lepšie prezentovať používateľovi.</li></ul><blockquote>ℹ️ Okrem toho sémantické HTML pomáha vyhľadávačom lepšie pochopiť obsah stránky, čo má výrazný vplyv aj na pozíciu vo vyhľadávačoch.</blockquote>Prečo je dôležité používať správne HTML tagy si môžeme ukázať na buttone:▶️&nbsp;<a href="https://codesandbox.io/p/sandbox/distracted-goldwasser-o7d9j5?from-embed">CodeSandbox príklad</a> ◀️<pre><code class="language-html">&lt;!-- Zlý príklad ❌--&gt;
&lt;div className="button" onClick={handleClick}&gt;
 Open something
&lt;/div&gt;

&lt;!-- Dobrý príklad ✅ (onClick môže byť použitý iba na focusable elementoch) --&gt;
&lt;button className="button" onClick={handleClick}&gt;
 Open something
&lt;/button&gt;</code></pre>Na prvý pohľad button funguje. Keď kliknem myšou zavolá sa funkcia <code>handleClick</code> rovnako ako pre <code>div</code>, tak aj pre <code>button</code>. Avšak ak sa na webe pohybujem pomocou klávesnice (kombinácia <code>Tab</code> a <code>Enter</code>), tak sa <code>div</code> stáva nepoužiteľný. Natívnemu <code>&lt;button&gt;</code> tagu prehliadač automaticky doplnil potrebnú funkcionalitu, napr. tabindex alebo focus stav.<blockquote>📚 Veľmi dobre spracovaný materiál o všetkých HTML tagoch je prístupný na <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements">MDN Web Docs</a>.</blockquote>

<h2>2. ARIA (ak neexistuje HTML alternatíva)</h2>ARIA (Accessible Rich Internet Applications) je sada špeciálnych atribútov, ktoré môžete pridať do HTML kódu. Tieto atribúty používajú výhradne asistečné technológie a nijako neovplyvňujú vyrenderovaný obsah na webe, ale iba poskytujú dodatočné informácie pre asistenčné technológie.<blockquote>⚠️ ARIA atribúty používajte s rozumom a ako poslednú možnosť ak neexistuje žiadna HTML alternatíva! Ak použijete ARIA atribúty nesprávne, môžete tým pokaziť prístupnosť webu ešte viac ako keby ich nepoužijete vôbec.</blockquote><h3>Tri hlavné typy ARIA atribútov:</h3><h4>1. Roly (Roles) - Definuje, čo daný prvok je.</h4><ul><li>Hovorí čítačke: „Toto nie je len obyčajný <code>&lt;div&gt;</code>, toto je <code>navigácia</code> alebo <code>tlačidlo</code>.“</li><li>Príklady: <code>role="navigation"</code>, <code>role="dialog"</code>, <code>role="button"</code>, <code>role="search"</code>.<ul><li>HTML tagy, napr. <code>&lt;nav&gt;</code> alebo <code>&lt;button&gt;</code>, automaticky pridávajú rolu, a preto treba používať správne HTML tagy! Najlepšia ARIA je žiadna ARIA.</li><li>Ak použijete ARIA rolu pre interaktívny prvok, napr. <code>role="tab"</code>, <code>role="slider"</code>, samotná rola nepridá žiadnu funkčnosť. Iba informuje čítač obrazovky. Vašou úlohou zostáva doprogramovať ovládanie klávesnicou (napr. šípkami, Esc, Enter) pomocou JavaScriptu.</li></ul></li></ul><pre><code class="language-typescript">❌ Zle: &lt;div role="button" tabindex="0" onclick="mojaFunkcia()"&gt;Uložiť&lt;/div&gt;
✅ Správne: &lt;button onclick="mojaFunkcia()"&gt;Uložiť&lt;/button&gt;</code></pre><h4>2. Vlastnosti (Properties) - Definuje vlastnosti a vzťahy prvku.</h4><ul><li>Popisujú charakteristiky, ktoré sa zvyčajne nemenia.</li><li>Príklady: <code>aria-labelledby="id-popisu"</code> (hovorí, kde nájsť textový popis), <code>aria-required="true"</code> (označuje povinné políčko), <code>aria-invalid="true"</code> (označuje, že hodnota je nesprávna).</li></ul><h4>3. Stavy (States) - Definuje aktuálny stav prvku.</h4><ul><li>Popisujú podmienky, ktoré sa menia na základe interakcie používateľa (zvyčajne pomocou JavaScriptu).</li><li>Príklady: <code>aria-expanded="false"</code> (označuje, že rozbaľovací prvok je zbalený), <code>aria-hidden="true"</code> (skryje prvok pred čítačkou), <code>aria-disabled="true"</code> (označuje, že prvok je neaktívny).</li></ul><blockquote>📚 Viac o správnom používaní ARIA nájdete v <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">dokumentácii MDN</a>.</blockquote>&nbsp;<blockquote>⚠️ Štandardné tagy HTML zvyčajne nepotrebujú implementovať ARIA atribúty, ale custom riešenia si vyžadujú zvýšenú starostlivosť. Zvyčajne na neštandardné funkcionality napr. dialog, swiper, datepicker… používame knižnice tretích strán. Uistite sa, že tieto knižnice implementujú správne ARIA atribúty!</blockquote>

<h2 style="margin-left:0px;">3. Dôležité vlastnosti stránky</h2><h4>1. Vyplnený názov stránky &lt;title&gt;</h4>Každá HTML stránka musí mať v sekcii <code>&lt;head&gt;</code> unikátny a popisný element <code>&lt;title&gt;</code>. Dobrý názov je jedinečný, stručný a výstižný. Držte sa nasledujúcich odporúčaní:<ul><li>Dajte stránku do kontextu: Vždy uveďte názov konkrétnej podstránky aj názov celého webu. Osvedčený formát je: <code>Špecifický názov stránky | Názov webu</code>.</li><li>Buďte konkrétni: Namiesto "Služby" použite "Grafický dizajn | Kreatívne Štúdio". Namiesto "Profil" použite "Profil Jána Nováka | Naša Firma".</li><li>Najdôležitejšie na začiatok: Keďže názvy bývajú v záložkách a vo výsledkoch vyhľadávania skrátené, najdôležitejšie informácie (názov konkrétnej stránky) umiestnite na začiatok.</li><li>Stručnosť: Ideálna dĺžka je približne 50-60 znakov, aby sa názov zobrazil celý vo výsledkoch vyhľadávania.</li></ul><h4>2. Vyplnený lang atribút v html tagu</h4><ul><li>Aplikácia musí mať programovo určený hlavný jazyk obsahu (napr. slovenčina, <code>lang="sk"</code>). To umožňuje asistenčným technológiám, ako sú čítačky obrazovky, správne interpretovať a vyslovovať text.</li><li>Keď meníme jazyk stránky (napr. cez dropdown v menu), tak treba dynamicky upraviť aj <code>lang</code> pomocou JavaScriptu</li></ul><h4>3. Časť stránky v inom jazyku</h4><ul><li>Ak sa v texte nachádza slovo, fráza alebo odsek v inom jazyku, ako je hlavný jazyk stránky, tento úsek musí byť tiež označený pomocou <code>lang</code> atribútu.</li></ul><pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="sk"&gt; ✅ Vyplnený lang atribút v html tagu
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;Webdizajn na mieru | Názov Firmy&lt;/title&gt; ✅ Vyplnený title
 &lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;Naše služby v oblasti webdizajnu&lt;/h1&gt;
 &lt;p&gt;Ponúkame moderné a prístupné webové stránky...&lt;/p&gt;
 
 &lt;blockquote lang="en"&gt; ✅ Ak je text v inom jazyku ako celá stránka
	 &lt;p&gt;The only way to do great work is to love what you do.&lt;/p&gt;
	 &lt;footer&gt;- Steve Jobs&lt;/footer&gt;
		&lt;/blockquote&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

<h2>4. Navigácia pomocou klávesnice a focus</h2>Nie všetci používajú myš pre navigáciu na webe. Niektorí nemôžu použiť myš kvôli ochoreniu, skúsení používatelia ovládajú web pomocou klávesnice alebo na TV ovládame web cez diaľkový ovládač… Takýto používatelia sa spoliehajú na to, že všetky interaktívne elementy na webe, napr. buttony, odkazy alebo formulár, majú svoj focus stav.Asi by sa vám nepáčilo keby sa na webe nezobrazoval kurzor. Avšak často toto robíme pre používateľov, ktorí sa orientujú na webe pomocou klávesnice.<pre><code class="language-typescript">body {
 cursor: none; /* toto by ste určite na webe nespravili */
}

:focus {
 outline: none; /* tak, prosím nerobte ani toto */
}</code></pre><code>:focus</code> má však jednu vlastnosť, ktorá núti developerov <code>outline</code> mazať. Pri kliknutí myšou, napr. na button, sa okolo neho zobrazuje rámik, čo nevyzerá dobre. V moderných prehliadačoch vieme tento problém jednoducho vyriešiť ak namiesto <code>:focus</code> použijeme <code>:focus-visible</code>. Tento selector už podporujú všetky moderné prehliadače a vďaka nemu sa už rámik zobrazuje len pri navigácii pomocou klávesnice (focusujeme na button cez <code>Tab</code> klávesu).Treba si dať pozor, aby focus stav bol dostatočne vizuálne odlíšený:<ul><li>Focus je aspoň <code>2px</code> hrubý a musí mať kontrast 3:1 (level AAA).</li></ul>

<ul><li>Focus stav pre formulárové polia by mal zmeniť aj hrúbku orámovania. Zmena farby by nemal byť jediný spôsob, ako odlíšiť stav aktívneho pola.</li></ul>

<ul><li>Focus klávesnice nie je úplne prekrytý iným obsahom (level AA). Focus vôbec nie je prekrytý obsahom (level AAA)</li></ul>&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/nespravny_priklad_13047fc31e.png" alt="nesprávny príklad.png">&nbsp;<ul><li>Zvyčajne chceme vlastný štýl pre focus stav, ktorý sa lepšie hodí k nášmu dizajnu. Vtedy môžeme prepísať defaultný štýl prehliadača:</li></ul><pre><code class="language-css">// Príklad ako si vieme pridať vlastný štýl pre focus stav

button:focus-visible {
 outline: 3px solid deepskyblue;
 outline-offset: 3px;
}</code></pre>&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/focuv_stav_priklad_5896cbf56f.gif" alt="focuv stav príklad.gif"><h3>Tabindex</h3>Interaktívne elementy, napr. button, formulárové polia alebo odkazy, sú tabovateľné a netreba dodatočne nič implementovať. Ak toto chceme docieliť napr. pre <code>&lt;div&gt;</code> môžeme mu priradiť <code>&lt;div tabindex="0"&gt;</code>. Takúto možnosť vieme využiť napr. v interaktívnych grafoch, ktoré v HTML nemajú reprezentujúci tag. Ak chceme docieliť opačný efekt, teda vypnúť interaktivitu (nevieme element označiť cez <code>Tab</code> klávesu) použijeme <code>tabindex="-1"</code>. Žiadne iné hodnoty by sme pre <code>tabindex</code> nemali používať, pretože menia poradie elementov, čo zvyčajne nechceme.<h3>DOM určuje poradie</h3>Poradie tabulátora sa riadi poradím prvkov v HTML (DOM), nie vizuálnym rozložením, ktoré vytvárate pomocou CSS (napr. <code>flex-direction: column-reverse</code> alebo <code>order</code>). Focus order pri navigácii klávesnicou musí byť logický a zodpovedať vizuálnemu usporiadaniu stránky.<blockquote>K tejto téme odporúčam pozrieť článok <a href="https://hidde.blog/indicating-focus-to-improve-accessibility/">Indicating focus to improve accessibility</a>.</blockquote>

<h2>5. Odkazy na preskočenie</h2>Cieľom odkazov na preskočenie je umožniť ľuďom preskočiť opakujúce sa sekcie alebo bloky obsahu na webových stránkach a uľahčiť im prístup k hlavnému obsahu stránky. Najčastejší príklad je preskočenie hlavnej navigácie. Pre ľudí, ktorí využívajú navigáciu pomocou klávesnice je frustrujúce, keď sa na každej stránke musia pretabovať všetkými odkazmi.&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/skip_to_content_c4e4104d50.png" alt="skip to content.png">&nbsp;Ako správne implementovať skip to content odkaz:<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="sk"&gt;
&lt;head&gt;...&lt;/head&gt;
&lt;body&gt;
 &lt;a href="#main-content" class="skip-link"&gt;Preskočiť na hlavný obsah&lt;/a&gt;

 &lt;header&gt;
 &lt;nav&gt;
 &lt;a href="/"&gt;Domov&lt;/a&gt;
 &lt;a href="/o-nas"&gt;O nás&lt;/a&gt;
 &lt;a href="/kontakt"&gt;Kontakt&lt;/a&gt;
 &lt;/nav&gt;
 &lt;/header&gt;

 &lt;main id="main-content"&gt;
 &lt;h1&gt;Vitajte na našej stránke&lt;/h1&gt;
 &lt;p&gt;Toto je hlavný obsah, ku ktorému sa používateľ dostane po kliknutí na odkaz.&lt;/p&gt;
 &lt;a href="/example"&gt;Ďalší odkaz v obsahu&lt;/a&gt;
 &lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><pre><code class="language-css">.skip-link {
 /* Vizuálne skrytie odkazu mimo obrazovky */
 position: absolute;
 left: -999px;
 top: -999px;
 
 /* Naštýlujte podľa dizajnu stránky napr... */
 padding: 20px;
 backround-color: #FFF
 color: primary;
 font-size: 1.2em;
}

.skip-link:focus {
 /* Zviditeľnenie odkazu, keď dostane fokus (napr. klávesou Tab) */
 position: absolute; /* Alebo 'fixed', podľa potreby */
 top: 0px;
 left: 0px;
}</code></pre><blockquote>ℹ️ Inšpirujte sa napr. webom: <a href="https://www.smashingmagazine.com/">smashingmagazine</a>. Po načítaní stránky stlačte <code>Tab</code> klávesu. V ľavom hornom rohu sa zobrazí: <code>Skip to main content</code>.</blockquote>&nbsp;<blockquote>⚠️ Nepoužívajte v Next.js <code>&lt;Link&gt;</code> komponent, ale použite klasický natívny HTML <code>&lt;a&gt;</code> tag. <code>Link</code> komponent nesprávne implementuje zmenu focus stavu. Viac info v <a href="https://github.com/vercel/next.js/issues/49386">GitHub issue</a>.</blockquote>

<h2>6. Prázdne odkazy a&nbsp;tlačidlá</h2>Každý interaktívny prvok na stránke, napr. tlačidlá alebo odkazy, musí mať zrozumiteľný názov. Často sa stáva, že napr. odkazy v sebe majú len ikonku, ale žiadny text. Čítačka obrazovky tak nevie nevidiacemu používateľov prečítať, o aký odkaz ide.&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/Prazdne_tlacidla_d9f0f4ec36.png" alt="Prázdne tlačidlá.png">&nbsp;Pomocou tagu <code>&lt;span&gt;</code>, ktorý skryjeme CSS-kom, avšak pre čítačky obrazovky ostane tento text stále viditeľný, vieme zobraziť popis pre tlačidlá čisto so svg ikonami.<pre><code class="language-css">// CSS
.sr-only {
 position: absolute;
 left: -10000px;
 top: auto;
 width: 1px;
 height: 1px;
 overflow: hidden;
}</code></pre><pre><code class="language-html">&lt;!-- HTML --&gt;
&lt;a href="https://twitter.com"&gt;
 &lt;svg aria-hidden="true" ...&gt;&lt;/svg&gt;
 &lt;span class="sr-only"&gt;Twitter&lt;/span&gt;
&lt;/a&gt;</code></pre>Na <code>svg</code> element sme použili atribúty <code>aria-hidden="true"</code>. Ikonky na webe slúžia primárne ako vizuálna pomôcka, avšak pre nevidiacich nedávaju význam a zbytočne zahlcujú dôležitejši obsah, napr. text v tlačidle.<blockquote>📚 Viac o métode pre skrývanie vizuálneho obsahu nájdete na webe <a href="https://webaim.org/techniques/css/invisiblecontent/">WebAIM</a>.</blockquote><h3>Nevhodné popisy odkazov/buttonov</h3><ul><li>Pre button alebo odkaz je dôležité popísať, čo sa stane po kliknutí. Častý príklad:</li></ul><img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/nespravny_popis_dd3393b5d7.png" alt="nevhodný popis.png"><pre><code class="language-html">// Zlé príklady ❌
&lt;button&gt;Facebook&lt;/button&gt;
&lt;button&gt;LinkedIn&lt;/button&gt;

// Dobré príklady ✅
&lt;button&gt;Zdieľať článok na Facebooku&lt;/button&gt;
&lt;button&gt;Zdieľať článok na LinkedIn&lt;/button&gt;</code></pre><ul><li>Ďalší častý problém sú odkazy, ktoré nemajú žiadnu výpovednú hodnotu. Napr. klikni tu, čítaj viac atď. Čítačky obrazovky vedia používateľovi prečítať zoznam všetkých odkazov na stránke, aby sa vedel rýchlejšie orientovať. Avšak ak mu čítačka povie 5-krát za sebou odkaz “čítaj viac”, tak používateľ netuší kam odkaz smeruje.</li></ul><pre><code class="language-html">// Zlé príklady ❌
&lt;a href="https://www.goodrequest.com/blog"&gt;Click here&lt;/a&gt;
&lt;a href="https://www.goodrequest.com/blog"&gt;Learn more&lt;/a&gt;
&lt;button&gt;Edit&lt;/button&gt;</code></pre>Ideálne riešenie je poskytnúť zmysluplný text pre tento odkaz/button. Ak sa tomu nevieme vyhnúť môžeme použiť skrytý <code>&lt;span&gt;</code> element:<pre><code class="language-html">&lt;a href="/blog"&gt;
	Show more
	&lt;span class="sr-only"&gt;blog articles&lt;/span&gt;
&lt;/a&gt;

&lt;a href="/blog/{article.url}"&gt;
	Read more
	&lt;span class="sr-only"&gt;about {article.name}&lt;/span&gt;
&lt;/a&gt;

&lt;!-- Často tlačidlá v tabuľkách --&gt;
&lt;button onClick={handleChangeAddress(user.id)}&gt;
	Edit
	&lt;span class="sr-only"&gt;address for user {user.name}&lt;/span&gt;
&lt;/a&gt;</code></pre>Ak potrebujete kompletne prepísať obsah tlačidla pre čítačku obrazovky, môžete použiť atribút <code>aria-label</code>, avšak dajte si pozor, aby sa text v <code>aria-label</code> zhodoval s viditeľným textom.<pre><code class="language-html">✅ DOBRE: 
&lt;a href="url" aria-label="Read more about accessibility"&gt;Read more&lt;/a&gt;
&lt;button aria-label="Odoslať prihlášku"&gt;Odoslať&lt;/button&gt;

❌ ZLE (text sa nezhoduje): &lt;button aria-label="Potvrdiť formulár"&gt;Odoslať&lt;/button&gt;</code></pre><blockquote>📚 Viac o správnom popise odkazov nájdete vo <a href="https://aaardvarkaccessibility.com/wcag-plain-english/2-4-4-link-purpose-in-context/">WCAG špecifikácii</a>.&nbsp;</blockquote>

<h2>7. Prístupnosť formulárov</h2><h3>Ovládanie pomocou klávesnice</h3>Formuláre na webe by mali byť, rovnako ako iné interaktívne elementy, prístupné pomocou klávesnice. Napríklad presúvať sa medzi inputmi môžeme pomocou <code>Tab</code> klávesy, select by sa mal dať vyberať pomocou šípok hore/dole alebo checkbox označiť medzerníkom.<h3>Pomenovanie inputov</h3>Každý input musí mať priradený viditeľný <code>&lt;label&gt;</code> element. Môžeme použiť dva zápisy pomocou <code>for</code> atribútu v kombinácii s <code>id</code> alebo zabalením inputu do <code>&lt;label&gt;</code> elementu.<pre><code class="language-html">&lt;label for="name"&gt;Name:&lt;/label&gt;
&lt;input id="name" type="text" autocomplete="name"&gt;

&lt;!-- or --&gt;

&lt;label&gt;Name: &lt;input type="text" autocomplete="name"&gt;&lt;/label&gt;</code></pre><h3>Zgrupovanie</h3>Checkboxy alebo radio inputy môžeme zgrupovať <code>&lt;fieldset&gt;</code> elementom a priradiť popis pomocou <code>&lt;legend&gt;</code> elementu. Len vizuálne zgrupovanie inputov nie je dostatočné pre ľudí, ktorí používajú čítačku obrazovky.<pre><code class="language-html">&lt;fieldset&gt;
 &lt;legend&gt;Select your pizza toppings:&lt;/legend&gt;
 &lt;input id="ham" type="checkbox" name="toppings" value="ham"&gt;
 &lt;label for="ham"&gt;Ham&lt;/label&gt;&lt;br&gt;
 &lt;input id="mushrooms" type="checkbox" name="toppings" value="mushrooms"&gt;
 &lt;label for="mushrooms"&gt;Mushrooms&lt;/label&gt;&lt;br&gt;
 &lt;input id="olives" type="checkbox" name="toppings" value="olives"&gt;
 &lt;label for="olives"&gt;Olives&lt;/label&gt;
&lt;/fieldset&gt;</code></pre><h3>Spracovanie chýb a validácia</h3><ul><li>Ak chceme označiť input ako povinný, môžeme pridať atribút <code>required</code> alebo <code>aria-required="true"</code>. Označiť ho hviezdičkou nestačí, pretože nie všetky čítačky obrazovky rozoznajú, že ide o povinný input.</li></ul><pre><code class="language-html">&lt;input id="name" type="text" required&gt;

&lt;!-- or --&gt;

&lt;input id="name" type="text" aria-required="true"&gt;</code></pre><ul><li>Pre zrakovo postihnutých nestačí zvýrazniť nevalidný input vizuálne napr. červenou farbou. Na to slúži atribút <code>aria-invalid="true"</code>, vďaka ktorému čítačka obrazovky oznámi používateľovi chybný stav.</li></ul><pre><code class="language-html">&lt;input id="name" type="text" aria-invalid="true"&gt;</code></pre><ul><li>Prepojte chybovú správu s poľom pomocou <code>aria-describedby</code>. Hodnota <code>aria-describedby</code> je <code>id</code> elementu, ktorý obsahuje chybovú správu. Čítačky obrazovky potom prečítajú label poľa, jeho typ, hodnotu a následne aj chybovú správu.</li></ul><pre><code class="language-html">&lt;label for="emailPouzivatela"&gt;E-mail:&lt;/label&gt;
&lt;input aria-describedby="emailChyba" aria-invalid="true" id="emailPouzivatela" type="email" name="email"&gt;
&lt;div id="emailChyba" class="error-message"&gt;
 Zadajte platnú e-mailovú adresu.
&lt;/div&gt;</code></pre><ul><li>Po odoslaní formulára s chybami presuňte fokus na prvé chybné pole alebo na súhrn chýb. Toto pomáha používateľom klávesnice a čítačiek obrazovky rýchlo nájsť problémy.</li></ul><blockquote>📚 Dobre spracovaný materiál o prístupnosti formulárov nájdete na <a href="https://webaim.org/techniques/forms/">WebAIM</a>.</blockquote>

<h2>8. Stavové hlásenia a notifikácie</h2>Na webe niektoré akcie nespôsobujú úplné znovunačítanie stránky. Používateľ môže:<ul><li>Pridať produkt do nákupného košíka.</li><li>Vidieť, ako sa na stránke objavia výsledky vyhľadávania.</li><li>Odoslať formulár, ktorý sa uloží bez presmerovania.</li><li>Naraziť na chybu po vykonaní akcie.</li></ul>Vidiaci používateľ tieto zmeny vníma vizuálne. Používateľ čítačky obrazovky sa však nedozvie, že sa niečo stalo.&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/Oznamenie_87728ea127.png" alt="Oznámenie.png">&nbsp;<h3>Ako technicky implementovať hlásenia pre screen reader?</h3><h4>1. variant je nastaviť atribút role:</h4><pre><code class="language-html">&lt;!-- automaticky pridáva aria-live="polite" a aria-atomic="true" --&gt;
&lt;div role="status"&gt; {{announcementString}} &lt;/div&gt;

&lt;!-- automaticky pridáva aria-live="assertive" a aria-atomic="true" --&gt;
&lt;div role="alert"&gt; {{announcementString}} &lt;/div&gt;</code></pre>Pre bežné (neurgentné) hlásenia: <code>role="status"</code>Čítačka správu prečíta, keď práve neoznamuje iný obsah (je iddle). Toto je voľba pre 95% prípadov.<ul><li>„Položka bola pridaná do vášho košíka.“</li><li>„Váš profil bol aktualizovaný.“</li><li>„Zobrazuje sa 25 výsledkov vyhľadávania pre ‚notebooky‘.“</li><li>„Správa bola úspešne odoslaná.“</li></ul>&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/priklad_oznamenia_73d63260f6.png" alt="príklad oznámenia.png">&nbsp;Pre urgentné hlásenia: <code>role="alert"</code>Pre kritické chyby alebo časovo obmedzené varovania, kde je potrebná okamžitá pozornosť používateľa, je varovanie oznámené ihneď a nečaká, kým bude čítačka obrazovky idle.<h4>2. variant je explicitne použiť aria-live a aria-atomic (odporúčaná):</h4><ul><li><code>aria-live</code>:<ul><li><code>"polite"</code>: Oznámi zmenu keď sa nič iné nedeje.</li><li><code>"assertive"</code>: Okamžite preruší používateľa a oznámi zmenu.</li></ul></li><li><code>aria-atomic</code>:<ul><li><code>"true"</code>: Prečíta celý obsah elementu.</li><li><code>"false"</code>: Prečíta iba zmenenú časť.</li></ul></li></ul><pre><code class="language-html">&lt;div aria-live="polite" a aria-atomic="true"&gt;&lt;/div&gt; &lt;!-- to isté ako role="status" --&gt;
&lt;div aria-live="assertive" a aria-atomic="true"&gt;&lt;/div&gt; &lt;!-- to isté ako role="alert" --&gt;</code></pre>Ďalšie príklady ako použiť <code>aria-live</code> a <code>aria-atomic</code>:<pre><code class="language-html">&lt;!-- aria-atomic="false", pretože chceme oznamovať len nové správy --&gt;
&lt;div id="chat-log" aria-live="polite" aria-atomic="false"&gt;
 &lt;p&gt;Jane Doe: Hi everyone!&lt;/p&gt;
 &lt;p&gt;John Smith: Hello there!&lt;/p&gt; 
&lt;/div&gt;

&lt;ul id="live-scores" aria-live="polite" aria-atomic="false"&gt;
 &lt;li&gt;Team A vs. Team B: 1-0&lt;/li&gt;
 &lt;li&gt;Goal! Team A scores. The score is now 2-0.&lt;/li&gt;
&lt;/ul&gt;

&lt;!-- aria-atomic="true", pretože chceme oznamovať celý text a nie len zmeny --&gt;
&lt;div id="search-summary" aria-live="polite" aria-atomic="true"&gt;
 Showing 15 of 240 products.
&lt;/div&gt;

&lt;div id="stepper-status" aria-live="polite" aria-atomic="true"&gt;
 Step 2 of 5: Shipping Details
&lt;/div&gt;

&lt;div id="toast-notification" aria-live="polite" aria-atomic="true"&gt;
 File saved successfully.
&lt;/div&gt;


&lt;!-- aria-live="assertive", pretože chceme oznámiť kritickú chybu --&gt;
&lt;div aria-live="assertive" aria-atomic="true"&gt;
 An unknown error occurred while saving your changes. Try again.
&lt;/div&gt;

&lt;div aria-live="assertive" aria-atomic="true"&gt;
 Connection to server lost. Your changes may not be saved.
&lt;/div&gt;</code></pre>Príklad ako spraviť prístupný search:<pre><code class="language-typescript">function AccessibleSearch() {
 const [searchStatusMessage, setSearchStatusMessage] = useState('');

 const handleSearch = (searchTerm: string) =&gt; {
 // Search logic here
 setSearchStatusMessage(`${resultsCount} results found for ${searchTerm}`)
 };

 return (
 &lt;&gt;
 {/* 1. Use a form with role="search" for a landmark */}
 &lt;form role="search" onSubmit={handleSearch}&gt;
 {/* 2. Connect the label to the input */}
 &lt;label htmlFor="search-input"&gt;Search our site&lt;/label&gt;
 &lt;input
 type="search"
 value={searchTerm}
 onChange={(e) =&gt; setSearchTerm(e.target.value)}
 /&gt;
 &lt;button type="submit"&gt;Search&lt;/button&gt;
 &lt;/form&gt;

 {/* 3. ARIA live region to announce status updates */}
 &lt;ScreenReaderOnlySC role="status"&gt;{searchStatusMessage}&lt;/ScreenReaderOnlySC&gt;
 &lt;/&gt;
 );
}</code></pre><blockquote>ℹ️ <a href="https://mantine.dev/x/notifications/">Mantine notifikácie</a> implementujú ARIA Live Regions a korektne oznamujú čítačkám obrazovky obsah notifikácie.</blockquote>

<h2>9. Jasné error hlásenia</h2>Chyby musia byť jasne označené a opísané používateľovi. Ak používateľ urobí chybu pri vypĺňaní webového formulára, všetky chyby, ktoré urobil, musia byť jasne identifikovateľné. Chybové hlásenie by malo presne uvádzať, čo sa pokazilo a ako to opraviť.&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/error_hlasky_8583a0d93a.png" alt="error hlášky.png">&nbsp;Niekoľko príkladov užitočných chybových hlášok:<ul><li>Ak sa vstup musí zhodovať s množinou povolených hodnôt, chybové hlásenie by malo obsahovať povolené možnosti.</li><li>Popíšte, ako by mali vyzerať správne údaje a formátovanie.</li><li>Zobrazte podobné správne hodnoty a vysvetlite, ako ich zadať.</li></ul><img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/error_hlasenie_8b22b9fc68.png" alt="error hlásenie.png"><h3>Jasná spätná väzba po úspešnom odoslaní</h3>Poskytnutie jasnej spätnej väzby po úspešnom odoslaní formulára dáva používateľom potvrdenie, že nemusia prehľadávať formulár alebo stránku a hľadať chyby. Zobrazením jasnej a konzistentnej spätnej väzby môžu používatelia rýchlo pochopiť, že ich akcia bola dokončená.&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/Priklad_spravneho_hlasenia_dfd8865bb3.png" alt="Príklad správneho hlásenia.png">

<h2>10. Gestá</h2>Každá akcia, ktorá vyžaduje zložité gesto (potiahnutie, priblíženie štipkou, ťahanie, trasenie, nakláňanie), musí byť vykonateľná aj jednoduchou akciou, napríklad kliknutím na tlačidlo alebo stlačením klávesy. Žiadna funkcia sa nesmie spoliehať iba na pohybové gestá. Pohybové ovládanie môže byť doplnok, ale nikdy nie jediný spôsob, ako niečo urobiť.Príklady:<ul><li>Carousel: Okrem potiahnutia (swipe) pridajte aj viditeľné šípky <code>Ďalej</code> a <code>Späť</code>.</li><li>Slider: Okrem ťahania posuvníka pridajte aj tlačidlá na postupné zvýšenie/zníženie hodnoty alebo overte, že funguje ovládanie šípkami na klávesnici.</li><li>Mapa: Okrem priblíženia štipkou (pinch-to-zoom) pridajte aj tlačidlá <code>+</code> a <code>-</code>.</li></ul>

<ul><li>Kanban boards: V detaile karty môžeme zmeniť status napr. pomocou dropdownu a zmeniť stav z "To Do" na "In Progress" alebo použitím <a href="https://docs.dndkit.com/guides/accessibility">knižnice</a>, ktorá implementuje drag&amp;drop pomocou klávesnice.</li><li>Gestá „potrasením vrátiť späť“: Použite tlačidlá alebo odkazy na dosiahnutie rovnakej funkčnosti.</li></ul>&nbsp;<img src="https://goodrequest-web.s3.eu-central-1.amazonaws.com/gesta_potrasenim_spaet_9bb11ced16.png" alt="gestá-potrasením späť.png">

<h2>11. Ďalšie pravidlá</h2><ul><li>Focus trap: Nesmie nastať situácia, keď otvoríte napr. modálne okno, cookie banner, video… pomocou klávesnice a nemôžete sa vrátiť späť na stránku odkiaľ ste prišli. Vždy musí byť dostupný close button alebo funkčná klávesa ESC na modálnom okne. Nemôžeme sa spoliehať len na kliknutie mimo modálneho okna.</li><li>Klávesové skratky tvorené jedným znakom (napríklad stlačenie písmena "M" na stlmenie zvuku): Web musí poskytnúť mechanizmus na vypnutie skratky, jej premapovanie na kombináciu s modifikačným klávesom (napríklad Ctrl alebo Alt), alebo zabezpečiť, že je aktívna iba vtedy, keď má fokus konkrétny prvok na stránke. Cieľom je zabrániť používateľom v nechcenom spúšťaní asistenčných technológií, keď sa navigujú na webe pomocou klávesnice.</li><li>Dôležité formuláre, ako napríklad právna zmluva alebo predkladanie finančných informácií, ponúkajú možnosť skontrolovať zadané informácie pred odoslaním. Zobrazte stránku s prehľadom, ktorá zhrnie všetky údaje zadané používateľom a ponúkne možnosť upraviť údaje alebo vrátiť sa späť na editovanie.</li><li>Pred odstránením alebo úpravou dôležitých údajov/súborov zobraz potvrdenie. Ideálne ak má používateľ možnosť obnoviť súbor po zmazaní alebo má možnosť vrátiť akciu späť.</li></ul>

Každá webová stránka by měla být navržena tak, aby byla přístupná všem, od zkušených uživatelů až po osoby využívající asistenční technologie. Abychom toho mohli dosáhnout konzistentně a bez kompromisů, potřebujeme jasně definovaná pravidla.

 Přístupný web jednoduše: Praktický checklist pro developery

Every website should be designed to be accessible to everyone, from experienced users to people using assistive technologies. To ensure this consistently and without compromise, we need clearly defined rules.

Web accessibility made simple: A practical checklist for developers

Prístupný web jednoducho hero.png

Prístupný web jednoducho thumb.png

Andrej Nemeček

Každý web by mal byť navrhnutý tak, aby bol dostupný všetkým, od skúsených používateľov až po ľudí využívajúcich asistívne technológie. Aby sme to dokázali zabezpečiť konzistentne a bez kompromisov, potrebujeme jasne definované pravidlá.

Prístupný web jednoducho: Praktický checklist pre developerov

Najčastejšie otázky na úvod bývajú jasné… koľko to bude stáť a kedy to bude hotové. Lenže samotná cena je až výsledkom viacerých rozhodnutí. Dobrý odhad začína pochopením toho, čo ideme budovať, prečo to má zmysel a aké sú reálne potreby používateľov. Na tomto základe sa potom navrhuje najvhodnejšie riešenie a až následne prichádzajú čísla. A práve z toho potom vychádza odhad času, nákladov a všetkého ostatného.<h2>Prečo sa oplatí venovať čas estimácii</h2><h3>1. Pomáha nastaviť reálne očakávania</h3>Kvalitný odhad hneď na začiatku pomáha všetkým stranám vedieť, na čom sú, koľko to bude trvať, koľko to môže stáť a čo všetko si projekt vyžiada. Keď sú očakávania jasne nastavené, znižuje sa riziko nepríjemných prekvapení po ceste.Podozrivo lacné ponuky, ktoré sľubujú rýchle dodanie, môžu na prvý pohľad vyzerať lákavo – ale často skrývajú problémy, ktoré sa ukážu až neskôr. Realistický odhad od skúseného partnera vám dá istotu, že projekt má pevné základy a prebehne bez zbytočných prekvapení.

<h3>2. Správni ľudia na správnych miestach</h3>Keď poznáme rozsah a komplexitu projektu, vieme presne, aký tím bude na projekte potrebný: koľko ľudí, akých špecializácií a v akých fázach. Takto sa dokáže projekt lepšie naplánovať a tím pracuje efektívnejšie. Vyhýbame sa situáciám, keď niekto nemá čo robiť, alebo naopak nestíha.

<h3>3. Problémy riešime skôr, než sa objavia</h3>Kvalitná estimácia nie je len o tom, aby sme vedeli, čo robiť dnes. Zohľadňuje aj to, čo sa môže zmeniť zajtra – nové požiadavky, technické limity, posuny v prioritách. Ak tieto situácie vieme predvídať a počítame s nimi už v odhade, vývoj potom prebieha pokojnejšie, s menšími rizikami a bez zbytočných stresov.<h2>Dôležité je najprv pochopiť celý projekt</h2>Predtým, než sa pustíme do samotnej estimácie, musíme dôkladne pochopiť, čo všetko projekt obnáša, inak je to len streľba naslepo.Otvorená, úprimná a proaktívna komunikácia je základom, aby estimácia aj projekt prebiehali hladko. Týmto spôsobom môžeme vytvoriť odhad, ktorý bude presne zodpovedať očakávaniam. Preto pred samotnou estimáciou potrebujeme spoločne pochopiť:<ul><li>Aký problém riešime a pre koho</li><li>Aké sú hlavné ciele a očakávania</li><li>Aké technológie, integrácie alebo obmedzenia sú v hre</li></ul>

<h3>Kvalitné zadanie je základ</h3>Dobrý brief je základným kameňom každého projektu. Avšak produktové zadanie je len tak dobré, ako dobre mu všetci rozumejú. Preto má vždy zmysel si ho spoločne prejsť, spýtať sa na detaily, vyjasniť nejasnosti a pomenovať riziká.

Ak sa chcete dozvedieť viac o tom, čo by malo byť súčasťou produktového zadania, prečítajte si náš článok 👇

<h3>Úvodný hovor – zistenie potrieb</h3>Začíname rozhovorom, počas ktorého si spoločne prejdeme váš nápad a pozrieme sa naň očami biznisu a technológii. Vďaka tomu vieme lepšie odhadnúť, čo všetko projekt obnáša, zameriavame sa na pochopenie skutočných potrieb a problémov vášho biznisu a zákazníkov. Ak niečo nie je úplne jasné, pomôžeme to zadefinovať na workshope.<h3>Workshop – vyjasnenie detailov</h3>Na workshope sa stretávajú odborníci z viacerých oblastí – analytici, dizajnéri, architekti. Spoločne prejdeme zadanie do hĺbky, identifikujeme riziká, doplníme nejasnosti a zhodneme sa na realistickom rozsahu.Formát workshopu volíme vždy podľa toho, čo projekt práve potrebuje:<ul><li>MVP Launcher – na rýchlu definíciu minimálneho funkčného riešenia</li><li>UX Research – keď potrebujeme spoznať používateľa a jeho potreby</li><li>AI Pathfinder – ak zvažujete, ako a či využiť AI v projekte</li><li>Product Workshop – na zmapovanie obchodných potrieb a návrh produktovej stratégie</li></ul><h2>Estimácia – “rozbiť a poskladať”</h2>Keď je zadanie jasné, môžeme prejsť na samotnú estimáciu. Projekt rozdelíme na menšie celky – dizajn, vývoj, testovanie, nasadenie – a ku každému priradíme:<ul><li>čo sa bude robiť,</li><li>kto to bude robiť,</li><li>ako dlho to bude trvať.</li></ul><h3>Kto vstupuje do procesu estimácie?</h3>To samozrejme záleží od rozsahu projektu a požadovaných platforiem. Do procesu estimácie vstupujú kľúčoví členovia tímov, ktorí zabezpečujú, že odhad bude realistický a presný:<ul><li>Business development manažér – hlavný kontakt pre klienta, rozumie cieľom, vedie komunikáciu a dohliada, aby boli výstupy v súlade s očakávaniami.</li><li>Solution architekt – prepája biznis s technológiou, vedie proces a dohliada na technický návrh, konzistenciu a realizovateľnosť riešenia.</li><li>Doménoví experti (napr. teamleadi alebo seniori) – navrhujú optimálne riešenia vo svojich oblastiach, odhadujú jednotlivé časti a upozorňujú na riziká a nejasnosti.</li></ul><h3>Spájame to do jedného celku</h3>Po tom, čo rozdelíme projekt na jednotlivé časti a spracujeme odhady, dávame všetko dokopy do jedného uceleného plánu. Výsledkom nie je len číslo, ale:<ul><li>realistický harmonogram,</li><li>odhad nákladov,</li><li>návrh zloženia tímu,</li><li>špecifikáciu funkčných a nefunkčných požiadaviek.</li></ul>Funkčné požiadavky zapisujeme formou user stories s akceptačnými kritériami, ktoré sú zdieľané s klientom. Tento spôsob zaručuje, že je obom stranám jasné, čo presne je zahrnuté v dohodnutom scope a čo nie.Zároveň si pri jednotlivých funkcionalitách určujeme aj mieru istoty odhadu – teda ako presne vieme v danej chvíli funkcionalitu naceniť. Ak ide o oblasť, kde je zadanie nejasné alebo chýbajú detaily, dávame tomu menšiu „certainty“ a smerujeme k nej otázky.Ak sa ani po diskusii nepodarí získať dostatok informácií, **rátame s “**vatou“, ktorá zohľadňuje potenciálne nečakané komplikácie. Aj preto sa oplatí mať zadanie čo najlepšie rozpracované: čím viac istoty máme, tým presnejší je odhad a tým menej prekvapení čaká na ceste.<h2>Odhad nie je len číslo – je to plán</h2>Na konci tejto fázy máte v rukách realistický plán: čo, kto, ako dlho a za koľko. Zároveň máte aj predstavu o možných rizikách a tom, čo sa môže po ceste zmeniť. Áno, odhad sa počas projektu môže jemne upraviť – ale vďaka tomuto základu máte projekt pod kontrolou.Estimácia nie je byrokracia. Je to spôsob, ako sa vyhnúť chaosu, predísť frustrácii a postaviť dobrý projekt na pevných základoch. Keď sa do projektu ide s jasným plánom, výsledok je rýchlejší, lacnejší a kvalitnejší.A presne o to ide.

Máte nápad, který chcete proměnit ve funkční digitální produkt, a chcete, aby vše proběhlo hladce? Jedním z klíčových kroků, které rozhodují o tom, zda projekt proběhne podle plánu, nebo se začne rozpadat v základech, je dobrý odhad potřebného času, nákladů a kapacity.

Jak přistupujeme k odhadům

Do you have an idea that you want to turn into a functional digital product and you want everything to run smoothly? One of the key steps that determines whether a project will go according to plan or start falling apart at the ground level is a good estimation - an estimate of the time, cost and capacity required.

How we approach estimations

Ilustrácia štyroch častí skladačky puzzle, tri do seba zapadajú, jedna časť skladačky je vyššie - mala by zapadnúť do ostatných.

Estimácie_Hero.jpg

Estimácie_Thumb.jpg

Bruno Grinč

Máte nápad, ktorý chcete pretaviť na funkčný digitálny produkt, a chcete, aby všetko prebiehalo hladko? Jedným z kľúčových krokov, ktorý rozhoduje o tom, či projekt pôjde podľa plánu alebo sa začne rozpadávať už v základoch, je kvalitná estimácia – teda odhad času, nákladov a potrebných kapacít.

Ako pristupujeme k estimáciám

Miesto zostalo rovnaké, no všetko ostatné bolo iné – a znova o niečo lepšie. Iné tempo, iná nálada, nový program. Bez tlaku, bez povinností. A práve v tom spočíva ich čaro. ✨<h2>Day 1</h2><h3>Inšpirácia, stratégia a spoločné vízie</h3>Prvý deň sme otvorili naším pravidelným all-handsom, ktorý sme presunuli na popoludnie a venovali sme ho retrospektíve našej stratégie v prvom polroku.

Spoločne sme si vychutnali večeru na streche našej žilinskej kancelárie a kochali sa nádherným výhľadom. Tento moment sme venovali neformálnym rozhovorom, ktoré si o to viac ceníme, keďže sa všetci nestretávame pravidelne osobne – predsa len, sme roztrúsení po celej republike. Bola to skvelá príležitosť lepšie sa spoznať a dobehnúť zameškané.

Po návrate do kancelárie nás čakali naše obľúbené lightning talks. Témy boli ako vždy rôznorodé: od technológií pre inteligentné domácnosti, cez najobľúbenejšie nápoje GR - kombuchu a kávu, až po niekoľko cestovateľských dobrodružstiev. A samozrejme, na čape bolo ďalší obľúbený nápoj: pivo.

<h2>Day 2</h2><h3>Naštartovaní slovami, zjednotení hrou</h3>Druhý deň sme odštartovali trochu inak, akurát nie s Adelou ale našim CEO.Následne sme sa rozdelili do tímov a spoločne sme sa zapojili do aktivít, ako akčné bojové lode (odkiaľ sme si odniesli aj nejaké šrámy), “hobby horsing”, či tvorba spoločnej cestovateľskej zemegule.

<h3>Balans pre telo aj ducha</h3>Popoludnie patrilo voľnejšiemu tempu - každý si mohol vybrať aktivity podľa svojho gusta. Či už to boli tímové hry ako voleyball, úniková hra alebo na druhej strane joga, či workshop pečenia pizze. Počas tohto dňa sme si dopriali aj zaslúžený oddych – chvílu relaxu a masáže, ktoré nám pomohli načerpať novú silu a vyčistiť hlavu.

<h3>Zdieľané jedlo, zdieľaná radosť</h3>Večer sme sa stretli pri spoločnom grilovaní, kde sme si vychutnali jedlo plné skvelých chutí a večer plný dobrej nálady a rozhovorov.

Tanec pod hviezdami bol bodkou za dňom, ktorý nám pripomenul, že popri práci je rovnako dôležité zdieľať radosť a užívať si spoločné chvíle. O večernú atmosféru sa postarala Lara Abou – speváčka s výnimočným hlasom a energiou, ktorá nás okamžite vtiahla do hudobného zážitku. Neskôr sa toho ujal DJ a postaral sa o to, aby parket nezostal prázdny až do neskorých hodín.

<h2>GR8 moments, GR8 connections</h2>Aj tento rok sme si pripomenuli, že to, čo robí GoodRequest silným, nie sú len výstupy či technológie – ale ľudia, ktorí sa navzájom poznajú, dopĺňajú a vedia spolu fungovať ako tím.Ďakujeme každému, kto prišiel – s chuťou zdieľať, zabaviť sa, vypnúť na chvíľu alebo si jednoducho užiť čas spolu. A špeciálne vďaka patrí nášmu people tímu, ktorý celé podujatie zorganizoval s obrovským citom pre detail aj ľudskosť.

Vidíme sa o rok 💛

GR8 Days - akce, na kterou se v GoodRequestu každoročně těšíme. Dny, kdy zavřeme notebooky a vyměníme schůzky za osobní rozhovory. GR8 Days jsou zrcadlem toho, jací jsme jako tým.

GR8 Days 2025: Dva dny, které nás opět spojily

GR8 Days - an event that we at GoodRequest look forward to every year. Days when we close our laptops and swap meetings for personal conversations. GR8 Days are a mirror of who we are as a team.

GR8 Days 2025: Two days that reunited us again

Veľká skupina ľudí pózuje na piesku počas firemného podujatia pod holým nebom. V pozadí sú stromy, prístrešok a modrá obloha.

GR8-Days_Hero.jpg

Fotografia zemegule s vlajkami vytvorenej zamestnancami GoodRequest počas firemného večierka.

GR8-Days_Thumb3.jpg

GoodRequest

GR8 Days – event, na ktorý sa v GoodRequeste každý rok s netrpezlivosťou tešíme. Dni, kedy zatvárame notebooky a meníme meetingy za osobné rozhovory. GR8 Days sú zrkadlom toho, kým sme ako tím.

GR8 Days 2025: Dva dni, ktoré nás znovu spojili

Sme dôveryhodný partner, ktorý vám pomôže objaviť a využiť nové obchodné príležitosti, vytvoriť špičkové digitálne produkty a podporiť dlhodobý rast vašej značky.

Experti na

GoodRequest-2024.jpg

Sme digitálne štúdio s viac ako 11-ročnými skúsenosťami s vytváraním udržateľných digitálnych produktov pre ambiciózne firmy. Naša práca prináša trvalú hodnotu, skutočnú konkurenčnú výhodu a je zameraná na dlhodobý rast.&nbsp;

Naše projekty

Premieňame nápady na dlhodobý úspech

Testimonials

Čomu sa venujeme

Definujeme a validujeme myšlienku produktu

Produkt

Úspešné a udržateľné produkty žijú na rozhraní ľudských a biznisových potrieb. Aby sme vytvorili úspešný produkt, venujeme čas dôkladnému pochopeniu vašej cieľovej skupiny a biznisových cieľov, a to ešte skôr, ako urobíme akýkoľvek ďalší krok.

Vynikajúce výsledky vďaka výskumu a dizajnu

Dizajn

Naši certifikovaní UX/UI dizajnéri úzko spolupracujú s vašimi používateľmi, aby pochopili ich potreby, správanie a preferencie. Vykonávajú používateľský výskum, aby spoznali ich skutočné názory, a tak vedeli vytvárať kvalitné a adresné produkty.

Kvalitný vývoj mobilných a webových aplikácií

Vývoj

Od roku 2013 sme dodali viac ako 200 úspešných mobilných a webových aplikácií. Naši testeri a vývojári získali prestížne certifikáty Citadelo, ISTQB a SOACP. Do profesionálneho rozvoja našich ľudí veľa investujeme, aby mohli vytvárať kvalitné a spoľahlivé digitálne produkty.

Zabezpečenie stabilnej škálovateľnosti

Škálovanie

Uvedenie digitálneho produktu na trh je len začiatok. Produkty staviame na spoľahlivých a škálovateľných platformách, vďaka čomu vieme zaručiť, že budú naďalej rásť spolu s vaším biznisom.

Experti na
softvérdigitálne produktyvývoj aplikáciíproduktový dizajn

Naše projekty

Premieňame nápady na dlhodobý úspech

Digitálny sprievodca detí vo svete financií TABI od Tatra banky

Modernizácia a zefektívnenie fungovania beauty salónov pre Notino

Vytvorenie moderného digitálneho zážitku pre sieť lekárni Benu

Dizajn atraktívneho rozhrania pre najprestížnejší biznis magazín na Slovensku Forbes

Konzistentný online zážitok pre Fitshaker, najväčšiu fitness komunitu na Slovensku

Testimonials

Čomu sa venujeme

Definujeme a validujeme myšlienku produktu

Blog

Buďte o krok pred ostatnými

Prístupný web jednoducho: Praktický checklist pre developerov

Ako pristupujeme k estimáciám

GR8 Days 2025: Dva dni, ktoré nás znovu spojili

Experti na softvérdigitálne produktyvývoj aplikáciíproduktový dizajn

Naše projekty

Premieňame nápady na dlhodobý úspech

Digitálny sprievodca detí vo svete financií TABI od Tatra banky

Modernizácia a zefektívnenie fungovania beauty salónov pre Notino

Vytvorenie moderného digitálneho zážitku pre sieť lekárni Benu

Dizajn atraktívneho rozhrania pre najprestížnejší biznis magazín na Slovensku Forbes

Konzistentný online zážitok pre Fitshaker, najväčšiu fitness komunitu na Slovensku

Testimonials

Čomu sa venujeme

Definujeme a validujeme myšlienku produktu

Blog

Buďte o krok pred ostatnými

Prístupný web jednoducho: Praktický checklist pre developerov

Ako pristupujeme k estimáciám

GR8 Days 2025: Dva dni, ktoré nás znovu spojili

Experti na
softvérdigitálne produktyvývoj aplikáciíproduktový dizajn