Ehlers-Danlos foreningens nye WordPress-hjemmeside

Et foreningswebsite skal tilbyde en ordentlig brugeroplevelse, et lavt klimaaftryk og leve op til skærpede krav om web­tilgænge­lighed og privatliv.

Det gamle site ikke var frygteligt, bestemt ikke. Men i løbet at de sidste par år er browsere blevet markant forbedrede, Internet Explorer er lagt i graven, og webudviklere kan omsider gøre brug af moderne HTML5, CSS og medietyper.

Disse nye muligheder er det en fornøjelse både at arbejde med og måle resultaterne af. Her kan du læse om hvilke forbedringer vi har opnået og hvilke værktøjer der er anvendt. Alle screenshots fremstår på engelsk, men brugerfladen er selvfølgelig på dansk for de skribenter og redaktører der foretrækker dette.


Reduktion i websitets klimaaftryk

Ifølge Website Carbon Calculator var det gamle site “renere” end 51 % af de målte websites, hvilket må betegnes som værende gennemsnitligt. Det nye site rammer 88 %. Det ligger altså lunt blandt de mest klimavenlige websites, der er testet med Website Carbon Calculator.

Potentiel årlig CO2-reduktion

Hvad betyder dette omregnet i CO2-reduktion? Ved eksempelvis 10.000 månedlige sidevisninger er CO2-udledningen som følger:

Før

0

kg CO2 årligt

Efter

0

kg CO2 årligt

Målingerne er foretaget på forsiden, og selvom den er layoutet forskelligt i den nye og gamle version, indeholder den de samme oplysninger; en menu med søgefelt, en liste over seneste nyheder, en footer med navigation og kontaktoplysninger – helt standard. Alligevel er siden markant lettere.

Reduktion i CO2-udledningen

83%

Metoder til et slankere website

Den mængde data, der transporteres fra datacenteret til telefonen, når man besøger Ehlers-Danlos-websitet i dag, er reduceret til ⅓. Dette har krævet en “bredspektret indsats”. Der er rigtig meget at hente på blandt andre disse områder:

  • Skift til WordPress core block editor, også kendt som Gutenberg, i stedet for Divi.
  • Brug af moderne medieformater som WebP og WebM.
  • Dynamisk load af assets, fx kontaktformularer.
  • Kun lokale assets, altså ingen Facebook eller Twitter-embeds.
  • Systemfonte eller lokale fonte i WOFF2 format.

Webtilgængelighed – inklusion af alle

Det giver sig selv, at en patientforening for folk med kroniske lidelser, der blandt andet giver betydelige motoriske udfordringer, behøver en hjemmeside, der er tilgængelig for alle og lever op til formelle krav om webtilgængelighed.

WebAIM Web Accessibility Evaluation Tool

Wattspeed, som omtales senere, er fin til hurtigt at afsløre, om der er problemer med webtilgængelig. Er der det, kan vi bruge WebAIM WAVE til udpege præcist, hvor der er fejl og mangler. Det er typisk manglende ARIA-labels, felter man ikke kan navigere til med tastaturet, manglende billedtekster, tekst der er vanskelig at læse pga. lille størrelse eller for lav kontrast.

Løbende tjek af webtilgængelighed i WordPress

At teste for webtilgængelighed efter publicering er fint, men også let at glemme. Derfor benytter vi et plugin, Accessibility Checker, til at tjekke op imod 40 almindelige tilgængelighedsregler hver gang en artikel gemmes. Resultatet vises direkte i editoren, så man kan løse problemerne med det samme.

Oplæsning med skærmlæsere

Når websitet har bestået HTML5– og syntetiske WCAG-tests, afprøver vi oplæsning af tekster på skærmen med en skærmlæser. Blinde benytter avancerede programmer som JAWS eller NVDA, men ved hjælp af Microsoft Windows’ indbyggede talesyntese og Edge browseren, kan vi få et indtryk af hvordan sitet fungerer, når det læses op, uden at skulle installerede ekstra software.

Herunder er et eksempel. Det skal lige bemærkes, at stemmen “Microsoft Helle” lyder ret syntetisk. De professionelle værktøjer har ofte en mere naturlig stemme.

Eksempel på oplæsning af side med Microsoft Edge

Respekt for brugerens privatliv og GDRP compliance

Det er fuldt ud muligt at udvikle et WordPress-website med respekt for brugernes privatliv. Væsentlige overvejelser for ethvert website er, om man virkelig har brug for at indsamle data om brugeren, og behøver man dele dem med nogen. Som regel er svaret nej.

På det nye website respekterer vi brugerens privatliv med:

  • Cookiefri zone. Uden cookies, ingen irriterende (og oftest ugyldige) cookie-popups.
  • Understøttelse af WordPress’ indbyggede værktøjer til indsigt i og sletning af data.
  • Indbygget besøgsstatistik med Matomo. Ingen deling af data med fx Google.
  • Alle assets, altså billeder, fonte, scripts osv., er hostet på egen server i Danmark.
  • Sikker levering af e-mails med TLS-kryptering og DMARC/SPF/DKIM records.

