Ułatwienia dostępu za pomocą klawiatury

Tworzenie ułatwień dostępu za pomocą klawiatury (w przypadku tradycyjnego, zmodyfikowanego lub emulacji klawiatury) w aplikacji zapewnia użytkownikom, którzy niewidomi, mają niską wzrok, niepełnosprawność ruchową lub nie mają ich rąk, możliwość przechodzenia przez aplikację i korzystania z pełnej funkcjonalności aplikacji. Ponadto użytkownicy bez niepełnosprawności mogą wybrać klawiaturę do nawigacji ze względu na preferencje lub wydajność.

Jeśli Aplikacja nie zapewnia dobrego dostępu za pomocą klawiatury, użytkownicy, którzy są ślepi lub mają problemy z mobilnością, mogą mieć trudności z korzystaniem z aplikacji.

Nawigacja za pomocą klawiatury między elementami interfejsu użytkownika

Aby wchodzić w interakcje z kontrolką przy użyciu klawiatury, kontrolka musi mieć fokus. Aby uzyskać fokus (bez użycia wskaźnika), kontrolka musi być dostępna za pośrednictwem nawigacji na karcie. Domyślnie kolejność tabulatorów kontrolek jest taka sama jak kolejność, w jakiej są dodawane do powierzchni projektowej, zadeklarowanej w języku XAML lub programowo dodawanej do kontenera.

Zazwyczaj domyślna kolejność tabulacji jest oparta na sposobie definiowania kontrolek w języku XAML, szczególnie w kolejności, w jakiej kontrolki są przesyłane przez czytniki zawartości ekranu. Jednak kolejność domyślna nie musi odpowiadać kolejności wizualizacji. Rzeczywiste położenie wyświetlania może zależeć od kontenera układu nadrzędnego i różnych właściwości elementów podrzędnych, które mogą mieć wpływ na układ.

Aby upewnić się, że aplikacja ma optymalną kolejność kart, przetestuj zachowanie samodzielnie. Jeśli używasz siatki lub tabeli dla układu, kolejność, w jakiej użytkownicy mogą odczytywać ekran, a kolejność tabulacji może być bardzo inna. Nie zawsze jest to problem, ale po prostu upewnij się, że funkcja aplikacji jest testowana za pomocą dotyku i klawiatury, aby sprawdzić, czy interfejs użytkownika jest zoptymalizowany pod kątem obu metod wejściowych.

Kolejność tabulacji jest zgodna z kolejnością wizualizacji przez dostosowanie kodu XAML lub zastąpienie domyślnej kolejności tabulacji. W poniższym przykładzie pokazano, jak używać właściwości TabIndex z układem siatki , który używa nawigacji na karcie pierwsza kolumna.

<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>

W niektórych przypadkach możesz wykluczyć określoną kontrolkę z kolejności tabulacji. Jest to zwykle realizowane przez ustawienie właściwości IsEnabled na wartość false przez ustawienie kontrolki nieinteraktywnej. Wyłączona kontrolka jest automatycznie wykluczana z kolejności tabulacji.

Jeśli chcesz wykluczyć interaktywną kontrolkę z kolejności tabulacji, możesz ustawić właściwość IsTabStop na false.

Domyślnie elementy interfejsu użytkownika, które obsługują fokus, są zwykle uwzględniane w kolejności tabulacji. Niektóre wyjątki w tym obejmują niektóre typy wyświetlania tekstu (takie jak RichTextBlock), które obsługują fokus na potrzeby zaznaczenia tekstu i dostępu do schowka, ale nie są w kolejności tabulacji, ponieważ są to statyczne elementy tekstowe. Te kontrolki nie są konwencjonalne interakcyjne (nie można ich wywołać i nie wymagają wprowadzania tekstu, ale obsługują wzorzec kontrolki Tekst , który obsługuje znajdowanie i dostosowywanie punktów zaznaczenia w tekście). Kontrolki tekstu będą nadal wykrywane przez technologie pomocnicze i odczytywane na głos w czytnikach zawartości ekranu, ale opierają się na technikach innych niż kolejność tabulacji.

