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

あなたのチームは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
    )

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

あなたのビューの1つに冗長な状態があるかもしれません。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

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

カスタムビューをお持ちのようです。 AccessibilityNodeInfo を編集して、 className ビューに適切な目的を提供してください。

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ライブラリをご覧ください。