We’re excited to share some exciting updates as part of the Jadu CMS 20.0.0 release (coming soon).
The introduction of EN 301 549 ‘Accessibility requirements for ICT products and services’ has enabled us with a timely opportunity to make fundamental, accessible changes to the Jadu CMS User Interface. Over the past few months, we’ve been focusing on ensuring the Control Centre is modern, consistent and most importantly compliant with WCAG 2.1 AA standards.
Below Paul Stanton, Product Owner of Pulsar provides us with a sneak peak into what his team has been working on. We'll keep you updated to when these changes will be rolled out and we’re working on more detailed documentation that we’ll share with you soon.
Note: we’ve made lots of changes in areas which won’t be immediately obvious or visible. Changes to the base HTML layout to use more semantic elements where appropriate, and introduce new ARIA landmarks which will help users of assistive technology to navigate through the page structure.
Visual Refresh
A lot of the grey styling/backgrounds have been stripped out of the Control Centre to improve contrast. We’ve also reorganised some of the common controls such as moving ‘workflow and publishing’ status to the ‘actions bar’ to make them easier to find.
Form controls will also appear larger, making them easier to see and click on.
Note: We haven’t made any dramatic changes to how features work, so adding a new News item should feel the same as it always has.
Classic Edit View
Pulsar Edit View
Classic List View
Pulsar List View
Rebuilt Toolbar
The ‘Toolbar’ is displayed at the top of each page within the Control Centre. Here you can view the search bar, notifications, user settings and links to the Product User Guides. If you’re in a multi-tenant environment there may also be a menu to switch between different Control Centres. The Toolbar uses a mixture of icons, dropdowns menu buttons and a ‘pill’ button which appears nowhere else in our software. We’ve taken the opportunity to rebuild the entire Toolbar using CSS flexbox to bring consistency to the controls. This is so the function of the controls is more obvious and easy to use, it also improves how the Toolbar responds when viewed on smaller screen devices.
The backwards selection of toolbar elements when you used the tab key caused accessibility issues, but now, controls within the Toolbar are positioned in the correct order. This means, when using the keyboard or assistive technologies moving through them is much easier to navigate through, and meets WCAG 2.1 AA standards.
Focus and Contrast
One of the more visible changes we’ve made is the improved focus states of various elements. This is the strong black-on-yellow colour scheme you’ll see on buttons, links, form fields, and any other element which can be focused when interacted with. This best-practice colour scheme meets the updated WCAG 2.1 (AA) guidelines for focus states and helps you to keep track of your position within the page, especially important for anyone with reduced vision.
There are also a number of contrast issues we’ve resolved as part of this release, including links in table headers or where a user interface may have a grey settings sidebar (like the Galaxies Designer tool). We use a collection of accessibility testing tools which automatically measure and report contrast issues for us to resolve.
We’ve also improved how modal (pop up) windows capture and trap focus. When you open a modal your focus will now jump to the first element and you shouldn’t be able to ‘tab out’ of the modal anymore which would lose your position in the interface. Trying to get outside of the modal by keyboard navigation will return you to the top of the form, and it’s still possible to get out of the keyboard trap by submitting the form, pressing the cancel/close buttons, or pressing the escape key. This ensures these elements meet the various WCAG requirements related to capturing and trapping focus.
We’ll share more detailed updates with you soon.
Leave a comment