Práce s kódem

00:00:00

Psaní kódu s odečítačem obrazovky může být složité – VoiceOver čte kód řádek po řádku a odhalit chybu v tisícové struktuře HTML vyžaduje hodiny trpělivosti. AI ale „vidí" celý kód naráz, okamžitě najde nesrovnalosti, navrhne opravu a vysvětlí, proč k chybě došlo. A to platí stejně pro nevidomého vývojáře jako pro vidoucího kolegu, který se v cizím kódu ztrácí.

AI jako revizor kódu

Nejcennější použití AI při práci s kódem je revize – systematická kontrola, která odhalí chyby, které by vám jinak unikly. Stačí kód zkopírovat do chatu a zeptat se:

  • „Najdi chybu v tomto HTML kódu, kvůli které se nezobrazuje tabulka správně."
  • „Zkontroluj, zda mám správně uzavřené všechny divy, sekce a article elementy."
  • „Doplň k tomuto formuláři ARIA štítky a popisky chyb, aby byl plně přístupný pro VoiceOver."
  • „Projdi tento CSS soubor a najdi duplicitní pravidla nebo konflikty stylů."
  • „Zkontroluj, zda všechny obrázky mají alt text a zda je smysluplný."

AI v odpovědi zpravidla nejen najde problém, ale i vysvětlí, proč je to chyba a jak ji opravit – což je skvělý způsob, jak se průběžně učit.

Tvorba nových prvků a komponent

Nepište vše od nuly. Nechte AI vytvořit základ, který si pak upravíte podle svých potřeb. AI dokáže generovat kód, který respektuje vámi zadané standardy – stačí je popsat v promptu.

Příklady zadání:

  • „Vytvoř přístupnou HTML navigaci s rozbalovacím menu. Menu musí být ovladatelné klávesnicí a mít správné ARIA atributy pro VoiceOver. Použij třídy z mého stávajícího CSS."
  • „Napiš JavaScript funkci, která přepíná tmavý a světlý režim webu a ukládá předvolbu do localStorage."
  • „Vytvoř responzivní CSS grid layout pro tři sloupce, který se na mobilním zařízení přeskupí do jednoho sloupce."

Zlaté pravidlo: vždy celý soubor

Pro nevidomé uživatele je absolutně zásadní dostat vždy kompletní soubor – ne jen opravenou část. S VoiceOverem je prakticky nemožné bezpečně „vkládat" fragmenty kódu do správných míst většího souboru. Stejné pravidlo ale ocení i vidoucí vývojáři, kteří nechtějí ručně slučovat fragmenty.

Pokud AI pošle zkrácený kód s komentářem „zbytek kódu je stejný", hned ji zastavte:

„Zastav se. Potřebuji kompletní soubor – pošli mi celý kód od začátku do konce bez jakéhokoliv zkracování nebo komentářů ‚zbytek je stejný'. Potřebuji to celé zkopírovat."

Claude (a většina moderních AI modelů) tuto instrukci respektuje, pokud ji jasně zopakujete.

AI a přístupný kód

Přístupnost webu je oblast, kde AI skutečně exceluje. Pravidla WCAG (Web Content Accessibility Guidelines) jsou obsáhlá a jejich dodržování je pro vidoucí vývojáře někdy neintuitivní. AI je zná nazpaměť:

  • „Projdi tento kód a zkontroluj ho podle WCAG 2.1 AA. Vypiš konkrétní porušení a navrhni opravu každého z nich."
  • „Mám tlačítko s ikonou bez textu. Jak ho správně označit pro odečítač obrazovky?"
  • „Jaký je rozdíl mezi role='button' a skutečným <button> elementem z hlediska přístupnosti?"
  • „Tato tabulka nemá záhlaví. Jak ji opravit, aby ji VoiceOver četl srozumitelně?"

AI jako osobní lektor programování

AI skvěle vysvětluje kód – a to na jakékoliv úrovni složitosti. Začátečník dostane jednoduché přirovnání, zkušený vývojář technické detaily. Stačí říct, na jaké úrovni vysvětlení chcete.

  • „Vysvětli mi krok za krokem, co dělá tento JavaScript. Jsem začátečník, vysvětluj jednoduše."
  • „Proč se tento CSS selektor chová jinak než očekávám? Vysvětli mi specifičnost (specificity) v CSS."
  • „Jaký je rozdíl mezi position: absolute a position: fixed? Dej mi příklad, kdy použít který."

Je to nejrychlejší a nejpohodlnější způsob učení programování – máte po ruce lektora, který odpoví okamžitě, nikdy se nenudí a vždy přizpůsobí výklad vašemu tempu.

Tip od Zdeňka

Zdeněk radí: Já vždy na začátek každé konverzace napíšu AI svůj „Master Standard" – stručný popis toho, jak mám web postavený, jaká jsou moje pravidla pro kód a přístupnost, a připomenu, že jako nevidomý potřebuji vždy celý soubor. Výsledky jsou pak konzistentní a odpovídají přesně mým potřebám. Uložte si takový úvod a používejte ho – ušetříte si spoustu oprav!