What is the feedback component?
Components are reusable parts of the user interface that have been made to support a variety of applications. The feedback component is designed to sit at the bottom of every one of the more than 500,000 pages on GOV.UK so our users can submit feedback about the page they’re currently on.
For example, when people click on "Report a problem with this page" they see a short form with the heading “Help us improve GOV.UK”. Under this are 2 boxes asking “What were you doing?” and “What went wrong?” so people can give feedback on the page. This feedback can show what is working well, and also can demonstrate any concerns.
Problems we wanted to fix
Without CSS enabled, people saw the component toggle buttons and both feedback forms all at the same time which was confusing.
For example, in the image above both feedback forms were shown at the same time with the same heading “Help us improve GOV.UK” but with different ways to give feedback. One form asked people to give feedback on the page. Another form asked people to give their email address to receive a survey. Also, “Thank you for your feedback” was displayed under the toggle buttons before people interacted with the component to give their positive feedback.
Interactive elements such as “Report a problem with this page” or “Close” were broken; clicking, or touching, any of these buttons had no effect.
These issues meant a poor user experience for some people.
Who was this affecting
This was a problem for many different types of users including people with cognitive disabilities or visually impaired people.
People with cognitive disabilities can experience difficulties with memory, problem-solving, attention or visual comprehension. The issues we found resulted in a cluttered layout and too many distractions, making for a frustrating experience and ultimately creating a barrier to providing feedback.
Navigating the page with a screen reader was really difficult. For instance, when tested with VoiceOver and using Chrome, the rotor identified duplicate headings for “Help us improve GOV.UK” and duplicate buttons “Close expanded button” and “Send button”. How would someone know the difference or which one to select? Also, the confirmation message, “Thank you for your feedback”, was read even though a form had not been submitted.
How did we fix it?
When CSS is unavailable following this fix, everything should work exactly the same - only without styling.
They can interact with the buttons to leave positive feedback or to complete either of the feedback forms.
When making these changes, we also realised that the single-line text fields included in the form for “What were you doing?” and “What went wrong?” were too small, making it difficult for visitors to provide detailed feedback.
So, we swapped these fields for text areas to allow for larger amounts of text to be entered. Additionally, the drag handle in the right-hand corner can be used to alter the size of the form control.
Progressive enhancement is a principle core to any user interface features developed for GOV.UK.
Sometimes, with components that have not been looked at for a while, we may discover issues that go against those principles. Identifying and resolving these issues is essential to making GOV.UK as accessible as possible.
You may be interested in: