Issues:
Audit digital accessibility website Recharge.com

(Issues only)

Scope of the evaluation

Detailed audit results

1. Perceivable

1.1 Text Alternatives

1.1.1 Non-text Content (Level A)

Information about success criterion 1.1.1 Non-text Content

Finding 1: On https://prd.recharge.services/en/us, there is a chevron used in the navigation bar in the header (with the categories button) and in the black buttons on the page. The chevron is an SVG-element that is not marked as decorative, and have an alternative text that is confusing for visitors with assistive technology. Remove the title-element in the SVG's, and use the attributes aria-hidden=true and focusable=false to mark them as decorative. This also occurs at https://prd.recharge.services/en/nl/paysafecard and https://prd.recharge.services/en/nl/lebara for example, with the FAQ-section.

Finding 2: On the top of every page at https://prd.recharge.services/en/us there are icons present with the sentences Certified reseller, Safe & secure payment and Instant digital delivery. An alt-text is provided. But in this case the icons are decorative and alt-text is not needed. Remove the alt-text, but make sure an empty alt-attribute is present in the code.

Finding 3: The logo of Recharge on every page of https://prd.recharge.services/en/us has insufficient alt-text. The alt-text should make clear it is a logo, and should also make it clear it will take you back to the homepage. Edit the alt-text to clarify this. This also counts for the logo in the footer on every page, but there it will be sufficient to just declare it is a logo, e.g. "Logo Recharge".

Finding 4: The images of the available products at https://prd.recharge.services/en/us are logo's of the brand, but the alt-text doesn't specify this. Edit the alt-text to clarify this, for example, "Logo LycaMobile" or "Logo Google Play". This also occurs on product pages as https://prd.recharge.services/en/nl/paysafecard for example and on https://prd.recharge.services/en/us/mobile-top-up.

Finding 5: On https://prd.recharge.services/en/nl/paysafecard underneath the product image, there are icons included with the text "Instant digital delivery" and "Safe & secure payment". And underneath the "Buy now" button, there is an icon next to the phrase "Certified reseller of PaysafeCard". An alt-text is provided. But in this case the icons are decorative and alt-text is not needed. Remove the alt-text, but make sure an empty alt-attribute is present in the code. This also occurs on https://prd.recharge.services/en/nl/lebara, https://prd.recharge.services/en/us/lycamobile and other product pages.

Finding 6: On https://prd.recharge.services/en/thank-you when the order has been delayed, the image of an envelope with a clock has the alt-text of "wait a minute icon". Since the image is decorative, this image can have an empty alt-attribute.

Finding 7: On https://prd.recharge.services/en/checkout, the images in the options for the payment methods when you are ready to pay have alt-text. They are decorative, so the images can have an empty alt-attribute here.

1.3 Adaptable

1.3.1 Info and Relationships (Level A)

Information about success criterion 1.3.1 Info and Relationships

Finding 8: On https://prd.recharge.services/en/nl/paysafecard there is the phrase "By using this service, you consent to the terms and conditions of PaysafeCard." in the product description. The part "terms and conditions" is visually a link. But in the code, a button is used instead of a hyperlink. This is semantically not correct and can create confusion for speech recognition users or visitors with a screen reader. Change the button into a hyperlink. This also occurs on similar product pages.

Finding 9: On https://prd.recharge.services/en/nl/lebara in the block "How to recharge your Lebara phone?" the strong-element is used to mark up text as bold. This is not allowed, since the strong-element is only to be used to emphasize one or few words in a sentence. Use CSS to style sentences bold. But in this case, it looks an acts like a heading, so using a heading-element is the best way to solve this. In the block "How to check your Lebara balance?", CSS needs to be used for bold-styling. This also occurs on https://prd.recharge.services/en/nl/vodafone.

Finding 10: On https://prd.recharge.services/en/us/lycamobile there are lists not marked up as lists in the FAQ blocks "How do I recharge Lycamobile online?", "How do I check my Lycamobile balance?", "How do I recharge Lycamobile from abroad?" and "How do I contact Lycamobile?". Use the appropriate list element to mark up these lists. This also occurs on https://prd.recharge.services/en/us/at-t-prepaid, https://prd.recharge.services/en/nl/vodafone, https://prd.recharge.services/en/be/orange, https://prd.recharge.services/en/nl/kpn and https://prd.recharge.services/nl/nl/kpn.

