Dela via

Krav för tillgänglig text

Det här avsnittet beskriver metodtips för tillgänglighet av text i en app genom att se till att färger och bakgrunder uppfyller det nödvändiga kontrastförhållandet. I det här avsnittet beskrivs även de Microsoft UI Automation-roller som textelement i en UWP-app (Universal Windows Platform) kan ha och metodtips för text i grafik.

Kontrastförhållanden

Även om användarna alltid har möjlighet att växla till ett högkontrastläge bör appdesignen för text betrakta det alternativet som en sista utväg. En mycket bättre metod är att se till att din apptext uppfyller vissa etablerade riktlinjer för kontrastnivån mellan text och dess bakgrund. Utvärderingen av kontrastnivån baseras på deterministiska tekniker som inte tar hänsyn till färgton. Om du till exempel har röd text på en grön bakgrund kanske texten inte kan läsas för någon med nedsatt färgblindhet. Om du kontrollerar och korrigerar kontrastförhållandet kan du förhindra dessa typer av tillgänglighetsproblem.

Rekommendationerna för textkontrast som dokumenteras här baseras på en webbtillgänglighetsstandard, G18: Se till att det finns ett kontrastförhållande på minst 4,5:1 mellan text (och bilder av text) och bakgrunden bakom texten. Den här vägledningen finns i W3C-teknikerna för WCAG 2.0-specifikationen .

För att anses tillgänglig måste synlig text ha ett minsta ljusstyrkakontrastförhållande på 4,5:1 mot bakgrunden. Undantag inkluderar logotyper och tillfällig text, till exempel text som ingår i en inaktiv användargränssnittskomponent.

Text som är dekorativ och förmedlar ingen information utesluts. Om slumpmässiga ord till exempel används för att skapa en bakgrund, och orden kan ordnas om eller ersättas utan att ändra innebörd, anses orden vara dekorativa och behöver inte uppfylla det här kriteriet.

Använd färgkontrastverktyg för att kontrollera att det synliga textkontrastförhållandet är acceptabelt. Se Tekniker för WCAG 2.0 G18 (avsnittet Resurser) för verktyg som kan testa kontrastförhållanden.

Anmärkning

Vissa av de verktyg som anges i Tekniker för WCAG 2.0 G18 kan inte användas interaktivt med en UWP-app. Du kan behöva ange förgrunds- och bakgrundsfärgvärden manuellt i verktyget, eller göra skärmdumpar av appgränssnittet och sedan köra verktyget kontrastförhållande över skärmbilden.

Textelementroller

En UWP-app kan använda dessa standardelement (kallas ofta textelement eller textredigerare):

När en kontrollrapporter som har rollen Redigera förutsätter hjälpmedelstekniker att det finns sätt för användare att ändra värdena. Så om du placerar statisk text i en textruta rapporteras rollen felaktigt och därmed felrapporterar appens struktur till hjälpmedelsanvändaren.

I textmodellerna för XAML finns det två element som främst används för statisk text, TextBlock och RichTextBlock. Ingen av dessa är en Kontroll-underklass , och som sådan är ingen av dem tangentbordsfokuserad eller kan visas i tabbordningen. Men det betyder inte att hjälpmedelstekniker inte kan eller inte läser dem. Skärmläsare är vanligtvis utformade för att stödja flera lägen för att läsa innehållet i en app, inklusive ett dedikerat läsläge eller navigeringsmönster som går utöver fokus och tabbordningen, som en "virtuell markör". Så placera inte din statiska text i fokusbara containrar bara så att tabbordningen hämtar användaren dit. Användare av hjälpmedelsteknik förväntar sig att allt i tabbordningen är interaktivt, och om de stöter på statisk text där är det mer förvirrande än användbart. Du bör testa detta själv med Skärmläsaren för att få en uppfattning om användarupplevelsen med din app när du använder en skärmläsare för att undersöka appens statiska text.

Föreslå hjälpmedel automatiskt

När en användare skriver in i ett postfält och en lista med potentiella förslag visas kallas den här typen av scenario för auto-suggest. Detta är vanligt i raden Till: i ett e-postfält, sökrutan Cortana i Windows, FÄLTET URL-post i Microsoft Edge, platsinmatningsfältet i appen Väder och så vidare. Om du använder en XAML AutosuggestBox eller html-inbyggda kontroller är den här upplevelsen redan ansluten för dig som standard. Om du vill göra den här upplevelsen tillgänglig måste postfältet och listan vara associerade. Detta förklaras i avsnittet Implementera automatisk förslag .

Skärmläsaren har uppdaterats för att göra den här typen av upplevelse tillgänglig med ett särskilt förslagsläge. När redigeringsfältet och listan är korrekt anslutna på hög nivå kommer slutanvändaren att:

  • Vet att listan finns och när listan stängs
  • Ta reda på hur många förslag som är tillgängliga
  • Känna till det markerade objektet, om det finns
  • Kunna flytta Skärmläsarens fokus till listan
  • Kunna navigera genom ett förslag med alla andra läslägen

Förslagslista
Exempel på en förslagslista

Implementera automatisk förslag

För att göra den här upplevelsen tillgänglig måste startfältet och listan vara associerad i UIA-trädet. Den här associationen görs med egenskapen UIA_ControllerForPropertyId i skrivbordsappar eller egenskapen ControlledPeers i UWP-appar.

På hög nivå finns det två typer av automatiska förslag.

Standardval
Om ett standardval görs i listan letar Skärmläsaren efter en UIA_SelectionItem_ElementSelectedEventId händelse i en skrivbordsapp eller händelsen AutomationEvents.SelectionItemPatternOnElementSelected som ska utlöses i en UWP-app. Varje gång markeringen ändras, när användaren skriver en annan bokstav och förslagen har uppdaterats eller när en användare navigerar i listan, ska händelsen ElementSelected utlöses.

