Clear guidance. Practical improvements.

Website accessibility starts with the next useful fix.

Help more people read your content, use your navigation, and contact your business. Start with these website accessibility resources for small businesses, including practical guidance for WordPress.

Start with the checklist

Your first accessibility check

Start with your homepage, a main service page, and your contact page. Write down the page address, what you tried, and where you got stuck.

  1. Navigate with a keyboard. Use Tab and Shift+Tab to move through links and controls. Check whether you can see which item is selected.
  2. Try your contact form. Check for clear labels, understandable required fields, and useful instructions.
  3. Enlarge the page. At 200% zoom, look for overlapping text, hidden controls, or content you can no longer use.
  4. Read the page structure. Check that headings describe each section and form a sensible outline.
  5. Review meaningful images. Check whether their information is available in text.

This is a starting check, not a complete accessibility evaluation. Passing these checks does not establish WCAG conformance.

Reference: W3C WAI’s introductory accessibility checks.

Guide 01 · Navigation

Check whether your menu works without a mouse

Open your site and put the mouse aside. Press Tab to move forward and Shift+Tab to move back. Try opening links with Enter and activating buttons with Enter or Space. Test dropdowns, search, and any popup you encounter.

Example barrier: A services dropdown opens on mouse hover, but a keyboard visitor cannot reach its links.
Useful improvement: A keyboard-operable menu control exposes those same links and communicates whether the menu is expanded.

For WordPress: Record the affected theme or menu component and the exact interaction that fails. A menu behavior problem may require a theme or script change; changing its color will not restore keyboard operation. Test the fix on staging and repeat the same task afterward.

Watch the focus indicator as you move. It should remain visible; removing its outline without providing a visible replacement makes navigation harder.

References: W3C guidance on keyboard operation and visible focus.

Guide 02 · Contact forms

Give every form field a useful label

Placeholder text disappears as someone types. Use a persistent label such as “Email address” and associate it with the correct field. A label beside a field is not enough if the connection is missing in the markup.

Before: An empty field containing the placeholder “Email.”
After: A visible “Email address” label that stays in place while the visitor types, programmatically associated with that input.

For WordPress: In your form editor, enable the field’s visible label and use a clear name. Preview the published form. Check that clicking the label focuses its field, then verify the field’s accessible name with browser accessibility inspection or a screen reader. Form builders differ, so verify the output instead of relying on a setting alone.

Also test the form’s required-field and error behavior before considering the whole form reviewed.

Reference: W3C tutorial on labeling form controls.

Guide 03 · Content and design

Make images meaningful and text readable

Write alt text for the image’s purpose. Describe information a visitor needs in that context. Decorative images generally need an empty alt attribute. When an image is the only content of a link, its text alternative should identify the link’s purpose.

Example: A photo showing an entrance ramp could use “Ramp beside the front entrance.” A decorative leaf beside an already descriptive heading usually does not need a spoken description.

For WordPress: Check the image as it appears on the actual page. Editing a Media Library field may not change every existing placement. Verify the rendered image’s alt attribute after the edit.

Measure color contrast. WCAG 2.2 Level AA requires at least 4.5:1 for ordinary text and 3:1 for large text, with defined exceptions. Large text means at least 18 point regular or 14 point bold, approximately 24 or 18.7 CSS pixels respectively.

Measure the actual foreground and background combination, including text over photographs. A brand palette can stay recognizable while individual text and background pairings change.

References: W3C’s image guidance and minimum text contrast requirements.

Use scan results as a starting point

An automated scan can flag some problems, but tools cannot determine accessibility on their own. Combine tool findings with manual testing and informed judgment. Include people with disabilities in evaluation where possible.

Keep a simple issue log: page, affected task, observed barrier, proposed fix, and retest result. Prioritize barriers that prevent someone from completing an important task, such as contacting your business.

Reference: W3C guidance on accessibility evaluation tools.

See the work on our own website

We applied these checks to SBF’s website and documented two fixes: persistent form labels and readable button text. Our first improvement log includes the observed barriers, changes, retest results, and remaining work.

Read the SBF form labels and button contrast case study

Need help with your WordPress website?

Tell us which page is causing trouble and what you are trying to improve. We can discuss the issue and an appropriate next step.

Talk to SBF about accessibility