相反する特性

確認する内容

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

このルールは、Apple の UIKit Accessibility Traitsに基づくベストプラクティスを強制します。このルールはモバイルダッシュボードからオフにすることができ、またはiOS用に書かれたテストでルールを無視するによってオフにすることができます。

不適切な例 ❌

ボタンが割り当てられている場合、 both the button and link traits

VoiceOver は次のように発音します two conflicting roles 同時に：
「記事を読む、ボタン、リンク」

これは混乱を招き、誤解を生じさせます — 単一の要素に2つの矛盾した役割を持たせるべきではありません。

適切な例 ✅

要素が割り当てられている場合、 only the link trait

VoiceOver は単一で明確な役割を発音します：
「記事を読む、リンク」

ナビゲーションジェスチャーは、割り当てられた役割に従って期待どおりに動作します

一目でわかる要約

• このルールはユーザーにとって重大な影響を持ちます
• アクセシビリティの特性は、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

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

要素がその動作を正確に反映する特性のみを持つようにするために、.accessibility(addTraits:)と.accessibility(removeTraits:)を一緒に使用します。たとえば、ボタンがリンクを模倣する場合は、デフォルトのボタン特性を削除してリンク特性を追加します：

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 テストで個別の発見を無視することも可能です。ルールの無視について詳細を学ぶ。

リソース

• Apple開発者ドキュメント
  • UIKit — accessibilityTraits
  • SwiftUI — AccessibilityTraits