sidski/helseveileder
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

♿ improve accessibility from Lighthouse reports

Browse source 
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
Sindre Kjelsrud 2024-04-25 21:46:20 +02:00
parent e29d68e1ba
commit d362cf7995
Signed by: sidski
GPG key ID: D2BBDF3EDE6BA9A6
4 changed files with 15 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app.html
View file

@ -3,7 +3,9 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name=description content="AI i medisin">
<link rel="stylesheet" href="./app.css" />
<title>Helseveileder</title>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">

18
frontend/src/components/form/footer/Footer.svelte
View file

@ -53,33 +53,37 @@
<div class="flex flex-col gap-8 justify-around items-center pb-6 md:mb-5">
<div class="flex gap-8">
<button disabled={questionNum == 0} class={`flex items-center gap-2 text-primary font-semibold ${questionNum == 0 && "opacity-50"}`} on:click={() => gotoPrevPage(questionNum)}>
<button disabled={questionNum == 0} class={`flex items-center gap-2 text-primary font-semibold ${questionNum == 0 && "opacity-50"}`} on:click={() => gotoPrevPage(questionNum)} aria-label="Forrige spørsmål">
<ArrowChevron width=16 direction="left"/>
Forrige spørsmål
</button>
<button disabled={questionNum == 0 || questionNum % 4 != 0} on:click={handleFormSubmit}
class={`${(questionNum == 0 || questionNum % 4 != 0) || (questionNum % 4 == 0 && !answeredAll) ? "hidden" : "bg-primary text-bg hover:bg-bg hover:text-primary"} font-bold uppercase border-primary border-2 rounded-full px-2 md:px-8 py-3`}>
class={`${(questionNum == 0 || questionNum % 4 != 0) || (questionNum % 4 == 0 && !answeredAll) ? "hidden" : "bg-primary text-bg hover:bg-bg hover:text-primary"} font-bold uppercase border-primary border-2 rounded-full px-2 md:px-8 py-3`}
aria-label="Send inn svar">
Send inn svar
</button>
<button disabled={(questionNum != 0 && questionNum % 4 == 0) || !answeredAll} class={`flex items-center gap-2 text-primary font-semibold ${(questionNum != 0 && questionNum % 4 == 0) || !answeredAll && "opacity-50"} ${questionNum != 0 && questionNum % 4 == 0 && "opacity-50"} ${questionNum % 4 == 0 && questionNum != 0 && answeredAll && "hidden"}`} on:click={() => gotoNextPage(questionNum)}>
<button disabled={(questionNum != 0 && questionNum % 4 == 0) || !answeredAll} class={`flex items-center gap-2 text-primary font-semibold ${(questionNum != 0 && questionNum % 4 == 0) || !answeredAll && "opacity-50"} ${questionNum != 0 && questionNum % 4 == 0 && "opacity-50"} ${questionNum % 4 == 0 && questionNum != 0 && answeredAll && "hidden"}`} on:click={() => gotoNextPage(questionNum)}
aria-label="Neste spørsmål">
Neste spørsmål
<ArrowChevron width=16 direction="right"/>
</button>
</div>
<div class="flex gap-8 items-center">
<button on:click={() => skipQuestion(questionNum)} class="border-2 border-primary text-primary rounded-3xl hover:bg-primary hover:text-bg px-3 py-2">
<button on:click={() => skipQuestion(questionNum)} class="border-2 border-primary text-primary rounded-3xl hover:bg-primary hover:text-bg px-3 py-2"
aria-label="Ønsker ikke å vurdere dette spørsmålet">
Ønsker ikke vurdere dette spørsmålet
</button>
{#if wantsToSubmit}
<div class="flex flex-col gap-2">
<p class="text-primary font-semibold text-center">Er du sikker på at du vil avslutte undersøkelsen?</p>
<div class="flex flex-grow justify-center gap-4">
<button on:click={handleFormSubmit} class={`border-2 border-primary bg-primary text-bg rounded-full hover:bg-bg hover:text-primary px-7 py-2`}>Ja</button>
<button on:click={() => wantsToSubmit = false} class={`border-2 border-primary bg-primary text-bg rounded-full hover:bg-bg hover:text-primary px-7 py-2`}>Nei</button>
<button on:click={handleFormSubmit} class={`border-2 border-primary bg-primary text-bg rounded-full hover:bg-bg hover:text-primary px-7 py-2`} aria-label="Ja">Ja</button>
<button on:click={() => wantsToSubmit = false} class={`border-2 border-primary bg-primary text-bg rounded-full hover:bg-bg hover:text-primary px-7 py-2`} aria-label="Nei">Nei</button>
</div>
</div>
{:else}
<button on:click={() => wantsToSubmit = true} class={`border-2 border-primary bg-primary text-bg rounded-3xl px-3 py-2 ${questionNum % 4 == 0 && questionNum != 0 && answeredAll && "hidden"}`}>
<button on:click={() => wantsToSubmit = true} class={`border-2 border-primary bg-primary text-bg rounded-3xl px-3 py-2 ${questionNum % 4 == 0 && questionNum != 0 && answeredAll && "hidden"}`}
aria-label="Avslutt undersøkelsen og send inn svar">
Avslutt undersøkelsen og send inn svar
</button>
{/if}

2
frontend/src/routes/+page.svelte
View file

@ -8,8 +8,8 @@
<p>Hvordan responderer ChatGPT på kliniske spørsmål sammenlignet med leger?</p>
<p>Vi skriver hovedoppgave om kunstig intelligens (AI) i medisin, og ønsker å forstå hvordan AI kan fungere som en co-pilot for leger og pasienter</p>
<p>Spørsmålene og legesvarene er hentet fra den anonyme nettsiden <a href="https://studenterspør.no" class="text-primary font-bold">Studenter Spør</a>, og er innenfor et spekter av medisinske kategorier. Det er mulig å gå videre til neste spørsmål hvis det er et spørsmål du ikke ønsker å besvare.</p>
<p>I denne undersøkelsen vil vi at du skal vurdere empati, kunnskap og hjelpsomhet i ulike svar på kliniske spørsmål. Undersøkelsen er helt anonym. </p>
<ul>
<p class="mb-4">I denne undersøkelsen vil vi at du skal vurdere empati, kunnskap og hjelpsomhet i ulike svar på kliniske spørsmål. Undersøkelsen er helt anonym. </p>
<li><strong>Empati:</strong> Evnen til å oppdage og erkjenne andres følelser og tanker.</li>
<li><strong>Kunnskap:</strong> Nøyaktighet og relevans av den medisinske informasjonen gitt.</li>
<li><strong>Hjelpsomhet:</strong> Evnen til å gi nyttig og praktisk råd eller støtte.</li>

2
frontend/src/routes/userform/+page.svelte
View file

@ -30,7 +30,7 @@
</script>
<div class="flex flex-col md:justify-center gap-6 md:gap-0 h-full md:h-screen">
<a class="md:ml-32 mt-5" href="/">
<a class="md:ml-32 mt-5" href="/" aria-label="Gå tilbake til forsiden">
<ArrowBack width="2rem" />
</a>
<div class="flex flex-col md:flex-row h-full md:h-4/5 gap-6">