Making EveryAction Forms Accessible

Woman with a clipboard pointing to an accessibility graphic.

EveryAction forms look straightforward, but the default embed has a habit of failing basic accessibility tests. Low contrast, small hit areas, and inconsistent focus styling are baked into their code, not yours. This guide shows you what you can realistically fix with CSS and what issues belong to EveryAction’s internal markup.

What this guide covers

Why EveryAction forms fail accessibility checks
What you can safely fix with CSS
What cannot be changed because it is vendor-controlled
How to add the override layer in WordPress
What WAVE errors to expect and ignore
The full accessibility override CSS

Your job is to handle the front-end layer you control. Everything else is on the vendor.

Why EveryAction forms fail out of the box

Low contrast buttons and text
Placeholder text that is too light to read
Small checkbox, text, and radio hit areas
FastAction links that are difficult to see or identify
Markup injected by the EA script that you cannot modify

None of these issues mean your website is poorly built. They are the limitations of the embed.

What you can fix with CSS

Button colors, spacing, and hover states
Readable form inputs with stronger borders
Clear placeholder and instructional text
Larger checkbox and radio sizing
Consistent link styling
Visible focus outlines
Better visibility for FastAction links

These adjustments make the form significantly more usable without interfering with EveryAction’s functionality.

What you cannot fix

Missing or generic alt text added by EveryAction
ARIA attributes and roles inserted by their script
Structural HTML controlled by the vendor
Inline styles that load after your page
FastAction markup that triggers empty-link warnings

These belong to EveryAction. They are not considered your errors under accessibility guidelines. Document them and move forward.

How to add the CSS in WordPress

Open Appearance > Customize > Additional CSS
Paste the full override stylesheet at the bottom
Change out the hex codes with your own brand colors
Publish your changes
Clear your cache if you use FlyingPress, SiteGround Optimizer, or a CDN
Reload and test the form again

Testing checklist

Tab through the full form to confirm focus states
Check placeholder readability
Verify button and link contrast
Run WAVE and review only the issues tied to your editable content
Ignore errors connected to EveryAction’s markup

You are looking for real usability, not perfection on a third-party embed.

Expected WAVE false positives

Missing alt text on vendor icons
Empty link warnings tied to FastAction
ARIA-related errors generated by the script
These are not fixable on your end and do not indicate a problem with your website.

EveryAction accessibility override layer
Use this stylesheet to improve contrast, clarity, and usability for most EveryAction embeds. Update only the color values if you need to match your brand.

/* ==========================================================
   Minimal EA Overrides: Larger/Darker Text + Brand Button
   ========================================================== */

/* Base text: darker + larger */
.at label,
.at legend,
.at .at-field-label,
.at p,
.at span {
  color: #1a1a1a !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Optional + helper text: lighter but WCAG AA on white */
.at small,
.at .optional,
.at .at-field-instruction {
  color: #6A6A6A !important; /* AA-compliant light gray */
  font-size: 15px !important;
}

/* Placeholder text */
.at ::placeholder {
  color: #444 !important;
  opacity: 1 !important;
  font-size: 15px !important;
}

/* Inputs + selects: text-only (no layout changes) */
.at input,
.at select,
.at textarea {
  color: #000 !important;
  font-size: 16px !important;
}

/* Phone widget input text only */
.at .at-field-phone input {
  color: #000 !important;
  font-size: 16px !important;
}

/* Submit button: brand styling */
.at .btn-at-primary,
.at a.btn-at-primary,
.at button.btn-at-primary,
.at input[type="submit"].btn-at-primary {
  background-color: #573B85 !important;
  border-color: #573B85 !important;
  color: #fff !important;
  font-size: 17px !important;
  border-radius: 6px !important;
}

.at .btn-at-primary:not(:disabled):hover {
  background-color: #E82D3C !important;
  border-color: #E82D3C !important;
}

/* Checkbox styling */
.at input[type="checkbox"]:checked + span::before {
  background-color: #573B85 !important;
  border-color: #573B85 !important;
}

.at input[type="checkbox"]:hover + span::before {
  border-color: #573B85 !important;
}

/* Increase checkbox/radio hit area (safe) */
.at input[type="checkbox"],
.at input[type="radio"] {
  width: 20px !important;
  height: 20px !important;
}