Skip to main content

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

A global professional networking platform for security practitioners

Description
We redesigned and rebuilt the GlobalNET platform to enable secure international collaboration, and now we provide ongoing DevOps and IT support services.
Teaser Image
Image
Photograph of Earth at night, with city lights glowing across the curved horizon.
Body

The Defense Security Cooperation Agency (DSCA) uses the GlobalNET platform to facilitate secure training and collaboration among partner organizations. Thousands of military, diplomatic, law enforcement, and civilian government personnel around the world use GlobalNET to connect with and learn from each other. They work on topics from security cooperation to humanitarian operations; counter-terrorism to public diplomacy; leadership development and more.

Faced with aging technologies and a complicated collection of digital content and microservices, DSCA initially engaged CivicActions to develop a quality assurance program and to ensure system stability during code updates. At the end of that contract, we were tasked with redesigning and rebuilding GlobalNET to create a more personalized, secure, and responsive experience for users.

Years later, we continue to provide agile development, modern IT implementation, and DevSecOps services to keep everything running smoothly and to continuously improve GlobalNET systems.

Client goal

The goal of GlobalNET is to ensure that international legal and security practitioners can easily engage each other for collaborative work. Ease of use and top-notch security are essential to the success of the platform. DSCA uses GlobalNET to:

  • Provide professional development and training for practitioners
  • Facilitate connection among practitioners and their sponsoring organizations around the world
  • Provide a responsive, multi-lingual, intuitive user experience that respects the cultures of individual participants
  • Comply with strict security requirements, from FISMA to FedRAMP

Our approach

When we first engaged with DSCA, the agency wanted to bring a better experience to the tens of thousands of legal and security practitioners in the GlobalNET community. DSCA challenged the DoD contracting status quo by choosing a fixed-price agile contract, moving away from the waterfall approaches that doom many government IT projects to failure. We partnered closely with agency stakeholders in an agile process throughout the complex process of redesigning GlobalNET and the massive migration to a FedRAMP-certified platform. Daily collaboration and the ability to adapt to evolving needs helped us complete the rebuild on time and on budget.

Understand the needs

We conducted onsite user research in three cities to initially assess the needs of the GlobalNET community, then followed up with remote consultations. As new features were built, usability testing with site users helped us collect feedback, identify problems, and prioritize future needs for ongoing product iteration. The initial discovery phase uncovered more than 600 user stories, which were then prioritized and tracked to completion.

Automate and test

From confident code deployment to faster Authority to Operate (ATO), we have focused on providing GlobalNET with stability and security from the start. A platform for international security practitioners deserves no less. Our DevOps activities include continuous monitoring, network optimization, and a three-tiered on-call support system to make sure the platform is always up and running. We also apply regular security updates and automated testing.

Quality and security control

We implemented a mechanism for updating, testing, and deploying hardened server instances and application code in a way that is generally invisible to end-users. Server instances are subjected to SCAP and ZAP scans for system compliance, while automated “smoke tests” ensure the code is ready to deploy. All new code is subjected to more than 600 automated tests (and scripted tests by humans) prior to being approved for deployment. This rigorous quality control minimizes surprises and downtime.
 

Outcomes

Accessible, responsive platform

We applied user-centered design to modernize the look-and-feel of GlobalNET. The multilingual functionality and fully responsive design make it easy to participate from any device, anywhere in the world.


 

Empowered global partners

Customized, branded landing pages were created for partner organizations, so administrators can share news and publications with GlobalNET members and the public. They can also manage event listings and calendars for their groups and courses.


 

Professional development

We improved functionality for GlobalNET learners so they can participate in discussions, access research databases, and upload coursework for review. Professors can share their course content and announcements through an intuitive interface.


 

Personalized experience

Participants can find what they need among GlobalNET’s vast resources through a personalized dashboard, where they can receive messages, connect with contacts, and navigate quickly to their groups, courses, events, and saved content.


 

Minimal disruptions to users

We carefully planned a rolling launch schedule that allowed us to successfully migrate hundreds of thousands of files and user accounts into the modernized site — with very little downtime for GlobalNET participants during the transition.


 

Open source for public benefit

We use open source technologies for the majority of our work on GlobalNET systems. The entire codebase is released as an open source project for review, comment, or forking by other agencies who might benefit from a similar system.


 

Proof points
Value
1M+
Description

content artifacts migrated to modern platforms

Value
100,000+
Description

