Tick the right boxes

Dannie Vinther,

Københavns Erhvervsakademi

Tilgængelighed med brugeroplevelsen i fokus

?

Tick the right boxes

Jakoba Mulderhuis i Amsterdam

DS/ISO 21542 certificeret bygning

https://arcam.nl/events/winterlezing-4-jakoba-mulderhuis-thema-onderwijs/

compliance ≠ brugervenlig

Forskningsprojekt

Lovgivningsanalyse
Litteraturbaseret analyse
Indsigt fra branchen
Artefaktanalyse

Agenda

Lovgivningen
Opfattelsen af webtilgængelighed
Udfordringen med tjeklister og værktøjer
Hvem har ansvaret?
Anbefalinger

Momentum

Nuværende og kommende lovgivning
Samfundet
Det er blevet "nemmere" at arbejde med i
- Design
- Frontend

Momentum

Lovgivningen har ramt det offentlige

Om lidt rammer det også det private marked

EU-direktiver

(EU) 2019/882, 17. april 2019

(EU) 2016/2102, 26. oktober 2016

Lovgivning

Lov om tilgængelighed af offentlige organers websteder og mobilapplikationer

Lov om tilgængelighedskrav for produkter og tjenester

juni 2021

juni 2025

Lov om tilgængelighed af offentlige organers websteder og mobilapplikationer

https://www.version2.dk/artikel/webtilgaengelighed-snegler-sig-fremad-minimal-fremgang-paa-2-aar-viser-version2-undersoegelse

januar 2021 - i dag

76 til 81 procent (tilgængelighedsscore)

1838 websider fra 372 offentlige domæner

Lov om tilgængelighedskrav for produkter og tjenester

Påvirker produkter, der leveres fra 28. juni 2025

Påvirker alle produkter fra 28. juni 2030

Lov om tilgængelighedskrav for produkter og tjenester

Produkter og tjenester må kun bringes i omsætning eller leveres, hvis de opfylder de relevante tilgængelighedskrav

Forpligtelser

Fabrikanten skal sikre, at produkter er designet og fremstillet i overensstemmelse med lovgivningen.
Udarbejdelse af teknisk dokumentation.
Gennemførelse af overensstemmelsesvurderingsprocedure og anbringelse af CE-mærkning.
Opbevaring af teknisk dokumentation og EU-overensstemmelseserklæring i 5 år.
Samarbejde med kontrolmyndigheder ved manglende overensstemmelse.

Dokumentation

Erhvervsdrivende skal vurdere, om overholdelse af tilgængelighedskravene vil indebære væsentlige ændringer eller medføre uforholdsmæssige byrder.
Vurderingen skal dokumenteres.
Dokumentationen skal opbevares i mindst 5 år efter sidste markedsføring af produktet eller levering af tjenesten.
Dokumentationen skal forelægges kontrolmyndigheden ved anmodning.

Undtagelser

Uforholdsmæssig stor byrde
Mikrovirksomheder
Udgivet før 28. juni 2025
Produkter, der kvalificeres som arkiver
Kræver en væsentlig ændring af et produkt eller tjeneste

Mikrovirksomhed

under ti personer
årlig omsætning under 2 mio. euro

Vidner om erkendelsen af, at compliance kan være svært at opnå

Uforholdsmæssig stor byrde

Baseret på omkostningsfordele, nettoomkostninger i forhold til samlede omkostninger, og forholdet mellem opfyldelsesomkostninger og nettoomsætning.

Vurdering af omkostningerne i forhold til fordelene for personer med handicap

Bilag 5

Dokumenteres og opbevares i mindst 5 år

Bøder

Bødestraf for overtrædelse af specifikke paragraffer
Bøder for undladelse af at give oplysninger til kontrolmyndigheden
Straf for ikke at opfylde lovpligtige forpligtelser
Bøder for hindring af kontrolmyndighedens arbejde
Straf for ikke at efterkomme kontrolmyndighedens afgørelser
Bøde for uretmæssig anvendelse af CE-mærke

https://www.danskerhverv.dk/presse-og-nyheder/nyheder/2018/januar/uklare-krav-om-tilgangelighed/

Tilgængelighedskrav

"...mere end én sensorisk kanal"

Understandable (forståelig)

Percievable (opfattelig)

Operable (anvendelig)

Robust

"...hensyn til forventede anvendelsesforhold"

"...på en forståelig måde"

