A custom course-progress ring looks correct but TalkBack cannot explain it. What would you add?

Answer

Pixels do not describe their own meaning. A custom drawing needs semantic information so assistive technology can understand what it represents.

Example

For a determinate ring with an integer completion count:

Copy codeval fraction = if (total > 0) {
    (completed.toFloat() / total).coerceIn(0f, 1f)
} else {
    0f
}

Canvas(
    modifier = Modifier.size(64.dp).semantics {
        contentDescription = "Course progress"
        progressBarRangeInfo = ProgressBarRangeInfo(
            current = fraction,
            range = 0f..1f
        )
    }
) {
    // Draw the ring using the same fraction.
}

Use localized resources for production labels. If zero total means loading or unavailable rather than zero completion, expose that state instead of silently presenting it as an empty course.

How to verify

Inspect the semantics tree, then navigate the screen with TalkBack. Check for a useful label, meaningful progress, and duplicate announcements from nearby text. If the ring is also an action, use appropriate interactive semantics and an adequate touch target; a progress value alone does not describe a button.

Follow-up to practise

Should every decorative shape have a description? No. Describe useful information and controls. Extra descriptions for decorative elements can make navigation noisy.

Reference

Android Developers: Compose semantics