UI Transformation and Accessibility Support with SPAR
Accessibility is fast catching traction and is one of the keywords in today's websites or products. The data revolution has impacted the way how information is accessed, consumed, and used. Data and information now power all decisions, be it business, political, sports. It's everywhere. Thus, it becomes paramount for the industry to ensure that whatever product or information they create is available for all immaterial of the disability.
Accessibility is an attempt to truly democratize the Web world. Web Accessibility means that all people can perceive, understand, navigate, and interact with electronic information and be active, contributing members of the digital world. Visual, auditory, physical, speech, cognitive, and neurological disabilities should be taken into account when implementing accessibility measures.?
WCAG Compliance:
Spar and Web Accessibility:
We at Spar have delivered various complicated solutions to our customers on Accessibility. When the company designs its product or website from the scratch it's pretty much simple to achieve it in the design phase. However not every work is created from scratch. Also, there are web-based legacy systems and this poses a huge challenge wherein the organization despite wanting to make it usable to all users, irrespective of disability cannot do so due to the technical challenges with technology.
Spar with its experience and understanding of achieving WCAG compliance has developed various in-house solutions, especially for legacy systems that can be implemented to achieve the most intricate part of the accessibility journey.
Accessibility challenges with Legacy system:
?Many Legacy systems outlive their design. The UI elements used are old ones. They generally have below-mentioned issues:
1)????Extensive use of Web forms
2)????Full Page refresh
3)????Extensive use of javascript on the frontend
4)????Strong coupling of front end and backend
5)????Nonresponsive designs
6) Non-accessible modals
7)????Customized table use instead of Data tables
8)????Inconsistent use of technology
9)????Use of old fonts and icons
10)?Use of images
Despite these challenges, these systems are very competent since they have grown or are tailored to accommodate complex business logic. To completely migrate the system to a new front-end design is a very complicated task. Replicating the business logic in the new system pose threat of missing some important functionality. Also, it involves data migration, high development effort, and very high testing efforts. Thus this effort is high in cost as well as maintenance.
While companies do have a roadmap to replace legacy, it generally takes 3-4 years before the new system can be fully operational. A need to give a better UI and democratize the system as per Web Accessibility standards at a low cost persist.
At Spar, we engage with our customers in their journey to modernize the UI look and feel and achieve accessibility. We have an array of in-house accelerators and tools that can be plugged into existing UI to achieve page focus despite the limitations. We engineer the front end to ensure new foundation layers, icons and accessibility is achieved. Our team is focused on accessibility design principles and achieves it by keeping the cost at its minimum and maintaining the business layer as is.
Design Principles for Accessibility?:
Spar WCAG services:
Compliance Auditing: The first step towards achieving accessibility is analyzing the current state based on which development and investment decisions can be ascertained from the accessibility point of view. We offer a compliance service where our WCAG professionals audit the existing system across all three levels (A, AA, AAA) of compliance and create a gap report with recommendations. The recommendation entails not just the areas of improvement but also the tech upgradation needed to achieve the purpose.
Accessibility Design: Accessibility design adheres the 7 principles of accessibility. Thus it becomes a specialization. A UX designer cannot operate in silos with regards to the requirements of accessibility and only design the front end. At Spar, we undertake design overhauls keeping the accessibility principles in mind. Based on the complexity and clients specification our designers have the expertise to modernize the frontends that would have minimal impact on the backend code while achieving accessibility.
Development: Making web-based products or sites compliant with WCAG guidelines needs specialized skillsets and off-the-shelf tools that can enhance development timelines and efficient rollouts. With an extensive experience with customers, Spar has developed a flurry of inhouse products that can be used as plug and play to achieve various elements of accessibility. We aim to do the transformation with no business impact or downtime. Our accelerators include Focus Watcher, Message Library, Sleek Modal Library which are discussed in detail in the accelerator section.
Accessibility Testing: Compliance Auditing and testing goes hand in hand. Spar has rich experience in testing end to end accessibility testing. We do Manual and Automated suite for testing Accessibility along with the functional and integration testing that ensures functionality.
Accelerators:
????????Focus Watcher: One of the most challenging parts of WCAG compliance is to have the tab flow in a sequence. There may be pop-ups configured on button click or upload happening. In some cases, the page also may be getting refreshed. WCAG demands that the focus return to where it was even with a full page refresh or modal closure or a new page close. In general, the focus is lost or is reset to base when such activities happen unless it was specifically taken care of. This becomes especially true with older implementations with web forms instead of MVC.
Focus Watcher is a script based tool that is included on the page. The script watches and remembers page navigation. For any full refresh or page navigation, the focus manager sets the focus back to the last field. Thus accessibility sequence is maintained and the screen reader reads out the elements accordingly.
????????Abide Message Library: Errors on the page like mandatory fields, backend error needs to be addressed using Abide. Spar has condensed the Abide library that can be tailored to the requirement. The error messages can be configured by the user. The feedback messages can be redirected as Toast instead of modals or pop-ups.
????????Sleek Modals Library: Modals form an integral part of accessibility since the older pop-ups need special coding for closing or have accessible design. The screen readers work with ease on modals. However modal sizes may differ throughout the application. Some modal may also need to be used as postback modals since there may be function activation that would be configured. Some modals may be simple information modals. We have put together modal library for different size and different type of modals with the keyboard controls coded on them. This accelerates the development thus assisting developers for better turn around time and UI-UX consistency.
For more information on the ideal UI and Web Accessibility solution for your organization, contact us [email protected]
https://www.sparinfosys.com
https://www.dhirubhai.net/company/spar-information-systems