practitioners use GlobalNET to learn and connect

Value
110
Description

countries represented in the GlobalNET community

Building an MVP for Medicare.gov with human-centered design

Description
We did a fast-paced collaboration to submit deliverables in just 8 days, winning the design challenge to help CMS improve the customer experience of their websites.
Teaser Image
Image
Smiling older couple sitting together and looking at a laptop.
Body

The challenge

The Centers for Medicare & Medicaid Services (CMS) help millions of people every year find and enroll in health care programs. Planning a large-scale web and content management project to improve the customer experience of their multiple websites, the agency launched a design challenge for the vendors that were finalists for the contract.

We did a fast-paced collaboration with our partners Fearless and KPMG to submit deliverables in just 8 business days (including page designs, content recommendations, an API, and a clickable prototype with a smart chatbot). Our team won the challenge because the agency saw we could help them achieve their goal to better serve Medicare beneficiaries.

Client goal

The task was to redesign the Medicare Part D section of the medicare.gov website, which helps people understand insurance options for their medication needs. For all their digital platforms, CMS needs to:

  • Meet public expectation for easily navigable online services
  • Securely manage personal info and transactions for millions of beneficiaries
  • Provide friendly online experience for people facing stressful health situations
  • Serve diverse groups of users with competing wants and priorities
  • Support agency staff in publishing clear and accurate public-facing content

Our approach

Within the time constraint for this compressed agile design sprint, we conducted lean versions of the activities we would normally do to make sure the site was effective for Medicare recipients. Daily collaboration among all team members, from Design to DevOps to Developers, allowed us to quickly test and iterate on every step.

We used Drupal as our preferred open source platform and the CMS design system, which builds on the U.S. Web Design System. Together, these tools provide a solid foundation for accessible government websites — a key goal for agencies like CMS that serve diverse and aging populations.

Human Centered Design played a critical role in our process of building a site that would be intuitive and useful to older Americans seeking information about their drug coverage options.

Understand the needs

We talked to real Medicare beneficiaries to understand the challenges they faced in navigating the site. Based on what they said, we created a key persona to drive our scenario-based approach — ensuring that our work solved real problems and created value for users. We also evaluated the existing site to see how well it met standards for usability.

Offer customized guidance

To help visitors feel comfortable navigating complex information about benefits coverage, we created several experience options for them to choose from. They could explore the site on their own, use the guidance wizard, or ask questions of the interactive chat bot. We also improved the Search function to deliver more relevant results.

Clear the path to success

We focused on removing obstacles to help more people successfully find the information they needed. This was done through intuitive navigation and labels, scannable and actionable content, and a refreshed, accessible design. We tested our solutions with users and iterated based on their feedback.

Outcomes

Research-based solution

Because we spoke to Medicare recipients and validated our proposed solutions with them, CMS knows that real user needs will be met with the redesigned site, helping people access benefits more easily.


 

Consistent online experience

Medicare.gov visitors deserve a consistent experience across all parts of the site, on any device. Our design uses a mobile-first approach and a color palette that provides smooth transitions between pages.


 

Accessible healthcare services

The prototype is compliant with Section 508, using intuitive design and clear language to make complex medical insurance information easily accessible by the broadest possible representation of the public.


 

Data to help others

Doctors, app developers, health information curators, and others can pull valuable Medicare data for their own use through the API integration we created using the JSON:API that is part of Drupal core.


 

Simplified content management

The prototype showed how CMS staff can more easily get the right information to the right people using templates and workflows in Drupal, customized for the agency’s various departments and content needs.


 

Efficient and reliable technology

We built the prototype using the same Agile and DevOps practices that we would on a larger scale — with streamlined workflows that allow us to build, test, and deploy new code quickly and securely.

 


 

Proof points
Value
45 M
Description

Americans using this Medicare service

Value
8
Description

days to complete MVP redesign

Value
4
Description

steps in simplified application process

Improving the online experience for Medicare beneficiaries with WECMS

Description
We are working to re-platform and redesign legacy systems for CMS, making it easier for millions of people to get the benefits they need.
Teaser Image
Image
Photo of a smiling girl holding flowers beside her grandfather outdoors.
Body

The challenge

The Centers for Medicare and Medicaid Services (CMS) provide healthcare benefits to millions of people every year. But the websites and digital tools that help people find and enroll in these programs were built on a myriad of aging technologies and were confusing to navigate. CMS needed to streamline and update its online platforms to improve the customer experience while establishing more efficient backend workflows for agency staff.

