Klavye erişilebilirliği

Klavye erişilebilirliği ikincil geri dönüş olarak değil birincil etkileşim modeli olarak ele alınmalıdır. Güçlü bir klavye deneyimi, çeşitli engelleri ve sınırlamaları (görme, öğrenme, el becerisi/mobilite ve dil/iletişim engelleri dahil) olan kullanıcıları destekler. Ayrıca hız ve hassasiyet için klavye öncelikli etkileşimi tercih eden kullanıcılar için üretkenliği artırır.

Klavye erişimi eksik veya tutarsızsa, işaretçi etkileşimi tam olarak uygulandığında bile kullanıcılar çekirdek uygulama işlevselliğine erişimi kaybedebilir.

Klavyeyi kullanarak bir denetimle etkileşime geçmek için, denetimler odaklanabilir ve odak geçişi aracılığıyla erişilebilir olmalıdır. Odağı almak için (işaretçi kullanmadan), kontrol, sekme gezintisi aracılığıyla erişilebilir durumda olmalıdır. Varsayılan olarak, denetimlerin sekme sırası, tasarım yüzeyine eklenme, XAML'de bildirilme veya program aracılığıyla bir kapsayıcıya eklenme sırasıyla aynıdır.

Birçok kullanıcı arabiriminde bu varsayılan davranış kabul edilebilir ve okuma akışına uygundur. Ancak görsel düzen ve klavye sırası, kapsayıcı düzenine ve alt ögelerin konumlandırılmasına bağlı olarak farklılık gösterebilir. Bu ayrışma kasıtlı ve test edilmelidir.

Sekme davranışını açıkça doğrulayın. Kılavuz, tablo ve benzer düzenler, algılanan okuma sırası ile odak sırası arasındaki uyuşmazlıkların yaygın kaynaklarıdır. Geçişin verimli ve öngörülebilir kalmasını sağlamak için hem klavye hem de dokunmatik etkileşim yollarını test edin.

Geçişi görsel akışla hizalamak için XAML'yi yeniden yapılandırabilir veya TabIndex'i açıkça atayabilirsiniz. Aşağıdaki örnek, sütun öncelikli sekme sıralamasıyla bir Grid kullanır.

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

Bazı senaryolarda, bir öğe sekme geçişinin dışında tutulmalıdır. Standart yaklaşım , IsEnabled değerini false olarak ayarlamaktır ve bu da etkileşimi devre dışı bırakır. Devre dışı bırakılan denetimler sekme sırasına göre otomatik olarak kaldırılır.

Bir öğe diğer mekanizmalar aracılığıyla etkileşimli kalırsa ancak Sekme ile ulaşılmaması gerekiyorsa , IsTabStop değerini false olarak ayarlayın.

Odak özellikli denetimlerin çoğu varsayılan olarak sekme sırasına eklenir. Sık karşılaşılan bir istisna, metin seçimi ve pano işlemleri için odağı destekleyebilen ancak komut etkinleştirilebilir kontroller olmadıkları için genellikle sekme durakları olmayan RichTextBlock gibi metin-görüntüleme denetimleridir. Bu denetimler, Metin denetim düzeni gibi otomasyon semantiği aracılığıyla yardımcı teknolojiler tarafından yine bulunabilir.

İster varsayılan çapraz geçiş ister açık TabIndex kullanın, aşağıdaki kurallar geçerlidir:

TabIndex bir öğede ayarlanmadıysa, varsayılan değer Int32.MaxValue'dir ve sıralama, bildirim/ekleme sırasını temel alır.
TabIndex bir öğede ayarlandıysa:
- TabIndex değeri 0'a eşit olan öğeler, bildirim/ekleme sırasına göre eklenir.
- TabIndex 0'dan büyük öğeler artan TabIndex sırasına eklenir.
- TabIndex değeri 0'dan küçük olan öğeler, sıfır değer içeren öğelerden önce eklenir.

Aşağıdaki kod parçacığı karışık TabIndex ayarlarını gösterir (BInt32.MaxValue veya 2.147.483.647 kullanır).

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

Bu, aşağıdaki sekme sırasını oluşturur:

Uygulama bölmesi, pencerenin içinde göze çarpan bir görev bölgesidir. Örneğin Microsoft Edge'de bölmeler adres çubuğunu, yer işareti çubuğunu, sekme şeridini ve içerik alanını içerir. F6, standart klavye gezintisi kullanılarak erişilebilen alt öğelerle odağı bu bölmeler arasında taşımak için yaygın olarak kullanılır.

