Assignment statistics are are unclear when read with a screen reader

[henrycatalinismith]

Steps to reproduce

1. Open an assignment.
2. Press ⌘ + F5 to start VoiceOver.
3. Read the assignment statistics.

Expected outcome

Each item in the list should be read as a single cohesive sentence.

995 people in target group.

0 calls made.

0 successful calls.

This falls under 1.3.1 Info and Relationships.

Actual outcome

The number at the beginning and the label at the end are split into two separate pieces of content with no semantic relationship whatsoever, making for a confusing read if you can't see the visual relationships between the numbers and the text in the layout.

people in target group.

Calls made.

Successful calls.

Severity

The success criterion covering this issue is WCAG level A – the minimum level. Most organizations aim for a conformance level of AA, which includes all level A criteria. Although it's unlikely that this issue is impeding task completion, the fact that it's a basic level A issue means it's still moderately severe.

Recommendation

This is caused by the use of <p> tags to wrap the labels, which semantically misleads the screen reader into thinking it's a separate paragraph from the number. Replacing those with <span> tags is how I produced the "Expected outcome" GIF above so that's one way to do it.