Skip to main content

An Upgraded Experience with Drupal 10

Description
We upgraded 8 sites to Drupal 10 for the Centers for Medicare and Medicaid Services (CMS) ahead of deadline.
Teaser Image
Image
Photo of hands typing on a laptop beside a toy ambulance and stethoscope.
Body

CivicActions, along with our partner Fearless, facilitated Drupal 10 upgrades across the Centers for Medicare and Medicaid Services (CMS) suite of websites, bringing improvements for editors, better security and accessibility, and community contributions to streamline upgrades for large- scale Drupal. The new Claro administration theme is cleaner, clearer, and more accessible.

The new rich text editor CKEditor 5 provides many UI enhancements and an improved user experience. The most significant change from previous versions of CKEditor is that editors must now use a predefined set of elements to configure the content, which leads to fewer instances of invalid markup patterns making their way into the published site. Since invalid or non-semantic markup is often the cause of accessibility issues, this is a major upgrade. In addition, the improved Layout Builder experience makes it easier for content editors to control more complex layouts, while still keeping consistent with CMS Design System standards.

The 8 sites included in the upgrade, which occurred ahead of schedule, were: CMS.gov; Medicare.gov; Openpaymentsdata.cms.gov; Data.medicaid.gov; Data.healthcare.gov; SDIS.medicaid.gov (internal CMS site); PFS.data.cms.gov (internal CMS site); QIC.cms.gov (internal CMS site); and Provider Data Catalog (data.cms.gov/provider-data).

Outcomes

More Accessible Experience

The new Claro administration theme is cleaner, clearer, and more accessible. In addition, the shift to CKEditor5 decreases accessibility errors from invalid markup.


 

Better User Interface for Editors

The improved Layout Builder experience makes it easier for content editors to control more complex layouts, while still keeping consistent with CMS Design System standards.


 

Improved Human-Centered Design

Drupal 10’s new rich text editor CKEditor 5 provides many UI enhancements and an improved user experience.


 

Better than On Time

This work was completed before the deadline and included upgrades on eight websites for CMS, meaning more improvements sooner.


 

Improved Security

Drupal 10’s upgraded Symfony 6 allows for increased security, so site users can feel secure that their data is private.


 

Seamless Transition

With zero downtime during upgrades, this work was swiftly executed with a seamless transition to Drupal 10.


 

Proof points
Value
600
Description

CMS.gov editors

Value
0
Description

Downtime during upgrades

Value
8
Description

Sites upgraded

Accessibility Accelerator

Description
Modernizing the ACR (Accessibility Conformance Reporting) Process
Teaser Image
Image
Close-up photo of a colorful backlit laptop keyboard.
Body

The challenge

To ensure products used by the government are accessible, vendors must submit accessibility conformance reports (ACR) to demonstrate their products meet Section 508 requirements. The most commonly used ACR follows the Voluntary Product Accessibility Template (VPAT), a templated Word Document or PDF that software vendors fill in manually, and often is not an accurate representation of product accessibility.

The ACR process is inconsistently structured, not searchable, static, and with no version control. For this reason, providing more accessible services can be complex and disempowering for vendors and procurement officers. The General Services Administration (GSA), which manages and supports the basic functioning of federal agencies, was interested in finding ways to modernize the ACR process. After requesting a Market Research Request for Information (RFI), we responded with the concept for OpenACR, a tool that simplifies the process of finding, sharing, and maintaining accurate and actionable data about product accessibility. After GSA reviewed potential solutions, CivicActions was awarded the contract for our innovative approach.

Our Approach

Our team, led by Senior Strategist and accessibility expert Mike Gifford, realized that the process of managing ACRs hadn’t kept up with the nature of modern software development. Leveraging the YAML machine-readable language, the team created a highly structured report format that can be easily exported to an accessible and readable HTML document.

OpenACR, Open Source

Our team was excited to do the development process in the open. OpenACR is open source, so other organizations and members of the open source community are free to generate input and build on OpenACR’s source code. Subject Matter Experts (SMEs) worldwide have contributed to the development of this new tool, and all are welcome to visit the open issue queue to add feedback.

Foundational Accessibility

OpenACR sets a new standard for foundational accessibility. By building a machine-readable ACR, OpenACR allows for developing a central directory of accessibility standards for software used by the government. This is a significant milestone in standardizing accessibility practices and simplifies the process of communicating product accessibility for vendors and government IT buyers.

Outcomes

