search

scottish-government-design-system / design-system

Design System for the Scottish Government and other Scottish public sector bodies
https://designsystem.gov.scot
MIT License
29 stars 12 forks source link

[BUG][Accessibility]: Error message should be referenced by inputs #104

Closed lewisdorigo closed 3 months ago

lewisdorigo commented 4 months ago

Description of the issue

As part of a recent accessibility audit on Social Security Scotland’s Digital Portal, it was noted that the a field's error message should be referenced by the input.

Currently, on the examples of the Error Message component, inputs use aria-describedby to associate the input with hint text.

Error messages should also be given an id, and likewise be associated with the relevant input via the aria-describedby attribute.

E.g.:

<div class="ds_question  ds_question--error" id="error-id-three">
    <label class="ds_label" for="more-detail">Please provide more detail</label>
    <p class="ds_hint-text" id="hint-text-more-detail">Do not include personal or financial information, like your National Insurance number or credit card details.</p>
    <p class="ds_question__error-message" id="error-1-more-detail">This field is required</p>
    <textarea rows="5" class="ds_input  ds_input--error" id="more-detail" name="more-detail" aria-invalid="true" aria-required="true" aria-describedby="hint-text-more-detail error-1-more-detail"></textarea>
</div>
lewisdorigo commented 3 months ago

Can see this was updated in the error message page. 👍🏼