Uyumlu bir klavye gezinti modeli taban çizgisi olsa da, kullanılabilir bir klavye gezinti modeli genellikle şunları da içerir:

Ana kullanıcı arabirimi bölgeleri arasında geçiş yapmak için F6 tuşunu dinleme.
Yüksek frekanslı komutlar için klavye kısayolları sağlama.
Önemli denetimler için erişim anahtarları sağlama.

Uygulama kılavuzu için bkz. Klavye kısayolları ve Erişim tuşları .

F6 için iyileştirme

F6, kullanıcıların her alt denetimde sekme tuşuyla gezinmek yerine ana bölgeler arasında geçiş yapmasına izin vererek dolaşma maliyetini önemli ölçüde azaltır.

Örneğin, Microsoft Edge'de F6 adres çubuğu, yer işareti çubuğu, sekme şeridi ve içerik arasında döngüler oluşturur. Bir sayfada çok sayıda sekme durağı olabileceği için bu, yaygın gezinti görevlerini çok daha verimli hale getirir.

F6 dizisi yer işaretleri veya başlıklarla hizalanabilir, ancak tam olarak eşleşmesi gerekmez. Bölge düzeyinde geniş bir hareket için F6 kullanın ve bölgeler içinde ve arasında semantik yapı için yer işaretleri ve başlıkları kullanın.

Önemli

Uygulamanızda F6 gezintisini açıkça uygulamanız gerekir; otomatik olarak sağlanmaz.

Mümkün olduğunda, her F6 hedef bölgesi, yer işareti semantiğinden veya bölge kökünde AutomationProperties.Name ayarlayarak net bir erişilebilir ada sahip olmalıdır.

Shift+F6 aynı döngüyü ters sırada geçirmelidir.

Bileşik kontroller alt öğeler arasında öngörülebilir şekilde iç gezinti sağlamalıdır. Ortak bir desen, bileşik kökü sekme sırasına göre tutmak ve her alt öğeyi ayrı bir sekme durağı olarak ortaya çıkarmak yerine etkin alt öğeleri dahili olarak yönetmektir.

Birçok yerleşik denetim bu davranışı zaten uygular. Örneğin, ListView, GridView, ListBox ve FlipView için ok tuşu geçişi varsayılan olarak kullanılabilir.

Belirli denetim öğeleri için işaretçi eylemlerine ve olaylarına klavye alternatifleri