Niezależnie od tego, czy dostosowujesz wartości TabIndex , czy używasz kolejności domyślnej, obowiązują następujące reguły:

• Jeśli właściwość TabIndex nie jest ustawiona dla elementu, wartość domyślna to Int32.MaxValue , a kolejność tabulacji jest oparta na kolejności deklaracji w kolekcjach XAML lub podrzędnych.
• Jeśli właściwość TabIndex jest ustawiona na element:
  • Elementy interfejsu użytkownika z indeksem TabIndex równym 0 są dodawane do kolejności tabulacji na podstawie kolejności deklaracji w kolekcjach XAML lub podrzędnych.
  • Elementy interfejsu użytkownika z indeksem TabIndex większym niż 0 są dodawane do kolejności tabulacji na podstawie wartości TabIndex .
  • Elementy interfejsu użytkownika z indeksem TabIndex mniejszym niż 0 są dodawane do kolejności tabulacji i wyświetlane przed dowolną wartością zerową.

Poniższy fragment kodu przedstawia kolekcję elementów z różnymi ustawieniami TabIndex (B jest przypisywana wartość Int32.MaxValue lub 2147 483 647).

<StackPanel Background="#333">
  <StackPanel Background="#FF33FF">
    <Button>A</Button>
    <Button TabIndex="2147483647">B</Button>
    <Button>C</Button>
  </StackPanel>
  <StackPanel Background="#33FFFF">
    <Button TabIndex="1">D</Button>
    <Button TabIndex="1">E</Button>
    <Button TabIndex="0">F</Button>
  </StackPanel>
</StackPanel>

Spowoduje to wykonanie następującej kolejności tabulacji:

1. F
2. D
3. E
4. A
5. B
6. C

Nawigacja za pomocą klawiatury między okienkami aplikacji przy użyciu F6

Okienko aplikacji to logiczny obszar widocznego, powiązanego interfejsu użytkownika w oknie aplikacji (na przykład okienka przeglądarki Microsoft Edge obejmują pasek adresu, pasek zakładki, pasek karty i panel zawartości). F6 może służyć do nawigowania między tymi okienkami, gdzie można uzyskać dostęp do grup elementów podrzędnych przy użyciu standardowej nawigacji za pomocą klawiatury.

Chociaż nawigacja za pomocą klawiatury może zapewnić interfejs użytkownika zgodny z dostępem, interfejs użytkownika, który może być dostępny do użytku, często wymaga wykonania kilku dodatkowych kroków. Zazwyczaj obejmuje to następujące elementy:

• Nasłuchiwanie F6 w celu nawigowania między ważnymi sekcjami interfejsu użytkownika.
• Dodawanie skrótów klawiaturowych do typowych akcji w interfejsie użytkownika.
• Dodawanie kluczy dostępu do ważnych kontrolek w interfejsie użytkownika.

Zobacz Skróty klawiaturowe poniżej i Klucze dostępu , aby uzyskać więcej wskazówek dotyczących implementowania skrótów i kluczy dostępu.

Optymalizowanie pod kątem F6

F6 umożliwia użytkownikom klawiatury efektywne nawigowanie między okienkami interfejsu użytkownika bez przechodzenia przez potencjalnie setki kontrolek.

Na przykład F6 w przeglądarce Microsoft Edge jest przełączany między paskiem adresu, paskiem zakładki, paskiem karty i panelem zawartości. Ponieważ strona internetowa może mieć potencjalnie setki kontrolek z możliwością tabulacji, F6 może ułatwić użytkownikom klawiatury dostęp do paska kart i paska adresu bez używania skrótów specyficznych dla aplikacji.

