Jetpack Compose Academy · レッスン

アクセシビリティとエッジツーエッジUI

TalkBack、大きなフォント、インセットに対応します。

「アクセシビリティとエッジツーエッジUI」はCoddyKit上の無料Jetpack Compose Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Polish Before You Ship

A great app is for everyone. Before release, you make it usable with screen readers, large fonts, and modern full-screen layouts.

What TalkBack Needs

Android has a screen reader called TalkBack. It speaks the UI aloud, so every meaningful element must carry a clear label it can announce.

contentDescription for Icons

Icons and images show no text, so TalkBack reads their contentDescription. Give each one a short, meaningful phrase that says what it does.

Icon(
    Icons.Default.Share,
    contentDescription = "Share post"
)

Hide Decoration from Readers

Purely decorative images add noise when spoken. Set contentDescription to null so TalkBack skips them and focuses on what matters.

Image(
    painter = bg,
    contentDescription = null
)

Respect Larger Fonts

Users can scale system text up. Size text in sp, not fixed dp, so your labels grow with the accessibility settings instead of clipping.

Text("Welcome", fontSize = 16.sp)

Touch Targets Stay Tappable

Small buttons are hard to hit. Aim for a 48dp minimum touch target so every control is comfortable for fingers and assistive switches.

Modifier.size(48.dp)

Going Edge-to-Edge

Modern apps draw behind the status and navigation bars. Call enableEdgeToEdge in your Activity to let content fill the entire screen.

enableEdgeToEdge()
setContent { App() }

Avoid Hiding Behind System Bars

Once edge-to-edge, content can slip under system bars. WindowInsets tell you exactly how much space those bars occupy so you can pad around them.

Quick Check

You add a share icon button. What lets TalkBack announce its purpose?

Apply Insets the Easy Way

The simplest fix is a safeDrawing inset modifier. It pads your content away from the cutouts and bars without any manual math.

Modifier.windowInsetsPadding(
    WindowInsets.safeDrawing
)

Test Accessibility Early

Turn on TalkBack and the Accessibility Scanner on a device. They surface missing labels and low contrast before a reviewer or user finds them.

Group Related Content

Scattered labels are tiring to hear. Use mergeDescendants in semantics so a card reads as one unit, giving TalkBack users a smoother pass.

Modifier.semantics(
    mergeDescendants = true
) {}

Recap: Accessible and Immersive

You labeled icons, scaled text in sp, kept targets at 48dp, and went edge-to-edge with insets. Now your app welcomes every user.

よくある質問

「アクセシビリティとエッジツーエッジUI」レッスンは無料ですか？

はい。「アクセシビリティとエッジツーエッジUI」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。

「アクセシビリティとエッジツーエッジUI」で何を学びますか？

TalkBack、大きなフォント、インセットに対応します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Jetpack Compose Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「アクセシビリティとエッジツーエッジUI」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJetpack Compose Academyレッスンでコードを書いて実行できますか？

はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Jetpack Compose Academyに戻る