アクセシビリティスキャナーの改善

あなたのチームはGoogleのAndroidアクセシビリティスキャナーを使っていますか？

このセクションでは、スキャナーがチェックするルールに対する修正アドバイスを提供します。アクセシビリティ スキャナーと Axe DevTools Mobileを活用する方法について詳しくお読みください。

現在のチェック、説明、更新の完全なリストについては、Googleのアクセシビリティスキャナーのガイドラインをご覧ください。

コンテンツのラベリング

アイテムラベルの欠如

ビュー内のコンテンツに文脈情報が欠けている可能性があります。

ユーザーに情報を提供するビューの場合、このアクセシビリティの問題を解決するために次のいずれかを提供してください:

• android:contentDescription: ほとんどの場合、コンテンツ説明を追加するだけで十分です。
• android:hint: 編集可能なテキストビューに対して、ユーザーが入力すべきデータの種類を説明するヒントを追加できます。
• android:labelFor: このタグは、あるビューを別のビューのラベルとして割り当てることを可能にします。

装飾画像

重要な情報を提供しない装飾画像は、アクセシビリティには重要ではないとしてマークできます。

XMLの場合: android:importantForAccessibility="no"

またはComposeの場合:

Image(
      imageVector = Icons.Filled.AccountCircle,
      contentDescription = null // decorative
    )

タイプまたは状態でラベル付けされたアイテム

ビューのひとつに冗長な状態があるかもしれません。Androidはオン、オフ、チェック済み、または未チェックのような状態を持つデフォルトビューを提供しています。読み上げに状態を加えると、混乱を招くことがあります。

このアクセシビリティの問題を解決するためには、以下の点を確認してください:

• チェックボックスには文脈を示すラベルがある
• 状態の説明がビューの説明に追加されていない

<TextView
      android:id="@+id/edit_text_label"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:labelFor="@+id/example"
      android:text="Check Label" />

<androidx.appcompat.widget.AppCompatCheckBox
      android:id="@+id/example"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/with_text"/>

重複するアイテムの説明

階層内の複数のビューに同一の説明があることが発見されました。

これはWCAGの失敗ではなく、場合によってはこれが必要とされることもあります。コンテンツ説明が重複している場合は、それぞれがビューとインタラクションすることの結果をユーザーに知らせるのに十分な文脈を提供していることを確認してください。

リンクの目的が不明瞭

リンクはその目的を伝えるのに十分なテキストを含める必要があります。「ここをクリック」のような説明を使用する場合は、周囲のテキストがリンクの目的を解読できるほどの情報を含んでいることを確認しなければなりません。

実装 - クリック可能な項目

クリック可能なリンク

リンクは明確に表示され、ローカルコンテキストメニューから簡単にアクセスできる必要があります。Googleは、これらのリンクが検出されて活性化される可能性を高めるために、アプリのユーザーインターフェースにハイパーリンクを表示するためにURLSpanまたは便宜的なクラスLinkifyを使用することを提案しています。

重複するクリック可能なビュー

ビュー内のクリック可能な要素の1つが他のクリック可能な要素と重なっています。このアクセシビリティの問題を解決するには、次のいずれかの方法をお使いください:

• クリック可能な要素を移動して、衝突や重なりを避ける。
• ビューを移動できない場合は、双方のビューが適切なサイズのタップ領域を持ち、誰でも問題なく要素とインタラクションできることを確認してください。

編集可能なアイテムのラベル

編集可能なフィールドには、そのフィールドの目的を説明するラベルが必要です。

EditTextの例:

<TextView
      android:id="@+id/edit_text_label"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:labelFor="@+id/edit_text"
      android:text="Enter your username" />

<EditText
      android:id="@+id/edit_text"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:hint="Hint" />

CheckBoxの例:

TextViewを利用し、それをCheckBox要素と関連付けます:

val checkBox: CheckBox = ....... // Role: CheckBox
val label: TextView = ....... // Role: Label
label.setLabelFor(checkBox.getId()) // Associate the Checkbox with its Name

サポートされていないアイテムタイプ

カスタムビューがあるようです。ビューに適した目的をclassNameに提供するためにAccessibilityNodeInfoを編集してください。

val frameLayout = findViewById<FrameLayout>(R.id.custom_view)
frameLayout.setAccessibilityDelegate(object : View.AccessibilityDelegate() {
      override fun onInitializeAccessibilityNodeInfo(
          host: View,
          info: AccessibilityNodeInfo
      ) {
            info.className = "ClassName"
            info.contentDescription = "ContentDescription"
            super.onInitializeAccessibilityNodeInfo(host, info)           
      }
})

トラバーサル順序

TalkBackを使用してビューを文脈的にナビゲートできる場合、これは誤検出であり、対処する必要はありません。

TalkBackが支援技術を使用せずにアプリを読み上げる場合と同じ情報を提供しない場合、ビューの順序を編集することを考慮するかもしれません。正確に行うのが難しく、無限ループをうっかり追加してしまうこともあるため、トラバーサル順序の編集はお勧めしません。トラバーサル順序を変更するには、android:accessibilityTraversalBeforeとandroid:accessibilityTraversalAfterを利用してください。

テキストの拡大縮小

すべてのテキスト要素は、密度に依存しないピクセル（dp）よりもスケーラブルなピクセル（sp）を使用して、デバイスのフォントサイズのアクセシビリティ設定に応じてテキストがスケールするようにしてください。

タッチターゲットサイズ

アクティブコントロールの視覚的およびタッチ可能エリアに関する推奨事項と修正アドバイスについては、Androidライブラリのタッチターゲットサイズルールを参照してください。

低コントラスト

テキストとその背景の間の色のコントラストは、WCAG 2 AAの最小比率基準を満たす必要があります。この比率について学び、Androidライブラリのカラ―コントラストルールでロウコントラストに対する修正アドバイスを見つけてください。