Cykl karty F6 może również luźno odpowiadać punktom orientacyjnym lub nagłówkom w zawartości, choć nie musi dokładnie pasować. Język F6 powinien skupić się na dużych, odrębnych regionach w interfejsie użytkownika, natomiast punkty orientacyjne mogą być bardziej szczegółowe. Możesz na przykład oznaczyć pasek aplikacji i jego pole wyszukiwania jako punkty orientacyjne, ale uwzględnić tylko pasek aplikacji w cyklu F6.

Jeśli to możliwe, regiony w cyklu F6 powinny mieć dostępną nazwę: za pośrednictwem charakterystycznego elementu lub ręcznie dodając AutomationProperties.Name do elementu "root" regionu.

Shift-F6 powinien cyklicznie w przeciwnym kierunku.

Nawigacja za pomocą klawiatury w elemecie interfejsu użytkownika

W przypadku kontrolek złożonych ważne jest zapewnienie prawidłowej nawigacji wewnętrznej między zawartymi elementami. Kontrolka złożona może zarządzać aktualnie aktywnym elementem podrzędnym, aby zmniejszyć obciążenie związane ze wszystkimi elementami podrzędnym. Kontrolka złożona jest uwzględniana w kolejności tabulacji i obsługuje same zdarzenia nawigacji za pomocą klawiatury. Wiele złożonych kontrolek ma już wbudowaną wewnętrzną logikę nawigacji w ich obsługę zdarzeń. Na przykład przechodzenie za pomocą strzałki domyślnie jest włączone w kontrolkach ListView, GridView, ListBox i FlipView .

Alternatywy klawiatury dla akcji i zdarzeń wskaźnika dla określonych elementów kontrolki

Elementy interfejsu użytkownika, które można kliknąć, powinny być również wywoływane za pomocą klawiatury. Aby użyć klawiatury z elementem interfejsu użytkownika, element musi mieć fokus (tylko klasy pochodzące z kontrolki obsługi fokusu i nawigacji na kartach).

W przypadku elementów interfejsu użytkownika, które można wywołać, zaimplementuj programy obsługi zdarzeń klawiatury dla Spacja i Enter. Zapewnia to podstawową obsługę ułatwień dostępu za pomocą klawiatury i umożliwia użytkownikom dostęp do wszystkich interaktywnych elementów interfejsu użytkownika i aktywowanie funkcji przy użyciu tylko klawiatury.

Jeśli element nie obsługuje fokusu, możesz utworzyć własną kontrolkę niestandardową. W takim przypadku, aby włączyć fokus, należy ustawić właściwość IsTabStop na true i należy podać wizualne wskazanie ukierunkowanego stanu wizualizacji ze wskaźnikiem fokusu.

Jednak łatwiej jest używać kompozycji kontrolek, tak aby obsługa zatrzymań tabulatorów, fokusu i elementów równorzędnych i wzorców automatyzacji interfejsu użytkownika firmy Microsoft była obsługiwana przez kontrolkę, w ramach której chcesz utworzyć zawartość. Na przykład zamiast obsługiwać zdarzenie naciśnięcia wskaźnika na obrazie, opakuj ten element w przycisku , aby uzyskać obsługę wskaźnika, klawiatury i fokusu.

<!--Don't do this.-->
<Image Source="sample.jpg" PointerPressed="Image_PointerPressed"/>

<!--Do this instead.-->
<Button Click="Button_Click"><Image Source="sample.jpg"/></Button>

Skróty klawiaturowe

Oprócz implementowania nawigacji za pomocą klawiatury i aktywacji warto zaimplementować skróty klawiaturowe, takie jak akceleratory klawiatury i dostępu do ważnych lub często używanych funkcji.

Skrót to kombinacja klawiatury, która zapewnia wydajny sposób uzyskiwania dostępu do funkcji aplikacji przez użytkownika. Istnieją dwa rodzaje skrótów:

