A responsive WCAG 2.2 update
What I did
- Interface design
- Front-end development
- Accessibility
- Stakeholder engagement
Maldaba worked closely with University Hospitals Sussex NHS Trust to develop and support next generation knowledge management software, KnowledgeShare, for NHS professionals.
This is the story of how we combined a responsive update with the latest 2.2 accessibility requirements.
What is KnowledgeShare?
KnowledgeShare connects health care staff with their local NHS library and knowledge service. Registered users can also use KnowledgeShare to find colleagues with shared interests, helping to spread innovation and collaborate on service improvement.
It is a complex system, and over its 10 plus year lifespan, the feature set has been increased dramatically to accommodate new user requirements, and currently has over 100 unique pages for processing user requests and managing content.
An accessible update
From user feedback the client became aware that mobile access was now more essential than ever. As a result of dedicated funding it was agreed that we would update the system to be fully responsive across all pages, as well as updating to accommodate the recently introduced WCAG 2.2.
The Results
CSS written from scratch to make the entire site responsive
Although the client only wanted key aspects of the site to be made mobile compatible it was far easier to do a completer re-write of the CSS to ensure there were no unforseen impacts due to old browser support that were no longer needed.
All content available on any device
The feedback in the months following the update have been very positive now all users, librarians and admins can perform all tasks on any device they choose.
The full story
Time for a reset
Maldaba previously investigated updating the system to be responsive as part of WCAG 2.1 - Success Criterion 1.4.10 Reflow, but after some initial investigation it soon became clear that minor code differences introduced over the years, and a reliance on fixed sizing and absolute positing, would make that quite difficult.
Due the additional funds one of the developers and I were able to conduct a code review and identify certain aspects that could be standardised and simplified. As a result of this is was determined that a full CSS reset would be the best course of action. Trying to unpick all the existing all the existing fixed size styling and adapt it to a responsive layout was going to be counterproductive. Starting completely from scratch was the sensible option.
WCAG 2.2
A key part of the update was accommodating, where possible, new aspects of the recently released WCAG 2.2. One significant element of WCAG 2.2 is target size. The requirement is for the all icons to have a minimum dimension of 24 x 24 CSS pixels. To accommodate this I built a complete new set of icons, that would meet the new target size guideline, while also being appropriate for current hi-resolution screens.
As well as increasing the icon size the default font sizes were also increased to bring them more in line with typical current sizing. As is typical for all our public sector solutions we do we use the GOV.UK Design System as a start point.
We needed to ensure that all aspects of the current system would function on a mobile device so there were many challenges adapting key aspects of the user interface.
A major factor in the current system is a switchable tabbed interface that allows the user to reference details in different associated content For mobile many of the wrapper layers were removed to ensure there was no unnecessary bloat in the mobile interface,
Expectations exceeded
The changes exceeded the clients expectations as were were able to accommodate 100% of the system using responsive design. The code simplification accommodated as part of this update ensures a far easier process with regard to future changes.
Maldaba have a very collaborative way of working, which we really like. Working with them has been an excellent experience. Maldaba have supported us integrating with other companies during the project, working those companies on our behalf. I’ve recommended others work with Maldaba and I would again.
View the project at https://www.knowledgeshare.nhs.uk
