Skip to content
User Experience Accessibility

WCAG Accessibility 2: Fixing WordPress Accessibility Issues (Elementor & Jupiter X)

Following the initial WordPress accessibility audit of the Rainbows Ireland website, the next step was to address the most common issues identified.

Rather than attempting to fix everything at once, we focused on the issues that have the greatest impact on accessibility and WCAG compliance.

In this article, we look at how we resolved key accessibility problems using Elementor and the Jupiter X theme.

Fixing Colour Contrast Issues

One of the most common accessibility problems identified during the audit was insufficient colour contrast.

  • light grey text on white backgrounds
  • low contrast navigation menus
  • buttons with insufficient text contrast
.jupiterx-widget-content {
  color: #000 !important;
}

These changes significantly improved readability and ensured compliance with WCAG contrast requirements.

Improving Link Visibility and Consistency

Another issue identified was inconsistent link styling across the site.

  • ensuring links are clearly differentiated from surrounding text
  • adding underline styling where appropriate
  • ensuring sufficient contrast for all link states

Fixing Typography and Readability

  • low contrast metadata text (dates, categories)
  • inconsistent font weights
  • text that was too small in certain components

This improved overall readability and made the content more accessible.

Addressing Navigation Accessibility

.nav-menu a {
  color: #333;
}

This simple change removed multiple contrast warnings and improved usability.

Applying Global Fixes Across Elementor

  • global colour adjustments
  • consistent typography settings
  • CSS overrides for widget content

What We Did Not Change

  • cookie consent tools
  • media carousels
  • lightbox components

Some limitations must be documented rather than forced.

Summary

By focusing on high-impact issues such as colour contrast, link visibility, and typography, we significantly improved accessibility.

In the next article, we will look at form accessibility.

 

 

This article is part of our WCAG Accessibility series.

Recent Posts