We regularly review Find postgraduate teacher training (Find) to ensure it meets accessibility standards.
The latest review revealed several changes were needed, which are not visually apparent but improve the accessibility of Find.
What we changed
We have updated:
- the close filters button
- individual filter headings
- page titles
- error messages
- the ‘change’ search link
Close filters button
Screen reader users navigating the expanded filters panel on a mobile device will notice a button with the name ‘Close’.
It is unclear to users that they can use the button to close the filter options, as we need to mark the filter content as a dialog element.
We have updated the close filters button to include the visually hidden text ‘Close filter menu’.
<button class="app-filter__close" type="button">
Close<span class="govuk-visually-hidden"> filter menu</span>
</button>
In future, we will consider updating the filters panel to be a dialog element.
Individual filter headings
The filter panel includes grouped filter options such as study type, qualifications and degree type. These options do not contain descriptive headings for screen reader users to understand that they are related to filtering the course results list.
We have updated the filter legends to include the visually hidden text ‘filter’.
For example:
<legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
Special educational needs<span class="govuk-visually-hidden"> filter</span>
</legend>
Page titles
All page titles (meta titles) should include the heading and service name, and end with GOV.UK.
The primary and secondary subject page titles are not unique, as they do not use the page heading. We have updated the titles to fix this.
For example:
<title>
Primary courses with subject specialisms - Find postgraduate teacher training - GOV.UK
</title>
Error messages
Some of the error messages used in Find do not comply with the GOV.UK Design System.
When an error occurs, we must show:
- a summary of the errors above the page heading, even if there is only one
- a message in red after the question text and hint text
We have:
- updated the error messages shown adjacent to the question with visually hidden ‘Error:’ text.
- made the error summaries shown above the page heading full width
- made sure the error messages in the error summary are worded the same as those which appear next to the inputs with errors
For example:
<p class="govuk-error-message">
<span class="govuk-visually-hidden">Error:</span> Select find courses by location or by training provider
</p>
‘Change’ search link
Screen reader users can notice that some links on the page contain text that is merged.
For example, the link ‘Change’ on the course results list is announced by screen readers as ‘Changesubject or location’ because there is no non-breaking space to break up ‘Change’ and ‘subject’. This can make it difficult for some users to understand the words being announced.
We have added non-breaking space between ‘Change’ and the visually hidden text on the search results page.
The space needs to be within the visually hidden text, not outside it.
<a class="govuk-link govuk-link--no-visited-state" href="#">
Change<span class="govuk-visually-hidden"> subject or location</span>
</a>