Back to home About Skills Certifications Career & Education Projects Social Media & Contact

Browser Extension Accessibility Audit – TopCashback

Project introduction

Spearheaded a full Web Accessibility Audit of TopCashback's Chrome Browser Extension against WCAG 2.2 AA, including a detailed report of all accessibility issues found and how they can be fixed.

This is one small example of the many accessibility audit reports I have completed throughout my career.

My roles within the project:

  • Initiated the audit as part of a wider Accessibility project that I was leading.
  • Gained valuable insights through subsidised user surveys and heatmapping.
  • Ran a user testing session with accessible-needs users, which helped to reveal many problem areas.
  • Performed robust testing (manual/automated) with a variety of screen readers (NVDA/TalkBack/VoiceOver), as well as various other accessibility tools, in order to consolidate my findings.
  • Produced a document outlining each issue ranked by severity, with a suggested fix in order to ensure WCAG 2.2 AA compliance.

Problem statement

TopCashback's Browser Extension already has several known accessibility issues, which have been identified on the back of user feedback. With the upcoming European Accessibility Act (EAA) coming into effect in 2025, it is imperative that we first run a full audit of the extension to identify all accessibility issues, and then fix them in order to ensure WCAG 2.2 AA compliance as a minimum.

Accessible-needs user research

Group interview sessions

  • Was involved in running several surveys and interview sessions aimed at accessible-needs users.
  • Users were asked about their habits, preferences and personal experiences with TopCashback's browser extension.
  • Useful findings were discovered, particularly regarding some high-priority accessibility issues and certain pain points on the extension.
  • These findings, alongside other data from these users, was used to construct personas that were referenced frequently throughout the rest of the project.

User testing sessions

  • Designed and ran one-to-one user testing sessions with accessible-needs users, presented them with the existing browser extension and instructed them to carry out a series of tasks.
  • Recorded their activity data, which allowed us to spot common usability pitfalls.
  • Some, but not all users, used specialised assistive technology. For those who didn't, we gained valuable insight into how they navigated the web in regard to browser extensions, and what obstacles they typically faced.
  • This testing gave us even more valuable data to inform our design decisions.

Devices, browsers and testing tools

  • Dell XPS 15 9560 Laptop (Windows 10, Chrome, Firefox, Microsoft Edge, NVDA)
  • Apple MacBook Air 13.6" (macOS 15 Sequoia, Safari, Firefox, NVDA, VoiceOver)

Browser extension images

First example image: 'Activate cashback in one click', with the 'Get Cashback' pop-up when you visit a retailer. Second example image: 'Cashback is active, make a purchase', with the 'Cashback activated' message. Third example image: 'Automatically applies vouchers', with the loading bar which shows while the extension is applying vouchers.

Problems identified and recommended remediations

Critical priority

