Toegankelijkheid in Silverlight

Er bestaan veel verschillende beperkingen. Het volgen van een aantal standaard richtlijnen zorgt er voor dat aan de meeste vereisten voor toegankelijkheid voldaan kan worden. Dit betekent bij de bouw van Silverlight applicaties het volgende:

  • Ondersteuning voor invoer via het toetsenbord en schermlezers.
  • Ondersteuning voor aanpassingen door gebruikers, bijvoorbeeld van lettertype, grootte, kleur en contrast.
  • Alternatieven of aanvullingen voor het delen van de interface.

De Silverlight-bibliotheek met besturingselementen bevat ingebouwde toetsenbordondersteuning en ondersteuning voor schermlezers. Deze maken voor HTML en andere UI-technologie gebruik van reeds bestaande toegankelijkheidsframeworks. Deze ingebouwde ondersteuning zorgt voor een basisniveau van toegankelijkheid die eenvoudig aan te passen is door een aantal eigenschappen in te stellen. Dit kan ook voor eigen, aangepaste besturingselementen, hoewel dit weliswaar iets moeilijker te realiseren is.

Dankzij de systemen voor gegevensbinding, stijl en sjablonen in Silverlight is de ondersteuning voor weergave-instellingen van gebruikers en alternatieve UI's eenvoudig te implementeren. Silverlight bevat ook API's waarmee mediabestanden bewerkt kunnen worden, en alternatieve nummers en ondertiteling gebruikt kan worden.

Deze pagina bevat een overzicht van de toegankelijkheidsondersteuning in Silverlight en beschrijft hoe deze gebruikt kan worden.

Ondersteunende technologie

Ondersteunende technologieën bestaan uit een grote verscheidenheid aan software en hardware. Deze producten werken via de standaardtoetsenbordinterface en de toegankelijkheidsframeworks die gegevens over de inhoud en structuur van een UI doorgeven aan schermlezers en andere ondersteunende technologieproducten. Voorbeelden van ondersteunende technologieproducten zijn:

  • Software voor schermtoetsenborden, zodat in plaats van een toetsenbord een muis kan worden gebruikt.
  • Spraakherkenningssoftware, waarmee gesproken taal wordt omgezet in getypte tekst.
  • Schermlezers, die tekst omzetten naar gesproken tekst of andere taalvormen, zoals Braille.

Applicaties met de juiste ondersteuning voor toetsenborden en schermlezers werken meestal goed met een groot aantal ondersteunende technologieproducten. Meestal werkt Silverlight goed met veel van deze meegeleverde producten.

Toetsenbordondersteuning

Voor goede toetsenbordondersteuning moet u controleren of elk deel van uw applicatie met een toetsenbord kan worden gebruikt. Als in uw applicatie veel standaardbesturingselementen worden gebruikt, bent u al op de goede weg. De Silverlight-bibliotheek met besturingselementen bevat ingebouwde toetsenbordondersteuning, inclusief tabtoetsnavigatie en tekstinvoer, en besturingselementondersteuning, zoals navigatie met pijltoetsen tussen de items in een ListBox en de cellen in een DataGrid.

Navigatie met tabtoets

Als u het toetsenbord wilt gebruiken met een besturingselement, moet dit element invoerfocus hebben. Een besturingselement kan alleen invoerfocus krijgen (zonder gebruik van de muis) via navigatie met de tabtoets. Standaard is de tabvolgorde van besturingselementen dezelfde als de volgorde waarin de besturingselementen worden toegevoegd aan een ontwerpoppervlak, waarin ze worden vermeld in XAML, of waarin ze via een programma worden toegevoegd aan een container.

Meestal is de standaardvolgorde de beste volgorde, vooral omdat dat de volgorde is waarin de besturingselementen worden gelezen in schermlezers. De standaardvolgorde komt niet noodzakelijk overeen met de visuele volgorde. De werkelijke weergavepositie is afhankelijk van het Panel waarin het besturingselement staat en de waarden van eigenschappen zoals Margin, Canvas.Top en Canvas.Left, of Grid.Row en Grid.Column.