1.4 Distinguishable

1.4.1 Use of Color (Level A)

Information about success criterion 1.4.1 Use of Color

Finding 11: On this moment, the links in the cookie notice on https://prd.recharge.services/en/us are only discernible by colour. While WCAG allows links to be not underlined when the contrast between link, regular text and background colour is according to the minimal expected contrast ratio, we strongly advise underlining links. This makes them more discernible for visitors with low vision. This also counts for the blue links on product pages like https://prd.recharge.services/en/us/at-t-prepaid and https://prd.recharge.services/en/nl/paysafecard (in the FAQ-section).

1.4.3 Contrast (Minimum) (Level AA)

Information about success criterion 1.4.3 Contrast (Minimum)

Finding 12: The cookie notice on every page of https://prd.recharge.services/en/us contains an "I agree" button that is green (HEX #00B258) with white text. The contrast ratio of this colour combination is 2,8:1, while a minimum of 4,5:1 is expected. Use a darker green colour.

Finding 13: On https://prd.recharge.services/en/us, in the block Over 63,510 5-star reviews, the timestamp of the reviews (HEX #758C8D) don't have enough contrast with the background (HEX #F3F6F6). The contrast is 3,3:1, where it should be 4,5:1 at minimum. This block can also be found at product pages as https://prd.recharge.services/en/nl/paysafecard for example.

Finding 14: In the footer on every page of https://prd.recharge.services/en/us, the text "© 2025 Recharge.com International B.V. All rights reserved" and the links "Privacy Statement", "Cookie Statement" and "How it works" don't have enough contrast (text is HEX #738A8C) with the white background. The contrast ratio is 3,6:1, where a minimum of 4,5:1 is expected.

Finding 15: On https://prd.recharge.services/en/nl/paysafecard where a couple of payment methods are listed, there is the phrase "+ many more", in light grey (HEX #9CA3AF). The contrast ratio with the white background is 2,5:1 where it should be 4,5:1 at least. Use a darker grey. This also occurs on other product pages (for example https://prd.recharge.services/en/nl/lebara).

Finding 16: On https://prd.recharge.services/en/nl/paysafecard the grey (HEX #738A8C) phrase "By using this service, you consent to the terms and conditions of PaysafeCard." in the product description, does not have enough contrast with the white background. The contrast ratio is 3,6:1 where it should be 4,5:1 minimally. Use a darker grey or black. This also occurs on other product pages (for example https://prd.recharge.services/en/nl/lebara).

Finding 17: On https://prd.recharge.services/en/nl/lebara, when you make a choice of product (bundle, call credit, international), you can pick a specific one. For example "Lebara Online 500 MB". With all the options (in all categories), there is extra text present (for example "valid for 30 days" and "500MB 4G data"). This text (HEX #728A8B) doesn't contrast well with the background (HEX #F3F6F6). The contrast ratio is 3,4:1, where 4,5.1 is expected. Use a darker colour for the text. This occurs on similar product pages like https://prd.recharge.services/en/us/lycamobile as well.

Finding 18: On https://prd.recharge.services/en/checkout the placeholder in the e-mail field and the text "© 2025 Recharge.com International B.V." (both HEX #738A8C) don't have enough contrast with the white background. The contrast ratio is 3,6:1 where it should be 4,5:1 minimally. Use a darker grey or black.

Finding 19: On https://prd.recharge.services/en/checkout when selecting a payment method, the text "no extra fee" or the amount of extra fee (HEX #738A8C) doesn't have enough contrast. The contrast ratio is 3,6:1 where it should be 4,5:1 minimally. Use a darker grey or black.

1.4.4 Resize text (Level AA)

Information about success criterion 1.4.4 Resize text

Finding 20: When zooming in to 200%, there is a loss of functionality on pages that have the header bar: where you can view the category list and where you can change language, country and currency. Those interactive elements don't work anymore when zoomed in. Make sure all functionality works and can be activated when zoomed in.

1.4.10 Reflow (Level AA)

Information about success criterion 1.4.10 Reflow

Finding 21: When zooming in to 400% and adjusting the browser window to a width of 1280 pixels, there is a loss of functionality on pages that have the header bar: where you can view the category list and where you can change language, country and currency. Those interactive elements don't work anymore when zoomed in. Make sure all functionality works and can be activated when zoomed in.

