Implementer understøttelse af skærmlæser

Der er tre generelle metoder til implementering af tilgængelighed.

• Semantiske (indbyggede) kontrolelementer
• Brugerdefinerede kontrolelementer
• Alternative kontrolelementer

Lad os uddybe hver af disse tilgange.

Semantiske (indbyggede) kontrolelementer

Først skal du bruge semantiske kontrolelementer og lade fundamentet håndtere det meste af arbejdet for dig. Indbyggede kontrolelementer er indbyggede HTML-elementer, f.eks. knapper, links og formularfelter, der leveres med indbyggede tilgængelighedsfunktioner. Hvis du f.eks. bruger et <knapmærke> i stedet for en div< med typografi>, sikrer du, at knappen som standard er tilgængelig, hvor navnet kommer fra kodeindholdet og rollen er "knap". Her er nogle overvejelser i forbindelse med almindelige indbyggede kontrolelementer:

Statisk tekst (<span>)

Sørg for, at statisk tekst giver mening og giver kontekst. I dette eksempel på statisk tekst i HTML er navnet indholdet af koden, og rollen er tekst.

<span>Office privacy settings give you control over your experience and data.</span>

Name   Office privacy settings give you control over your experience and data.
Role     text

Billede (<img>)

Brug img-koden< til> et billede. I eksemplet kommer navnet fra attributten alt , og rollen er billede. Brug attributten alt til at levere et tekstalternativ til billeder.

<img src="SmartArt2.png" alt="Alternating Hexagons">

Name   Alternating Hexagons
Role     image

Knap (<knap>)

For en knap skal du bruge <knapmærket> eller inputtypen=knap. Dette er meget bedre end at bruge en division og tilføje styling- og hændelseshandlere for at få den til at se ud og fungere som en knap. Brug en knap til at mærke og formatere den på den måde, du vil bruge CSS. Sørg for, at knapperne har beskrivende tekst til at formidle deres formål. I eksemplet kommer navnet fra kodeindholdet, og rollen er knappen.

<button>End Session</button> 

Name   End Session
Role     button

Link (<a>)

Hvis du vil oprette et link, skal du bruge <mærket> i stedet for et <spænd med> formaterings- og hændelseshandlere. I eksemplet kommer navnet på linket fra indholdet i koden, og dets rolle er link. Links har også en værdi, som er den URL-adresse, der er angivet i href-attributten . Brug beskrivende linktekst til at angive linkets destination. Det anbefales generelt ikke at bruge URL-adressen som linkets navn eller visningstekst, da URL-adresser kan være lange og muligvis ikke tydeligt angiver linkets formål. Undgå at bruge tomme links. Hvis et link ikke har noget indhold, er det bedre at bruge en knap i stedet.

<a href=”https://support.microsoft.com/en-us/office/6f7772b2-2f33-4bd2-8ca7-dae3b2b3ef25”>Learn more about accessibility in PowerPoint</a>

Name   Learn more about accessibility in PowerPoint
Role     Link
Value   https://support.microsoft.com/en-us/office/6f7772b2-2f33-4bd2-8ca7-dae3b2b3ef25

I Windows Oplæser læses nogle yderligere oplysninger om et element ikke engang på det højeste verbositetsniveau. Dette omfatter URL-adressen til et link, som er en del af disse yderligere oplysninger. Denne indstilling er som standard slået fra, så URL-adressen ikke læses. Når indstillingen er aktiveret, læses URL-adressen dog. Denne indstilling styrer også læsning af beskrivelser og hjælpetekst.

Afkrydsningsfelt (<inputtype="afkrydsningsfelt">)

I forbindelse med afkrydsningsfelter skal du bruge <inputtype="afkrydsningsfelt"> og bruge en mærkatkode til etiketten. I eksemplet kommer navnet fra indholdet af mærkaten, og rollen kommer fra typeattributten. Hver inputtype har sin egen rolle, f.eks. radio, tekst osv. Afkrydsningsfeltet har også en værdi. Den kommer fra den markerede attribut.