This is an enormous and complex task, involving the modernization of Medicare.gov, CMS.gov, CMS open data portals, and many other public facing apps that serve multiple user groups — including beneficiaries, caregivers, health providers, data professionals, and government stakeholders.

WECMS helps more than 100 million Americans every year apply, find, and enroll in healthcare programs. The information and tools provided are essential components in supporting CMS' goals of creating a truly consumer-focused, streamlined, efficient, and omni-channel experience for beneficiaries and their caregivers. The overall intent for this contract is to ensure continuity of operations for the Americans it serves and the WECMS program, which maintains, designs and implements open source software digital services for CMS’ flagship websites, tools, components and applications on Healthcare.gov, Medicare.gov, CMS.gov, and 7 Open Data catalogs. In addition to engineering and design continuous improvements on these established websites, this contract provides security compliance, devops, system infrastructure, content strategy, information architecture, training, documentation, content editor support, public call center dev support, Section 508 improvements, mobile application development, and tooling and systems expertise.

Client goal

When this multi-year transformation is complete, CMS will be able to deliver on its mission more effectively. CivicActions is providing agile development, DevOps, and human-centered design (HCD) services to help the agency:

  • Improve the content editing experience for staff
  • Modernize legacy systems and tools
  • Replace proprietary technologies with open source
  • Support active, informed healthcare consumption

Our approach

Collaboration is the key to success in a project of this scale and complexity. With multiple partner vendors (including our primary partner Fearless) and disparate stakeholders across many organizational layers, we work hard to keep lines of communication open and be up-front about potential problems.

Balancing stakeholder priorities, user needs, technical complexity, and CMS deadlines, we created a roadmap that minimizes risk and maximizes opportunities for success. Then we went to work on “quick wins” — tasks we could complete right away that would make the biggest difference for users.

Address the holistic customer experience

We knew that each CMS application is part of a huge public-facing ecosystem of digital tools, with many touchpoints. To address the entire experience that a person would have in navigating the systems, we drew on the agency’s own knowledge of their beneficiary community, working with them to refine and document how each person interacts with CMS online. The resulting holistic view helped us identify how we could improve that experience iteratively.

Adopt a data-driven strategy

To make sure we built the right solutions, we immersed ourselves in the CMS mission from the operational, technical, and UX perspectives. We dug into existing user research, reviewed analytics reports, conducted stakeholder interviews — then created user personas and journey maps to refine the project scope and goals. All this data is managed in a shared repository of user insights and project knowledge, which we refer to as we prioritize the work to be done.

Replace proprietary software with open source

