THE JADU BLOG

Here's where you'll find lots of useful information about our customers' successes, product and partner news... and lots more!

All Posts

CMS Control Centre - Accessibility Interface Updates

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

Classic Edit ViewPulsar Edit View

Puslar Edit ViewClassic List View
Classic List ViewPulsar List View

Pulsar List ViewRebuilt 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.

Control Centre drop down

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.

Contrast button

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.

Paul Stanton
Paul Stanton
Paul, Head of User Experience, and his team focus on the software interface for the Jadu products. They maintain the Pulsar open-source design system which provides a common framework, tools and documentation to help designers and developers build features within the Jadu platform.

Related Posts

Q&A with new(ish) PM All-Star, Sylwia Checinska!

What better way to give Technical Project Manager applicants an idea of what to expect here at Jadu than chatting with new(ish) PM All-Star, Sylwia Checinska?

The New Emergency Communications Module (for Jadu CMS)

Be it a natural disaster, accident, civil disturbance or terrorist attack - or any form of tragic or sombre event - the need for urgent, clear communication has been proven time and again to be of the utmost importance.

Sending Webhooks using rules in Jadu CXM

We are pleased to announce the release of an exciting enhancement to our webhooks feature within Jadu CXM, which opens more possibilities for you to use your data, and makes webhooks easier to work with. If you want to know more about webhooks then you might find it useful to read our previous post - ‘What are webhooks?’