Radically Improving Accessibility

OpenACR can reshape how procurement officers worldwide choose software for their organizations’ needs. By selecting more accessible tools, more organizations can set a higher standard of accessibility.

Cost and Time Savings Consolidation Tool

OpenACR includes a collection of tools that supports editing and validating Accessibility Conformance Reports (ACRs). The tools will eventually allow procurement officers to find, search, and compare accessibility reports with higher accuracy while simplifying the process for IT vendors to create useful ACRs, resulting in saving time and money.


 

Standardized, Machine-Readable ACR

Our team designed OpenACR to help Accessibility Subject Matter Experts (SMEs) create machine-readable documents built with YAML. This can be easily exported to an accessible and readable HTML document. The YAML format can also be easily imported and modified.


 

Open Source

Open ACR is an open source project, so other organizations are free to extend and improve the project.


 

Foundational Standards

OpenACR can produce ACRs for Section 508 compliance but supports Web Content Accessibility Guidelines (WCAG) 2.0 and WCAG 2.1 Success Criterion. The final HTML version follows the standard VPAT format.


 

Proof points

Better Accessibility Through Alternative Text Validation

Description
We updated VA.gov based on user research to create better alternative (alt) text in order to provide a more accessible experience for Veterans.
Teaser Image
Image
Photo of coworkers using laptops at a shared desk.
Body

The challenge

Alternative text is a complex topic, as it is difficult to account for every possible scenario or to provide sufficient context for each image. However, in order for web pages to be the most accessible, any contextual images that have been added must include good quality, descriptive alt text. Our team was tasked with updating the image upload editorial interface within Drupal to help editors add better, more useful alt text for the images they were uploading.

We completed a full, cross-disciplinary project with our partners Friends From The City and Agile Six. The project included discovery to determine exactly which areas would be best to focus on, building a functional prototype for user research, and ultimately implementing improvements determined from that research to create a better, more informed user interface for Drupal editors.

Client goal

Our goal was to create a better alt text experience for Veterans visiting VA.gov. To achieve this we had to improve the user interface within Drupal to:

  • Streamline and simplify the image upload form
  • Clearly identify the alternative text field
  • Add client-side validation for common errors seen within existing alt text
  • Provide clear and concise error messages for editors to correct mistakes
  • Educate editors on how to create descriptive and accurate alt text and why it is important

Building on Drupal, an open-source content management system (CMS), we wanted to improve the image upload editorial interface by implementing guardrails to prevent poor quality alt text through the enforcement of accessibility best practices while also reducing frustrations for CMS editors who are writing the alt text - ultimately resulting in better quality alternative text for people who rely on it to access visual content on VA.gov.

Our team worked cross functionally with our partners to explore solutions that were not only technically feasible, but also solved a variety of user needs by following human centered design practices. Research was a key component to improving the alt text on VA.gov, from gathering and analyzing statistics on current alt text to conducting user research sessions. The final design that was implemented was a direct result of iteration based on user feedback and thought partnership with our team and the product owners at the VA.

Determine which metrics to target

The current alt text for images within Drupal was evaluated based on multiple criteria - did the alt text contain a filename; was the alt text concise; was the alt text redundant; was the alt text accurate. The last criterion is very contextual, however the first three are more subjective and we decided to target those metrics to start focusing our improvements.

Identify Improvements

We created an interactive prototype to test with users. We analyzed the feedback from those research sessions to determine the best way to incorporate validation into the alt text field with the least amount of user disruption. We also determined additional user interface updates that would make the entire image upload experience a simpler and easier task for the editor.

Educate Drupal Editors

We created training articles within the Drupal Knowledge Base to help editors contextualize alt text and more fully understand what it is and why it is important. By helping editors understand the experience a Veteran might have if an image they upload has poor alt text, they will better understand the content they need to provide to improve this experience.

Outcomes

Research-based design

We conducted research with VA.gov Drupal CMS editors to gather real data about how they upload images and interact with the alt text field. This data informed our final design decisions.


 

Improved editor interface

Our research found other improvements that could be made to the image upload user interface. These were small updates but resulted in a large impact to editors and greatly reduced confusion and frustration.


 

Immediate feedback

We added client-side validation to the alt text field, providing feedback to editors immediately when an error occurs.


 

Targeted training materials

Education is a large part of making accessible content. We provided resources for editors to help them understand the importance of alt text, with examples that can help them create better content for people who may have a visual disability.


 

Scalability