U kunt instellen dat de tabvolgorde overeenkomt met de visuele volgorde door de XAML aan te passen of u kunt de standaardtabvolgorde overschrijven door de eigenschap TabIndex in te stellen. Dit wordt aangegeven in het volgende voorbeeld van een Grid-indeling waarin tabnavigatie in kolommen wordt gebruikt.

<Grid>
   <Grid.RowDefinitions>...</Grid.RowDefinitions>
   <Grid.ColumnDefinitions>...</Grid.ColumnDefinitions>

   <TextBlock Grid.Column="1" HorizontalAlignment="Center">Groom</TextBlock >
   <TextBlock Grid.Column="2" HorizontalAlignment="Center">Bride</TextBlock>

   <TextBlock Grid.Row="1">First name</TextBlock>
   <TextBox x:Name="GroomFirstName" Grid.Row="1" Grid.Column="1" TabIndex="1"/>
   <TextBox x:Name="BrideFirstName" Grid.Row="1" Grid.Column="2" TabIndex="3"/>

   <TextBlock Grid.Row="2">Last name</TextBlock>
   <TextBox x:Name="GroomLastName" Grid.Row="2" Grid.Column="1" TabIndex="2"/>
   <TextBox x:Name="BrideLastName" Grid.Row="2" Grid.Column="2" TabIndex="4"/>
</Grid>

Bij navigatie met de tabtoets worden alle besturingselementen in zowel de hostbrowser als de applicatie doorlopen, en wordt deze cyclus steeds herhaald. Gebruikers kunnen ook in omgekeerde volgorde navigeren met de toetsen Shift+Tab.

Als u een besturingselement uit de tabvolgorde wilt verwijderen, kunt u de eigenschap IsTabStop instellen op false. Dit doet u echter alleen als u een besturingselement niet-interactief wilt maken, bijvoorbeeld door de eigenschap IsEnabled van dit element in te stellen op false. Hiermee verwijdert u het besturingselement uit de tabvolgorde.

Toetsenbordalternatieven voor muisgebeurtenissen

Als u interacties met de muis implementeert, moet u ook een zelfde soort toetsenbordinteractie implementeren. Als u het toetsenbord ook met een UI-element wilt gebruiken, moet het desbetreffende element invoerfocus hebben. Alleen klassen die zijn afgeleid van Control bieden ondersteuning voor invoerfocus en tabnavigatie.

Als u zelf een besturingselement maakt, stelt u de eigenschap IsTabStop in op true om de invoerfocus te activeren. Gebruik de klasse VisualStateManager om de focus zichtbaar te maken. Het is echter vaak eenvoudiger om de besturingselementen te maken in Silverlight.

In plaats van een muisgebeurtenis op een Image in te stellen, kunt u de gebeurtenis ook koppelen aan een Button waardoor u automatisch beschikt over ondersteuning voor muis, toetsenbord en focus. Dit wordt in het volgende voorbeeld gedemonstreerd.

<Button Click="Button_Click"><Image Source="sample.jpg"/></Button>

Sneltoetsen

Navigatie met de tabtoets biedt toetsenbordondersteuning op basisniveau, maar in complexe formulieren hebt u meer aan ondersteuning voor sneltoetsen. Hiermee maakt u uw applicatie efficiënter in gebruik, zelfs voor mensen die met toetsenbord én muis werken. Silverlight biedt niet het soort ingebouwde ondersteuning voor sneltoetsen als WPF (Windows Presentation Foundation) of Windows Forms. Een probleem met sneltoetsen in Silverlight is dat veel toetscombinaties worden onderschept door de hostbrowser of het besturingssysteem. Bovendien worden met browserupdates nieuwe sneltoetsen toegevoegd, waardoor onverwachte conflicten kunnen ontstaan.