• Akceleratory to skróty , które wywołują polecenie aplikacji. Aplikacja może lub nie udostępnia określonego interfejsu użytkownika odpowiadającego poleceniu. Akceleratory zwykle składają się z Ctrl i litery.
• Klucze dostępu to skróty, które ustawiają fokus na określony interfejs użytkownika w aplikacji. Klucze dostępu zwykle składają się z Alt oraz litery.

Zawsze udostępniaj łatwy sposób użytkownikom korzystającym z czytników zawartości ekranu i innej technologii pomocniczej w celu odnajdywania skrótów aplikacji. Komunikacja skrótów przy użyciu etykietek narzędzi, dostępnych nazw, dostępnych opisów lub innej formy komunikacji na ekranie. Co najmniej klucze skrótów powinny być dobrze udokumentowane w zawartości Pomocy aplikacji.

Klucze dostępu do dokumentów można dokumentować za pośrednictwem czytników zawartości ekranu, ustawiając właściwość dołączoną AutomationProperties.AccessKey na ciąg opisujący skrótu. Istnieje również właściwość AutomationProperties.AcceleratorKey dołączona do dokumentowania kluczy skrótów innych niż mnemonic, chociaż czytniki ekranu zwykle traktują obie właściwości w taki sam sposób. Spróbuj udokumentować skrótów na wiele sposobów, korzystając z etykietek narzędzi, właściwości automatyzacji i pisemnej dokumentacji Pomocy.

W poniższym przykładzie pokazano, jak dokumentować skrótów dla przycisków odtwarzania, wstrzymywania i zatrzymywania multimediów.

<Grid KeyDown="Grid_KeyDown">

  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>

  <MediaElement x:Name="DemoMovie" Source="xbox.wmv"
    Width="500" Height="500" Margin="20" HorizontalAlignment="Center" />

  <StackPanel Grid.Row="1" Margin="10"
    Orientation="Horizontal" HorizontalAlignment="Center">

    <Button x:Name="PlayButton" Click="MediaButton_Click"
      ToolTipService.ToolTip="Shortcut key: Ctrl+P"
      AutomationProperties.AcceleratorKey="Control P">
      <TextBlock>Play</TextBlock>
    </Button>

    <Button x:Name="PauseButton" Click="MediaButton_Click"
      ToolTipService.ToolTip="Shortcut key: Ctrl+A"
      AutomationProperties.AcceleratorKey="Control A">
      <TextBlock>Pause</TextBlock>
    </Button>

    <Button x:Name="StopButton" Click="MediaButton_Click"
      ToolTipService.ToolTip="Shortcut key: Ctrl+S"
      AutomationProperties.AcceleratorKey="Control S">
      <TextBlock>Stop</TextBlock>
    </Button>
  </StackPanel>
</Grid>

Obsługa kluczy jest implementowana w kodzie, a nie w języku XAML. Nadal musisz dołączyć programy obsługi zdarzeń KeyDown lub KeyUp w odpowiedniej kontrolce, aby faktycznie zaimplementować zachowanie skrótu klawiaturowego w aplikacji. Ponadto podkreślenie dekoracji tekstu dla klucza dostępu nie jest udostępniane automatycznie. Należy jawnie podkreślić tekst dla określonego klucza w mnemonic jako wbudowane formatowanie podkreślone , jeśli chcesz pokazać podkreślony tekst w interfejsie użytkownika.

Dla uproszczenia powyższy przykład pomija użycie zasobów dla ciągów, takich jak "Ctrl+A". Należy jednak również rozważyć skrótów podczas lokalizacji. Lokalizowanie skrótów jest istotne, ponieważ wybór do użycia jako skrótu zwykle zależy od widocznej etykiety tekstowej elementu.

Aby uzyskać więcej wskazówek dotyczących implementowania skrótów, zobacz skrótów w wytycznych dotyczących interakcji środowiska użytkownika systemu Windows.

