Avatar > Add more meaning to badge

Problem

A static badge in the stacked example isn't adding any helpful meaning. For example, a badge with "+3" text is announced as "plus three" in read/browse mode, but it doesn't clarify the subject.

Solution

Add a gl-sr-only span that includes more explanatory text. We're taking the same approach with badges in tabs in #1574 (moved).

For example: <span class="badge">+3<span class="sr-only"> additional users</span></span>