Two accessibility fixes on our own WordPress website
By the Small Business Fanatics team · October 3, 2026
As we build our website accessibility resource center, we are applying its guidance to our own site. This first improvement log covers two specific problems: hidden visual labels on our homepage consultation form and unreadable button text on the new resource center.
1. Make form labels stay visible
Before: Our homepage form had programmatically associated labels, but styling visually clipped them. Visitors saw placeholders for Name, Email, Phone, and How can we help? instead of persistent labels.
Change: We restored the visible labels and required-field indicators above those four fields, preserving the existing label-to-field associations.
Retest: All four labels render at normal width with clipping removed. A targeted keyboard check moved from Name to Email, Phone, and the message field in that order. A follow-up empty-form test displayed required-field errors, moved focus to the error summary, and associated the messages with their fields. The Email error link focused the Email field. No completed inquiry was submitted.
Why it helps: Visitors can still see what a field asks for after placeholder text disappears. See the W3C tutorial on labeling form controls.
2. Restore readable button text
Before: The resource center’s checklist and contact buttons used the same dark teal color for text and background, producing a 1:1 contrast ratio.
Change: We set the button text to white (#FFFFFF) against the dark teal background (#073F45).
Retest: The rendered default colors now calculate to approximately 9.06:1 using the WCAG relative-luminance formula. This exceeds the 4.5:1 minimum for ordinary text. This measurement applies to those default button colors, not every color or interaction state on the website.
We also activated the checklist link with Enter and confirmed it reached the checklist anchor. Read the W3C explanation of minimum text contrast.
Follow-up: correct the footer landmark
Enfold was rendering the footer page as another main content region. We changed that footer wrapper and grouped the footer and copyright area into a single site-footer landmark. Retesting the homepage, contact page, WordPress maintenance page, and resource center found one main region on each page. Footer links and the copyright area remained present.
What we checked and what remains
This was a targeted desktop-browser review using rendered styles, DOM and accessibility-tree inspection, and selected keyboard interactions. We inspected the homepage, contact page, WordPress maintenance page, and resource center while signed in to WordPress.
Follow-up desktop keyboard checks reached the navigation dropdown links with visible focus outlines. Empty submissions on the homepage and contact forms displayed validation errors and focused the error summary. Further work includes actual screen-reader testing, zoom and mobile reflow, and broader interaction testing. We have not completed a full accessibility audit or established WCAG conformance.
Try the same checks on your site
- Type into a form field and confirm its visible label remains.
- Check that each label is associated with the correct field.
- Measure actual button text and background colors.
- Repeat the affected task with a keyboard after the change.
- Record what passed, what remains, and the limits of your review.
Explore the SBF Website Accessibility Resource Center for practical starting checks and source guidance.