návaznost na předchozí práci a uvedení problému „Přístupnost a zpětná vazba dynamického rozhraní“. 5–12 min: teoretické minimum – přístupnost, fokus, klávesnice, aria-live, disabled, zpětná vazba. 12–18 min: společná ukázka v prohlížeči a vývojářské konzoli. 18–36 min: samostatná praktická práce – Opravit interaktivní rozhraní: použít správná tlačítka, viditelný fokus, textovou stavovou zprávu a blokování neplatné akce. 36–41 min: test běžného, hraničního a chybového scénáře. 41–45 min: uložení výstupu (Přístupný interaktivní prvek s chybovými stavy), krátká reflexe a určení dalšího kroku.
JavaScript a interaktivní web · 45 minut
Přístupnost a zpětná vazba dynamického rozhraní
Upraví interaktivní prvek tak, aby byl ovladatelný klávesnicí a změny stavu byly srozumitelné i bez vizuálního kontextu.
00
ČASOVÁ OSA
Struktura 45minutové hodiny
01
VIDEO LEKCE
Ukázka a vysvětlení postupu
▶
Video je připravené k doplnění
Video ukáže princip, první kroky, kontrolu a typickou chybu. Nebude obsahovat celý hotový upravitelný úkol.
provider: youtube · youtubeId: ""02
STUDIJNÍ MATERIÁL
Výklad: z čeho se učíš
Téma „Přístupnost a zpětná vazba dynamického rozhraní“ patří do celku „JavaScript a interaktivní web“. Nejde pouze o ovládání nástroje: cílem je porozumět rozhodnutím, která vedou od zadání k ověřitelnému digitálnímu výstupu.
Klíčové pojmy přístupnost, fokus, klávesnice popisují základní stavební prvky dnešní práce. Pojmy aria-live, disabled, zpětná vazba pomáhají výsledek kontrolovat, vysvětlit nebo porovnat s jinou variantou. Každý pojem proto použij v konkrétním kroku, nikoli jen v definici.
Pracovat budeš v prostředí „HTML, CSS, JavaScript a testování klávesnicí“. Nejprve si uchovej původní podklady, potom vytvoř pracovní kopii a změny prováděj po menších ověřitelných krocích. Po každé důležité změně výsledek otevři, spusť nebo porovnej s požadovaným chováním.
Praktické zadání zní: Opravit interaktivní rozhraní: použít správná tlačítka, viditelný fokus, textovou stavovou zprávu a blokování neplatné akce. Výsledkem je „Přístupný interaktivní prvek s chybovými stavy“. Nestačí, aby výstup pouze existoval; musí být možné doložit, že splňuje cíl: Upraví interaktivní prvek tak, aby byl ovladatelný klávesnicí a změny stavu byly srozumitelné i bez vizuálního kontextu.
Kvalitu posuzuj podle těchto hledisek: Všechny akce fungují bez myši, Fokus je viditelný a stavová zpráva oznamuje výsledek akce. Před odevzdáním zkontroluj názvy a strukturu souborů, funkčnost na čistém nebo cílovém prostředí a připoj stručnou reflexi rozhodnutí, testu a případné opravy.
Slovníček pojmů
přístupnost
Pojem „přístupnost“ označuje konkrétní prvek nebo pravidlo používané při tématu této lekce; jeho význam se ověřuje na pracovním příkladu a podle výsledného výstupu.
fokus
Aktuálně vybraný ovládací prvek, který přijímá vstup z klávesnice.
klávesnice
Pojem „klávesnice“ označuje konkrétní prvek nebo pravidlo používané při tématu této lekce; jeho význam se ověřuje na pracovním příkladu a podle výsledného výstupu.
aria-live
Atribut zpřístupnění, který oznamuje asistivním technologiím dynamické změny textu.
disabled
Stav ovládacího prvku, ve kterém jej uživatel nemůže aktivovat.
zpětná vazba
Pojem „zpětná vazba“ označuje konkrétní prvek nebo pravidlo používané při tématu této lekce; jeho význam se ověřuje na pracovním příkladu a podle výsledného výstupu.
03
ŘÍZENÁ PRÁCE
Postup krok za krokem
- 01
Otevři prostředí „HTML, CSS, JavaScript a testování klávesnicí“ a vytvoř si vlastní pracovní složku s číslem lekce. Původní podklady neměň; nejprve je zkopíruj do pracovní verze.
- 02
Přečti zadání a napiš si jednou větou očekávaný výsledek: Přístupný interaktivní prvek s chybovými stavy. Označ vstupy, omezení a nejméně tři kontrolní kritéria.
- 03
Rozbal startovní projekt a spusť jej přes lokální webový server, pokud lekce načítá JSON. Otevři vývojářskou konzoli a ověř, že neobsahuje neošetřenou chybu.
- 04
Doplň JavaScript po malých funkcích. Po každé změně otestuj běžný, hraniční a neplatný vstup, stav po obnovení stránky a ovládání klávesnicí podle zadání.
- 05
Proveď sebekontrolu podle kritérií: Všechny akce fungují bez myši; Fokus je viditelný a stavová zpráva oznamuje výsledek akce. Zaznamenej alespoň jeden test nebo porovnání.
- 06
Ulož zdrojovou i výslednou verzi pod jednoznačnými názvy. Odevzdej „Přístupný interaktivní prvek s chybovými stavy“ a krátce popiš, jak jsi ověřil/a správnost.
04
PRACOVNÍ PODKLADY
Stáhni si soubory, se kterými budeš pracovat
Náhled ukazuje pouze strukturu a typ výsledku. Hotové upravitelné řešení ve studentské části není.
Důležité: Podklady jsou vstupy k práci, nikoli kompletní řešení. Vlastní výsledek musí vzniknout podle zadání, testu a reflexe.
05
OTEVŘENÉ ODPOVĚDI
Pracovní list
1. Výchozí představaNapiš konkrétní příklad, ne pouze obecný dojem.
Co už o tématu „Přístupnost a zpětná vazba dynamického rozhraní“ víš a kde ses s ním setkal/a?
2. Práce s pojmyKe každému pojmu přidej situaci, ve které ovlivňuje rozhodnutí.
Vysvětli vlastními slovy alespoň tři pojmy: přístupnost, fokus, klávesnice, aria-live, disabled, zpětná vazba.
3. Rozhodovací situaceUveď kritérium, důkaz a možné omezení.
Jaké dvě možné varianty řešení připadají v úvahu a podle čeho mezi nimi rozhodneš? Téma: Přístupnost a zpětná vazba dynamického rozhraní.
4. Plán praktické prácePostup musí obsahovat vstup, konkrétní kroky, kontrolu a výstup.
Rozepiš vlastní postup k zadání: Opravit interaktivní rozhraní: použít správná tlačítka, viditelný fokus, textovou stavovou zprávu a blokování neplatné akce.
5. SebekontrolaFormuluj kontrolní otázky, které lze skutečně zodpovědět ano/ne nebo měřením.
Jak ověříš, že je výstup „Přístupný interaktivní prvek s chybovými stavy“ správný? Vycházej z kritérií: Všechny akce fungují bez myši, Fokus je viditelný a stavová zpráva oznamuje výsledek akce.
6. Exit ticketOdpověď má být konkrétní a vztahovat se k dnešní práci.
Napiš jeden princip, jednu provedenou kontrolu a jeden další krok.
06
PRAKTICKÁ PRÁCE
Přístupnost a zpětná vazba dynamického rozhraní
Opravit interaktivní rozhraní: použít správná tlačítka, viditelný fokus, textovou stavovou zprávu a blokování neplatné akce.
Očekávaný výstup
Přístupný interaktivní prvek s chybovými stavy
07
DŮKAZ O UČENÍ
Odevzdání praktického úkolu
Soubor a krátká odpověď
Přístupný interaktivní prvek s chybovými stavy
Odevzdej výstup „Přístupný interaktivní prvek s chybovými stavy“. Přilož zdrojové soubory nebo export a krátce popiš, jak jsi výsledek zkontroloval/a.
Zatím nebyl vybrán žádný soubor.
Offline verze ukládá pouze odpovědi a názvy vybraných souborů v prohlížeči; skutečný upload provede Studio po napojení API.
08
ZÁVĚREČNÁ KONTROLA
Test
09
REFLEXE
Co si z lekce odnášíš
Dokončeno neznamená pouze vytvořeno. Výsledek je dokončený tehdy, když je uložený, otevřitelný, otestovaný a vysvětlitelný podle kritérií. Zapiš jednu provedenou kontrolu, jednu opravu a jeden další krok.