It is a long-established fact that a reader will be distracted by the readable content of a page when looking at its layout.

lorem ipsum lorem ipsum


Accessibility is fast catching traction and is one of the key words in todays websites or products. Data revolution has impacted the way how information is accessed, consumed and used. Data and information now powers all decisions be it business, political, sports. Its 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 solution to our customers on Accessibility. When the company design its product or website from the scratch its 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 pose a huge challenge where in 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 have developed various inhouse solutions especially for legacy systems that can be implemented to achieve the most intricate part of accessibility journey.

Accessibility challenges with Legacy system

 Many Legacy system 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 of these challenges these systems are very competent since they have grown or tailored to accommodate complex business logic. To completely migrate the system in 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 inhouse 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 focusses on the accessibility design principles and achieves it 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 accessibility point of view. We offer 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 product 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 that our discussed in details in the accelerator section.

Accessibility Testing: Compliance Auding 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.


  • Focus Watcher: One of the most challenging part 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 in the page. The script watches and remember page navigation. Any full refresh or page navigation, focus manager sets the focus back to the last field. Thus accessibility sequence is maintained and 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 the 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 through out 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.

Write a Reply or Comment

Your email address will not be published. Required fields are marked *