UU Flashcards
Noen viktige WCAG krav
Tekstlig alternativ Teksting av video Struktur Estetisk Tastatur Navigasjon Språk Instrukser
1.1… - tekstlig alternativ
1.1.1 A:
All ikke-tekstlig innhold har et tekstlig alternativ.
1.2 - teksting av video
1.2.2 A:
Video og audio som ikke er live har undertekst.
1.2.3 A:
Kort beskrivende tekst eller lydspor av video
1.3 - struktur
1.3.1 A
Ting er kodet som det ser ut
1.4 - Estetisk
1.4.2 A
Bruker kan stanse og starte lyd som begynner automatisk
1.4.1 A
Farge skal ikke være eneste ting som gir intrukser/mening
1.4.3 A
Kontrast mellom tekst og bakgrunn er 4,5:1
1.4.5 AA
Bruk tekst i stedet for bilder av tekst
2.1 - Tastatur
2.1.1 A
All funksjonalitet skal kunne brukes ved hjelp av tastatur
2.3.1 A - Frekvense av fargeendring
Innhold skal ikke blinke mer enn tre ganger pr sekund
2.4 oppsett for bruker
2.4.1 A
Bruker kan hoppe til hovedinnhold
2.4.2 A
Nyttige og tydlige sidetitler
2.4.3 A
Innhold er i logisk rekkefølge
2.4.5 A
Bruker har flere måter å navigere på
3.1 - språk
3.1.1 A
Språket på siden er angitt i koden
3.3 - intrukser
3.3.1 A
Feil som oppdages sutomatisk må det vises hvor feilen er og beskrive feilen
3.3.4 AA
Feil som medfører juridiske forpliktelse må man kunne angre på. Eks innsending av inndata
Hva er regelen fra 2014?
Hva handler den om?
Hva er WCAG
Hva er WAD
Forskrift om universiell utforming av IKT-køsninger
WCAG
WAD
Husk:
Forskrift om universiell utforming av IKT-løsninger
krever at nettsider møter WCAG 2.0 på nivå A og AA
Web content accessability guidlines
WAD - Web accessibility directive/EUs webdirektiv
Tilgjengelighetserklæringen
Forskrift om universiell utforming av IKT-køsninger.
Formålet er å sikre UU av informasjons- og kommunikasjonsteknologiske løsninger.
Krever at nettløsninger skal utformes i samsvar med WCSG 2.0, på nivå A og AA.
Kravene som må møtes finner man på uutilsynet.no
Hva er WCAG?
Web content accessibility guidlines.
Retningslinjer for tilgjengelighet på nettsider.
Retningslinjer for hvordan brukergrensesnitt skal utformes slik at den er tilgjengelig for alle, uavhengig av funksjonsevne.
Hva er WAD?
Web accessibility directive
EUs webdirektiv
Er EUs webdirektiv for UU av offentlige nettsteder og mobilapplikasjoner.
Gjelder for Norsk lov.
Stiller i stor grad de samme kravene, men har noen tillegg. Dette er:
Tilgjengelighetserklæring:
En erklæring som sier at nettsted er universielt utformet.
Forskrift om universiell utforming av IKT-køsninger.
Formålet er å sikre UU av informasjons- og kommunikasjonsteknologiske løsninger.
Krever at nettløsninger skal utformes i samsvar med WCSG 2.0, på nivå A og AA.
Kravene som må møtes finner man på uutilsynet.no
Hva er WCAG?
Web content accessibility guidlines.
Retningslinjer for tilgjengelighet på nettsider.
Retningslinjer for hvordan brukergrensesnitt skal utformes slik at den er tilgjengelig for alle, uavhengig av funksjonsevne.
Hvordan sikre at man er innenfor UU målene
Hvordan sikre at man er innenfor A nivåene
Se på listen over WCAG krav.
Generelt:
Hvis man har god struktur og intuitiv navigasjon og oppsett av side, så møter man som regel A krav.
Hvis man har tatt ekstra steg for p slrge at forskjellige elementer kommer tydelig fram, med for eksempel god kontrast mellom farger, god forskjeller i tekststørrelser, sp npr man som regel AA.
Hvis man gjør ekstra steg for å sørge for at siden er så tilgjengelig så mulig for absolutt alle, ved for eksempel sterk fargekontraster, tegnespråk på videoer for blinde, så møter man som regel AAA.
Sammenheng mellom SEO og UU:
Hvordan SEO og UU er relatert
1. Tekslig alternativ (eks alt tekst, forklaring av video) Teksting av video/audio Oppføring av språk som brukes Strukturen er som siden ser ut. Strukturen er enkel og effektiv
Hva forutsetter UU?
Lik tilgang (tilgjengelighet) hvis mulig. Likeverdig tilgang hvis lik tilgsng ikke er mulig.
Hva betyr responsivitet?
Hvordan burde man tenke over gva internett fsktisk er?
Tilpasningsdyktighet i forhold til ulike skjermstørrelser
En informadjonskanal
UU midler
SEO midler
Microdata midler
UU: uutilsynet.no wave.webaim.org difi.no wc3
SEO
google console
Google trends
AnswerThePublic - forslag til nyttige søkefraser
Word Tracker Scout - se hvilke fraser og ord sidet bruker
WordStream keywords - forslag til søkeord og fraser
Microdata schema.org schema validator W3 RDFa validator Duvlin core metadata initiativ
Microdata syntax
Meadata syntax
Micro:
I parent har man “itemscope” og itemtype=x
Så i child har man itemprop=xa
Meta: name - typen metadata som brukes content - verdien til metadataen eks på name typer: description keywords author veiwport
Ting som er viktig å våte ved oppsett av kode
Ting som img og nav kan være i header, det trenger ikke bare å være noe som h1.
Man burde fokusere på å bruke bare img alene, istedenfor å putte det inn i en figure-tag
lang puttes inn i html taggen
…
<blockquote> brukes for lange quotes
brukes for kortere quotes
Man kan putte lang i taggen hvis quotet er på et visst språk
</blockquote>
Sette opp input for søking
from action=”” method=”get”
label for=”s” id=”s” class=”screen-reader-only”
input name°”s” type=”sesrch”
form
Hva gjør det forskjellige stteibuttene?
action: Hvilken side man skal gå til ved bruk av input
method: Hvordan verdien i feltet dkal brukes
For: for hvilket input labelet er for
ops - for må ha samme verdi som name
type: hva slag input type det er
name: Brukes for å vite hvilket element det er snakk om
Hvm har ansvaret for vedlikehold av webstandarder?
W3C
World wide web consortium
Hvilke deler består en URL av?
Unified Resoursce Locator
Domene
Subdomene
Path
Filnavn
Hva er WAI-ARIA
Hvordan brukes det?
Det er attrubutes som kan brukes for å gi siden mer mening slik at nettleser kan enklere lese siden.
Man brukes det for det meste med eks role=element
som frks role=navigation
Men det burde bare brukes når nødvendig.
Eks det er ikke nødvendig med wai-aria for navigasjon, fordi man kan istede bruke nav
Hva er W3C
Hvordan er WCAG relatert til det?
Hva var WCAG igjen?
W3C står for standarder p protokoller på nett
WCAG er relatert ved at det er utviklet igjennom W3C
Et sett med standarder
Symboler:
©
<
>
©: ©
: >
Hva er DNS til?
Domain Name System
Man bruker dette til å koble til IP’er
mobil skal til nett side -> DNS server -> DNS server som henter IP,
så sendes IP-adressen ned kjettingen igjen
Hva er DNSSEC?
Sikkerhetsmekanisme som skal forhindre at man kommer til feil nettside.
Passer på at man kommer på riktig side, men ikke at det man leter etter ikke blir funnet
Domain name system security extension
Hva er er en webserver
Maskinvare som kan settes opp hjemme, eller i en maskinpartk, eller feks rasperrypie.
Den oppgave er å kjøre en nettside
Hva er en IP adresse?
Hva er de to versjonene?
Hvorfor blir den ene mer populær?
En unik adresse som tildeles domener
To versjoner IP-adresser
IPv-4 og IPv6
IPv4 - 32bit adresse, mange er reservert for spesielt for spesielt bruk
IP-adressen til pc’en din kobler seg på en ruter, som så bruker sin egen ip-adresse for å koble til nett
IPv6
det begynner å bli tomt for IP adresser
Derfor er det moticasjon for IPv6, fordi det har flere bits
Hva er TCP/IP
TransmissionControlProtocol/IP - TCP/IP
TCP - protokoll for pålitelig overføring av data - gjør at man kan sende meldinger over et nettverk
IP - protokoll for adressing og ruting av data
Hva er en TLD?
Noen tld
Top level domain
Generic og geographic
generic - hva slags nettsted det er, noen av dem er sponset og derfor bare tilgjengelig for noen
genericTLD(sponset)
mil edu museum
genericTLD(tilgjengelig for alle
.edu .gov .travel .eu
sub TLD’er
priv.uk
geographic:
Hvor i verden nettsiden hører til
eks .no
Hva gjør en webserver?
Lagre -
prossesere -
levere -
webbsider
Når man går på en side, sender man en forespørsel til en webserver,
som så levererer webserveren
Hvordan forbedre crawling på egen side
Verifiser at google når siden din:
type din url i movile friendly test
Om man oppdaterer en side eller en side på nettsiden, kan man opplaste det som url til google, for å fortelle om flere sider pp nettside, bruk sitemap
om man forteller at ceawler bare skal gå igjennim en side, så vurde det være hjemmesiden, siden man der linker til andre steder på side
få andre sider til å linke til din side
Hvordan lage en nettside?
Dette trenger du:
Domenenavn
- Skal man registrere skrivefeil
- Hvilket toppdomener skal man registrere - man burde velge utifra formål og publikum
Hvoran skaffe toppdomene?
- Man kan kjøpe det fra forskjellige steder. eks godaddo, domeneshop etc
Hvor skal den plasseres? Den kan plasseres på: Webhotell, feks domene.shop Egen server Leie virtuell server, feks memset.com
DynamicDNS
Trenger man normalt dette? - nei
det brukes for å vidrekoble domene til ressurs som ligger bak gateway med dynamisk tolnermet IP-adresse
Viktige begreper i SEO
Viktige begreper
Landingpage - Den siden som først vises, ikke nødvendigvis forsiden
exitpage - hvor på siden bruker var når bruker forlot side
bounce - at bruker går ut fort fra siden, betyr ednten at bruker med en gang fant det den ville, eller ikke gjorde det, man vil ha bruekre til å bli lenge på side
Site autority - HVor viktig side er (i henhold til søkemotor)
Hva er et domene bygget opp av?
Protokoll - http/https
Domenenavn
Filsti
Juksetriks i SEO
Linke til og bli linket til av masse sider
Gjemme linker og tekst med CSS
Autogenerert tekst
Hva gjør:
flex auto
flex 1
flex 0 1
auto:
Det samme som flex 1 1
Gjør at boks tar opp alt gjenværende rom
flex: 1 0
boks tar opp 1/elementer del av det ledige rommet
flex: 0 1
boks tar opp gjenværende rom, men minimeres til det spwsifisert (eks i basis)
screen reader only
clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
Hva hardware kan brukes for å sette opp webserver?
Hva skal hardwaren gjøre?
Hva gjør en webserver?
Hvordan lage en nettside?
Egen maskin
maskin-park
rasperry py
Lagre, prossersere en webside ved forespørsel
URL skrives -> kobker til webserver -> Det sendes forespørsel til en server -> forespørsel svares
Man trenger et domene, så må man ha en sted der man kan ha siden. Man kan feks leie en server, lage sin egen server, eller putte den på et webhotell
Hva består en URL av?
Protokoll:
Hvordan side skal motta og sende data
Subdomene:
Angir tjenester eller oppdelinger av domenet
Domene:
Navn til side
Filsti
Angir filstien til innholdet man ønsker
Hva er TLD
Top Level Domain
Generic (sponsored)
Sier hva dlags nettsted det er.
edu, gov, travel
Generic (Tilgjengelig for alle)
info, com, net
Geographic
no, sv, dk, de, fr, uk
Hva er en IP-adresse.
Hva er de to forskjellige versjonene
En unik indikator eller adresse som tildeles en enhet (eks pc, mobil)
IPv-4
34-bit adresse
IPv-6
128-bit adresse
Hva er DNSSEC?
Domain name system security extension
Skal gorhindre at man kommer til feil nettsted
Hva er TCP
Trabsmission controll protocoll
Står for poletelig overføring av data
IP: står for adressering og ruting av data
Hvirdn lage egen aide?
- finn domene
- velg tld
Kan finnes på domeneshop, godaddy
- Så må den plasseres et sted. Noen alternativer:
Webhotell, eks domene.shop
Egen server hjemme, dynamisk/fast IP
Leie virituell server, eks memset
Hva er en nettleser?
Noe som skal tolke og presentere sider
Nye ting i HTML5
Semantiske tagger
video ig audio tagger
2D og 3D grafikk
Hva er CMS?
Fordeler ig ulemper med CMS
Eksempler på CMSer
Content managment system/publiseringssystem
Informasjonssystem for lagring, håndtering, og organisering av innhold.
Fordeler Slipper srbeid med tanke på tema Slipper arbeid med tanke på plugin Kan lett fordele arbeid Stort samfunn, mye hjelp mye backend er tatt hånd om
Ulemper
Statisk, avhengig av plugins og temaer
Bloat, ikke sikkert man trenger all funksjonalitet
Kan ikke være like kreativ
Kan trenge mye teknisk hjelp ved store endringer
Wordpress
Joomla
shopify
Faktorer i SEO
Personlig omdømme arkitektur (oversiktlig nav, lett å finne fram) responsivitet UU HTML (alt tekst, semantiske tagger, title, drop nav) Mikrodata metadata
Ting aom kan brukes til å forbedre Uu
En type høytleser
w3c kodevalidator
Google DevTools
webaim.org/resources/contrastchecker
- Elementer tar opp alt rom,
og kan minskes - Elementer tar opp alt rom,
og kan ikke minskes - Elementer tar opp alt rom,
men kan bare minske en viss del - Elementer tar opp en viss mendge rom,
og kan minskes - Elementer tar opp en viss mendge rom,
og kan ikke minskes - Element fyller så mye rom den normalt ville,
men i tillegg kan den minskes - element fyller så mye rom den normalt gjør,
men den kan heller ikke minskes.
- flex: 1 1/ flex: auto
- Tror ikke det går an
- flex: 1 0 [width]
- flex: auto [width]
- flex: 0 0 [width]/ flex: none [width]
- flex: 0 1
- flex: none;
Hvordan reaponsivitet er relatert til UU og SEO
Verktøy som kan brukes for å skjekke responsivitet
UU
Tekst kan bli endret til 200% størrelse uten tap av innhold eller funksjon
Ting er i logisk rekkefølge
SEO
Hvis man kan bruke side på flere skjermeneheter gir det pluss i SEO, i tillegg til at man får mer trafikk
Verktøy:
Undersøk tool i browser
Noen psuedoelementer
link:
:hover
active
visited
input:
checked
enabled
disabled
fist-child last-child only-child \:nth-child(n) \:not
:before
:after
-content
Vertkøy til UU
Tastatur wave evaluation tool wave HTML validator wave color checker microsoft narrator
Hva er FTP
Fire eksempler på FTP
File transport protocol
Filoverførings standard som er operativuavhengig protokoll for overføring av filer til et TCP/IP basert nettverk
Eksempler: Filezilla HTTP Telnet Mamp
La oss si man skal bruke flere fonter, av sans serif.
Hvordan gjør man det?
font-family: ‘Gill Sans’, ‘Gill Sans MT’, sans-serif;
Selector typer
Grunnleggende:
main
Sammensatt
main, header, footer
Relasjon
main, nav, ul, li
Hvirdan lage en animation?
Hvorfan ha den ha forskjellige steg?
Du putter “animation” der animasjonen skal skje.
Hvis du skal skje under en forutsetning som hover, må du putte det under hover. så eks
den-som-har-animasjon: hover anim-div {
animation: properties
}
Man må bruke animation, så gi wt navn til en animasjon ved å putte et tilfeldig navn inn i animation.
Så utenfor laget man:
@keyframes [navn] {
0p {...}
50p {...}
100p {...}
}
tallene sier hvordan animasjon skal se ut innen tidspunktet.
Hvordan bruke transsision?
font-size: 14px; transition-property: font-size; transition-duration: 4s; transition-delay: 2s; }
#delay:hover {
font-size: 36px;
}
Hvordan enkelt håndtere font størrelse responsivt?
html {font-size: calc(1em + 1vw)}
h1 {font-size: 3rem}
h2 {font-size: 2,2rem}
h3 {font-size: 1,8rem}
h4 {font-size: 1,2rem}
p {font-size: 1rem}Hvirdan bruke video og audio
Hvordan bruke det med fallback
Hvordan ha thumbnail
Hvordan gjøre det så bilder blir skiftet ut etter skjermstørrelse?
Option 1:
<img></img>
<img>
CMS og dets funksjonalitet
CMS - Gir et brukergrensesnitt for å redigere innhold på og funksjonalitet på nettside.
Funksjonalitet:
redigering
forhåndsvisning
Utvidbar funksjonalitet - plugins: eks arkiv over bloggposter, kalender (for både admin og brukere)
templates - med noen av disse kan man også bruke layouts
versons managment
brukerkontroll - redigerere har forskjellige rettigheter til sidene - kan se hva andre brukere gjør
automatiske oppdatreinger - lurt med oppdatering med tanke på sikkerhet
søk - kan eks søke etter innhold, kategorier, bilder
osv…
Hvirfor er det viktig å oppdatere CMS?
CMS er store mål når det kommer til angrep
Så man trenger oppdateringer fordi:
Det kan komme nye svakheter til CMSen
Det kan komme nye angrep
generelle oppdateringer - eks kanskje det blir lagt til nye funksjonaliteter
UU og CMS
UU i CMS Enge plugins Støttet i themes Støttet i selve systemet enkelt å implementere med plugins
Alternativer til CMS
Alternativer til CMS
Manuell oppdatinerger av nettsider med HTML og css
CMF (Content managment frameworkd) som benytter seg av gjenbrukbare komponenter eller custom løsninger for å administrere nettside innhold
Fordeler og ilemper med koding istedenfor CMS?
Fordeler og ulemper med koding Enkelt gjøre alle sider som man vil lite overhead (trenger ikke å avhenge av plugins, themes for å få ting som man vil) Kraftig Slipper å sloss med cms
Ulemper
tungvindt
gir ikke mulighet for flere brukere (ish)
statisk - man kan ikke lett nedlaste themes og plugins
må gjøre alt selv
mye jobb
sikkerhet
Eordpress plugins for: SEO UU DESIGN UTVIKLING WEBDIREKTØR
SEO Yoast -genererer meta og title tagger -genererer sitemap -integrert schema i systemet
UU
wp accessibility
-evne til å skippe linker
-plasserer utlinje der man fokuserer
DESIGN
elementor
-drag and drop
UTVIKLING
LiveChat
-gir mulighet til bruker til p live chatte på side for hjelp
-har ai chatbot også man kan bruke
WPML
-Gjør så mange kan lage en side for mange forskjellige språk
WEBDIREKTØR Monsterinsights -integrert google analytics -se hvor brukere er fra -se info om besøk til sider -resultater fra kampansje
Skip navigation
Navigasjonen kan vøre irriterende for de som bruker oppleser.
Da er det bra å gi mulighet til brukeren å kunne skippe nav linkene, for å komme rett til hovedinnholdet.
En slik link burde være spesifikt laget for de som bruker opplesere, og kan komme til syne ved at personen bruker oppleser.
For en som ikke bruker oppleser, kan en slik link være distraherende.
For å gjøre dette kan man gjøre så:
- link bare blir synelig når man bruker tab
- er viduelt gjemt på starten av siden, eks med display:hidden eller width/height: 0px.
Linken burde videre:
være på toppen av siden
forbli synelig i en viss lengde etter bruker har vært på linken, slik at de ikke gås forbi hvis bruker tabber raskt.
Hvordan lage onklig nav
properties ting skal ha:
nav ul - margin: 0, padding: 0, overflow, hidden
nav li - float: left, margin-left: 20px
nav li:first-child - margin-left: 0px
Fremtiden av UU
Det kommer nye krav fra WAD:
12 nye krav fra WCAG 2.1
Tilgjengelighetserklæring
De nye kravene gjelder for det meste bruk av mobil.
Noen av de viktigste kravene er:
Bruker må få velge om innhold skal vises liggende eller stående.
Innhold skal kunne endres til 400 prosent størrelse ved 1280px bredde, uten tap og funksjonalitet.
Kontrast for ikke tekstlig innhold.
Tekstavstand skal kunne overstyres.
Pekerfølsomt innhold eller innhold ved tastaturfokus
Bruker skal kunne slå av hurtigtsster som består av ett tegn
Pekerbevegelse, innhold skal kunne brukes med pekerinput
Pekeravbrytelse, uhelig input med mus eller berøring skal kunne forhindres
Responsivitet og uu
uu krav med responsivitet
hvirdan skjekke responsivitet
A responsive design creates a uniform standard that satisfies the mainstream needs of its users, whereas accessibility goes deeper and ensures a much-needed layer of functionality for users using assistive technology such as screen readers.
Tekst skal kunne forstørres 200p uten tap av innhold eller funksjonalitet
Pass på st:
innhold og funksjonalitet kan benyttes,
man kan fortsatt godt navigere siden med tastatur når sides skjermstørrelse forandres
For å teste at forstørring fungerer på en god måte, kan du gjøre følgende:
Sett nettleseren i fullskjerm på den største skjermen du har tilgang til, deretter bruk nettleserens zoomfunksjon (Ctrl og +/- eller Cmd og +/-) stegvis til minst 200 prosent, gjerne opp til 400 prosent.
Sjekk at alt innhold og funksjonalitet er tilgjengelig og forståelig.Sett forstørringen til 100 prosent, og endre vindusbredden på din nettleser gradvis fra fullskjerm og ned til det smaleste du får til.
Se om rekkefølge, gruppering og generell layout fungerer godt i hele spekteret.På mobil eller nettbrett, sjekk at du kan forstørre også på sider med responsivt oppsett.
Hvordan sette oop master grid
master-grid {
height: 200vh;
gap: 10px;
display: grid;
grid-template-columns: repeat(3, 1fr)
grid-template-rows: 2fr 1fr 4fr 1 fr
grid-template-areas: “header header header”
“nav nav nav”
“main main aside”
“footer footer footer”
header {grid-area: header}
nav {grid-area: nav}
main {grid-area: main}
aside {grid-area: aside}
footer {grid-area: footer}
}
psuedo classes og psuedo elements
Dynamic pseudo-classes \:link \:visited \:hover \:active \:focus UI element states pseudo-classes \:enabled \:disabled \:checked Structural pseudo-classes \:first-child \:nth-child(n) \:nth-last-child(n) \:nth-of-type(n) \:nth-last-of-type(n) \:last-child \:first-of-type \:last-of-type \:only-child \:only-of-type \:root \:empty Other pseudo-classes \:not(x) \:target \:lang(language)
psuedo elements: \::before \::after \::first-letter \::first-line
Når man bruker flex wrap, kommer det masse mellomrom mellom elementene vertikalt.
Hvordan fikse dette?
align-content: flex start
flex aetikkler på mobol og pc
pc:
flex: 1
mobil
flex: auto; width: 100%
Scss
@extend
@mixin {
…
}
@include flex
@mixin flex ($row: false) {
@if {}
@else if
@ else
}
Funksjoner
@function navn på funksjon {
@return map-get($farger, [argument]
}
flex
Hvordan ha:
- når man minsker skjerm, skal det går fra tre til en columns. Det skal aldri ha 2 columns
Hvordan ha: med flex, er det delt opp i: tre colums på skjerm width 800px to columns pp skjerm mellom 640px og 800px 1 column på mindre enn 640
1.
mobil:
display flex, flex-wrap, gap: 1rem, justify-content: space-between
elementer inn i: flex: auto, width: 100p
pc
elementer inn i: flex: 1 1, min-width: 30p
2.
mobil:
disolay: flex, flex-wrap: wrap, gap: 1rem, justify-content: space-between
ting i element: flex: auto, width: 100p
mellom-stor-skjerm
elementer i ting: flex: 1 1 min-width: 30p
stor-skjerm
elementer i ting: flex: 1 1, min-width: 45p
Hvordan se om en liste inneholder alle verdier i en annen liste?
eks
list1 = [“x”, “y”, “z”]
list2 = [“x”, “z”]
if all (elem in list1 for elem in list2):
print("liste 1 inneholder alle elementene til liste2")
