Alt tekster eller “alternativ tekst” er simpelt sagt tekst til skærmlæsere. Hvis en svagtseende eller blind person får læst et site op med en skærmlæser, skal billeder og links indeholde en tekst i din HTML, så skærmlæseren kan læse denne op. Rent teknisk har billeder en “alt” attribut og links har en “title” attribut, dog er formålet det samme; Alternativ tekst, som skærmlæseren læser op.
Få styr på accessibility
I dette undervisningsforløb bliver du som redaktør i GoPublic klædt på til at have styr på tilgængeligheden. Vi guider dig gennem de fem indsatsområder, du som redaktører skal tage højde for, når du redigerer hjemmesiden.
Alt-tekster til billeder
Upload billede
Upload dit billede til GoPublic, enten i mediearkivet, i rich text feltet eller i "media" feltet i et modul.
Skriv alt-tekst
Du kan nu udfylde din alt-tekst i feltet for alt-tekster. Du kan også vælge at markere billedet som "dekorativt" (se mere i dette i boksen forneden).
Tjek evt. om dine billeder er i orden
På alle sider i GoPublic findes vores page-checker. Her kan du gå til "Alt tags" fanen og tjekke, om dine alt-tekster på siden er i orden, inden du publicerer siden.
Dekorative billeder
I GoPublic kan du angive alt-teksten på et billede som “dekorativt billede”. Denne funktion er vigtig, da det ikke er nødvendigt for en blind person at få beskrevet et billede, som er dekorativt. Her er et eksempel:
Alt tekst: “En person med kondisko står på to træbjælker med hønsenet omkring sig. I baggrunden ses brune blade og vand”.
Billeder som disse kaldes dekorative, da de ikke har nogen relevans for forståelsen af artiklen. Hvis du som person med skærmlæser får læst alle billeder op på et website med tekster som disse, vil der blive læst en masse irrelevant information op.
Overskriftsrækkefølge
Overskriftsrækkefølgen gør det overskueligt for skærmlæseren, at hoppe gennem overskrifterne og få overblik over indholdet. Derfor er det en god idé at bruge dine overskrifter så det er let, at skimme indholdet i artiklen.
Du kender måske <h1>’ere, <h2>’ere og <h3>’ere i HTML, eller også kender du overskrifterne i en akademisk artikel eller et Word dokument, som er inddelt i nummererede afsnit:
1.0 Indledning
2.0 Teori
2.1 Michel Foucault
3.0 Metode
3.1 Albert Camus
Ovenstående eksempel er mere eller mindre den måde, du skal sikre at dine overskrifter er struktureret på dit website. Dog er der to regler, som skiller sig ud:
- Siden skal indeholde minimum én overskrift på niveau 1 (<h1>), som beskriver sidens hovedindhold eller titel. Dette er ikke strengt nødvendigt ift WCAG, men det er best practice.
- Herefter er det øverste niveau 2 (<h2>). Der må gerne være flere <h2>’ere, men husk at brug niveau 3-6 hver gang, du går et niveau dybere ned i strukturen.
Du kan altså sagtens vende tilbage til niveau 2 i din artikel, selvom du har brugt en niveau 3 overskrifter nedenunder.
Opret artikel
Opret din artikel i GoPublic, enten på selve sidens "artikel" felt, eller i et modul.
Formater overskrift
Markér overskriften, og vælg i format-dropdown'en under "headings", hvilket overskriftsniveau du ønsker. Dette er den dropdown-menu, som befinder sig øverst til venstre i rich text editoren.
OBS: Sommetider er en overskrift blot et "heading" felt i et modul. Disse vil som udgangspunkt næsten altid være en <h2> overskrift, medmindre du indsætter et Hero modul. Her vil overskriften næsten altid være en <h1> overskrift. I visse moduler findes der et afkrydsningsfelt, hvor du kan ændre standard-formateringen i overskriften. Dette gælder bl.a. for Hero, Advanced List og Accordion. Sådan et felt vil typisk se sådan her ud: 
Tjek evt. om din rækkefølge er i orden
På alle sider i GoPublic findes vores page-checker. Her kan du gå til "Headline order" fanen og tjekke, om din overskriftsrækkefølge på siden er i orden, inden du publicerer siden.
Sensoriske egenskaber
Sensoriske egenskaber refererer bl.a. til den måde, du beskriver elementer på dit website i teksten. Tag f.eks. dette eksempel:
Teksten under overskriften refererer til et element, som befinder sig til venstre. Problemet med denne tekst er, at en skærmlæser blot vil læse indholdet på siden op i den rækkefølge, der er programmeringsmæssigt bestemt på siden.
Personer med skærmlæsere kan sandsynligvis ikke se elementerne på siden, hvilket forvirrer yderligere med tekst såsom “til venstre” eller “til højre”. Derudover vil elementerne også være struktureret anderledes på mobil og ipad, hvilket også vil komplicere teksten for mobilbrugere.
Sørg derfor at undgå tekst som denne, og brug i stedet tekst såsom: “Velkommen til min side med opskrifter. Brug menuen til at navigere videre på sitet”.
Linktekster
Linktekster er tekst du skriver, når du skal lave et link. Når brugere med skærmlæsere navigerer på dit website, gør de det ofte via links, dvs. de "springer" rundt på sitet via links, for hurtigt at komme rundt og scanne sidens mange links. Du kan også selv prøve dette ved at bruge "tab"-tasten på en site på dit site: Her vil du se, at links bliver markeret, og du vil blive ført videre til sidens næste link, hver gang du bruger "tab"-tasten.
Det kan være fristende for layoutets skyld, at lave korte links som disse:
Du kan læse meget mere om, hvordan du som voksen kan bestille pas til dit barn på siden her
Dette er et no-go, da brugere med skærmlæsere så bare vil få læst "læs mere her" og "her" op, når de navigerer ned gennem siden via links.
Skriv i stedet links helt ud, så linkets tekst kan stå alene, og man kan forstå konteksten alene uden teksten rundt om linket.
Dette kunne f.eks. gøres således:
Billeder af tekst
Til sidst skal det understreges, at billeder af tekst altid skal undgås. Hvis det er absolut nødvendigt kan du skrive en alt-tekst som beskriver hvad der står på billedet, men generelt set vil det altid være at foretrække, at skrive teksten ved siden af billedet, eller oven på med HTML, så skærmlæseren kan læse det.
Et eksempel kunne være dette:
Personer, der får list siden op med en skærmlæser får blot læst op her, at her er et billede. Brug i stedet et modul med HTML for at vise tekst oven på billeder til at løse eksempler som dette, f.eks. vores hero modul:
Velkommen til min hjemmeside!
Tillykke! - du har nu gennemført vores forløb om accessibility
Er du nysgerrig på mere, anbefaler vi, at du tager forløbet om cookies, som også er gratis.
