Fix accessibility violations on the live site

.github/workflows/build_preview.yaml

@@ -67,6 +67,28 @@ jobs:
             --alias ${{github.event.number}}
         shell: sh
 
+      - name: Accessibility audit
+        id: a11y
+        if: github.event_name == 'pull_request'
+        run: |
+          url=https://${{github.event.number}}--capro-uio.netlify.app
+          # the alias is not always live the instant `netlify deploy` returns
+          for i in $(seq 1 20); do
+            code=$(curl -s -o /dev/null -w '%{http_code}' "$url/") || code=000
+            [ "$code" = "200" ] && break
+            echo "waiting for $url ($code)"; sleep 5
+          done
+          npm ci --prefix scripts/a11y
+          BASE=https://${{github.event.number}}--capro-uio.netlify.app \
+            node scripts/a11y/run.mjs --report "$GITHUB_WORKSPACE/a11y-report.md"
+
+      - name: Comment PR – accessibility
+        if: always() && github.event_name == 'pull_request' && hashFiles('a11y-report.md') != ''
+        uses: thollander/actions-comment-pull-request@v3
+        with:
+          comment-tag: a11y
+          file-path: a11y-report.md
+
       - name: Comment PR – success
         if: success() && github.event_name == 'pull_request'
         uses: thollander/actions-comment-pull-request@v3
@@ -77,9 +99,20 @@ jobs:
             Please check it looks ok before merging.
 
       - name: Comment PR – failure
-        if: failure() && github.event_name == 'pull_request'
+        if: failure() && steps.a11y.outcome != 'failure' && github.event_name == 'pull_request'
         uses: thollander/actions-comment-pull-request@v3
         with:
           comment-tag: preview
           message: |
             :x: Preview build failed. [View logs](${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }})
+
+      # The audit failing means the preview deployed fine but has a11y issues;
+      # the report is posted separately, so just keep the preview link honest.
+      - name: Comment PR – deployed but audit failed
+        if: always() && steps.a11y.outcome == 'failure' && github.event_name == 'pull_request'
+        uses: thollander/actions-comment-pull-request@v3
+        with:
+          comment-tag: preview
+          message: |
+            :white_check_mark: Preview deployed at https://${{github.event.number}}--capro-uio.netlify.app
+            :warning: The accessibility audit found issues — see the report below.

config/_default/hugo.yaml

@@ -5,3 +5,9 @@ pagination.pagerSize: "6"
 summaryLength: "15"
 enableGitInfo: true
 defaultContentLanguage: en
+
+# Monokai's comment colour is 3.03:1 on its own background, below AA for body
+# text. github-dark clears it at 6.15:1.
+markup:
+  highlight:
+    style: github-dark

content/funfacts/_index.en.md

@@ -11,4 +11,7 @@ item:
   - title : "Cups of Coffee"
     icon : "fa-solid fa-mug-hot"
     count : "250"
+build:
+  render: false
+  list: false
 ---

content/funfacts/_index.no.md

@@ -11,4 +11,7 @@ item:
   - title : "Kaffekopper"
     icon : "fa-solid fa-mug-hot"
     count : "250"
+build:
+  render: false
+  list: false
 ---

content/news/2025/03-nettskjemar/index.en.md

@@ -23,9 +23,9 @@ The package has extensive documentation [online](/nettskjemar), and we recommend
 This package is designed to help you effortlessly retrieve, process, and analyze survey data, all while being tidyverse-compatible. 
 Below, we highlight some of the key features of `nettskjemar` and why it might become your go-to tool for working with Nettskjema.
 
-### Key Features of `nettskjemar`
+## Key Features of `nettskjemar`
 
-#### **1. Download Form Submissions with Ease**
+### **1. Download Form Submissions with Ease**
 With just a few lines of R code, you can pull survey answers into a tidy dataframe. 
 This allows you to start working with your data immediately without spending time on manual downloads or file conversions.
 
@@ -38,7 +38,7 @@ formid <- 123823
 data <- ns_get_data(formid)
 ```
 
-#### **2. Raw Data in Long Format**
+### **2. Raw Data in Long Format**
 For those interested in timestamps or a detailed breakdown of how survey respondents interacted with individual questions, the package allows retrieval of **raw data** in long format. 
 This structure is perfect for analyzing response times or other granular aspects, and is only available to researchers through the API.
 
@@ -47,7 +47,7 @@ This structure is perfect for analyzing response times or other granular aspects
 raw_data <- ns_get_data(formid, type = "long")
 ```
 
