2.3 Alternative options could be announced more clearly (Observation)

2.3.1 Alternative options could be announced more clearly

On the ‘Add Income for Dependants’ page, users can choose between a set frequency, or they can directly input the total income over the last three months. This is indicated to sighted users by separating the two types of input using the text ‘or’, as well as visually grouping the set frequencies together. So, it is made clear that users can choose a frequency OR the total.

However, when navigating with a screen reader, the ‘or’ is not announced. There is no distinction between the two types of options and this could affect the user’s understanding of the form. They would have to choose between ‘Every week’, …, ‘Every month’, and ‘Total in last 3 months’, and without additional context, this final option may seem out of place.

FIGURE 2.3: Radio button option on Add Income for Dependants page

2.3.2 Code Snippet

<input id="other-income" type="radio" value="true">
  <label for="other-income">
    Total in last 3 months 
  </label>

2.3.3 Recommendation

We recommend making this information clear to screen reader users as well. This can be achieved using a span element within the radio input that is visually hidden using CSS. E.g: <input id="other-income" type="radio" value="true"> <label for="other-income"> <span class="visually-hidden"> Or, enter your</span> Total in last 3 months </label>

Alternatively, use an aria-label. Do note that using this overrides the visually presented text for screen reader users: <input id="other-income" type="radio" value="true" aria-label="Or, enter your total in last 3 months > <label for="other-income"> Total in last 3 months </label>

2.3.4 Spot check: April 2024

This issue is unresolved. The ‘or’ is not announced to screen reader users. Please refer to the above recommendation.

---