Finding 22: When zooming in to 400% and adjusting the browser window to a width of 1280 pixels, there is a horizontal scroll bar present on all pages. Make sure content adapts to the size of the browser window and size of the text.

Finding 23: When zooming in to 400% and adjusting the browser window to a width of 1280 pixels, on https://prd.recharge.services/en/nl/kpn, the text on the buy buttons is cut off. Make sure text is not cut off when the text size and browser window size are adjusted. This also occurs on other product pages.

Finding 24: When zooming in to 400% and adjusting the browser window to a width of 1280 pixels, the text of the payment methods in https://prd.recharge.services/nl/checkout becomes unreadable. Make sure text does not overlap when the text size and browser window size are adjusted.

1.4.11 Non-text Contrast (Level AA)

Information about success criterion 1.4.11 Non-text Contrast

Finding 25: In the header on https://prd.recharge.services/en/us (and on every other page) there is a bar present with the logo, categories list, language picker and currency picker. The country list, language and currency picker get a light blue (HEX #B3D3F7) focus outline, when they receive focus. The contrast ratio against the white background of the bar is 1,5:1, where is a minimum of 3:1 is required. Choose a darker blue colour to solve this. The same outline is used for the black buttons on the homepage. For those buttons, pick an outline that contrasts both with the white background and the black colour of the button.

Finding 26: On https://prd.recharge.services/en/nl/paysafecard the button "Buy now" and the link "Terms and conditions" get a light blue (HEX #B3D3F7) focus outline, when they receive focus. The contrast ratio against the white background of the bar is 1,5:1, where is a minimum of 3:1 is required. Select a darker blue colour to solve this. Pick an outline that contrasts both with the white background and the black colour of the button. This also occurs on other product pages (for example https://prd.recharge.services/en/nl/lebara).

Finding 27: In the header on https://prd.recharge.services/en/us (and on every other page) there is a bar present with the logo, categories list, language picker and currency picker. The categories select list gets a green (HEX #05E27E) focus outline, when it receives focus. The contrast ratio against the white background of the bar is 1,7:1, where is a minimum of 3:1 is required. Decide on a darker green colour to solve this.

2. Operable

2.1 Keyboard Accessible

2.1.1 Keyboard (Level A)

Information about success criterion 2.1.1 Keyboard

Finding 28: On https://prd.recharge.services/en/nl/paysafecard you can select a value for which you want to top up. The first option receives focus and can be selected. The other options are not reachable and operable by keyboard. This is because the tabindex attribute with a negative value is used. A solution is to turn the options in radio buttons. Keep in mind that the radio buttons need to be labelled and grouped with fieldset and legend. Also: don't use hidden or display:none in CSS when styling the radio buttons and labels.

Finding 29: On https://prd.recharge.services/en/nl/lebara)/ you can select what you want to buy: call credit, bundle. data or international. The first option receives focus and can be selected. The other options are not reachable and operable by keyboard. This is because the tabindex attribute with a negative value is used. A solution is to turn the options in radio buttons. Keep in mind that the radio buttons need to be labelled and grouped with fieldset and legend. Also: don't use hidden or display:none in CSS when styling the radio buttons and labels. The same problem occurs at https://prd.recharge.services/en/us/lycamobile and other pages this component is used.

Finding 30: When changing the region in the header bar on every page, or when changing the redeemable country on product pages as https://prd.recharge.services/en/nl/paysafecard, a modal opens. You can't navigate to the options, not even when you performed a search. This is because of removing the radio buttons at each country option with display:none in the CSS. This is not allowed. Remove the CSS property. If you want to keep on using the current style, you will need to move the real radio buttons visually off-screen (instead of removing or hiding). Check that visually the faux radio buttons get a focus outline and that with picking an option (or navigating between the options), the real ones off-screen will be activated.

2.4 Navigable

2.4.1 Bypass Blocks (Level A)

Information about success criterion 2.4.1 Bypass Blocks

Finding 31: On the site there are no skip links available. Skip links are especially helpful for people using a screen reader, since they can directly jump to the main content of the page. Add a skip link to solve this, and make sure the skip link is the first item that receives focus on the page (when the cookie notice is no longer present). If the skip link is used, it should take the user to the main content, and when the user continues tabbing through the page, focus should continue from the main content.

2.4.3 Focus Order (Level A)

Information about success criterion 2.4.3 Focus Order