-#### **3. Checkbox Matrix Handling**
+### **3. Checkbox Matrix Handling**
 Nettskjema includes an advanced checkbox matrix functionality, but the exported data can sometimes be tricky to manage. 
 Fortunately, `nettskjemar` offers tools to simplify and reshape checkbox data into user-friendly formats: such as as lists, delimited strings, or separated rows.
 
@@ -59,7 +59,7 @@ ns_get_data(formid) |>
   ns_alter_checkbox(to = "character", sep = ";")
 ```
 
-#### **4. Tidyverse-Compatible**
+### **4. Tidyverse-Compatible**
 The data retrieved with `nettskjemar` is fully compatible with the tidyverse ecosystem, making it an intuitive choice for R users already familiar with `dplyr`, `tidyr`, or `ggplot2`. 
 You can chain commands and explore your survey data with remarkable ease.
 
@@ -82,14 +82,14 @@ ns_get_data(formid) |>
   separate_rows(checkbox_matrix.1)
 ```
 
-### **Before Getting Started: Codebook Setup**
+## **Before Getting Started: Codebook Setup**
 To ensure smooth analysis in R, it’s recommended to enable and configure the **codebook** feature in the Nettskjema portal. 
 This makes it easier to work with well-labeled, organized data. 
 Head to the Nettskjema Portal’s *General Settings* and activate the "Codebook" option for your form. [Learn more about codebooks here](https://www.uio.no/tjenester/it/adm-app/nettskjema/hjelp/kodebok.html) (content in Norwegian).
 
 ---
 
-### Why Use `nettskjemar`?
+## Why Use `nettskjemar`?
 
 - **Time-Saving**: Skip manual data downloads—seamlessly fetch survey submissions directly into R.
 - **Customizable**: Tidy data the way you want—reshape checkbox matrices, fetch raw tall data, or stick with wide-form tibbles.

content/news/2025/03-nettskjemar/index.no.md

@@ -22,9 +22,9 @@ Nedenfor fremhever vi noen av de viktigste funksjonene i `nettskjemar` og hvorfo
 
 ---
 
-### Viktige funksjoner i `nettskjemar`
+## Viktige funksjoner i `nettskjemar`
 
-#### **1. Last ned skjemabesvarelser med enkelhet**
+### **1. Last ned skjemabesvarelser med enkelhet**
 Med bare noen få linjer R-kode kan du hente svar til et ryddig data format. 
 Dette lar deg starte arbeidet med dataene dine umiddelbart uten å bruke tid på manuelle nedlastinger eller filkonverteringer.
 
@@ -36,7 +36,7 @@ formid <- 123823
 data <- ns_get_data(formid)
 ```
 
-#### **2. Rådata i langformat**
+### **2. Rådata i langformat**
 For de som er interessert i tidsstempler eller en detaljert oversikt over hvordan respondenter har interagert med individuelle spørsmål, tillater pakken henting av **rådata** i langt format.  
 Denne strukturen er perfekt for å analysere responstider eller andre detaljer, og er kun tilgjengelig for forskere gjennom API-et.
 
@@ -45,7 +45,7 @@ Denne strukturen er perfekt for å analysere responstider eller andre detaljer,
 raw_data <- ns_get_data(formid, type = "long")
 ```
 
-#### **3. Håndtering av avkrysningsmatrise**
+### **3. Håndtering av avkrysningsmatrise**
 Nettskjema inkluderer et avansert avkrysningsmatriseverktøy (checkbox matrix), men de eksporterte dataene kan noen ganger være utfordrende å jobbe med. 
 Heldigvis tilbyr `nettskjemar` verktøy for å forenkle og omstrukturere avkrysningsdata til brukervennlige formater, som lister eller separerte strenger.
 
@@ -57,7 +57,7 @@ ns_get_data(formid) |>
   ns_alter_checkbox(to = "character", sep = ";")
 ```
 
-#### **4. Tidyverse-kompatibel**
+### **4. Tidyverse-kompatibel**
 Dataene hentet med `nettskjemar` er fullt kompatible med tidyverse-økosystemet, noe som gjør det til et intuitivt valg for R-brukere som allerede er kjent med `dplyr`, `tidyr` eller `ggplot2`. Du kan enkelt kjede kommandoer og utforske undersøkelsesdataene dine.
 
 ```r
@@ -79,7 +79,7 @@ ns_get_data(formid) |>
   separate_rows(checkbox_matrix.1)
 ```
 
-### **Før du starter: Aktivering av kodeboken**
+## **Før du starter: Aktivering av kodeboken**
 For å sikre en god arbeidsflyt i R, anbefales det å aktivere og konfigurere **kodebok**-funksjonen i Nettskjema-portalen.  
 Dette gjør det enklere å jobbe med godt merkede og organiserte data.
 
@@ -88,7 +88,7 @@ Gå til Nettskjema-portalen under *Generelle innstillinger* og aktiver "Kodebok"
 
 ---
 
-### Hvorfor bruke `nettskjemar`?
+## Hvorfor bruke `nettskjemar`?
 
 - **Tidsbesparende**: Hopp over manuelle nedlastinger—hent besvarelser direkte i R.  
 - **Tilpassbart**: Utform dataene slik du ønsker—endre avkrysningsmatriser, jobb med rådata i lange formater eller behold brede dataframes.  

i18n/en.yaml

@@ -6,6 +6,8 @@
 - authorsPubs: Publications by
 - all: All
 
+- skipToContent: Skip to content
+
 # Months
 - January: January
 - February: February

i18n/no.yaml

@@ -7,6 +7,8 @@
 - all: Alle
 - contact: Kontakt
 
+- skipToContent: Hopp til innhold
+
 # Months
 - January: Januar
 - February: Februar

scripts/a11y/README.md

@@ -0,0 +1,59 @@
+# Accessibility gate
+
+Runs on every pull request against the deployed Netlify preview, and fails the
+job if anything regresses. The report is posted as a PR comment.
+
+## Running it locally
+
+```sh
+hugo server                                    # in one terminal
+npm install --prefix scripts/a11y              # once
+BASE=http://localhost:1313 npm run audit --prefix scripts/a11y
+```
+
+Against a preview instead:
+
+```sh
+BASE=https://23--capro-uio.netlify.app npm run audit --prefix scripts/a11y
+```
+
+## What it checks
+
+**axe-core** (WCAG 2.0 / 2.1 / 2.2 A + AA, plus best-practice) at desktop and
+mobile, including the nav states that only exist after a click.
+
+By default it scans one page per layout — every language's home page, every
+section landing page, and the first child of each section — which catches
+layout-level regressions without scanning every news post. `--all` scans every
+route in the sitemap and is worth running before a release.
+
+**Checks axe cannot make:**
+
+- the skip link is the first tab stop and becomes visible when focused
+- no keyboard trap
+- a visible focus indicator on every interactive element
+- `prefers-reduced-motion` is honoured, and content is still visible when the
+  scroll observer never fires
+- no horizontal scrolling at 320px (400% zoom) or 640px (200% zoom)
+- `lang`, `title`, image `alt` and link labels on each page
+
+## Things that will trip you up
+
+**Settle animations before measuring.** `.reveal` fades in. Sampling a colour
+mid-fade composites it against the background and reports a contrast failure
+that does not ship. The script disables transitions before revealing anything.
+
+**Do not emulate zoom with `body { zoom }`.** Real browser zoom shrinks the CSS
+viewport, so media queries respond to it. `zoom` does not, so the desktop nav
+stays on screen at double size and reports an overflow that cannot happen.
+Resize the viewport instead — that is what the script does.
+
+**Redirect stubs.** A page with a `<meta http-equiv="refresh">` navigates away
+mid-scan and axe audits the destination site. The script detects and skips them
+before navigating.
+
+**A clean run is a floor, not a ceiling.** Automated tooling catches roughly a
+third of real accessibility problems. It cannot tell you whether alt text is
+*meaningful*, whether the copy is understandable, or how the site sounds in a
+screen reader. Test with VoiceOver or NVDA before claiming the site is
+accessible.