Implementowanie procedury obsługi zdarzeń klucza

Zdarzenia wejściowe (takie jak kluczowe zdarzenia) używają pojęcia zdarzenia nazywanego zdarzeniami trasowanym. Zdarzenie kierowane może przechodzić w górę przez elementy podrzędne nadrzędnej kontrolki złożonej, tak aby kontrolka nadrzędna mogła obsługiwać zdarzenia dla wielu elementów podrzędnych. Ten model zdarzeń jest wygodny do definiowania akcji skrótów dla kontrolki zawierającej kilka elementów podrzędnych, z których żaden nie może mieć fokusu lub być częścią kolejności tabulacji.

Na przykład kod pokazujący, jak napisać procedurę obsługi zdarzeń klucza, która obejmuje sprawdzanie modyfikatorów, takich jak Ctrl, zobacz Interakcje klawiatury.

Nawigacja za pomocą klawiatury dla kontrolek niestandardowych

Zalecamy używanie strzałek jako skrótów klawiaturowych do nawigowania między elementami podrzędnymi w przypadkach, gdy elementy podrzędne mają relację spacialową ze sobą. Jeśli węzły widoku drzewa mają oddzielne elementy podrzędne do obsługi aktywacji rozwiń-zwijania i węzła, użyj strzałki po lewej i prawej, aby zapewnić funkcjonalność rozszerzania i zwijania klawiatury. Jeśli masz kontrolkę zorientowaną, która obsługuje przechodzenie kierunkowe w zawartości kontrolki, użyj odpowiednich strzałek.

Zazwyczaj implementujesz niestandardową obsługę kluczy dla kontrolek niestandardowych, uwzględniając zastąpienie metod OnKeyDown i OnKeyUp w ramach logiki klas.

Przykład stanu wizualizacji dla wskaźnika koncentracji uwagi

Jak wspomniano wcześniej, każda kontrolka niestandardowa, która obsługuje fokus, powinna mieć wskaźnik koncentracji uwagi wizualizacji. Zazwyczaj ten wskaźnik fokusu jest tylko prostokątem przedstawiającym prostokąt ograniczenia kontrolki. Prostokąt fokusu wizualizacji jest elementem równorzędnym do pozostałej części kompozycji kontrolki w szablonie kontrolki, ale jest początkowo ustawiany z wartością Widocznośćzwiniętą, ponieważ kontrolka nie jest jeszcze skoncentrowana. Gdy kontrolka uzyskuje fokus, wywoływany jest stan wizualizacji, który w szczególności ustawia widoczność wizualizacji fokusu na Widoczny. Po przeniesieniu fokusu w innym miejscu wywoływany jest inny stan wizualizacji, a widoczność staje się zwinięta.

Wszystkie fokusowe kontrolki XAML wyświetlają odpowiedni wskaźnik koncentracji uwagi wizualizacji podczas koncentracji uwagi. Wybrany przez użytkownika może również wpływać na wygląd wskaźnika (szczególnie jeśli użytkownik korzysta z trybu dużego kontrastu). Jeśli używasz kontrolek XAML w interfejsie użytkownika (i nie zastępujesz szablonów kontrolek), nie musisz wykonywać żadnych dodatkowych czynności, aby uzyskać domyślne wskaźniki fokusu wizualizacji. Jeśli jednak zamierzasz ponownie utworzyć kontrolkę lub zastanawiasz się, jak kontrolki XAML zapewniają wizualne wskaźniki fokusu, w pozostałej części tej sekcji wyjaśniono, jak to zrobić w języku XAML i logice sterowania.

Oto przykładowy kod XAML pochodzący z domyślnego szablonu XAML dla przycisku.

XAML

