Progressive enhancement of a details component
Redesigning an expandable details component in the ONS Design System to improve accessibility, usability and ability to print following user feedback
Overview
Redesigning an expandable details component for the ONS Design System to improve accessibility, usability and long term maintainability.
The challenge
During testing of a new details component in the ONS design system, I noticed that we were using a custom javascript solution which had some usability and accessibility issues. I questioned if we had considered using a native HTML details component, as this would provide a more accessible, user friendly solution out of the box.
Following discussion with the lead developer and designer, I learned that the details element had previously been considered and tested, but user feedback had raised an issue with the component not responding appropriately when users printed the page, so a custom javascript solution had been prioritised. However, the user research team revealed that the current javascript-only version had created another problem, users weren’t able to search for content inside the expandable panels using CTRL+F in their browser. This was a significant issue for users when scanning long pages such as statistical articles or methodology pages, where they would rely on CTRL+F to quickly find key information.
What I did
I proposed exploring a new prototype, which progressively enhanced the native HTML details component to resolve the challenges raised from user testing. A spike ticket was created to investigate alternative solutions. The goals were to:
- Ensure content inside the component was searchable using CTRL+F
- Fix the original print issues raised by enhancing the component with javascript
- Maintain a good user experience when javascript was disabled, ensuring content was still accessible
I created a working prototype which resolved these issues by:
- Expanded all panels automatically when the print dialog was opened
- Using javascript to check which panels were open before printing, then keeping them open after the print dialog was closed
- Collapsed all other panels after printing, preserving the user’s previous state
I shared my prototype with the design system team, working closely with the lead interaction designer and lead developer to refine the functionality by testing across multiple browsers, with and without javascript enabled to ensure user experience was consistent.
The outcome
The new component was approved and merged into the ONS Design System. It resolved all the issues raised by user researchers, while also being more maintainable for the design system team.
- Content inside the panels is now fully searchable via CTRL+F
- The details elements are now progressively enhanced with javascript to be print-friendly, responding appropriately based on the current and previous page state
- Reduced dependency on custom JavaScript