Přístupnost klávesnice

Přístupnost klávesnice by měla být považována za primární model interakce, nikoli jako sekundární náhradní model. Robustní prostředí klávesnice podporuje uživatele, kteří mají různá postižení a omezení (včetně zraku, učení, zručnosti/ mobility a jazyka a komunikačního postižení). Zvyšuje také produktivitu pro uživatele, kteří dávají přednost interakci s klávesnicí pro rychlost a přesnost.

Pokud je přístup pomocí klávesnice neúplný nebo nekonzistentní, můžou uživatelé přijít o přístup k základním funkcím aplikace i v případě, že se interakce ukazatele zobrazí plně implementovaná.

Pokud chcete pracovat s ovládacím prvku pomocí klávesnice, musí být ovládací prvky fokusovatelné a dosažitelné prostřednictvím procházení fokusu. Pokud chcete získat fokus (bez použití ukazatele), musí být ovládací prvek přístupný prostřednictvím navigace pomocí tabulátoru. Ve výchozím nastavení je pořadí ovládacích prvků stejné jako pořadí, ve kterém jsou přidány do návrhového rozhraní, deklarované v XAML nebo programově přidané do kontejneru.

V mnoha uživatelských rozhraních je toto výchozí chování přijatelné a je v souladu s tokem čtení. Vizuální pořadí a pořadí kláves se ale může lišit v závislosti na rozložení kontejneru a pozici prvků uvnitř. Tento rozdíl by měl být úmyslný a testován.

Explicitně ověřte chování tabulátoru. Mřížka, tabulka a podobná rozložení jsou běžnými zdroji neshody mezi vnímaným pořadím čtení a pořadím fokusu. Otestujte cesty interakce jenom pomocí klávesnice i dotykového ovládání, abyste zajistili, že procházení zůstane efektivní a předvídatelné.

Pokud chcete zarovnat procházení s vizuálním tokem, můžete přestrukturovat XAML nebo explicitně přiřadit TabIndex. Následující příklad používá Grid se sekvencováním tabulátoru prvního sloupce.

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

V některých scénářích by měl být prvek vyloučen z procházení tabulátoru. Standardním přístupem je nastavit IsEnabled na false, což také zakáže interakci. Zakázané ovládací prvky se automaticky odeberou z pořadí ovládacích prvků.

Pokud prvek zůstává interaktivní prostřednictvím jiných mechanismů, ale neměl by být dosažen pomocí Tab, nastavte IsTabStop na false.

Většina ovládacích prvků podporujících fokus je ve výchozím nastavení součástí pořadí ovládacích prvků. Běžnou výjimkou jsou ovládací prvky zobrazení textu, jako je RichTextBlock, které mohou podporovat zaměření pro výběr textu a operace se schránkou, ale obvykle nejsou tabulátorové zarážky, protože nejsou ovládací prvky příkazově vyvolatelné. Tyto ovládací prvky mohou být stále zjištěny technologiemi usnadnění prostřednictvím sémantiky automatizace, jako je například vzor ovládacího prvku Text.

Bez ohledu na to, jestli používáte výchozí procházení nebo explicitní tabIndex, platí následující pravidla:

Pokud tabIndex není nastaven na element, výchozí hodnota je Int32.MaxValue a pořadí je založeno na deklaraci/pořadí vložení.
Pokud je tabIndex nastaven na element:
- Prvky s TabIndex rovnající se 0 jsou přidávány na základě pořadí deklarace nebo vložení.
- Prvky s TabIndex větším než 0 jsou přidány ve vzestupném pořadí TabIndex.
- Prvky s hodnotou TabIndex menší než 0 jsou přidány před prvky s nulovými hodnotami.