Het is mogelijk ondersteuning voor eigen sneltoetsen te implementeren, maar dan moet u de sneltoetsen in alle ondersteunde browsers testen. U kunt conflicten vermijden door geen wijzigingstoetsen te gebruiken, zoals Ctrl, Shift en Alt. In sommige gevallen, zoals in applicaties voor gegevensinvoer, is dit echter niet handig. Als u wel wijzigingstoetsen wilt gebruiken, is het een mogelijkheid om een out-of-browserinstallatie verplicht te stellen, hoewel u ook dan de Alt-toets niet kunt gebruiken. Een andere mogelijkheid is om toetsaanslagen te gebruiken die minder waarschijnlijk conflicten veroorzaken, zoals nummertoetsen in combinatie met Ctrl+Shift. Gebruik van nummertoetsen is ook handig om potentiële problemen met taalgebonden lettertoetsen in gelokaliseerde applicaties te voorkomen.

Vergeet niet de sneltoetsen in uw applicatie te documenteren zodat gebruikers weten van het bestaan ervan. U kunt bijvoorbeeld knopinfo leveren bij een knop waaraan een sneltoets is gekoppeld. U kunt ook de conventie van onderstreepte letters in besturingselementlabels gebruiken. Deze sneltoetsen worden ook toegangstoetsen of mnemonics genoemd. Vergeet niet dat knopinfo alleen met een muis kan worden gelezen, en dat knopinfo en onderstreepte letters niet worden gemeld in schermlezers.

U kunt lettertoetsen documenteren in schermlezers door de eigenschap AutomationProperties.AccessKey in te stellen op een reeks die de sneltoets beschrijft. Er is ook een gekoppelde eigenschap AutomationProperties.AcceleratorKey voor het documenteren van sneltoetsen die geen onderstreepte letter hebben, hoewel in schermlezers beide eigenschappen op dezelfde manier worden verwerkt. U kunt sneltoetsen het beste op verschillende manieren documenteren, bijvoorbeeld met knopinfo, automatiseringseigenschappen en geschreven Help-teksten.

In het volgende voorbeeld ziet u sneltoetsen voor de knoppen Play, Pause en Stop.

<MediaElement x:Name="Movie" Source="sample.wmv"
AutoPlay="False" Width="320" Height="240"/>

   <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

      <Button x:Name="Play" Margin="1,2"
         ToolTipService.ToolTip="shortcut key: P"
         AutomationProperties.AccessKey="P">
         <TextBlock><Underline>P</Underline>lay</TextBlock>
      </Button>

      <Button x:Name="Pause" Margin="1,2"
         ToolTipService.ToolTip="shortcut key: A"
         AutomationProperties.AccessKey="A">
         <TextBlock>P<Underline>a</Underline>use</TextBlock>v       </Button>

      <Button x:Name="Stop" Margin="1,2"
         ToolTipService.ToolTip="shortcut key: S"
         AutomationProperties.AccessKey="S">
         <TextBlock><Underline>S</Underline>top</TextBlock>
      </Button>

</StackPanel>

En in C#:

public MainPage()
{
   InitializeComponent();
   Play.Click += (sender, e) => Movie.Play();
   Pause.Click += (sender, e) => Movie.Pause();
   Stop.Click += (sender, e) => Movie.Stop();
   LayoutRoot.KeyDown += (sender, e) =>
   {
      switch (e.Key)
      {
         case Key.P: Movie.Play(); break;
         case Key.A: Movie.Pause(); break;
         case Key.S: Movie.Stop(); break;
      }
   };
}

Silverlight plug-in focus

Een ander probleem met sneltoetsen in Silverlight is dat Silverlight geen toetsaanslagen kan ontvangen als de plug-in Silverlight zelf geen invoerfocus heeft. Als de Silverlight plug-in slechts een deel van een webpagina met andere inhoud beslaat, moeten gebruikers de plug-in activeren met de tabtoets of op de plug-in klikken voordat ze het toetsenbord kunnen gebruiken.