"...som brugerne kan opfatte"

LOV nr 801

"...i overensstemmelse med hele eller dele af harmoniserede standarder"

🤷‍♂️

"...i overensstemmelse med hele eller dele af harmoniserede standarder"

Den harmoniserede europæiske standard

EN 301 549 trækker stærkt på retningslinjerne for WCAG 2.1

https://digst.dk/digital-service/webtilgaengelighed/forstaa-den-tekniske-standard/

https://digital-strategy.ec.europa.eu/da/policies/web-accessibility-directive-standards-and-harmonisation

Dokumentation

https://www.w3.org/WAI/WCAG22/Understanding/

Budgettet er ofte en hindring for at implementere tilgængelighedsforbedringer
Manglende fokus
Mangel på viden og uddannelse
Mangel på eksperter (som med fx GDPR)

Bureauer

Webtilgængelighed er ofte fejlopfattet som separat disciplin eller en eftertanke

Opfattelsen af tilgængelighed

Godt for fokus på emnet,
men potentielt mindre godt ift. udviklingsprocesserne

Compliance-bestræbelser fører til tjeklistementalitet

Braille

mandatory

https://webaim.org/projects/million/

https://www.interaction-design.org/literature/topics/accessibility

https://www.interaction-design.org/literature/topics/accessibility#accessibility_vs_usability-1

Tilgængelighed

Inclusive design

Tilgængelighed

Inclusive design

Usability design

Compliance

Fra “Practical Accessibility” af Sara Soueidan

Udfordringen med tjeklister og
A11y-værktøjer

"Exploring the Relationship between

Web Accessibility and User Experience",

2016

* APCA evaluerer den opfattede kontrast

Selvom automatiserede tests kun dækker 20-30% af WCAG-succeskriterierne, antyder data fra Deque, at disse problemer repræsenterer 57,38% af de mest almindelige problemer, der findes.

https://daverupert.com/2023/10/nine-a11y-jobs-where-robots-suck/

"Bestået" betyder mere tilgængelig end utilgængelig

Eliminerer åbenlyse problemer, og gør faktiske tilgængelighedsrevisioner mere effektive

https://daverupert.com/2023/10/nine-a11y-jobs-where-robots-suck/

Begrænsninger ved automatiserede tests

Fokustilstande
Test af interaktioner (dropdownmenuer og modaler)
Trykflader
200%-400% zoom
Reduced motion-animationer
End-to-end-tests

https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/

Automatiserede tests

Monsido

Pensionskasser i DK

PFA Pension scorede højt

En hurtig test viste ingen fokusindikator

https://monsido.com/webaccessibility/dk-pension-benchmark

Eksempler

Selvrapportering

Metode
"Vi har selv evalueret webstedet"

Vurderingsmetode
"Vi har lavet automatiseret test med WAVE plugin og SiteImprove plugin"

Eksempel på tilgængelighedserklæring

Axe DevTools

itslearning

itslearning is designed to be compliant with WCAG 2.1 level AA

Teknisk tilgængelig, men ikke brugervenlig

Læringsplatform

Webtilgængelighed er komplekst

Et for snævert fokus på skærmlæsere kan resultere i et knapt så tilgængeligt aspekt for andre brugergrupper?

<button>
	Add <span class="visually-hidden">[ PRODUCT_NAME ]</span> to Cart
</button>

❌

https://www.w3.org/WAI/WCAG21/Understanding/label-in-name

<button>
	Add to Cart <span class="visually-hidden">, [ PRODUCT_NAME ]</span>
</button>

✅


<a href="/path/to/article-title/">Læs mere</a>



<a href="/path/to/article-title/">
  Læs mere <span class="visually-hidden">om [ ARTIKELNAVN ]</span>
</a>

✅

❌

<section aria-labelledby="region_label">
  <h2 id="region_label">[ Region label ]</h2>

  <div class="disclosure-widget">
    <h3>
      <button aria-expanded="false"
              aria-controls="[ panel 1 ID ]">
        [ trigger label ]
      </button>
    </h3>
    <div id="[ panel 1 ID ]">
      ...
    </div>
  </div>
</section>

Accordion pattern

<ul>
  <li>
    
    <a href="#"
       role="button"
       aria-expanded="false"
       aria-controls="[ panel 1 ID ]">
      ...
    </a>

    <ul id="[ panel 1 ID ]"></ul>
    
  </li>
