Namų darbas

Namų darbas — alt, fokusas ir kontrastas

Namų darbas — priversk nuorodas, paveikslėlius ir spalvas įrodyti save.

Sąžiningas alt kiekvienam paveikslėliui. Perskaityk kiekvieną alt: ar jis sako, kas yra paveikslėlis, ar atkartoja failo vardą? Pataisyk visus, kurie aprašo failą. Jei kur nors pridedi vien dekoratyvinį paveikslėlį, duok jam alt="" — tuščią alt sąmoningai, kad ekrano skaitytuvas jį praleistų.
Tikri matmenys. Įsitikink, kad kiekvienas <img> turi width ir height, atitinkančius tikrą paveikslėlio dydį pikseliais (1024×664, 500×743, 640×480), ir loading="lazy". Jokio srcset — žinai kodėl.
Fokuso žiedas. Spragtelėk į puslapį, tada pereik jį Tab klavišu: kiekviena nuoroda ir mygtukas turi rodyti aiškų žiedą, ir žiedas turi sėdėti nuo valdiklio, ne ant jo krašto. Tada spragtelėk valdiklį pele — jokio žiedo. Jei žiedas blyksteli prie pelės paspaudimo, apiforminai :focus, ne :focus-visible.

Sulaužyk sąmoningai: perjunk į šviesią temą (naršyklės įrankiuose uždėk data-theme="light" ant <html>). Styles skydelyje surask --text-muted ir laikinai pakeisk jį į tamsiosios temos pilką, #8b93b0. Stebėk, kaip paveikslėlių datos išbąla, ir išmatuok kontrastą — jis nusėda apie 2.84:1, gerokai žemiau 4.5:1, kurio reikia kūno tekstui. Tada grąžink į #5c6480 ir stebėk, kaip jis atsigauna. Tas vienas eksperimentas ir yra visa priežastis, kodėl stiliaus failas laiko atskirą prigesintą pilką kiekvienai temai: spalva, kuri praeina tamsoje, gali nueiti perniek šviesoje.

Bandyk pats: pažvelk į įterptinę „Astronomy Picture of the Day" padėkos nuorodą. Ramybėje ji pažymėta vien spalva. Nuspręsk ir mokėk pasakyti kodėl: ar čia pakankamai įskaitoma, ar ją pabrauktum? Vieno teisingo atsakymo nėra — yra pagrindžiamas.

Privalomas rezultatas: kiekvienas paveikslėlis turi sąžiningą alt ir tikrus matmenis; kiekvienas valdiklis rodo tik klaviatūros fokuso žiedą, sėdintį nuo valdiklio; ir gali įvardyti išmatuotą šviesios temos kontrasto skaičių.

Atsiskaitymui: ekrano nuotrauka su šviesia tema, kur --text-muted nustatytas į #8b93b0 (datos išbalusios), šalia kontrasto rodmens, ir vienas sakinys apie tavo sprendimą dėl padėkos nuorodos.

Toliau. Tavo trys kortelės sustatytos vienu stulpeliu, kad ir koks platus ekranas. Tai paskutinis trūkstamas dalykas: išdėstymas. Kita pamoka — flexbox ir grid — paverčia tą stulpelį galerija, kuri išsilieja į tiek stulpelių, kiek ekranas talpina, ir grįžta į vieną telefone.