An open laptop showing the feedback component on the screen.

We recently updated the feedback component to be more resilient using progressive enhancement and to be accessible and usable when Cascading Style Sheets (CSS) and/or JavaScript are disabled or unavailable. We did this to improve GOV.UK for all our users, and particularly people with cognitive disabilities or visual impairments.

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.

Feedback component on a mobile with both CSS and JavaScript enabled

With CSS and JavaScript enabled, the feedback component displays under the heading "Is this page useful?". Under this heading there are buttons for “Yes” and “No”. There is one button underneath them for “Report a problem with this page”.

The component uses JavaScript to handle interactions such as button clicks. For example, someone can give positive feedback by clicking the “Yes” button. Or they can click “No” or “Report a problem with this page” to toggle the visibility of 2 hidden forms to submit detailed feedback.

Expanded feedback component when "Report a problem with this page" is clicked with both CSS and JavaScript enabled

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.

Feedback component issues when CSS is disabled

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.

This was because CSS classes set the visibility of the component elements which were then added or removed by JavaScript. When CSS was unavailable, the CSS classes used to toggle element visibility were not detected, so everything was visible and the interactive buttons did not work.

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.

Visually impaired users may prefer to disable CSS, use their own styles, or do both to define a much larger text size and thereby encounter the same problems.

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?

Going back to our progressive enhancement principles, we wanted to make sure that the component would remain usable without CSS and JavaScript.

Using the HTML hidden attribute instead of CSS classes to set the visibility of component elements seemed the best way for us to achieve this. Since it’s an HTML attribute it is not affected by the absence of CSS or JavaScript. We added the attribute to any elements that should be hidden by default (like the form whose presence is controlled by the “Report a problem with this page” button), leaving the survey sign-up form visible (usually controlled by the “No this page is not useful button”).

When CSS is unavailable following this fix, everything should work exactly the same – only without styling.

When JavaScript is unavailable, the component should only show the survey sign-up feedback form. This is because the JavaScript adds interactivity by displaying buttons to submit feedback, or toggle the visibility of the 2 feedback forms, to progressively enhance the form.

Feedback component when CSS is disabled after recent fixes

Now, if someone visits GOV.UK without CSS but with JavaScript, people see the heading “Is this page useful?”, with 2 bulleted buttons underneath saying “Yes this page is useful” and “No this page is not useful”, as shown above. Under the bulleted buttons there is one button that says “Report a problem with this page”.

They can interact with the buttons to leave positive feedback or to complete either of the feedback forms.

eedback component survey sign up form after recent fixes when JavaScript is disabled or unavailable

With CSS but without JavaScript, people are only offered one way to give feedback which prevents them seeing 2 forms with duplicate headings. They are shown the survey sign-up form where they can fill in the email address single-line text field, click or touch the “Send me the survey” button and submit the form, as shown above.

Feedback survey sign up form when CSS and JavaScript are unavailable

When both CSS and JavaScript are unavailable, people are shown the same survey sign-up feedback form but without styling.

Other improvements

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.

Next steps

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.

Original source – Inside GOV.UK

Comments closed