Lista med en standardmarkering
Exempel där det finns ett standardval

Inget standardval
Om det inte finns något standardval, till exempel i väderappens platsruta, letar Skärmläsaren efter skrivbordshändelsen UIA_LayoutInvalidatedEventId eller UWP LayoutInvalidated-händelsen som ska aktiveras i listan varje gång listan uppdateras.

Lista utan standardval
Exempel där det inte finns någon standardmarkering

XAML-implementering

Om du använder standard-XAML AutosuggestBox är allt redan anslutet åt dig. Om du skapar en egen automatisk förslagsupplevelse med hjälp av en textruta och en lista måste du ange listan som AutomationProperties.ControlledPeers i textrutan. Du måste utlösa händelsen AutomationPropertyChanged för egenskapen ControlledPeers varje gång du lägger till eller tar bort den här egenskapen och även utlösa dina egna SelectionItemPatternOnElementSelected-händelser eller LayoutInvaliderade händelser beroende på din typ av scenario, som beskrevs tidigare i den här artikeln.

HTML-implementering

Om du använder de inbyggda kontrollerna i HTML har UIA-implementeringen redan mappats åt dig. Nedan visas ett exempel på en implementering som redan är ansluten till dig:

<label>Sites <input id="input1" type="text" list="datalist1" /></label>
<datalist id="datalist1">
        <option value="http://www.google.com/" label="Google"></option>
        <option value="http://www.reddit.com/" label="Reddit"></option>
</datalist>

Om du skapar egna kontroller måste du konfigurera egna ARIA-kontroller, som beskrivs i W3C-standarderna.

Text i grafik

Undvik att inkludera text i en bild när det är möjligt. Till exempel är all text som du tar med i bildkällans fil som visas i appen som ett bildelement inte automatiskt tillgänglig eller läsbar av hjälpmedelstekniker. Om du måste använda text i grafik kontrollerar du att det AutomationProperties.Name värde som du anger som motsvarighet till "alternativtext" innehåller texten eller en sammanfattning av textens betydelse. Liknande överväganden gäller om du skapar texttecken från vektorer som en del av en sökväg eller med hjälp av glyfer.

Textteckensnittsstorlek och skala

Användare kan ha svårt att läsa text i en app när teckensnitten är helt enkelt för små, så se till att all text i programmet är en rimlig storlek.

När du har gjort det uppenbara innehåller Windows olika hjälpmedelsverktyg och inställningar som användarna kan dra nytta av och anpassa efter sina egna behov och inställningar för att läsa text. Dessa inkluderar:

  • Förstoringsverktyget, som förstorar ett markerat område i användargränssnittet. Du bör se till att layouten för text i din app inte gör det svårt att använda Förstoringsglaset för läsning.
  • Globala skalnings- och upplösningsinställningar i Settings-System-Display-Scale>>> och layout. Exakt vilka storleksalternativ som är tillgängliga kan variera eftersom detta beror på funktionerna i visningsenheten.
  • Inställningar för textstorlek i Inställningar –> Enkel åtkomstvisning>. Justera inställningen Gör texten större om du bara vill ange textstorleken i stödkontroller i alla program och skärmar (alla UWP-textkontroller stöder textskalningsupplevelsen utan anpassning eller templating).

Anmärkning

Med inställningen Gör allt större kan en användare ange önskad storlek för text och appar i allmänhet endast på den primära skärmen.

Olika textelement och kontroller har egenskapen IsTextScaleFactorEnabled . Den här egenskapen har värdet true som standard. När det är sant kan storleken på texten i det elementet skalas. Skalningen påverkar text som har en liten FontSize i högre grad än den påverkar text som har en stor FontSize. Du kan inaktivera automatisk storleksändring genom att ange egenskapen IsTextScaleFactorEnabled för ett element till false.

Mer information finns i Textskalning .

Lägg till följande markering i en app och kör den. Justera inställningen Textstorlek och se vad som händer med varje TextBlock.

XAML

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been left set to its default value of true."
    Style="{StaticResource BodyTextBlockStyle}"/>

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been set to false."
    Style="{StaticResource BodyTextBlockStyle}" IsTextScaleFactorEnabled="False"/>

Vi rekommenderar inte att du inaktiverar textskalning eftersom skalning av användargränssnittstext universellt i alla appar är en viktig hjälpmedelsupplevelse för användarna.

Du kan också använda händelsen TextScaleFactorChanged och egenskapen TextScaleFactor för att ta reda på om ändringar i inställningen Textstorlek på telefonen. Så här gör du:

C#

{
    ...
    var uiSettings = new Windows.UI.ViewManagement.UISettings();
    uiSettings.TextScaleFactorChanged += UISettings_TextScaleFactorChanged;
    ...
}

private async void UISettings_TextScaleFactorChanged(Windows.UI.ViewManagement.UISettings sender, object args)
{
    var messageDialog = new Windows.UI.Popups.MessageDialog(string.Format("It's now {0}", sender.TextScaleFactor), "The text scale factor has changed");
    await messageDialog.ShowAsync();
}

Värdet för TextScaleFactor är en dubbel i intervallet [1,2.25]. Den minsta texten skalas upp med den här mängden. Du kanske kan använda värdet för att till exempel skala grafik för att matcha texten. Men kom ihåg att inte all text skalas av samma faktor. Generellt sett är den större texten att börja med, desto mindre påverkas den av skalning.

Dessa typer har egenskapen IsTextScaleFactorEnabled :

Examples

Öppna WinUI 3-galleriappen och se stöd för texttillgänglighet i praktiken

WinUI 3-galleriappen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store eller hämta källkoden på GitHub

  • Last updated on