</ul>

Accordion på borger.dk

Nicolas Steenhout - tilgængelighedsekspert

Hvem har ansvaret?

Browserne?
Assisted Technology?
Virksomhederne / bureauerne?
Uddannelserne?

Browsere

Assistive tech

Ingen garantier

https://a11ysupport.io/

Bureauerne

Uddannelserne

Hvad med AI?

https://adrianroselli.com/2023/06/no-ai-will-not-fix-accessibility.html

Accessibility is about people

https://www.nytimes.com/2022/07/13/technology/ai-web-accessibility.html

Hvad med AI?

https://twitter.com/aardrian/status/1713589123649327513

Accessibility overlay

Hvad med AI?

Opsummering

Webtilgængelighed bliver ofte opfattet som selvstændig disciplin og en eftertanke
Fokus på teknisk overholdelse kan potentielt føre til en ineffektiv udviklingsproces, hvor tjeklister dominerer og nedprioriterer brugercentreret design
"You’ll get it wrong unless you test with disabled people"
"Semantic HTML does not guarantee accessibility"
"Accessibility isn’t just about screen readers"
"The Web Content Accessibility Guidelines aren’t perfect"

Loven

Strict adherence to rules doesn't ensure good accessibility — you need to understand the audience and balance their needs, rather than just ticking boxes

Anbefalinger

Design

Kilde

Samarbejde

Annotering i designet

https://ericwbailey.website/published/accessibility-annotation-kits-only-annotate/

Samarbejde

axe for Designers

Link

Rule of least power

Use The Platform

details / summary accordion (name)
dialog
popover
selectlist

Use The Platform

oklch()

https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

All backgrounds with L≥87% have good contrast with black text.

https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

oklch()

.current-page {
  color: var(--brand-color);
}

nav [aria-current="page"] {
  color: var(--brand-color);
}

.accordion.expanded {
  display: block;
}

.accordion:has([aria-expanded="true"]) {
  display: block;
}

vs.

Udviklingsværktøjer

AriaKit
React Aria
HeadlessUI

Test, test, test...

Sørg for at inkludere "almindelige" brugere, ikke kun superbrugerne

It’s hard to overstate just how much software developers have given the finger to reliability in the past 10 years or so. It’s for the simplest, silliest reasons, too, like those web forms.

My web browser has been perfectly competent at submitting HTML forms for the past 28 years, but for some stupid reason some ~~asshole~~ developer decided to reimplement all of the form semantics in JavaScript,

and now I can’t pay my electricity bill without opening up the dev tools. Imagine what it’s like to not know how to do that. Imagine if you were blind.

https://drewdevault.com/2021/10/17/Reliability.html

and now I can’t pay my electricity bill without opening up the dev tools. Imagine what it’s like to not know how to do that. Imagine if you were blind.

https://drewdevault.com/2021/10/17/Reliability.html

Tick the right boxes

Tilgængelighed med brugeroplevelsen i fokus

?

?

?

?

Tick the right boxes

compliance ≠ brugervenlig

Forskningsprojekt

Agenda

Momentum

Momentum

Momentum

EU-direktiver

Lovgivning

Forpligtelser

Dokumentation

Undtagelser

Uforholdsmæssig stor byrde

Bøder

Tilgængelighedskrav

🤷‍♂️

Den harmoniserede europæiske standard

Tilgængelighedskrav

Tilgængelighedskrav

Tilgængelighedskrav

Tilgængelighedskrav

Tilgængelighedskrav

Tilgængelighedskrav

Bureauer

Opfattelsen af tilgængelighed

Udfordringen med tjeklister og A11y-værktøjer

Begrænsninger ved automatiserede tests

Automatiserede tests

Selvrapportering

itslearning

Webtilgængelighed er komplekst

❌

✅

Hvem har ansvaret?

Browsere

Assistive tech

Bureauerne

Uddannelserne

Hvad med AI?

Hvad med AI?

Hvad med AI?

Anbefalinger

Design

Samarbejde

Samarbejde

Rule of least power

Rule of least power

Rule of least power

Rule of least power

Use The Platform

Use The Platform

Use The Platform

oklch()

oklch()

Udviklingsværktøjer

Test, test, test...

Samarbejd

Rule of Least Power

Use The Platform

Test, test, test...

Tick the right boxes

Udfordringen med tjeklister og
A11y-værktøjer