Web Accessibility Basics: A Practical Guide for Small Businesses

Web accessibility means designing and building a website so that people with different abilities can understand, navigate, and interact with it.

It includes visitors who use screen readers, navigate with a keyboard, need stronger color contrast, enlarge text, or rely on captions to understand video content.

Accessibility is sometimes treated like a technical requirement to address after a website is finished. In reality, it is a core part of good UX design, frontend development, and customer service.

This guide covers the accessibility improvements that matter most for a small business website.

Why Web Accessibility Matters

An accessible website makes it easier for more people to learn about a business, evaluate its services, and take the next step.

Accessibility can improve:

• Navigation
• Readability
• Mobile usability
• Form completion
• Search visibility
• Customer trust
• Overall user experience

Many accessibility improvements benefit every visitor—not only people with disabilities.

For example, captions help someone watching a video in a quiet office. Strong color contrast makes content easier to read outdoors. Clear form labels help anyone understand what information is required.

Accessible design is usually better design.

Start With Clear Page Structure

A well-structured page helps visitors scan content visually and allows assistive technology to understand how the information is organized.

Each page should have:

• One clear primary heading
• Descriptive section headings
• Short, focused paragraphs
• Properly formatted lists
• Meaningful link text
• A logical reading order

Headings should follow a natural hierarchy.

H1: Main Page Title
  H2: Primary Section
    H3: Supporting Topic
  H2: Next Primary Section

Avoid selecting headings based only on their visual size. A heading communicates the structure of the page, while CSS or Tailwind utility classes control how it looks.

Make the Website Keyboard-Friendly

Not every visitor uses a mouse or touchscreen. Some people navigate websites using a keyboard, switch device, voice control system, or other assistive technology.

A visitor should be able to use the

Tab

• Navigation links
• Dropdown menus
• Buttons
• Forms
• Tabs
• Accordions
• Modals
• Carousels

The focused element should always have a visible indicator.

Removing the default focus outline without providing an accessible replacement makes it difficult to know where the user is on the page.

A custom focus style can match the site’s visual design while remaining noticeable:

:focus-visible {
  outline: 3px solid #0185e4;
  outline-offset: 3px;
}

Keyboard testing is one of the fastest ways to uncover navigation problems. Begin at the top of the page and press

Tab

Use Descriptive Alternative Text

Alternative text describes an image for visitors who cannot see it.

Good alt text explains the image’s purpose within the page rather than listing every visual detail.

Instead of:

<img src="team.jpg" alt="Image" />

Use something meaningful:

<img
  src="team.jpg"
  alt="Web development team reviewing a responsive website design"
/>

The best description depends on why the image is present.

Informative Images

Describe the information or meaning conveyed by the image.

<img
  src="dashboard.jpg"
  alt="Analytics dashboard showing increased monthly website traffic"
/>

Functional Images

If an image is used inside a button or link, describe the action.

<img src="download-icon.svg" alt="Download pricing guide" />

Decorative Images

If an image adds visual atmosphere but provides no useful information, use an empty alt attribute:

<img src="gradient-shape.svg" alt="" />

This tells screen readers to ignore the decorative image rather than announcing an unnecessary filename.

Check Text and Color Contrast

Text needs enough contrast against its background to remain readable.

Common contrast problems include:

• Light gray text on white
• White text over a bright photograph
• Thin text over a gradient
• Placeholder text used as the only form label
• Colored text on a similarly colored button
• Disabled controls that are nearly invisible

Text placed over a hero image often needs a dark overlay, solid background, or text shadow to remain readable across every part of the image.

Color should also not be the only way information is communicated.

For example, marking an invalid field with only a red border may not be enough. Add an icon and a clear error message:

Email address
[                    ]

⚠ Enter a valid email address.

The message explains the problem even if the visitor cannot distinguish the border color.

Build Accessible Forms

Contact and request forms are often the most important conversion points on a small business website.

Each field should have a visible label that clearly identifies what the visitor needs to enter.

<label for="email">Email address</label>
<input
  id="email"
  name="email"
  type="email"
  autocomplete="email"
/>

Placeholder text should provide an example—not replace the label.

<label for="phone">Phone number</label>
<input
  id="phone"
  name="phone"
  type="tel"
  autocomplete="tel"
  placeholder="303-555-0123"
/>

Accessible forms should also:

• Identify required fields
• Group related options
• Provide specific error messages
• Preserve entered information after an error
• Move focus to important error notices when appropriate
• Confirm when the form has been submitted
• Avoid unnecessarily strict input formats

