Gør WordPress tilgængelig for

alleWordCamp Denmark 2015

Torben Heikel Vinther

AGENDA

1. Hvad er tilgængelighed?

2. Hvorfor er det vigtigt?

3. Tilgængelighed og WordPress

4. Hvad kan du selv gøre?

2

Hvad er tilgængelighed?

“Sikring af at så mange brugere som muligt kan navigere på og forstå en

hjemmeside”

3

Hvem snakker vi om?

4

• Blinde og svagsynede

• Døve og hørehæmmede

• Indlæringshandicap

• Kognitive begrænsninger

• Begrænset bevægelighed

• Talehandicap

• Fotosensitivitet

Tilgængelighed er mange forskellige ting

• Oppetid og hastighed på sitet har betydning for adgangen til websitet.

• Mange paralleller mellem tilgængelighed og SEO i den måde man optimerer på, fordi søgemaskiner også er en slags bruger. Google er også blind!

• Tilgængelighed kan også ses som teknisk grundlag for brugervenlighed

• Tilgængelighed handler ikke kun om tekniske betingelser og overholdelse af webstandarder. Det handler også om den måde vi kommunikerer på!

5

W3C, WAI, WCAG, WAI-ARIASay WHAT?

• W3C (World Wide Web Consortium) er en non-profit organisation, der er ansvarlig for internettet.

• WAI (Web Accessibility Initiative) er en gruppe under W3C, der definerer retningslinjer for, god tilgængelighed.

• WCAG (The Web Content Accessibility Guidelines) er nogle internationalt anerkendteretningslinjer.

• WAI-ARIA (Web Accessibility Initiative –Accessible Rich Internet Applications) er en teknisk specifikation til understøttelse til HTML

6

Retningslinjer for tilgængeligt webindhold

• WCAG består af 4 principper:

1. Opfattelig

2. Anvendelig

3. Forståelig

4. Robust

• Under principperne er der 12 retningslinjer

• I tilknytning til de enkelte retningslinjer findes der testbare succeskriterier.

• Succeskriterierne er opdelt i 3 niveauer: A, AA og AAAAA er standardkrav for offentlige organisationer i mange lande, herunder Danmark.

7

Ikke alt kan testet

• Løsning af tilgængelighedsproblemer kræver en blanding af objektive og subjektive tests.

• I mange tilfælde kan objektive tilgængelighedsproblemer findes automatisk.

• Det kan man ikke i samme grad med de subjektive tests.

• Derfor vil arbejde med tilgængelighed altid kræve en blanding af automatiseret og manuelle tests

8

Eksempler på tilgængelighedsbarrierer

• Manglende alt-tekster

• Formularfelter uden labels

• Links uden tekst eller target

• Events som kun kan udløses vha. mus

• Grafer uden ledsagende data

• Videoer uden undertekster

9

Hvorfor er det vigtigt?

Fordi det er det eneste rigtige at gøre!

10

Tal på bordet

11

• 8% af mænd og 0,4% af kvinder er farveblinde

• Over 50.000 blinde og svagsynede

• 4.000 døve og op mod 800.000 med høreproblemer i en grad så de har gavn af undertekster.

• 7% af befolkningen opfatter sig selv som ordblinde

• Ifølge WHO har ca. 10% af befolkningen nedsat funktionsevne i en sådan grad, at det gør dem handicappede i hverdagen.

= over ½ million danskere!

Retsbeskyttelse

• Forskellige love og regler i verden for tilgængelighed. Nogle omfatter alle websites, mens andre kun omfatter et udvalg.

• Ingen lovkrav i Danmark!

• EU-direktiv med krav om tilgængelighed for offentlige hjemmesider i 2016.

• Lidt er bedre end ingenting! Lovene bevæger sig ikke bagud!

12

Økonomi

• I det lange løb vil det øge omkostningen og mindske

indtjeningen, hvis du ikke har et tilgængeligt website.

• Det er billigere at indføre tilgængelighed fra starten

• Større kundekreds hvis du også inkluderer de omkring

10% af befolkningen!

13

SEO

