Character count remaining characters message not visible

[NickColley]

This issue is from a May 2019 external accessibility audit report.

WCAG Reference: Usability feedback only, there is no WCAG related guidelines.
Issue ID: DAC_22
URL: http://govuk-frontend-v3.herokuapp.com/full-page-examples/feedback

Screen Shot

There is a character count that has been added to the text areas, however, the first ‘What are you trying to do?’ form field’s character count is not functioning and is not visible on the page. This is due to it being hidden using the CSS property of visibility:hidden; Although this may have been intentionally hidden, ZoomText users that rely on audio feedback were able to hear this information which was confusing as it was not visible to them on the page.

Current Code Ref(s)

<div class="govuk-form-group"> <label class="govuk-label" for="what-were-you-trying-to-do"> What were you trying to do? </label> <textarea class="govuk-textarea js-character-count" id="what-were-you-trying-to-do" name="what-were-you-trying-to-do" rows="5"></textarea> <span id="what-were-you-trying-to-do-info" class="govuk-hint govuk-character-count__message govuk-character-count__message--disabled" aria-live="polite">You have 100 characters remaining</span> </div>

.govuk-character-count__message--disabled { visibility: hidden; }

ZoomText user comments

“Asked to enter more characters than required, I noted that there was no visible instruction next to the form to make the user aware of this limit. Also, by randomly swiping across the bottom of the form, I noted an audible label informing me of a character limitation, but this was not visible. Having entered excessive characters, a visible message did inform a user of this.”

Solution

Ensure that, if the count is to be hidden, that it is hidden from all users, which may require the use of display:none and aria-hidden.

[kellylee-gds]

Closed in #1442