Improving the Accessibility of the Umbraco CMS Back Office

Accessibility and Sigma

Here at Sigma, we design, build and manage websites, mobile solutions and other digital products that are highly usable, accessible and engaging for all users, including those with particular access or assistive technology needs.

According to the latest statistics, there are around 14 million disabled people in the UK, representing around 21% of the population. We believe it makes sense to consider accessibility from the outset and work hard to promote digital inclusion. We don’t want accessibility to be an afterthought and inclusive products and services benefit everyone.

We also really enjoy working with Umbraco, it’s a great content management system, allowing editors to maintain their websites (and other digital solutions) with ease. It’s also used on more than 500,000 active sites and is growing fast.

Accessibility beyond web pages

When it comes to accessibility and meeting certain standards the focus is often on the front-end of the website but what about the back office experience? Editors and others responsible for maintaining content can spend a considerable amount of their time in the back office so it makes sense to ensure a seamless experience whether they’re using a desktop browser, tablet or mobile device. Access needs come in many forms with some users preferring plain language, larger text, good colour contrast etc and others using specific assistive technologies such as screen readers. We want editors to edit, not battle with a system they can’t use.

With Umbraco version 8 launching at the beginning of 2019 and introducing some great new features, including a revamped back office and better support for multilingual sites, we felt that now was a good time to review the accessibility of the editor experience.

The Umbraco accessibility team

Danny Lancaster (Test Analyst and Accessibility Consultant), Rachel Breeze (Senior Developer) and Shane Prendergast (Web Designer and Front-End Developer) from Sigma have teamed up with a number of other Umbraco practitioners from the friendly community and Umbraco HQ to make this happen.

So far, Danny has performed a thorough accessibility audit across version 8.0.1 of the Umbraco back office. The audit included the use of automated tools, manual processes and the aid of assistive technologies, with all the findings based on the WCAG guidelines (2.1).

Rachel Breeze (Senior Developer) configured an 8.0.1 Umbraco site for Danny to review. The site was configured using the starter kit available on Our Umbraco. This meant that:

• We could quickly get a site up and running.
• As the focus was on the back office, anyone else using the starter kit would be able to have the same initial back-office configuration as ourselves.

Once the audit had been performed on a single language we then configured the site to support two languages.

Danny found 151 issues across the back office. Some of the main themes involve the focus states for elements, navigating via keyboard controls and also using the CMS with a screen reader. The full results of this audit can be found on GitHub.

Shane has already submitted three Pull Requests to Umbraco to start to help fix the issues:

• To help users have sufficient focus when publishing and saving content.
• To help users close the Umbraco Tours popup when using a screen reader.
• To help users see where they are in the content tree when moving between items.

An ongoing project

This is a great project to be involved in and, as an Umbraco Gold Partner, we’re excited about continuing to develop a more inclusive Umbraco experience for all.

Thanks to Mike Masey for coordinating and to Jan Skovgaard, Tiffany Prosser and the wider community for helping out. This is what open-source software is all about.