A message such as “Something went wrong” provides very little help. Tell the visitor what happened and how to correct it.

Write Better Link and Button Text

Links and buttons should clearly describe their destination or action.

Avoid vague labels such as:

• Click here
• Learn more
• Read more
• Submit
• Go

These phrases provide little context when encountered outside the surrounding paragraph.

Use descriptive text instead:

• View website design packages
• Read the accessibility checklist
• Download the service guide
• Submit consultation request
• Explore maintenance plans

Buttons should perform actions, while links should navigate to another page or location. Keeping those roles consistent makes the interface easier to understand.

Make Modals and Mobile Menus Accessible

Modals, lightboxes, and mobile navigation menus can create serious accessibility problems when focus is not managed correctly.

When a modal opens:

1. Move keyboard focus into the modal.
2. Keep focus within the modal while it is open.
3. Allow the

   Escape

   key to close it.
4. Provide a clearly labeled close button.
5. Return focus to the element that opened it.

The close button should remain visible at different screen sizes and orientations. This is especially important on mobile devices, where browser controls and limited vertical space can make fixed-position controls difficult to reach.

A mobile menu should also communicate whether it is open:

<button
  type="button"
  aria-expanded={isMenuOpen}
  aria-controls="mobile-navigation"
  aria-label={isMenuOpen ? "Close navigation menu" : "Open navigation menu"}
>
  <MenuIcon aria-hidden="true" />
</button>

The visual icon alone may not explain the control’s purpose to someone using a screen reader.

Provide Captions and Controls for Media

Videos should include captions for spoken dialogue and meaningful sounds.

Captions help:

• People who are deaf or hard of hearing
• Visitors watching without sound
• People in noisy environments
• Visitors who process written information more easily
• Search engines understanding the subject of the video

Avoid automatically playing audio. If animation or video starts automatically, provide controls that allow the visitor to pause it.

Motion effects should also respect the visitor’s operating-system preferences:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

This can reduce discomfort for visitors who are sensitive to motion.

Use Semantic HTML Before Adding ARIA

Semantic HTML elements already communicate useful information to browsers and assistive technology.

Use native elements whenever possible:

<header></header>
<nav></nav>
<main></main>
<section></section>
<footer></footer>
<button></button>

A native

<button>

A clickable

<div>

<div onclick="openModal()">View details</div>

This version requires additional code to recreate behavior that a button already provides:

<button type="button" onclick="openModal()">
  View details
</button>

ARIA attributes can improve custom interfaces, but they should support semantic HTML rather than replace it.

Test Accessibility Throughout Development

Automated testing tools can identify many common issues, including missing alt text, incorrect labels, and insufficient contrast.

Useful tools include:

• Lighthouse
• axe DevTools
• WAVE
• Chrome DevTools
• Browser accessibility inspectors

Automated tools cannot evaluate everything. Manual testing is still necessary.

A Practical Manual Test

For each important page:

1. Navigate the entire page using only the keyboard.
2. Confirm that focus is always visible.
3. Zoom the page to 200%.
4. Check portrait and landscape layouts on mobile.
5. Review heading order.
6. Confirm that images have appropriate alt text.
7. Submit forms with missing or incorrect information.
8. Test menus, accordions, modals, and galleries.
9. Verify that links and buttons have meaningful labels.
10. Check the page with a screen reader when possible.

Prioritize the homepage, service pages, pricing pages, contact forms, and checkout flows because they are most closely connected to customer decisions.

A Small Business Accessibility Checklist

Use this checklist during a website review:

• Every page has a clear primary heading
• Headings follow a logical order
• All interactive elements work with a keyboard
• Keyboard focus is always visible
• Informative images include meaningful alt text
• Decorative images use empty alt attributes
• Text has sufficient contrast
• Information is not communicated by color alone
• Form fields have visible labels
• Error messages explain how to fix the problem
• Links and buttons use descriptive text
• Mobile menus communicate their open and closed states
• Modals provide an accessible close control
• Videos include captions
• Animation respects reduced-motion preferences
• Pages remain usable when text is enlarged

Accessibility does not need to be solved in one enormous project. Start with the most important customer journeys and address the barriers that prevent visitors from completing them.

Final Thought

Web accessibility is not a separate feature reserved for certain visitors. It is the practice of removing unnecessary barriers from the digital experience.

Clear structure, readable content, keyboard support, accessible forms, and thoughtful responsive design make a website easier for everyone to use.

For a small business, that means more people can understand its services, trust its website, and confidently take the next step.