Následující fragment kódu ukazuje smíšená nastavení TabIndex (B používá Int32.MaxValue nebo 2 147 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>

Výsledkem je následující pořadí ovládacích prvků:

Podokno aplikace je v okně důležitou oblastí úloh. V Microsoft Edgi například podokna zahrnují adresní řádek, panel záložek, pruh karet a oblast obsahu. F6 se běžně používá k přesouvání kurzoru mezi těmito podokny, přičemž podřízené prvky jsou dostupné standardní navigací pomocí klávesnice.

I když je vyhovující model navigace pomocí klávesnice základ, použitelný model navigace klávesnice obvykle zahrnuje:

Naslouchání F6 pro přesun mezi hlavními oblastmi uživatelského rozhraní.
Poskytuje klávesové zkratky pro vysokofrekvenční příkazy .
Poskytnutí přístupových klíčů pro důležité ovládací prvky

Pokyny k implementaci najdete v tématu Klávesové zkratky a přístupové klávesy .

Optimalizace pro F6

F6 výrazně snižuje náklady na procházení tím, že umožňuje uživatelům přeskočit mezi hlavními oblastmi a ne procházet tabulátorem přes všechny podřízené ovládací prvky.

Například klávesa F6 v Microsoft Edge cykluje mezi adresním řádkem, lištou záložek, panelem karet a obsahem. Vzhledem k tomu, že stránka může obsahovat mnoho zarážek tabulátoru, díky tomu jsou běžné navigační úkoly mnohem efektivnější.

Sekvence F6 může odpovídat orientačním bodům nebo nadpisům, ale nemusí přesně odpovídat. F6 slouží k širokému pohybu a orientačním bodům a nadpisům na úrovni oblastí pro sémantickou strukturu v rámci oblastí a napříč oblastmi.

Důležité

V aplikaci musíte implementovat navigaci F6 explicitně; není poskytována automaticky.

Pokud je to možné, každá cílová oblast F6 by měla mít jasný přístupný název, ať už z sémantiky orientačních bodů, nebo nastavením AutomationProperties.Name v kořenovém adresáři oblasti.

Shift+F6 by měl procházet stejným cyklem v obráceném pořadí.

Složené ovládací prvky by měly poskytovat předvídatelnou vnitřní navigaci mezi podřízenými prvky. Běžným vzorem je zachovat složený kořen v pořadí tabulátorů a spravovat aktivní potomky interně, nikoli z každého potomka udělat samostatnou tabulátorovou zastávku.

Mnoho předdefinovaných ovládacích prvků už toto chování implementuje. Například procházení kláves se šipkami je ve výchozím nastavení k dispozici pro ListView, GridView, ListBox a FlipView.

Alternativy klávesnice k akcím ukazatele a událostem pro konkrétní prvky ovládacího prvku

Jakékoli uživatelské rozhraní, které lze aktivovat ukazatelem, by také mělo být vyvoláné pomocí klávesnice. Aktivace vyžaduje, aby prvek měl fokus (pouze třídy odvozené z ovládacích prvků podporují fokus a navigaci na kartách).

U ovládacích prvků, které lze vyvolat, implementujte obslužné rutiny událostí klávesnice pro mezerník a klávesy Enter. Tím se poskytuje základní rovnost klávesnice s interakcemi s ukazovacím zařízením.

Pokud prvek ve výchozím nastavení nepodporuje fokus, použijte buď typ ovládacího prvku s možností zaměření, nebo implementujte vlastní ovládací prvek s explicitním chováním fokusu. V takovém případě nastavte IsTabStop na true a zadejte viditelný indikátor fokusu.

V mnoha případech je složení jednodušší a robustnější než používání pouze ukazatelů. Například místo zpracování vstupu ukazatele přímo na obrázek ho umístěte do tlačítka , abyste zdědili aktivaci klávesnice, zpracování fokusu a chování automatizace.

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

<!--Do this instead.-->
<Button Click="Button_Click"
        AutomationProperties.Name="Open profile photo">
  <Image Source="Assets/profile-photo.png"/>
</Button>

Klávesové zkratky

Kromě navigace a aktivace implementujte zkratku (kombinaci kláves, která poskytuje efektivní přístup k funkcím aplikace) pro důležité nebo často používané příkazy s akcelerátory klávesnice a přístupovými klávesami.

Existují dva běžné typy klávesových zkratek :

Akcelerátory: vyvolání příkazů přímo nebo bez odpovídajícího viditelného ovládacího prvku.
Přístupové klávesy: Přesuňte fokus na konkrétní ovládací prvky v uživatelském rozhraní.

Vždy zajistěte, aby byly klávesové zkratky snadno dostupné pro uživatele technologie pro osoby se zdravotním postižením. Komunikujte je prostřednictvím nápovědy, metadat automatizace, viditelných prvků uživatelského rozhraní a dokumentace nápovědy.

Pokud chcete zpřístupnit metadata zástupců pro technologie usnadnění, použijte AutomationProperties.AccessKey pro mnemonické zkratky a AutomationProperties.AcceleratorKey pro příkazové zkratky. Protože čtečky obrazovky mohou tyto zkratky prezentovat podobně, je důležité dokumentovat klávesové zkratky v několika různých kanálech.

Následující příklad ukazuje, jak dokumentovat klávesové zkratky pro tlačítka přehrávání, pozastavení a zastavení médií.

<Grid>

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

  <MediaPlayerElement x:Name="DemoPlayer"
    Width="500" Height="300" Margin="20"
    HorizontalAlignment="Center"
    AutoPlay="False"
    AreTransportControlsEnabled="True" />

  <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="Ctrl+P"
      AutomationProperties.AccessKey="Alt+P">
      <Button.KeyboardAccelerators>
        <KeyboardAccelerator Modifiers="Control" Key="P"/>
      </Button.KeyboardAccelerators>
      <TextBlock>Play</TextBlock>
    </Button>

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

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

Důležité

Nastavení AutomationProperties.AcceleratorKey nebo AutomationProperties.AccessKey neimplementuje chování klávesnice. Tyto vlastnosti vystavují metadata pro Automatizaci uživatelského rozhraní, aby asistenční technologie mohly oznamovat očekávané klávesové zkratky.

Chování klávesnice musí být stále implementováno v kódu. Pokud je to možné, použijte deklarativní definice KeyboardAccelerator a použijte obslužné rutiny KeyDown nebo KeyUp , kde potřebujete vlastní logiku směrování. Všimněte si také, že styl podtržení přístupových kláves není automatický. Pokud chcete viditelné mnemonické podtržení, vykreslujte je explicitně (například s použitím Podtržení).

V zájmu stručnosti v ukázce vynechává řetězcové prostředky, jako je například Ctrl+A. V produkci lokalizujte text zástupce a ověřte mnemonické volby pro daný jazyk, protože výběr kláves často závisí na přeložených popiscích.

Další pokyny najdete v tématu Klávesové zkratky v pokynech k interakci uživatelského prostředí systému Windows.

Implementace obslužné rutiny události klíče

Vstup klíče používá směrované události. Směrované události můžou bublinovat z podřízených položek do nadřazeného kontejneru, což nadřazené objektu umožňuje zpracovat zástupce více následnických prvků. Tento model událostí je vhodný pro definování akcí klávesových zkratek pro ovládací prvek, který obsahuje několik podřízených prvků, z nichž žádný nemůže mít fokus nebo být součástí pořadí ovládacích prvků.

Příklady kódu, které obsahují kontroly modifikátoru kláves (například Ctrl), najdete v tématu Interakce pomocí klávesnice.

Pro vlastní ovládací prvky použijte klávesy se šipkami, pokud jsou podřízené prvky prostorově související. V případech použití se stromem, kde jsou interakce rozbalení/sbalení a aktivace samostatné, přiřaďte šipky doleva a doprava, aby se změnilo chování rozbalení/sbalení. U orientovaných ovládacích prvků mapujte směrové klávesy na vizuální orientaci ovládacího prvku.

Vlastní chování kláves se běžně implementuje přepsáním OnKeyDown a OnKeyUp.

Příklad vizuálního stavu pro indikátor fokusu

Jakýkoliv zaměřitelný vlastní ovládací prvek by měl mít výrazný vizuální indikátor fokusu. Běžný vzor šablony používá překryv obdélníku, který začíná skrytý prostřednictvím Visibility a zobrazí se při vstupu fokusu.

Integrované ovládací prvky XAML už poskytují indikátory zaměření. Přesný vzhled se může lišit v nastavení motivu, včetně režimu vysokého kontrastu. Pokud měníte šablonu ovládacích prvků, zachovejte ekvivalentní vlastnosti viditelnosti fokusu.

Následující příklad je přizpůsobený výchozí šabloně Button .

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

Pokud chcete přepnout viditelnost ukazatele fokusu, použijte VisualStateManager a VisualStateManager.VisualStateGroups v kořenovém adresáři šablony.

<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"/>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Unfocused" />
        <VisualState x:Name="PointerFocused" />
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <!--composition is here-->
  </Grid>
</ControlTemplate>

Pouze jeden stav v této skupině explicitně upraví vizuální vzhled fokusu. Ostatní stavy mohou zůstat prázdné, protože přechody uvnitř stejné visualStateGroup zruší předchozí animace stavu. Události zaměření, jako je GotFocus v kombinaci s GoToState, obvykle řídí tyto přechody.