skip to main content
2020-05-22

Barclays Website Builder Migration

Barclays are a heavy user of the system, with multiple registration, survey and marketing websites. These marketing websites were all hosted on the old platform so with the beta label removed, the time came to migrate them to the new website builder.

The Migration

Migrating a heavy user from the old system to the new system came with many advantages. The design already exists. Previous workarounds to the old platform are no longer required meaning much better loading time, and no fullscreen page loader.

Additions

A new feature was requested. A rotating carousel to replace the existing hero banner.
This was going to be easy. BXSlider is my friend. So in it went.

After adding something interactive one of the first tests to do is accessibility testing. So I furiously mashed the tab key when the page loaded.
And there it was. The scroller worked perfectly, but tabbing through the content made the scroller all janky and stuck between slides. The culprit: The call to action button in each slide. Each one was setup using the built in system widget which for some reason outputs code that consists of:

<div class="ipWidget ipWidget-Buttons ipSkin-default">
<div class="row">
<div class="col-md-12 text-left">
<a href="/ereg/newreg.php?eventid=544842" style="text-decoration: none;">
<button class="btn btn-primary" type="button" style="display: inline-block;">
Register now
</button>
</a>
</div>
</div>
</div>

So not only do we have bad markup here with a button inside and anchor link but this leads to double focus when tabbing through content.

Because the output of the widget used for the call to action button is not accessible or user modifiable the solution is to use JavaScript to update the tabindex of the elements and remove certain ones each time the banner rotates. All fixed.