<label for=”checkboxId”>Always Use Subtitles</label>
<input type=”checkbox” id=”checkboxId” checked>


Name   Always Use Subtitles
Role     checkbox
Value   ToggleState_On

Brugerdefinerede kontrolelementer

Hvis semantiske/indbyggede kontrolelementer ikke opfylder dine behov, skal du muligvis implementere brugerdefinerede kontrolelementer. Mange webudviklere har lært, at de kan føje formaterings- og hændelseshandlere til en <div> for at få den til at se ud og fungere, som de vil, ved at oprette brugerdefinerede kontrolelementer på denne måde. Der kræves dog yderligere arbejde for at gøre disse brugerdefinerede kontrolelementer tilgængelige. De skal være driftsklare både med tastaturet og musen, og semantiske oplysninger skal vises, så de repræsenteres korrekt i tilgængelighedstræet.

Brugere af skærmlæsere bruger kontrolelementtypen til at bestemme, hvordan de interagerer med et bestemt kontrolelement. Brugerdefinerede kontrolelementer bør kun bruges som en sidste udvej, og hvis kontrolelementtypen ikke kan anvendes på eksisterende kendte kontrolelementer, skal der angives hjælptekst eller andre oplysninger, der kan vejlede tastaturbrugerne om, hvordan de interagerer med kontrolelementet.

I 2014 publicerede W3C standarden Accessible Rich Internet Applications (ARIA), som gør det muligt for webudviklere at levere den nødvendige semantik til tilgængelige brugerdefinerede kontrolelementer. Hvis du f.eks. har en SVG-grafik, der skal fungere som en til/fra-knap, kan du tilføje en aria-label-attribut for at angive et navn og en rolle="knap" for at definere dens rolle i tilgængelighedstræet. Derudover kan du bruge attributten aria-pressed til at angive til/ fra-tilstanden .

<svg role=”button” aria-label=”Bullets” aria-pressed=”true”
	tabindex=”0” xmlns=”http://www.w3.org/2000/svg” width=”32”
	height=”32” viewBox=”0,0,2048,2048”>
		<!-- paths -->
	</svg>

Name    Bullets
Role      button
Value    ToggleState_On

Ressourcer

• Automatisering af ARIA og brugergrænseflade i Microsoft Edge
• oversigt overWAI-ARIA
• Vejledning til ARIA-oprettelsespraksis

Alternative kontrolelementer

I sjældne tilfælde skal du muligvis oprette en alternativ repræsentation, men dette bør være en sidste udvej. Dette omfatter oprettelse af separate elementer for det, der gengives på siden, i forhold til det, der vises i tilgængelighedstræet for skærmlæsere. Du kan f.eks. bruge** aria-hidden="true"** til at skjule et element fra tilgængelighedstræet, mens det stadig vises på siden.

<!- - visible on page, but not to screen reader  - - >
<div aria-hidden=”true”>
</div>

<!- - visible to screen reader, but not on page  - - >
,div class=”srOnly” role=”menu” aria-label=”More options”>
</div>

Tilstræber altid at skabe en harmonisk oplevelse mellem det gengivne indhold og skærmlæseroplevelsen, da nogle brugere af skærmlæsere har et vist syn og bruger det sammen med skærmlæseren eller lejlighedsvist søger hjælp fra seende kolleger.

Hvis du vil gøre et element, der ikke er synligt på siden, men stadig er inkluderet i tilgængelighedstræet, kan du bruge CSS-teknikker som f.eks. at placere elementet uden for skærmen eller klippe det ud. Men brug af visning: ingen eller synlighed: skjult fungerer ikke, da browsere udelukker disse elementer fra tilgængelighedstræet. Det er vigtigt at angive navn, rolle og værdi for elementer korrekt for at sikre, at de er tilgængelige.

Navn