Ondersteuning voor schermlezers

Schermlezers geven toegang tot tekst in een applicatie door deze in een andere indeling weer te geven, zoals gesproken taal of Braille. De exacte werking van een schermlezer is afhankelijk van de software en de gebruikersconfiguratie van de software.

In sommige schermlezers wordt bijvoorbeeld de hele applicatie-UI gelezen als de gebruiker de applicatie start of daarnaar overschakelt. Op die manier ontvangt de gebruiker alle beschikbare informatie voordat navigatie met de tabtoets wordt gebruikt. In sommige schermlezers wordt ook de tekst die aan een bepaald besturingselement is gekoppeld gelezen wanneer dit element tijdens navigatie met de tabtoets de focus krijgt. Hierdoor kunnen gebruikers zich oriënteren tijdens navigatie door de invoerbesturingselementen van een applicatie. Verteller is een voorbeeld van een schermlezer die beide gebruiksfuncties heeft.

Er zijn ook schermlezers waarin de tekst van een applicatie alleen tijdens de navigatie met de tabtoets wordt gelezen. Zorg er daarom voor dat alle belangrijke informatie in uw UI deel uitmaakt van een besturingselement dat de focus kan krijgen. In plaats van een TextBlock te gebruiken voor het overdragen van applicatie-instructies in uw UI, kunt u ook een TextBox of RichTextBox gebruiken, met de eigenschap IsReadOnly ingesteld op true. Hierdoor kan het besturingselement de focus krijgen en wordt tegelijkertijd invoer door de gebruiker voorkomen.

Voor de ondersteuning van schermlezers moet u tekstalternatieven bieden voor niet-tekstuele informatie in de UI, zoals afbeeldingen en grafieken, met uitzondering van puur decoratieve of structuurelementen. Hiertoe kunt u de eigenschap AutomationProperties.Name als volgt instellen:

<Image Source="product.png" AutomationProperties.Name="An image of a customer using the product."/>

Voor de ondersteuning van schermlezers waarin tekst alleen tijdens navigatie met de tabtoets wordt gelezen, moet u ook een ondertitel leveren met een techniek zoals de alleen-lezen TextBox. U kunt ook een aangepast besturingselement maken waarmee invoerfocus mogelijk is bij het weergeven van niet-interactieve inhoud, of u kunt een alternatieve UI bij een gebruikersinstelling maken, zoals verderop wordt beschreven.

Instellingen voor kleur en contrast

Veel gebruikers maken moeilijk onderscheid tussen bepaalde kleuren of kunnen UI-elementen met heldere kleuren of weinig contrast slecht zien. Om die reden is het raadzaam om een optie te implementeren waarmee de standaardkleuren kunnen worden gewijzigd, of ten minste een hoger contrast kan worden ingesteld.

Als gebruikers een hoog contrast instellen op het niveau van het besturingssysteem, moet uw applicatie daarop reageren door automatisch over te schakelen naar de hoog-contrastmodus. Hiertoe kunt u de eigenschap SystemParameters.HighContrast inschakelen wanneer uw UI wordt geladen. Uw applicatie kan echter niet automatisch wijzigingen van deze eigenschap detecteren. Zorg daarom dat u niet alleen de eigenschap in het besturingssysteem inschakelt, maar ook uw eigen UI toevoegt.

Een andere mogelijkheid is het thema Systeemkleuren uit de Silverlight-toolkit te gebruiken. Dit thema past automatisch de huidige systeemkleuren (inclusief de hoog-contrastkleuren) toe op de besturingselementen uit Silverlight en de toolkit. Zie de Silverlight-toolkit voor meer informatie.

Media en ondertiteling