We are “reverse engineering” multiple custom-built Microsoft.NET applications (such as the Medicare Eligibility and Premium Calculator and the congressionally-funded Physician Fee Schedule (PFS) Lookup Tool with modern, open source solutions. As we recreate all these applications in Drupal, we’re making guides and code documentation that outline the entire system — allowing CMS to maintain control of its own technologies and avoid vendor lock-in. We are also migrating CMS open data platforms from Socrata (proprietary) to an open source solution using DKAN 2.

Outcomes

Clean and useful technology

CMS struggled to make use of technologies built on old, messy code that had been around for years. We are not only modernizing the CMS tech stack, we are documenting how it works and how to use it.


 

Accessible services for all

508 compliance is required, but we consider accessibility as more than a checkbox. Because CMS serves a population with a proportionately higher level of impairments, we put extra emphasis on accessibility best practices.


 

Agile delivery at scale

We are managing this project using the Scaled Agile Framework (SAFe), working iteratively with broad cross-team collaboration and stakeholder input across the organization. Value is delivered with releases every two weeks.


 

Intuitive digital tools

Beyond CMS websites, we are modernizing cost calculators, finders, mobile apps, interactive map models, open data site applications, and lookup tools that are used by providers and beneficiaries to perform critical healthcare tasks.


 

Well-informed solution

We apply human-centered design to understand the goals of end users and CMS stakeholders, while layering in a thorough understanding of the policies that underpin each program — so the end results meet real needs.


 

Ongoing technical support

To improve and maintain the CMS systems, we provide 24x7 operations and maintenance support, editor feature enhancements, guidance content and APIs per executive orders, and new content sections as needed.


 

Proof points
Value
100 M
Description

Americans depend on CMS for health benefits

Value
10
Description

legacy applications migrated and rebuilt in Drupal

Value
24x7
Description

O&M support provided to critical healthcare systems

Using open data to power Georgia’s healthcare workforce

Description
Using the DKAN open source open data platform, we built tools to help Georgia decision-makers plan for a resilient healthcare workforce.
Teaser Image
Image
Stethoscope and pen resting on a medical form.
Body

The challenge

The Georgia Board of Health Care Workforce (GBHCW) serves communities in the state with a focus on medically underserved areas. The agency provides data reports on the physician, physician assistant, and nurse workforce and funds loan repayment programs to recruit healthcare workers to underserved parts of the state. However, healthcare workforce planners were having trouble estimating and meeting demand for practitioners across counties --especially as the COVID-19 pandemic drew many of them out of Georgia and into various hotspot states. Additionally, without publicly-available data on healthcare workers, GBHCW struggled to inform medical facilities with potential funding and staffing needs."

The agency saw an opportunity to leverage the DKAN open data platform where they were already hosting their data, combined with custom data services from our team. We worked with GBHCW to create data visualizations and tools that make it easy for staff, medical practitioners, and the public to access the information needed to build a resilient and responsive state healthcare workforce.

Client goal

We were tasked with crafting detailed, easy-to-read visualizations for data provided by the Georgia Composite Medical Board and the Georgia Board of Nursing. We also built robust, multifunctional dashboards that allow data to be searched across physicians, physician assistants, and nurses. The dashboards needed to:

  • Host and display data resources with user needs in mind
  • Show the number of licensed healthcare practitioners in a given area
  • Display data in a clear, user-friendly, and accessible way
  • Be easily adaptable and sustainable with the constant influx of new data
  • Reflect diverse intersections within the data (gender, race, qualifications, etc.)
  • Help legislators make data-based decisions to improve the healthcare field

Our approach

Because other state agencies were already using the open source Drupal framework to publish and manage government content, GBHCW chose the Drupal-based open data platform DKAN for their data dashboards. The agency also saved time and money by utilizing an existing contract with us, adding new digital products to pre-built infrastructure.

As the core maintainers of DKAN, we provided research-based recommendations and custom data design and development services to make sure the dashboards solved the right problems for agency staff and stakeholders. The project was so successful that the client reached out to us with the intent to create more dashboards to display patient care and underserved areas data.

Build for real user needs

We brought a human-centered approach to the data dashboards, and used the React.js library to build intuitive visualizations. We listened carefully to the desired outcomes, researched user needs, then made suggestions for how people could best learn about the demographic makeup and overall distribution of physicians, physician assistants, and nurses throughout the state.

Deliver early and often

For the redesign of the data dashboards, we used agile sprint cycles with daily stand-up meetings to develop and implement small chunks of working software quickly. We used test data provided by GBHCW to create proofs-of-concept, with graphs and charts that made sense of the various elements we knew the client wanted to showcase.

Align and adapt

Meeting regularly with project leaders at the agency ensured that the vision and work remained in alignment. Together we reviewed work that had been done, checked if adjustments were needed, and responded quickly to evolving requests or new data. Staying in close communication ensured there were no surprises and the client goals were met.

Outcomes

Modern, accessible data

Instead of having to address time-consuming data requests, agency staff can quickly refer people to the live dashboards. Data updates and maintenance are quick and simple, saving time and money for GBHCW.

 

Serving vulnerable populations

People can view the workforce data by county, specialty, and other identifiers. These geographical differentiations help policymakers and stakeholders identify and remedy gaps in rural health coverage.


 

Reliable data analysis

The state of Georgia once relied on unpredictable volunteer efforts for analysis of nursing workforce data. Instead, the dashboards see regular analytics and data presentations formalized into existing processes.


 

Sustainable framework

The agency leveraged an existing open data contract with us, which meant we could utilize the web-based resources needed to make this effort sustainable and efficient for years to come.


 

Increased resilience

Easy access to data is critical during public health emergencies, such as the COVID-19 pandemic. From awareness campaigns to vaccination efforts, the agency is better prepared to mobilize its health workforce.


 

Data for public use

The dashboards allow anyone to easily observe workforce trends and create evidence-based initiatives in service of the public, including journalists, nonprofits, advocacy groups, or pharmaceutical vendors.

 

 

Proof points
Value
10.5M
Description

Georgians served by healthcare data

Value
159
Description

counties represented

Value
20
Description

published articles promoting the data visualization tool

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)