Navnet kan defineres ved hjælp af attributter som aria-labeledby, aria-label, indholdet af en <mærkat> eller alt-attributten, hvis det er en <img>- eller inputtype="billede". Du kan også bruge indholdet af koden, titelattributten , attributten aria-describedby eller attributten aria-description . De sidste tre er reserveindstillinger, hvis ingen af de andre er angivet. Dette giver prioritetsrækkefølgen til beregning af navnet.

• Et godt navn til et element bør ideelt set bruge den synlige mærkat. Et skalakontrolelement til angivelse af højden på en række i en tabel skal f.eks. bruge "tabelrækkehøjde" i stedet for blot "højde" for at give mere kontekst.
• Medtag altid den synlige etiket i navnet for at sikre konsistens mellem skærmen og skærmlæseren.
• Undgå at medtage kontrolelementtypen (f.eks. "spin control") i navnet, da dette er udtrykt i rollen.
• Sørg for, at navnene er korte for at sikre effektiviteten for brugere af skærmlæsere, og vis intervallet af tilladte værdier i andre egenskaber.
• I forbindelse med billeder skal du undgå at bruge irrelevante detaljer i alternativ tekst. Angiv i stedet kontekstafhængigt relevante beskrivelser, f.eks. "Person, der præsenterer på podiet med billedtekster på skærmen.".
• Hvis et billede ikke er vigtigt for forståelsen af indholdet, skal du bruge alt="" til at udelukke det fra tilgængelighedstræet, men aldrig udelade alt-attributten helt.

Rolle

Rollen for et element bestemmes af rolleattributten , hvis den er angivet. Den bestemmes af typeattributten , hvis den ikke er angivet, og du bruger en <inputkode> . For andre typer mærker (<img>, <en>, <knap> osv.) bestemmes det af typen af tag.

Værdi

Værdien refererer til egenskaber som aria-checked, aria-pressed, aria-expanded, aria-selected og aria-disabled, afhængigt af kontrolelementtypen. I <forbindelse med inputkoder> bruges den markerede eller deaktiverede attribut, og for links, der bruger <en> kode, bruges href-attributten .

En korrekt definition af disse egenskaber sikrer, at hjælpeteknologier kan fortolke og interagere præcist med elementerne.

Ressource

CSS i aktion: Usynligt indhold kun for brugere af skærmlæsere

Angiver sprog

For at sikre, at vores apps er tilgængelige for brugere over hele verden, lokaliserer vi dem på flere sprog. Dette omfatter lokalisering af alle navne, der vises for skærmlæseren, som skal hentes fra oversatte ressourcer. Skærmlæsere kan læse tekst på forskellige sprog, men appen skal angive sproget for hvert element ved hjælp af attributten lang . Angiv sproget for hele siden ved hjælp af lang-attributten for HTML-koden. Angiv derefter sproget for de enkelte elementer, hvor sproget adskiller sig fra det overordnede. Dette sikrer, at skærmlæsere udtaler teksten korrekt. Da lang'et er nedarvet fra det overordnede, skal du kun gøre dette på mærker, hvor du bruger et andet sprog end det overordnede sprog. Så hvis hele brugeroplevelsen er på samme sprog, skal du kun angive den én gang i HTML-koden.

<p lang="en-us">This is English text</p>
<p lang="fr-fr">C'est Français texte</p>
<p lang="zh-cn">&#36825;&#26159;&#20013;&#25991;&#30430;</p>

Specify the lang attribute on the <html> tag
Specify the lang attribute on any tag that uses a different language than its parent
Narrator reads the text in each language properly
If lang attribute is specified
And Text-to-Speech is installed for that language

To (2) ting skal være på plads, for at Oplæser kan læse teksten på det korrekte sprog: attributten lang og brugeren skal installere tekst til tale for disse sprog. Det ville de typisk have gjort for de sprog, de arbejder med, men når du tester disse scenarier, skal du sørge for at installere tekst-til-tale for disse sprog først. Korrekt angivelse af sproget hjælper skærmlæsere med at levere nøjagtig og effektiv navigation for brugerne.