The introduction of client-side validation allows for the expansion of this feature to other input fields of the Drupal CMS with similar content quality issues.


 

Accessible information

VA.gov site visitors all deserve to access the information within the website. Providing better alt text allows the visual information in images to be available to those who may rely on a screen reader.


 

Proof points
Value
1053
Description

Drupal Editors

Value
573
Description

Images uploaded per month (6 month average)

Value
6
Description

Mistakes prevented daily

Building a modern web experience for FCC customers

Description
In a fast-paced, comprehensive content migration, we applied Agile development and DevSecOps to modernize a legacy federal website.
Teaser Image
Image
Smartphone displaying a "Submit a Filing" form beside a laptop keyboard.
Body

The challenge

The Federal Communications Commission (FCC) relies on its website to provide regulatory guidance to millions of visitors across various industries. But the old site was hard for users to navigate and frustrating for employees to manage.

In this rapid engagement, CivicActions worked hand-in-hand with the FCC to build a modern, mobile-friendly Drupal website that was more accessible and easier to update.

Client goal

The FCC’s cumbersome, outdated site was not doing its users or internal content managers justice. On top of antiquated technology, the Commission's waterfall processes made it harder for content managers to keep the site updated and relevant for its diverse audiences. The policies and the product needed a refresh.

  • Transition from waterfall to Agile methodology
  • Migrate legacy content from various systems to a modern Drupal Content Management System (CMS)
  • Ease public access to regulatory information through a mobile-friendly web experience
  • Save FCC administrators time and money with more efficient content management
  • Provide reliability and stability by implementing Quality Assurance (QA) testing

Our approach

We had to work fast and our deployment options were limited by security considerations, so we rolled up our sleeves and turned up the collaboration. By implementing a modern Drupal CMS and Agile practices, we helped the FCC modernize its approach to content while avoiding disruptions for users and maintaining a secure environment.

Seamless content migration and management

FCC has a very active user community, so we had to move quickly and avoid disruptions. We performed a massive content migration from Drupal 6 to Drupal 7 and consolidated content from various legacy systems into one CMS. To make the content creation and editing more pleasant and efficient, we added a robust text editor and new access controls. This allowed FCC’s many content creators to manage their own content without compromising the integrity of the site’s design.

The modernized FCC.gov is clean, simple, and easy to use for visitors and agency staff.

Accessible content

The FCC is responsible for the accessibility of 21st Century communications, so there was no room for accessibility errors on its website. We scanned the site for compliance issues and quickly resolved them. The current website serves as a model for Web Content Accessibility Guidelines and complies with Section 508 requirements.

The mobile-optimized user experience lets people do business with FCC from anywhere.

Automatic testing for quality code

Knowing that government websites can be subject to degradation over time as new code is added, we also wanted to help FCC achieve sustainability for their site. We used Behat—a behavior-driven development testing framework that can double as user acceptance test criteria—to make sure all new code worked properly. We configured Behat tests to run automatically whenever new code was merged, ensuring a quality codebase for years to come.

Improved practices for better staff experience

The content editors at FCC were drowning in waterfall processes that didn’t let them respond quickly to evolving needs at the agency. To ease content management and improve the employee experience, we worked with key stakeholders to implement Agile practices. Together we curated priorities, made sure the end result met real user needs, and helped the FCC transition to ways of working better suited to the digital age.

Outcomes

Smooth transition

We performed a massive content migration and consolidation with no disruption to the FCC user community.

Designed for usability

The improved site search and intuitive navigation help visitors quickly find information and resources published by the Commission.

Simplified content management

FCC content creators are equipped with a powerful text editor to update and manage their content without compromising the integrity of the site design.

Accessible for all people

We scanned for compliance issues and made sure the FCC site is usable for people of varying abilities, including those using assistive or mobile technology.

Sustainable, quality code

By implementing automated testing software that scans all new code merges, we set the FCC up for long-term success with code quality baked-in.

Turn-key deployment

Deployment was complicated due to security, so we developed turn-key processes to deploy to production so the IT folks at FCC could do it themselves.

Proof points
Value
69,706
Description

pieces of migrated content

Value
15
Description

minutes for daily agile scrum meetings

Value
19
Description

bureaus and offices housed within FCC

Quote
Quote text
This work will make it easier for both content owners to keep pages updated and for website users to navigate the website and find information.
Quote by

Dr. David Bray | FCC Chief Information Officer (public news release from FCC)