意味のあるアクセシブルな名前

私たちが確認すること

要素のアクセシブルな名前には、そのアクセシビリティ特性を含めてはいけません。VoiceOverは特性を自動的に読み上げるので、名前に含めると2回読み上げられることになります。

このルールは、AppleのHuman Interface Guidelinesによって設定されたベストプラクティスを強制します。このルールはモバイルダッシュボードからオフにするか、iOS用に書かれたテストでルールを無視するすることで無効にできます。

失敗例 ❌

VoiceOver announces: 「いいねボタン、ボタン」

アクセシブルな名前に「ボタン」という単語が含まれており、 and トレイトとして再度アナウンスされ、冗長な発表となり、スクリーンリーダーユーザーを混乱させる可能性があります。

成功例 ✅

VoiceOver announces: 「この記事が好き、ボタン」

アクセシブルな名前「この記事が好き」には、その要素のトレイトが含まれていません。

VoiceOverはトレイトを自動的に追加するため、ユーザーはそれぞれの情報を正確に一度だけ聞くことができます。

概要

• このルールはユーザーにとって軽微な影響があります
• 要素のアクセシブルな名前にアクセシビリティ特性を繰り返してはいけません - VoiceOverが自動的に特性を読み上げます
• 例えば、「次へボタン」という名前のボタンは、VoiceOverが「次へボタン、ボタン」と冗長な読み上げを行います

ユーザーへの影響

VoiceOverユーザーに最も影響があります。アクセシブルな名前に要素の特性が含まれていると、VoiceOverは特性を2回読み上げます - 例えば、「次へボタン、ボタン」ではなく「次へ、ボタン」となるべきです。これは冗長であり、スクリーンリーダーユーザーにとって混乱や注意の妨げになる可能性があります。

意味のあるアクセシブルな名前の問題を確認する

1. VoiceOverをオンにします
2. 要素にフォーカスする
3. 次のいずれかが発生します:
   • アクセス不可: VoiceOverは要素のアクセシビリティ特性を2回 - アクセシブルな名前の一部として、そして特性としてもう一度（例：「次へボタン、ボタン」）読み上げる
   • アクセス可能: VoiceOverはアクセシブルな名前を読み上げ、その後に特性を（例：「次へ、ボタン」）読み上げる

問題を修正する

意味のあるアクセシブルな名前の問題を解決するには、アクセシブルな名前に要素のアクセシビリティ特性を含めないようにしてください。VoiceOverは特性を自動的に付加するため、名前に含めると冗長な読み上げになります。

UIKit

Storyboardの場合の修正方法:

1. MeaningfulAccessibleNameに問題がある要素を選択します。
2. 「
3. 」を選択します。を選択してください。
4. アクセシビリティの下で、要素のアクセシビリティトレイトを含まない、可視テキストと一致するラベルを入力します。

コードで修正する場合、アクセシビリティラベルの値が要素の見えるテキスト全体と一致するか含み、かつそのアクセシビリティ特性を含んでいないことを確認してください:

button.title = "Next"
button.accessibilityTraits = .button

SwiftUI

アクセシビリティラベルを設定して、見えるテキストを含み、要素のアクセシビリティ特性を含まないようにします:

Button(action: {
    openMenu()
}) {
    Text("Next")
}.accessibility(label: Text("Next"))

React Native

要素のaccessibilityLabelに要素のaccessibilityRole値が含まれていないことを確認してください。

<Button title='Order now' accessibilityLabel='order now' accessibilityRole='button'/>

Flutter

アクセシブルな名前は要素の目的を説明しなければなりません。「ボタン」や「画像」のような一般的な名前を避け、名前に役割を含めないでください。スクリーンリーダーは役割を別途読み上げます。

  // Failing — name includes the role, screen reader says "Search button, button"
  IconButton(
    icon: const Icon(Icons.search),
    tooltip: 'Search button',
    onPressed: () {},
  )

  // Passing — name describes the action, screen reader says "Search, button"
  IconButton(
    icon: const Icon(Icons.search),
    tooltip: 'Search',
    onPressed: () {},
  )

このルールを無視してもよいか？

意味のあるアクセシブルな名前は、ユーザーにとって軽微な影響となるものであり、WCAGの厳しい要件ではなく、Appleのベストプラクティスを強制します。このルールはモバイルダッシュボードから完全に無効にするか、iOSテストで個々の発見を無視することができます。ルールの無視についてさらに詳しく学んでください。

リソース

その他のリソース

• Apple ヒューマンインターフェースガイドライン
  • VoiceOver — 説明