-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtilgjengelighet.html
81 lines (76 loc) · 4.32 KB
/
tilgjengelighet.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Eksamensgruppe 9999">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Gruppe 9999 Eksamen</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<header>
<nav>
<ul class="navbar">
<!-- Nettside Navigasjon -->
<li><a href="index.html">Velkommen</a></li>
<li><a href="refleksjon.html">Refleksjon</a></li>
<li><a href="tilgjengelighet.html">Tilgjengelighet</a></li>
<li><a href="diskusjon.html">Diskusjon</a></li>
<li><a href="moro.html">Moro!</a></li>
</ul>
</nav>
</header>
<main>
<!-- Hovedinnhold -->
<section>
<!-- Essay Tittel -->
<h1>Tilgjengelighet</h1>
</section>
<!-- Essay innhold -->
<section>
<h2></h2>
<p>Det første vi gjorde for å gjøre nettstedet vårt så tilgjengelig som mulig var å strukturere HTMLkoden vår
ved å bruke riktige semantiske HTML tags der det var mulig. Noen eksempler på dette er bruk av tags slik
som /main/ og /section/, samtidig som vi sørget for at overskriftene (h1, h2, etc) var riktig strukturert og
brukt i riktig sammenheng. Vi skrev også kommentarer i hele CSS-filen vår, og HTML-filene våre for at det
skulle være lettere for nestemann å lese igjennom og forstå hva vi hadde gjort. Alle bildene på nettstedet
vårt inkluderer titler og alternativ tekst, og vi har gitt klare titler til alle lenker som er inkludert på nettsiden. </p>
<img src="images/tilgjengelighet-1.png" class = "image" alt="Utklipp av Axe første test, flere feil." title="Axe første utklipp">
</section>
<section>
<h2></h2>
<p>Under prosessen med å lage nettstedet sjekket vi koden vår med en automatisert tilgjengelighetstest
kalt "Axe". En advarsel vi mottok var å sjekke fargekontrasten mellom titlene og bakgrunnen vår,
dette var enkelt å implementere og fikse. Vi holdt kontraster i tankene da vi designet resten av nettsidene.
Da vi var ferdige med nettstedet, sjekket vi det igjen med Axe tilgjengelighetstest. Denne gangen fikk vi en
"moderat" advarsel om at en vi hadde en HTML-innhold som ikke lå inne i en /container/.
Dette var "destinasjonsside" -delen av forsiden, et bannerbilde og litt tekst for å ønske folk velkommen til nettsiden.
Vi ser nå at dette ikke var den riktige måten å gjennomføre dette på. På grunn av måten vi har kodet nettsiden vår på,
kan vi imidlertid ikke enkelt flytte denne kodedelen til enten "header" eller "main". Dette er noe vi vil forbedre neste gang. </p>
<img src="images/tilgjengelighet-2.png" class = "image" alt= "Utklipp av Axe andre test, utbedret feilene." title="Axe andre utklipp">
</section>
<section>
<h2></h2>
<p>Etter å ha kjørt tilgjengelighetstesten Axe, kjørte vi HTML-koden vår gjennom en HTML-validator.
Forsiden på nettstedet vårt ga oss 10 feil, men 9 av disse var bare at den ikke kjente igjen norske karakterer(æ,ø,å).
Den tiende feilen var relatert til vårt forrige problem med bannerbildet og teksten nevnt tidligere.
Vi hadde brukt en "H1"-tag til å skrive "Velkommen", men vi hadde allerede brukt en "H1" -tag et annet sted på siden.
Vi fikset dette ved å endre teksten til en vanlig "p"-kode, og ga den en CSS-ID for å style den. </p>
<img src="images/tilgjengelighet-3.png" class = "image" alt="HTML validator test med noen feil og advarsler." title="HTML validator utklipp">
</section>
<section>
<h2></h2>
<p>
Vi kjørte deretter CSS-filen vår gjennom en CSS-validator. Denne prosessen ga oss 5 advarsler,
som alle var i stand til å bli forkastet. Den ga oss også to feil, vi hadde skrevet "tekst-align: flex-start"
og "flex-direction: center", hvor ingen av de er gyldige. De hadde tydeligvis ingen innvirkning på koden vår,
så vi fjernet ganske enkelt begge linjene.</p>
<img src="images/tilgjengelighet-4.png" class = "image" alt="CSS test som viste to feil i koden." title="CSS validator utklipp">
</section>
</main>
<footer>
<p>2021 - Gruppe 9999 </p>
</footer>
</body>
</html>