The Umbraco Backoffice accessibility initiative
Umbraco is an open-source content management system (CMS) built on the Microsoft Technology Stack. It’s used by many websites worldwide including charity websites like Mind, Diversity Role Models, Versus Arthritis and Amnesty International UK.
Umbraco is both extensible and flexible, and because it’s built in C# it can be extended to integrate with other systems like Microsoft Dynamics, a CRM or Syspro (an ERP).
One of the key elements in its flexibility is the Backoffice. This allows content authors to maintain website content, and for developers to tie the code they write to the websites and applications they are developing.
The Accessibility Initiative
Umbraco has a great community with friendliness, integrity and respect at the heart of it, and we reflect this clearly in our values. Because inclusion and diversity are at the heart of Umbraco and many of the websites built with Umbraco, it makes sense to ensure Backoffice is as accessible as possible.
In February 2019, Umbraco 8 was launched with a new Backoffice and support for multilingual sites. Following this, the Umbraco community have been working hard to improve accessibility within the Umbraco 8 Backoffice.
Goals
The Umbraco community set a goal of submitting 5 pull requests (or PRs) before Codegarden, the largest international Umbraco conference, in May 2019. The community more than met that goal with 13 PRs being submitted.
The Umbraco community is passionate about accessibility and is working hard to bring accessibility into the Umbraco Backoffice, and the long term goal is to create a Backoffice that is WCAG 2.1 Level AA compliant. As of March this year, 186 accessibility-related PRs have been made to the code base, and 177 have been accepted.
A wonderful group of people from the Umbraco community have been helping us to greatly improve the accessibility of the Backoffice. They aim to take away barriers to using the Umbraco Backoffice for people with disabilities.
Why Accessibility In The Backoffice Matters
The Umbraco Backoffice is used by everyone who is responsible for building and maintaining websites and web applications, from developers to content authors. A considerable amount of time can be spent working in the Backoffice, so it makes sense to ensure a seamless experience for everyone.
We want editors and developers to be able to edit and create websites, not battle with a system they can’t use. Indeed, ATAG (the authoring tool accessibility guidelines from W3C) says that authoring tools should themselves be accessible so that people with disabilities can create web content.
As team member Jan Skovgaard shows in this write-up, the DNA of Umbraco and the community is to be diverse and inclusive, and the accessibility work is a natural extension of that.
Improving Core Elements Helps Packages
Umbraco is built using directives, and we have seen numerous directives improved as part of the accessibility project. Developers can extend Umbraco by creating packages and content applications. Such developers will have seen accessibility improvements in their packages if the users have newer versions of Umbraco, and the packages’ developers have utilised Umbraco Directives.
Feedback
Improvements have seen the removal of reliance on a mouse for navigating the Backoffice, which is huge for accessibility. Feedback from Umbraco HQ has been:
“The keyboard navigation improvements are incredibly helpful even if you don’t have any disabilities. There’s much less need to grab the mouse while doing your Umbraco work, which can also help a lot with productivity!”
We have also seen improvements on focus locking. This means that when a pop-up menu is displayed, it’s not possible to navigate around the page outside of that menu.
A demonstration of some of these changes can be seen in this video.
Unexpected Side Effects
Umbraco (through Nexer) have been involved in a collaboration with other content management systems such as Drupal and Joomla, to look at improving the accessibility of the content generated.
Furthermore, Umbraco has launched an accessibility course (developed with Nexer), which we believe to be the first course of it’s kind for a content management system.
The Team
The Umbraco team members are:
- Mike Masey – Meetup co-ordinator
- Danny Lancaster – Tester
- Tiffany Prosser, Mathew Wise, Jan Skovgaard, Rachel Breeze – Core Team Members
Many of us actively promote accessibility both in Umbraco and to the wider development community, and team members can frequently be found at Umbraco Hackathons supporting accessibility.
Whilst there is a core community team working on the accessibility of the Backoffice, the whole community has been great at helping by creating accessibility-related pull requests. We’ve had contributions by Shane Prendergast, Florian Beijers, Paul Seal, Poornima Nayar, Kenn Jacobsen, Bjarne Fyrstenborg, Kasper F. Christensen, Joe Glombek, Doug Moore, Sven Geusens and Søren Kottal, to name a few!
One contribution was even made as part of a mob programming session at an Umbraco conference!
How to get involved
There are a number of ways you can get involved with helping the Umbraco Accessibility Team, such as;
- Adding Accessibility related issues to the GitHub issue tracker.
- Creating PRs to help fix known (or unknown) accessibility issues.
- Testing the latest version of Umbraco for issues (When we are able to, we carry out a full accessibility audit of the Backoffice too).
- Get involved with discussions around, potentially, features and fixes for accessibility issues.
Whilst we do have “core” team members, we don’t have a limit to how many people can be involved. If you would like to be involved with the core team, please do get in touch. We tend to have discussions on slack and occasional video calls to catch up and discuses progress and next steps every month or so.
Summary
The Umbraco Backoffice accessibility initiative has pulled together different skillsets, from UX to front-end development to QA. It shows how the Umbraco community, supported by companies like Nexer, Yoyo Design and Vertica, can come together to create a more inclusive and accessible product. With people being involved in development from around the globe, it also shows that Open Source development doesn’t have to be restricted by location. But the biggest win, for me, is that the accessibility initiative has raised awareness of the importance of designing for inclusion and accessibility within the community.
Consider joining us for Umbraad this week, the first ever Umbraco Accessibility Awareness Day. We’re running it this Thursday, which is also Global Accessibility Awareness Day.
