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.

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)

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.

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.

• Re-wrote the code to W3C standards
• Followed semantic HTML
• Flattened page elements to reduce DOM Nodes
• Move towards relying on CSS for styling and not HTML

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.

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