Kritéria, kontroly a packy
Kritérium je jedna věc, kterou má krok splnit. Má id (AC1), text pro lidi a právě jednu kontrolu check. Jak je do scénáře přidat: Přidat kritéria a packy. Jak se z výsledků stane verdikt: Jak vznikají verdikty.
Druhy kontrol #
type | Kdy ho použít | Volby |
|---|
deterministic | cokoli spočitatelného nebo přesného: přítomnost, počty, text, URL, styly, hodnoty ve stránce | assert a jeho volby (níže) |
semantic | úsudek: je text srozumitelný, je na stránce jedna hlavní akce | question (anglicky, ano = splněno), true a false (co se počítá za ano a za ne), scope (CSS selektor, který se pošle evaluátorovi), about: console (čte chyby v konzoli místo stránky), vision: true (ukáže i screenshot) |
manual | nehodí se ani jedno; rozhodne kontrolující na plachtě | note |
Čísla, data a počty patří do deterministických kontrol, nikdy do sémantické otázky. V jedné otázce se ptejte na jednu věc.
Deterministické kontroly (assert) #
Společné volby: selector (CSS), pattern (regulární výraz) s flags (i, m, s), value, min, max, all (vyhovět musí každá shoda, ne jen jedna).
Obsah stránky #
assert | Splněno, když |
|---|
exists | selector najde aspoň jeden prvek |
absent | selector nenajde nic |
count | počet shod je mezi min a max |
text_matches | viditelný text prvku odpovídá pattern |
text_absent | žádný viditelný text neodpovídá pattern |
text_equals | celý text se rovná value (mezery sloučené) |
attr_equals | atribut attr se rovná value |
attr_matches | atribut attr odpovídá pattern |
no_overflow | stránka se neposouvá do strany |
no_console_errors | v konzoli nejsou chyby |
assert | Splněno, když |
|---|
title_matches | titulek stránky odpovídá pattern |
meta_matches | content meta tagu ze selector odpovídá pattern |
link_matches | href odkazu ze selector odpovídá pattern |
url_matches | URL po kroku odpovídá pattern; part vybere href, path, query, hash, host nebo origin |
url_equals | URL se rovná value (cesta nebo celá URL); ignore_query vynechá ?… a #… |
http_status | stav dokumentu je mezi min a max (výchozí 200–299), nebo se rovná value |
link_home | stránka odkazuje zpět na úvodní stránku |
links_ok | každý odkaz na stejný původ odpoví pod 400 (max odkazů na stránku, pattern přeskočí cesty, follow mimo prostředí jen pro čtení) |
hreflang_pairs | aspoň min jazyků, každá verze odpoví 200 a odkazuje zpět |
Styly a hodnoty ve stránce #
assert | Splněno, když |
|---|
style_equals | spočítaná CSS vlastnost property se rovná value nebo design tokenu token; op porovnává čísla (>=), tolerance dovolí zaokrouhlení v px |
style_matches | spočítaná property odpovídá pattern |
js_equals | jeden JavaScriptový výraz expression, který jen čte, vrátí ve stránce value (nebo odpovídá pattern, nebo se porovná přes op) |
Přístupnost (používá je pack a11y) #
assert | Splněno, když |
|---|
a11y_images_alt | obrázky mají alternativní text |
a11y_names | odkazy a tlačítka mají přístupný název |
a11y_labels | formulářová pole mají popisky |
a11y_headings | úrovně nadpisů se nepřeskakují |
a11y_contrast | text splňuje kontrast WCAG AA |
a11y_main | stránka má landmark main |
a11y_unique_ids | id prvků jsou jedinečná |
a11y_focus_order | pořadí tabulátoru odpovídá stránce a dojde ke každému ovládacímu prvku |
a11y_focus_visible | fokus je vidět s kontrastem aspoň 3 : 1 |
a11y_keyboard_trap | tabulátor nikde neuvízne |
a11y_skip_link | odkaz pro přeskočení nebo hlavní obsah do tří zastavení tabulátoru |
a11y_ax_names | ovládací prvky mají název ve stromu přístupnosti prohlížeče |
a11y_landmarks | landmarky jsou úplné a opakované mají popisek |
a11y_aria | role a atributy ARIA jsou platné |
Výkon, aplikace a design #
assert | Splněno, když |
|---|
perf_lcp, perf_cls, perf_ttfb, perf_weight | vykreslení největšího obsahu, posun rozvržení, čas do prvního bajtu nebo váha stránky nepřekročí max |
app_labels | každý ovládací prvek aplikace má přístupný popisek |
app_touch_targets | dotykové plochy mají aspoň 48 dp (Android) nebo 44 pt (iOS) |
app_no_truncation | žádný text není useknutý trojtečkou |
app_no_crash | aplikace nespadla ani nepřestala odpovídat |
design_pixels | obrazovka se od reference designu liší nejvýš v podílu ratio pixelů (výchozí 0,03) |
design_structure | nadpisy, landmarky, akce a pole odpovídají referenci designu |
uses_tokens | barvy, písma, velikosti, mezery a zaoblení pocházejí ze sady tokenů |
Packy #
packs: [seo, a11y] u kroku přidá pevnou sadu kritérií. Vlastní kritérium se stejným id nahradí kritérium z packu; tak se mění limit (AC401 s max: 4000).
| Pack | Id | Co přidá |
|---|
seo | AC101–AC111 | jeden H1, titulek 10–70 a popis 50–160 znaků, canonical, hreflang pro každý jazyk, Open Graph, žádný noindex, meta viewport, html lang, žádné přetečení, žádné chyby v konzoli |
usability | AC201–AC204 | účel je jasný z první obrazovky, jedna hlavní akce, pole s popisky, texty odkazů, které říkají, co udělají |
a11y | AC301–AC314 | všechny kontroly přístupnosti výše; průchod navíc projde stránku tabulátorem, nic nekliká ani nepíše |
perf | AC401–AC404 | LCP do 2,5 s, CLS pod 0,1, TTFB do 800 ms, váha stránky do 3 MB (měřeno v prohlížeči průchodu) |
console | AC501 | evaluátor si přečte chyby v konzoli a řekne, jestli se týkají toho, co krok přijímá |
errors | AC601–AC606 | skutečný stav 4xx/5xx, odkaz na úvod, navigace nebo hledání, žádný výpis chyby ze serveru, srozumitelná zpráva s cestou dál, žádné chyby v konzoli |
app | AC701–AC705 | popisky, dotykové plochy, žádný useknutý text, žádný pád, jasný účel a další krok |
design | AC801–AC803 | implementace proti referenci designu: pixely, struktura, tokeny |
Pack a11y pokrývá část WCAG 2.2 AA. Audit se čtečkou obrazovky nenahradí.