Download the Case Study
More About Custom Accessibility Services
Technologies Involved
Zirous developed a modern frontend application for a state agency using Angular, a framework built on TypeScript, to deliver a seamless and responsive user experience. The Nebular UI library was integrated to enhance the design and functionality of the user interface. A critical aspect of the project involved ensuring the application met WCAG Accessibility standards. Zirous utilized tools like Accessibility Insights for Web, which scans web pages for potential accessibility issues, and NVDA, a screen reader used to validate the accessibility and responsiveness of the application for users with disabilities.
Agency Overview
The state agency plays a vital role in regulating utilities and infrastructure to ensure the delivery of safe, reliable, and affordable services to the public. Their oversight includes investor-owned utilities as well as municipal and cooperative organizations, with additional responsibilities for permitting and monitoring electric transmission lines and pipelines. The agency relies on technology to manage regulatory processes efficiently, including an electronic filing system (EFS) that facilitates public access to records and case documents.
The Challenge
The agency approached Zirous to modernize their legacy EFS. The goal was to migrate the system to a modern framework while ensuring compliance with WCAG Level AA standards, a requirement set by the State of Iowa for all web content created after 2012. This added complexity to the project, as accessibility needed to be integrated into both custom UI components and external libraries like Nebular. Additionally, the existing application was built on a framework that reached end-of-life in 2013, making a comprehensive upgrade essential for security, functionality, and scalability.
The Solution
With deep knowledge of the agency’s operational needs, Zirous devised a plan to modernize the EFS, leveraging cutting-edge technologies and best practices in web accessibility. A comprehensive accessibility strategy was established at the onset, ensuring the system would meet WCAG Level AA standards. Zirous developers received web accessibility training ensuring a thorough understanding of accessibility principles throughout the project.
From the initial project planning stages, a web accessibility plan was put together to ensure the new application would be WCAG Level AA compliant and meet the State’s web accessibility requirements. To identify and resolve accessibility issues, the team employed tools like Accessibility Insights for Web and Axe DevTools for automated scans, alongside manual keyboard testing and screen reader testing using NVDA. Each page and component was meticulously tested for potential WCAG violations that could create roadblocks for users of assistive technologies, such as keyboard traps, improper labeling, inaccessible error identification, and insufficient color contrast. Once violations were found, each was addressed to ensure full compliance, including custom solutions to remediate accessibility problems found in external UI libraries.
This proactive approach allowed Zirous to address accessibility concerns early, avoiding the accumulation of issues and ensuring smoother project delivery.
The Impact
The new system significantly improves the user experience for all stakeholders, including those with disabilities. Modern design elements, enhanced branding, and adherence to accessibility standards ensure the application is visually appealing and functional for all users. Improved navigation and clear labeling, as well as added help tips, enhance usability and understanding of page content.
Beyond accessibility, the upgrade to a modern framework resolves security vulnerabilities and enables faster implementation of future enhancements. Custom components, previously difficult or impossible to create with the legacy system, are now easily developed, allowing the agency to adapt the system to evolving needs.
By delivering a modernized, accessible, and future-ready system, Zirous has empowered the agency to serve its mission and stakeholders better while meeting regulatory and technological standards.
Quick Facts
Technologies Involved
- Angular Framework: Provided a robust and scalable foundation for the application, enabling dynamic and responsive user experiences.
- TypeScript: Enhanced the development process with strong typing and modern JavaScript features.
- Nebular UI Library: Delivered a consistent and accessible user interface with prebuilt components.
- Accessibility Insights for Web: Identified potential accessibility issues through automated scans, aiding compliance with WCAG standards.
- NVDA Screen Reader: Validated accessibility by testing navigation and layout for users with disabilities.
Highlights
- Modernization of Legacy Systems: Zirous transformed a dated electronic filing system into a modern, efficient platform by leveraging advanced technologies and frameworks. This ensured the agency could meet current business needs while maintaining regulatory compliance.
- Accessibility as a Core Focus: The application was developed to meet WCAG Level AA standards, improving accessibility for users with disabilities. This included automated and manual testing, ensuring compliance across all UI components.
- Enhanced User Experience: Updates included modern design elements, improved navigation, and help tips, making the application more intuitive and user-friendly.
Impact on Efficiency and Accessibility
- The new system empowers the agency to better serve stakeholders by providing a streamlined, accessible platform.
- Accessibility features ensure inclusivity for all users, while the enhanced framework enables faster updates and future adaptability.
- Improved branding and design elements, combined with robust functionality, position the system as a sustainable, long-term solution.