Matomo Analytics – et GDPR compliant alternativ

Når man ønsker statistik på vores websites, er rygmarvsreaktionen ofte at koble sitet op på en Google-konto, og lade Google Analytics (GA) opsamle data om de besøgendes adfærd. Denne information er værdifuld, især for Google, som jo til gengæld stiller GA til rådighed uden beregning.

I stedet anvender vi Matomo Analytics, der giver os 100 % ejerskab over besøgsdata og mulighed for at beskytte brugernes privatliv med IP-hashing, respekt for Do No Track, cookiefri statistik og GDPR-værktøjer. Matomo anvendes bl.a. af UN, Amnesty og EU.

Indsigt i, og sletning af persondata i WordPress

WordPress har indbyggede værktøjer til eksport og sletning af persondata. Persondata kan f.eks. være kontaktoplysninger indtastet i en tilmelding til et arrangement. Når vi vælger tredjeparts plugins, f.eks. til kontakt­formular, nyhedsbrev eller events, sikrer vi os at plugin’et hægter sig på disse værktøjer, så vi har én velfungerende indgang til overholdelse af data­beskyttelses­forordningen.


Performance og brugervenlighed

Det er lettest af identificere og rette fejl på sitet undervejs i udviklingsforløbet. Opdager vi et problem med et tema eller et plugin, går vi i dialog med udviklerne. De er altid interesserede i at få rettet fejlene, ikke blot for vores skyld, men for alle de oftest tusinder af brugere.

Wattspeed by Advanced Web Ranking

Wattspeed browser extension til Firefox og Chrome viser Google Lighthouse-score, HTML5-validerer, tester for mobilvenlighed og webtilgængelighed – alt sammen ved et tryk på en knap. Med Wattspeed er det derfor virkelig nemt at få et hurtigt indtryk af om siden er i orden.

Google Lighthouse

Med Lighthouse går vi yderligere i dybden i forhold til Googles anbefalinger for Performance, Accessibility, Best Practices og SEO. Alle disse parametre har indflydelse på brugeroplevelsen og deraf placeringen på søgemaskine. Det nye website består alle Google Lighthouse-tests.

Forfatter- og redaktør-venlighed med Gutenberg

Brugervenlighed handler ikke kun om at give den besøgende en god og intuitiv oplevelse, men i lige så høj grad om, at gøre livet let for dem som vedligeholder websitet i dagligdagen. Det typiske bestyrelsesmedlem er ikke webudvikler.

I stedet for en kompliceret pagebuilder som tidligere anvendt, bruger vi nu WordPress’ indbyggede block-editor kaldet Gutenberg. Det giver os flere fordele:

  • Et meget enkelt interface for skribenter at arbejde i.
  • Enorm fleksibilitet i forhold til valg af tema og styling.
  • Mulighed for semantisk korrekt HTML og god webtilgængelighed.
  • Et bredt udvalgt af integrationer til f.eks. formularværktøjer.
  • En strategisk solidt valg i forhold til fremtidig udvikling.

Herunder ses eksempler på hvor enkel block-editoren kan fremstå for skribenter, samt hvordan listen over indlæg kan tilpasses til at vise netop de informationer der er brug for.


Sikker drift og overvågning

Et robust website er altid tilgængeligt. Ehlers-Danlos websitet er overkommeligt at administrere – det er trods alt et relativt simpelt site for små tusind medlemmer. Hvilken interesse skulle en hacker have i det? Bots på nettet skeler ikke til, hvem du er. Et website er en ressource der – hvis kompromitteret – kan anvendes til spam, sprede malware, mine bitcoins, høste data – kun fantasien sætter grænser, og hackernes fantasi fejler åbenlyst ikke noget.

Vi sikrer en stabil og forudsigelig drift af sitet med:

  • Altid opdateret WordPress-core, LiteSpeed-webserver og PHP 8.
  • End-point firewall med Brute Force Protection og tofaktor-godkendelse.
  • To uafhængige, automatiske backups.
  • Logning af administrative handlinger, fx logins og installation af plugins.
  • Overvågning af oppe- og svartider.

Opsummering

Ehlers-Danlos-foreningen og vi har med det nye website fået opfyldt vores ønsker til en effektiv, let anvendelig og langtidsholdbar løsning.

Med et bæredygtigt design slår vi to fluer med ét smæk, da et slankere website performer tilsvarende bedre.

Når vi efterlever anbefalingerne for webtilgængelighed, bliver sitet let at bruge for alle besøgende – ikke kun for folk med funktionsnedsættelser.

Vi gemmer ikke unødvendige persondata om den besøgende, slipper for cookie-popups, og kan til hver en tid honorere et ønske om indsigt i eller sletning af persondata – det er privacy by design.

Alle anvendte plugins og temaet er open source og tilgængeligt på WordPress.org.