相反する特性

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

同じ要素に矛盾するアクセシビリティ特性を割り当てないでください

Not for use with personal data
Best Practice Impact - Critical

確認する内容

すべての *ビュー* - ボタン、ラベル、カスタムコントロールなどのインタラクティブ要素 - に対して *アクセシビリティ特性*を割り当てることができます。このメタデータは、VoiceOverにその要素の種類と操作方法を伝えます。このルールは、ビューに対して互いに矛盾した特性やVoiceOverのナビゲーションに支障をきたす特性が割り当てられないかどうかを確認します。

このルールは、 AppleのUIKitアクセシビリティ特性の下で定義されたベストプラクティスを強制します。このルールは、 モバイルダッシュボード で無効にするか、 iOS用に書かれたテストでルールを無視することができます。

一目でわかる要約

  • このルールはユーザーにとって重大な影響を持ちます
  • アクセシビリティの特性は、VoiceOverに要素の種類と操作方法を伝えます - 矛盾する特性は混乱を招き、動作を損ないます
  • 一般的な矛盾:"ボタン"+"リンク"のような役割の特性、または"ヘッダー"+"調整可能"のようなナビゲーション特性

ユーザーへの影響

VoiceOverやスイッチコントロールを使用する人々が最も影響を受けます。要素に矛盾する特性がある場合、VoiceOverは「ボタン、リンク」のように2つの役割を同時に発表することがあり、混乱を招き誤解を生みます。「ヘッダー」と「調整可能」などの特定の特性の組み合わせは、VoiceOverのナビゲーションジェスチャーを破損させ、画面の一部にアクセスできなくなる可能性があります。

矛盾する特性の問題を確認する

  1. VoiceOverをオンにする
  2. 要素にフォーカスを合わせる
  3. 次のいずれかが発生します:
    • アクセス不能: VoiceOverが2つの矛盾する役割(「ボタン」と「リンク」など)を発表する
    • アクセス不能: VoiceOverのナビゲーションジェスチャーが機能しなくなる(「ヘッダー」と「調整可能」を一緒に使用する場合など)
    • アクセス可能: すべての役割が明確で、ナビゲーションジェスチャーが意図通りに動作する

問題の修正

矛盾する特性の問題を解決するためには、各要素に1つの役割特性のみを持たせ、すべての割り当てられた特性が互いに互換性があることを確認します。

UIKit

Storyboardでの修正方法:

  1. 矛盾するアクセシビリティ特性を持つ要素を選択する。
  2. インスペクターパネルが表示されていることを確認する。
  3. を選択する **アイデンティティインスペクター**
  4. **アクセシビリティ** の下で**特性** カテゴリを見つけて、矛盾する特性のチェックを外す。 コードで修正するには、矛盾する特性を削除します。例えば、ボタンが誤って両方とも

.button 割り当てられている場合: .link要素の実際の動作を反映する特性のみを保持します。要素がリンクとして動作する場合、ボタン特性を削除してください:

button.accessibilityTraits = [.button, .link]

SwiftUI

button.accessibilityTraits = .link

一緒に使用して、要素がその動作を正確に反映する特性のみを持つようにしてください。例えば、ボタンがリンクを模擬する場合、デフォルトのボタン特性を削除し、リンク特性を追加します:

Use .accessibility(addTraits:) and .accessibility(removeTraits:) together to ensure the element has only the traits that accurately reflect its behavior. For example, if a button mimics a link, remove the default button trait and add the link trait:

var body: some View {
    Button(action: { openLink() },
           label: {
        Text("Visit the website").padding()
    })
    .accessibility(addTraits: .isLink)
    .accessibility(removeTraits: .isButton)
}

React Native

このルールは、React Nativeの要素にはほとんどトリガーされません。なぜなら、 accessibilityRole は1つの値のみを受け入れるからです。要素の期待される動作を最も正確に表現する accessibilityRole 値を使用してください。

<Button
  title={'Learn more about axeDevTools'}
  accessible={true}
  accessibilityRole='link'
  onPress={goToLink}
/>

このルールを無視できますか?

Conflicting Traitsは、ユーザーにとって 重大な影響 を与えるため、この問題を修正することをお勧めします。このルールはAppleのベストプラクティスを強制するものですが、非常に影響力があります。制御が相反する特性を持っている場合、VoiceOverユーザーはそれと全くインタラクトできない可能性があります。それでも、このルールは モバイルダッシュボード から無効にすることや、iOSテストで個々の発見を無視することが可能です。 ルールの無視について詳しく学んでください。

リソース