<ControlTemplate TargetType="Button">
...
    <Rectangle
      x:Name="FocusVisualWhite"
      IsHitTestVisible="False"
      Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
      StrokeEndLineCap="Square"
      StrokeDashArray="1,1"
      Opacity="0"
      StrokeDashOffset="1.5"/>
    <Rectangle
      x:Name="FocusVisualBlack"
      IsHitTestVisible="False"
      Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
      StrokeEndLineCap="Square"
      StrokeDashArray="1,1"
      Opacity="0"
      StrokeDashOffset="0.5"/>
...
</ControlTemplate>

Do tej pory jest to tylko skład. Aby kontrolować widoczność wskaźnika koncentracji uwagi, należy zdefiniować stany wizualizacji, które przełączają właściwość Widoczność . Odbywa się to przy użyciu dołączonej właściwości VisualStateManager i VisualStateManager.VisualStateGroups, jak zastosowano do elementu głównego definiującego kompozycję.

<ControlTemplate TargetType="Button">
  <Grid>
    <VisualStateManager.VisualStateGroups>
       <!--other visual state groups here-->
       <VisualStateGroup x:Name="FocusStates">
         <VisualState x:Name="Focused">
           <Storyboard>
             <DoubleAnimation
               Storyboard.TargetName="FocusVisualWhite"
               Storyboard.TargetProperty="Opacity"
               To="1" Duration="0"/>
             <DoubleAnimation
               Storyboard.TargetName="FocusVisualBlack"
               Storyboard.TargetProperty="Opacity"
               To="1" Duration="0"/>
         </VisualState>
         <VisualState x:Name="Unfocused" />
         <VisualState x:Name="PointerFocused" />
       </VisualStateGroup>
     <VisualStateManager.VisualStateGroups>
<!--composition is here-->
   </Grid>
</ControlTemplate>

Zwróć uwagę, że tylko jeden z nazwanych stanów dostosowuje widoczność bezpośrednio, podczas gdy pozostałe są najwyraźniej puste. W przypadku stanów wizualizacji, gdy tylko kontrolka używa innego stanu z tej samej grupy VisualStateGroup, wszystkie animacje zastosowane przez poprzedni stan zostaną natychmiast anulowane. Ponieważ domyślna widoczność z kompozycji jest zwinięta, prostokąt nie będzie wyświetlany. Logika sterowania kontroluje to przez nasłuchiwanie zdarzeń fokusu , takich jak GotFocus i zmienianie stanów za pomocą funkcji GoToState. Często jest to już obsługiwane, jeśli używasz domyślnej kontrolki lub dostosowywania na podstawie kontrolki, która już ma to zachowanie.

Ułatwienia dostępu klawiatury i urządzenia bez klawiatury sprzętowej

Niektóre urządzenia nie mają dedykowanej klawiatury sprzętowej i zamiast tego korzystają z panelu wprowadzania nietrwałego (SIP). Czytniki zawartości ekranu mogą odczytywać dane wejściowe tekstu z kontrolki TEXT SIP, a użytkownicy mogą wykryć, gdzie znajdują się palce, ponieważ czytnik zawartości ekranu może wykryć, że użytkownik skanuje klucze i odczytuje na głos zeskanowaną nazwę klucza. Ponadto niektóre koncepcje ułatwień dostępu zorientowane na klawiaturę można zamapować na powiązane zachowania technologii pomocniczej, które w ogóle nie korzystają z klawiatury. Na przykład, mimo że SIP nie będzie zawierać Tab, Narrator obsługuje gest dotykowy, który jest odpowiednikiem naciśnięcia Tab, więc posiadanie przydatnej kolejności tabulacji za pomocą kontrolek w interfejsie użytkownika jest nadal crtical dla ułatwień dostępu. Narrator obsługuje również wiele innych gestów dotykowych, w tym strzałek do nawigowania w złożonych kontrolkach (zobacz Polecenia klawiatury Narratora i gesty dotykowe).

Przykłady

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Tematy pokrewne

• Dostępność
• Interakcje z klawiaturą
• Przykład klawiatury dotykowej
• Przykład ułatwień dostępu XAML