Silverlight geeft audiovisuele media weer via de klasse MediaElement. Gebruik leden van deze klasse om het afspelen van de media te sturen. De toegankelijkheid kunt u realiseren door besturingselementen te bieden waarmee gebruikers de media naar behoefte kunnen afspelen, pauzeren en stoppen. Een voorbeeld hiervan vindt u in het gedeelte over het toetsenbord eerder in deze introductietour.

Als uw applicatie audio- of audiovisuele media bevat, kunt u zorgen voor tekst of ondertiteling voor mensen met een gehoorbeperking. De ondertiteling kunt u rechtstreeks aan de mediabestanden toevoegen met hulpprogramma's zoals de Expression Encoder.

Ondertiteling die deel uitmaakt van de mediastroom, wordt open caption-ondertiteling genoemd. Hiermee hoeft u niets te doen in de applicatie. Optionele ondertiteling wordt closed caption-ondertiteling genoemd. Deze kunt u in de applicatie weergeven met behulp van code. Bijvoorbeeld in XAML:

<MediaElement x:Name="media" Width="300" Height="200" MarkerReached="OnMarkerReached" Source="media.wmv"/>

En in C#:

public void OnMarkerReached(object sender,
   TimelineMarkerRoutedEventArgs e)
{
   CaptionTextBlock.Text = e.Marker.Text;
}

U kunt ook alternatieve audiostromen toevoegen aan uw mediabestanden met een hulpprogramma zoals Expression Encoder. Deze stromen kunt u gebruiken voor het bieden van gesproken commentaar, inclusief beschrijvingen van de videostroom voor gebruik door slechtzienden. Voor deze alternatieve stromen gebruikt u de eigenschappen AudioStreamCount en AudioStreamIndex van de klasse MediaElement.

Algemene ontwerprichtlijnen

In Silverlight kunt u complexe en visueel aantrekkelijke UI-elementen maken, maar deze elementen zijn vaak niet goed toegankelijk. In het algemeen geldt dat u al in de ontwerpfase van uw applicaties rekening moet houden met gebruikers die een bewegingsbeperking, een visuele beperking of een gehoorbeperking hebben. Omdat ondersteunende technologieproducten uitgebreid gebruik maken van UI-interfaces, is het erg belangrijk om goede ondersteuning voor toetsenborden en schermlezers te bieden, ook als u geen andere aanpassingen maakt ten behoeve van de toegankelijkheid.

In veel gevallen kunt u diverse technieken gebruiken voor het overbrengen van belangrijke informatie om uw bereik te vergroten. Voor mensen die kleurenblind zijn kunt u informatie bijvoorbeeld markeren met symbolen, en slechthorenden zullen gebaat zijn bij visuele waarschuwingen bij geluidssignalen.

Indien nodig kunt u ook alternatieve, toegankelijke UI-elementen bieden waaruit overbodige elementen en animatie zijn verwijderd, en andere vereenvoudigingen doorvoeren om de gebruikservaring te verhogen. De volgende code laat zien hoe een exemplaar van een UserControl in plaats van een ander exemplaar kan worden weergegeven, afhankelijk van de gebruikersinstelling.

In XAML:

<StackPanel x:Name="LayoutRoot" Background="White">
   <CheckBox x:Name="ShowAccessibleUICheckBox" Click="ShowAccessibleUICheckBox_Click">
      Show Accessible UI
   </CheckBox>
   <UserControl x:Name="ContentBlock">
      <local :ContentPage/>
   </UserControl>
</StackPanel>

En in C#:

private void ShowAccessibleUICheckBox_Click(object sender, RoutedEventArgs e)
{
   if ((sender as CheckBox).IsChecked.Value)
   {
      ContentBlock.Content = new AccessibleContentPage();
   }
   else
   {
      ContentBlock.Content = new ContentPage();
   }
}

Heeft de informatie in dit artikel u geholpen?

Heeft u een vraag, opmerking of tip? Mail toegang@microsoft.com