Finding 32: On https://prd.recharge.services/en/us, there is a cookie notice present when you first visit the site. When navigating by keyboard, this cookie notice is the last to receive focus. This should be the first item on the page that receives focus.

Finding 33: In the header on https://prd.recharge.services/en/us (and on every other page) there is a bar present with the logo, categories list, language picker and currency picker. The "Help" link receives visible focus twice, because there is a button nested in a hyperlink. This can be confusing for visitors using assistive technology. Use only the hyperlink and remove the button.

3. Understandable

3.1 Readable

3.1.1 Language of Page (Level A)

Information about success criterion 3.1.1 Language of Page

Finding 34: The page https://prd.recharge.services/en/us/woops does not have a lang-attribute in the HTML-element. Setting the language of the page is important for screen readers, so they will use the right voice (accent, cadence, etc.). Add this attribute to the HTML-element and set the correct language as the value.

3.3 Input Assistance

3.3.2 Labels or Instructions (Level A)

Information about success criterion 3.3.2 Labels or Instructions

Finding 35: On https://prd.recharge.services/en/checkout, when you just selected a product from the product page, you get presented with a field to enter your e-mail address. You can also provide a discount code. These fields are not labelled, it only provides a placeholder (which is not enough to pass this criterion). Ensure they have a label.

3.3.3 Error Suggestion (Level AA)

Information about success criterion 3.3.3 Error Suggestion

Finding 36: On https://prd.recharge.services/en/checkout, when you just selected a product from the product page, you get presented with a field to enter your e-mail address. When you provide an invalid e-mail address (with a comma instead of a period), there is no error suggestion along with the error message. Provide a suggestion on how to solve this issue.

4. Robust

4.1 Compatible

4.1.2 Name, Role, Value (Level A)

Information about success criterion 4.1.2 Name, Role, Value

Finding 37: In the header on https://prd.recharge.services/en/us (and on every other page) there is a bar present with the logo, categories list, language picker and currency picker. The "Help" link is a button nested in a hyperlink, with the hyperlink being hidden with aria-hidden. Nesting focusable elements in elements that are hidden for assistive technology is not allowed. Remove the aria-hidden attribute.

Finding 38: On https://prd.recharge.services/en/nl/lebara, the selection lists you get when selecting the amount of a product don't have a label. In the code, they are comboboxes. But since there is no field to type or search, they are not really comboboxes. Use a native select-element instead, and make sure it has a label. This also occurs on similar product pages.

Finding 39: On https://prd.recharge.services/en/checkout the URL stays the same during the process. Changed or updated content is not announced by assistive technology. This can be solved by using different URL's for every step in the check-out process and/or using live regions.

Basis for this evaluation

The audit was conducted based on the evaluation method of the W3C, WCAG-EM. This is largely done manually by taking a sample. For a quickscan we use parts of this methodology. Despite all the researcher's care and experience, it is possible that a problem has not been identified. Keep in mind that in a next audit certain parts could be assessed differently because of further development of techniques and assistive software. Tools are used in the manual audit.

Sample of audited web pages

• Home:
  https://prd.recharge.services/en/us
• Error page:
  https://prd.recharge.services/en/us/woops
• PaySafecard:
  https://prd.recharge.services/en/nl/paysafecard
• Lebara:
  https://prd.recharge.services/en/nl/lebara
• Lycamobile:
  https://prd.recharge.services/en/us/lycamobile
• At&T:
  https://prd.recharge.services/en/us/at-t-prepaid
• Checkout:
  https://prd.recharge.services/en/checkout
• Thank you page:
  https://prd.recharge.services/en/thank-you
• category page:
  https://prd.recharge.services/en/us/mobile-top-up
• Vodafone:
  https://prd.recharge.services/en/nl/vodafone
• Orange:
  https://prd.recharge.services/en/be/orange
• KPN:
  https://prd.recharge.services/en/nl/kpn
• Dutch language page:
  https://prd.recharge.services/nl/nl/kpn

Relied upon techniques

• HTML5
• CSS
• WAI-ARIA
• ECMAScript 5
• DOM
• SVG

Resources:

• Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
  www.w3.org/WAI/eval/conformance
• Web Content Accessibility Guidelines (WCAG)
  www.w3.org/WAI/intro/wcag
• How to Meet WCAG 2.1 Quick Reference
  www.w3.org/WAI/WCAG21/quickref/

This report is mainly created with the online W3C report tool.