İşaretçi tarafından etkinleştirilebilen tüm kullanıcı arabirimleri de klavyeyle çağrılabiliyor olmalıdır. Öğenin etkinleştirilebilmesi için odağa sahip olması gerekir (yalnızca Denetim'den türetilen sınıflar odak ve sekme gezinme desteği sağlar).

Çağrılabilen denetimler için Ara Çubuğu ve Enter tuşları için klavye olay işleyicileri uygulayın. Bu, işaretçi etkileşimleriyle temel klavye eşliği sağlar.

Bir öğe varsayılan olarak odak özelliğine sahip değilse, odaklanabilir bir denetim türü kullanın veya açık odak davranışıyla özel bir denetim uygulayın. Bu durumda , IsTabStop değerini true olarak ayarlayın ve görünür bir odak göstergesi sağlayın.

Çoğu durumda, bileşim özel olarak yalnızca işaretçi davranışından daha basit ve daha sağlamdır. Örneğin, işaretçi girişini doğrudan bir Görüntü üzerinde işlemek yerine klavye etkinleştirme, odak işleme ve otomasyon davranışını devralmak için düğmenin içine yerleştirin.

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

Klavye kısayolları

Gezinti ve etkinleştirmeye ek olarak, klavye hızlandırıcıları ve erişim tuşlarıyla önemli veya sık kullanılan komutlar için bir kısayol (uygulama işlevselliğine verimli erişim sağlayan bir tuş bileşimi) uygulayın.

İki yaygın kısayol türü şunlardır:

Hızlandırıcılar: Komutları doğrudan, karşılık gelen görünür bir denetimle veya denetim olmadan çağır.
Erişim anahtarları: Odağı kullanıcı arabiriminizdeki belirli denetimlere taşıyın.

Yardımcı teknoloji kullanıcıları için kısayolları her zaman bulunabilir hale getirin. Bunları araç ipuçları, otomasyon meta verileri, görünür kullanıcı arabirimi özellikleri ve yardım belgeleri aracılığıyla iletin.

Kısayol meta verilerini yardımcı teknolojilerin kullanımına açmak için, anımsatıcı kısayollar için AutomationProperties.AccessKey ve komut kısayolları için AutomationProperties.AcceleratorKey kullanın. Ekran okuyucular bunları benzer şekilde sunabileceğinden, belge kısayollarını birden çok kanalda kaydedin.

Aşağıdaki örnek, medya yürütme, duraklatma ve durdurma düğmeleri için kısayol tuşlarını belgelemeyi gösterir.

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

Önemli

AutomationProperties.AcceleratorKey veya AutomationProperties.AccessKey ayarı klavye davranışını uygulamaz. Bu özellikler, yardımcı teknolojilerin beklenen kısayolları duyurabilmesi için meta verileri UI Otomasyonu'na sunar.

Klavye davranışı hala kodda uygulanmalıdır. Mümkün olduğunda bildirim temelli KeyboardAccelerator tanımlarını ve özel yönlendirme mantığına ihtiyacınız olan KeyDown veya KeyUp işleyicilerini kullanın. Ayrıca, erişim tuşu alt çizgi stili otomatik olarak uygulanmaz. Görünür anımsatıcı alt çizgileri istiyorsanız, bunları açıkça belirtin (örneğin, Altı Çizili).

Kısa olması için, örnek "Ctrl+A" gibi dize kaynaklarını atlar. Anahtar seçimi genellikle çevrilmiş etiketlere bağlı olduğundan, üretimde kısayol metnini yerelleştirin ve yerel ayar başına anımsatıcı seçimleri doğrulayın.

Ek yönergeler için Windows Kullanıcı Deneyimi Etkileşim Yönergeleri'ndeki Kısayol tuşları bölümüne bakın.

Anahtar olay işleyicisi uygulama

Anahtar girişi , yönlendirilen olayları kullanır. Yönlendirilmiş olaylar, alt öğelerden ebeveyn kapsayıcıya yukarı doğru iletilebilir, bu da ebeveynin birden çok alt öğe için kısayolları işlemesini sağlar. Bu olay modeli, hiçbirinde odak bulunabilecek veya sekme sırasının parçası olmayan birkaç alt öğe içeren bir denetim için kısayol tuşu eylemleri tanımlamak için uygundur.

Değiştirici tuş denetimleri (örneğin, Ctrl) içeren kod örnekleri için bkz. Klavye etkileşimleri.

Özel denetimler için alt öğeler uzamsal olarak ilişkili olduğunda ok tuşlarını kullanın. Genişletme/daraltma ve etkinleştirmenin ayrı etkileşimler olduğu ağaç senaryolarında, genişletme/daraltma davranışı için sol ve sağ okları eşleyin. Yönlendirmeli denetimler için yön tuşlarını denetimin görsel yönlendirmesine eşleyin.

Özel anahtar davranışı genellikle OnKeyDown ve OnKeyUp geçersiz kılınarak uygulanır.

Odak göstergesi için görsel durum örneği

Odaklanabilir özel denetimler net bir görsel odak belirtecini vurgulamalıdır. Yaygın bir şablon deseni, odak girildiğinde görünen ve başlangıçta Görünürlük yoluyla gizlenmiş olan bir Dikdörtgen kaplama kullanır.

Yerleşik XAML denetimleri zaten odak göstergeleri sağlar. Tam görünüm, yüksek karşıtlık modu da dahil olmak üzere tema ayarlarına göre farklılık gösterebilir. Denetimlerin şablonunu yeniden oluşturuyorsanız, eşdeğer odak görünürlüğü davranışını koruyun.

Aşağıdaki örnek varsayılan Düğme şablonundan uyarlanmıştır.

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

Odak göstergesi görünürlüğünü değiştirmek için VisualStateManager'ı ve VisualStateManager.VisualStateGroups şablon kökünde kullanın.

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

Bu gruptaki yalnızca bir durum odak görselini açıkça değiştirir. Aynı VisualStateGroup içindeki geçişler önceki durum animasyonlarını iptal ettiğinden diğer durumlar boş kalabilir. GoToState ile birlikte GotFocus gibi odak olayları genellikle bu geçişleri yönlendirir.