• Når du indfører webstandarder inden for tilgængelighed, opnår du også en række SEO-fordele.

• Tydelige title-elementer fører til bedre click-rates fra søgemaskiner

• Korrekt brug af Headings (H-tags) betyder at søgemaskiner bedre kan forstå, hvilke emner der er på websitet.

• Linktekster med meningsfulde tekster i stedet for “Klik her” betyder, at linket sender en meningsbærende forklaring med til målsiden.

• Ved at prioritere tilgængelighed giver det dig adgang til en procentdel af befolkningen, som du ikke kan nå på en anden måde! Op imod 10% flere besøgende!

14

Tilgængelighed og WordPress

15

WordPress kernekode

• WordPress leverer i sig selv en række nøgleelementer ift. HTML-kode som i de fleste tilfælde er ok tilgængelige.

• Det gælder fx navigationsmenuen som er en uordnet liste med link og teksttitler

• Andre navigationsblokke fx i kommentarer og sidenavigation

• En række formularer fx kommentarer og søgefelter som begge er tilgængelige

• Derudover billedegallerier, billeder, links mv.

• De fleste basisting er ofte rimelig tilgængelige hvis de bliver anvendt korrekt.

16

Temaer og plugins

• Tilgængelighedproblemerne opstår først, når vi tilføjer et nyt tema eller nye plugins

• Temaer og plugins gør i stor grad brug af at erstatte WordPress kernekode med deres egne koder.

• Selvom kernekoden er tilgængelig, vil den kode måske kun udgøre en lille del af det samlede website - og måske vil det slet ikke blive vist!

• Hvis du ønsker et tilgængeligt website, så bør dit første mål være at benytte et tilgængeligt tema.

17

Hvad kan du selv gøre?

• Temaer

• Plugins

• Lav en plan

• Læg musen væk

• Prøv en skærmlæser

18

Tilgængelige temaer

• Simone (gratis)

• Leiden (gratis men

kræver Genesis Framework som gratis)

• Utility Pro (premium

som også kræver Framework)

19

Se efter flere tilgængelig WordPress-temaer på https://wordpress.org/themes/tags/accessibility-ready/

WP Tota11y

• Simpel visualisering af tilgængelighed

• Begrænset antal tests men 6 vigtige

• Bør ikke bruges som den eneste test

20

Access Monitor

• 62 individuelle tests der kan automatiseres

• Rapporterer kun maskin-testbare

• Kræver en API-nøgle fra Tenon.io

21

WP Accessibility

• Retter almindelige tilgængelighedsfejl i WordPress temaer

• Tilføjer forskellige features man kan aktivere hvis man har lyst

• Indeholder værktøjer til fx farvekontrast

22

WP Accessibility

23

WP Accessibility

24

WP Accessibility

25

WP Accessibility

26

Tilgængelighed Top 5

1. Tekst til alle

• Teksten på websitet skal kunne markeres og læses højt. Man kan fx prøve at slå stadig kan vises og læses af en skærmoplæser.

• Undgå tekst som billede eller sørg i det mindste for at der er et tekstalternativ.

• Tilføj alt-tekster til billeder.

2. Alsidighed

• Alle funktioner på websitet skal kunne bruges både med og uden mus .

• Brugerne kan tilpasse farver og skrifttyper ift. specielle behov.

3. Associering

• Elementer der er logisk forbundet skal også være visuelt forbundet (også i den

• Giv ikke instruktioner kun basseret på placering på skærmen (fx “se boksen til

• Lav tekstlinks der kan læses ud af kontekst (undgå fx “Læs mere”).

27

Tilgængelighed Top 5

4. Farver til alle

• Skab kontrast mellem baggrundsfarve og tekstfarve.

• Giv ikke instruktioner kun basseret på farve (fx “se den blå faktaboks”).

5. Konsistens

• Hav et konsistent design gennem hele websitet.

• Følg kendte konventioner.

• Følg det standardformat du publicerer i (fx HTML5-syntaks).

(kilde: SiteImprove)

28

Spørgsmål?

29

Tak for opmærksomheden!

Torben Heikel Vinther

www.webfronten.dk

@sopperdk

30