Problem All buttons and many links are inaccessible to several types of accessible-needs user.
Description In many cases, buttons are not keyboard-accessible. They cannot be highlighted or selected using the keyboard, and have no additional information describing that they are buttons, that they are clickable, and what they.
WCAG(s) WCAG 2.1.1 – Keyboard (Level A)
WCAG 2.4.3 – Focus Order (Level A)
WCAG 2.4.7 – Focus Visible (Level AA)
WCAG 4.1.2 – Name, Role, Value (Level A)
Remediation
  • Add  tabindex=”0”  to all buttons to make them keyboard-selectable.
  • Ensure that the button receive a black outline ( outline: 2px solid #000 ) when selected with the keyboard. This outline should not appear when clicking on the buttons.
  • Add  role="button"  to all buttons to signify that they are clickable.
  • Replicate any click functionality with for  keyup  events, only for the ENTER and SPACE keys.
  • Any external link, such offers under the “Best deals” section, should ideally use  <a>  elements with a href attribute, instead of being clickable  <div> elements.

High priority

Problem Issues relating to keyboard focus
Description Keyboard-only (and similar) users need to tab through the entire webpage to be able to get keyboard focus on the BX pop-up.
WCAG(s) WCAG 2.1.1 – Keyboard (Level A)
WCAG 2.4.1 – Bypass Blocks (Level A)
Remediation "Skip to extension" button to be added at the top of the page, which will allow users to skip directly to the BX pop-up. This link should only appear when the user presses the TAB key before any other input.
Problem Inaccessible at high zoom levels
Description At zoom levels of over 125% (may vary depending on device), the BX pop-up gets cut off. No scrollbar appears, meaning there is no way to see the content below the screen.
WCAG(s) WCAG 1.4.4 – Resize Text (Level AA)
Remediation Scrollbar to appear when content is cropped. BX should be fully usable up to 200% zoom according to WCAG 1.4.4.

All content must be perceivable, understandable and operable up to 200% zoom.
Problem Grey text doesn’t meet minimum contrast ratio
Description “More details” and “Do not show on [retailer] again” text (colour:  #888888 ) contrast is too low. The contrast is 3.5:1, but should be at least 4.5:1.
WCAG(s) WCAG 1.4.3 – Contrast (Minimum) (Level AA)
Remediation Change all instances of  #888888  or  #808080  colours on small text (below 16px) to  #767676 .
Problem Close button click area too small
Description The clickable area for the close button is too small. According to WCAG 2.5.8, the minimum click area must be 24x24 pixels (currently 12x12).
WCAG(s) WCAG 2.5.8 – Target Size (Minimum) (Level AAA)
Remediation Add  padding: 6px;  and set  background-size: 50%; ,  margin-right: 5px;  and  margin-top: 5px;  to  .tcb-notification__close .
Problem Close button missing accessibility information.
Description As well as the problems outlined in the 1st “Critical” issue, the close button is also missing accessibility information which explains its function.
WCAG(s) WCAG 4.1.2 – Name, Role, Value (Level A)
Remediation Ensure the close button has the following attribute:
  •  aria-label="Close" 
Problem Several font sizes are too small.
Description There are many instances where font sizes are too small, especially for “main” content (non-footer, etc). For example, voucher text is 12px and voucher cashback rates are  10px . Most footer text is  11px . Ideally, this content should have a minimum font size of  14px . Footer content should also have a minimum size of  12px .
WCAG(s) WCAG 1.4.4 – Resize Text (Level AA)
Remediation All “main” content (non-footer) should have a font size of  14px  as a minimum. Footer content should have a minimum font size of  12px . (remember to convert font sizes to  rem ).
Problem Offer banner missing text description.
Description The offer banner which appears on the main screen of the BX has text description, which is important as the banner contains text and provides additional context to visual users.
WCAG(s) WCAG 1.1.1 – Non-text Content (Level A)
Remediation Add  aria-label="[TEXT HERE]" to the offer banner  <div> , where [TEXT HERE] is replaced with the exact text from the banner.
Problem Loading spinner missing accessibility information.
Description When you first click to open the BX, the loading spinner has no information for non-visual users, which could cause confusion.
WCAG(s) WCAG 4.1.2 – Name, Role, Value (Level A)
Remediation Add  aria-label="Loading"  to the div.
Problem “Store deals” top logo missing text alternative.
Description There is no way for non-visual users to tell which retailer the below rates belong to.
WCAG(s) WCAG 1.1.1 – Non-text Content (Level A)
Remediation Add  aria-label="[RETAILER NAME HERE]"  to the retailer’s logo, where [RETAILER NAME HERE] is replaced with the exact name of the retailer.

Medium priority

Problem Non-dynamic font sizes.
Description All font sizes are not dynamic and do not respond to browser scaling – they are defined as fixed  px  sizes.
WCAG(s) WCAG 1.4.4 – Resize Text (Level AA)
Remediation Make sure all font sizes use rem instead of  px . The conversion is as follows:

[rem font size] = [px font size] / [root font size]

The root font size is usually  16px , unless it has been set to something else.
Problem Cashback button missing “disabled” state when clicked.
Description When the pink cashback button is clicked, there is no information which tells assistive technology that it is no longer clickable.
WCAG(s) WCAG 4.1.2 – Name, Role, Value (Level A)
Remediation Add  aria-disabled="true"  attribute to the pink cashback buttons when it has been clicked and the spinner is spinning.
Problem Top tabs missing accessibility information
Description When one of the tabs is active, it has a pink underline. However, there is no information for assistive technology users to know which one is active.
WCAG(s) WCAG 4.1.2 – Name, Role, Value (Level A)
Remediation
  • Add  role="tablist"  to the parent  <div>  of the selectable tabs.
  • Ensure that tabs have  aria-selected="false"  by default, but have  aria-selected="true"  when they are selected.
  • For both of the selectable tabs at the top, do the following:
    • Add  role="tab" 
    • Add  aria-controls="[tab id]" , where [tab id] is the same as the id given to each tab panel (see below).
  • For both of the  <div>  elements that currently have  class="tab" , do the following:
    • Add  role="tabpanel" 
    • Add a unique  id  to each one, which will be used to signify which selectable tab this is controlled by.

Low priority

Problem TCB logo missing text description.
Description The TopCashback logo at the top of the BX pop-up is missing a text description. It could be useful to add one here, to give non-visual users confirmation that they are using our browser extension (particularly if they have multiple installed).
WCAG(s) WCAG 1.1.1 – Non-text Content (Level A)
Remediation Add  aria-label="TopCashback"  to the logo  <div> .
Problem Cashback activated tick icon missing  alt  attribute.
Description The tick icon which appears after clicking the pink cashback button does not have an  alt  attribute.

As the icon doesn’t provide any additional context and is mainly decorative, we should hide this icon from assistive technology.
WCAG(s) WCAG 1.1.1 – Non-text Content (Level A)
Remediation Add an empty  alt  attribute to the image, like so:

 alt="" 

This instructs assistive technology to ignore this image, instead of trying to “guess” what the image is.
Problem Search bar magnifying glass missing text description.
Description The magnifying glass in the search bar is missing a text description. Although it isn’t functional, it could be good to add a text description here to add extra context.
WCAG(s) WCAG 1.1.1 – Non-text Content (Level A)
Remediation Add  aria-label="Search"  to the icon  <div> .
Problem “Best deals” and “Recently visited stores” retailer logos missing  alt  text.
Description Although the retailer name is listed, the logos do not have  alt  text. We should add  alt  text here for clarity.
WCAG(s) WCAG 1.1.1 – Non-text Content (Level A)
Remediation Add  alt="[RETAILER NAME HERE]"  to the retailer’s logo, where [RETAILER NAME HERE] is replaced with the exact name of the retailer.

Project retrospective

  • A variety of issues were successfully identified.
  • Remediations were suggested for each issue which were accepted by the third party developers.
  • Only the desktop extension has been tested. The mobile app extension shoud be tested next.
  • Further testing on both browser extensions should be done with a wider range of screen readers and other accessibility tools.
  • Better testing data could be gained by testing with real accessible-needs users.

See next:

Brand Pages Redesign – TopCashback Return to homepage