Webbutveckling · område 5

Responsiv design och tillgänglighet

Samma sajt som i Projekt 2, nu för en telefon och för den som inte använder mus eller inte ser skärmen. Du bygger inte efter dina egna beslut den här gången, utan efter två listor: åtgärdslistan från en klasskamrats granskning i december och WCAG-fynden från din egen granskning i Gränssnittsdesign.

9 feb Inlämning: Projekt 4 – Responsiv och tillgänglig sajt Kl 23:59. Repolänk och Pages-adress i itslearning.
10 feb Prov 3 – responsivt och tillgänglighet Skriftligt, utan dator. Utgår från referensprojektet.

Börja här

Vad du ska kunna när området är slut

Göra en sajt som fungerar från 320 pixlar till desktop, med viewport-taggen och media queries
Välja brytpunkter utifrån innehållet, och bygga mobile first med min-width
Göra bilder flexibla och ge rätt bildstorlek till rätt skärm med srcset
Skriva alt-texter som fungerar där bilden står, och veta när alt="" är rätt
Skriva kod som bär tillgängligheten: label, rubrikstruktur, synlig fokus, kontrast och klickytor
Arbeta efter en åtgärdslista som någon annan skrivit, och dokumentera vad du gjorde
Testa i två webbläsare, på telefon och med tangentbord, och skriva ett testprotokoll
Hålla en kodstandard som gör stilmallen möjlig att ändra i juni

Lektionerna i området

Missade du ett pass? Sista kolumnen säger var innehållet står.

Datum	Vad vi gör	Missade du passet?
13 jan	Introduktion till responsiv design	Guide, avsnitt 1
19 jan	Media queries	Guide, avsnitt 2
20 jan	Flexibla och tillgängliga bilder och media	Guide, avsnitt 3
26 jan	Riktlinjer för god praxis	Guide, avsnitt 4
27 jan	Tillgänglighet i koden	Guide, avsnitt 5
2 feb	Testning på olika användaragenter	Guide, avsnitt 6
3 feb	Arbetspass	Projekt 4 – ska-kraven
9 feb	Arbetspass. Inlämning kl 23:59	Projekt 4 – innan du lämnar in
10 feb	Prov 3 – responsivt och tillgänglighet	Inför prov 3

Det viktigaste

Det som är åtgärdat den 4 februari är det som testas. Då gör du användartest på din sajt i Gränssnittsdesign, med riktiga personer. Ett fält utan label eller en knapp som inte nås med tangentbordet ska vara rättade före det, inte kvällen före inlämningen.

Granskning → åtgärder → test

Gränssnittsdesign och Webbutveckling arbetar med samma sajt i det här blocket. Gränssnittsdesign granskar sajten mot WCAG den 18 januari, du åtgärdar bristerna här, och den 4 februari testas resultatet. Vad ett kriterium betyder lär du dig där. Här handlar allt om koden som uppfyller det.

Prov 3 ligger dagen efter inlämningen

Provet utgår från områdets referensprojekt, fyrsajten från område 3 som nu är responsiv och tillgänglig. Det du gör i din egen sajt är det du skriver för hand på provet.