Software & Accessibility

Blndspt team remediates mastercard web apps

by | Jun 10, 2019 | Accessibility, Software

Mastercard contracted with Blndspt to remediate a few of their business to business (B2B) web apps. These apps had been around for many years and they hired our team to bring the accessibility up to a reasonable standard.

This project lasted approximately 3 years and presented some interesting challenges, opportunities to learn, and increased everyone’s knowledge on modern day web codes and legal issues surrounding accessibility.

My name is Jon Cornwell and I am a full stack engineer working at Blndspt Consulting. I have been a professional web developer for roughly 7 years and have worked with the Blndspt team for three of those. I was hired to consult with Mastercard on their accessibility remediation efforts, and had the opportunity to be the development lead with nine other amazing developers.

This is my perspective of how the project wrapped up.

Why Mastercard Contracted With Blndspt:

Accessibility

B2B Web apps were not accessible

Web Standards

Code was not written to modern web standards

Performance

Poor performance and browser incompatibility

Making Mastercard Accessible to All

To make Mastercard’s’ website more accessible Blndspt began by addressing how they had constructed their page layouts and widgets. The problem started with how the widgets were designed as they took a nested <table> approach to strictly controlling the layout of these. Using tables to strictly control the website presentation, might make the website look great for a specific resolution, but this practice wreaks havoc on screen readers as they attempt to announce sometimes up to 20 nested tables at a time.

How Blndspt Helped:

The cut off node in the DOM is roughly 64 elements deep for most browsers to maintain performance. These apps however had close to 100 nodes deep on most pages as a result of nesting <table> elements so our first step was to flatten the page to reduce the nested elements. Once we re-factored these pages and used more modern coding conventions, we were then able to address actual accessibility concerns.

A few items we addressed:

  • Added in the proper ARIA Attributes when applicable
  • Updated the widgets to common patterns, this saves the end user time by providing known web patterns that are widely understood
  • Brought HTML in line with World Wide Web Consortium (W3C)

Writing Code to Modern Development Practices

While the web app was not old— many portions made around 2013/14—the practices used to initially create this site followed many of the design principles and coding practices from a decade or more ago. The <table> elements were being used to control presentation instead of being used for their standard purpose which is to show tabular data. Self-closing tags were also widely used and while these are valid in XHTML and yes some of these are even valid in HTML such as <img> and <input> most of these are not valid with the HTML doctype, which confuses screen readers and can cause some fairly undesirable behavior in browsers depending on how they choose to handle it. The heavy reliance on tables also meant that the page could not adapt to anything beyond the initial resolution it was designed for.

How Blndspt Helped:

Our team is highly skilled and knowledgeable in HTML, CSS, JavaScript and uses modern practices when developing any web project.

We were able to quickly refactor the pages to follow the modern development practices.

Speeding Up Performance

Another major issue we found was that the performance suffered in a few key pages, with browsers like Internet Explorer becoming close to unusable on some pages and even fully crashing if IE’s developer tools were opened. To further exacerbate the issue, many of the pages failed to pass World Wide Web Consortium (W3C) validation as they violated web standards put forth by the W3C.

We audited the pages to become familiar with everything that was built and being used. Once our team understand the page structure, we found extra code and unnecessary HTML that increased their tech debt. We removed this dead code and streamlined the pages to reduce loading time and total data sent over the wire.

How Blndspt Helped:

Our expertise allowed us to quickly and efficiently write up code that met W3C/WCAG standards and followed modern web practices to clean up the site and speed things up.

  • With our expert experience in JavaScript, we refactored the code to be more efficient
  • By flattening the pages, we reduced DOM nodes
  • By removing unnecessary code and writing more efficient JavaScript, we reduced how much work end users browsers had to do

Final Takeaways

This is a good example of why following standards and integrating modern development practices can save you time and effort in the long run. While remediation efforts may take longer to implement than integrating accessibility from the beginning, they are necessary to get your product on track.

As developers I think our biggest lesson learned during this project is to always stay knowledgeable on standard web conventions and modern practices. This not only helps yourself, but it helps your team, future teams, and the end users experience.

I would love to hear your comments below on how your team either remediates websites or integrates accessibility practices on projects.

0 Comments

Submit a Comment

[BLNDSPT] Headquarters:

1553 Platte Street, Suite 300
Denver, CO 80202

Call Us:

(720) 574 - 9900

[ELEVATION] Headquarters:

1553 Platte Street, Suite 202
Denver, CO 80202