Accessibility basics every site owner should know

Somewhere among your members is someone who cannot see your images, someone who navigates without a mouse, someone who watches your videos with the sound off, and someone who needs to enlarge the text to read it. Many of them will never tell you when your site gets in their way. They will just struggle, or quietly leave.

Accessibility means designing your site so that people with a wide range of abilities can use it. For a membership site, it is also plain good business: every member who cannot use what they pay for is a cancellation waiting to happen. The encouraging part is that most of the important fixes are simple, cost little or nothing, and make the site better for everyone.

Who benefits, and what the standards say

Accessibility helps far more people than you might expect: members with permanent disabilities, such as blindness or limited hand movement; people with temporary ones, such as a broken wrist; and people in difficult situations, such as bright sunlight on a phone screen or an old laptop with a failing trackpad. Many members of hobby and professional communities are also older, and small text and low contrast affect them more over time.

The widely used reference is WCAG, the Web Content Accessibility Guidelines, which set out testable criteria for accessible web content. You do not need to read them cover to cover; the steps below cover the issues that come up most often on membership sites. Some countries have laws requiring certain organizations to meet accessibility standards, so if you are unsure whether any apply to you, check with a qualified professional.

Describe images and structure pages properly

People who are blind or have low vision often use screen readers, software that reads a page aloud. A screen reader can only describe an image if you give it a text description, called alt text. Good alt text says what the image shows and why it matters in context:

Weak: image1.jpg

Better: A handwritten census page listing the Porter household, with the father's occupation circled

Purely decorative images, such as a divider or a background pattern, should have empty alt text so screen readers skip them.

Structure matters just as much. Use real headings, not bold text made bigger, and put them in order: one main title, then section headings, then subheadings beneath them. Screen reader users often jump from heading to heading, much as sighted readers skim, so good headings help everyone.

Use color and contrast with care

Pale gray text on a white background may look elegant, but many people struggle to read it. WCAG sets a minimum contrast ratio between text and its background, and free online contrast checkers will tell you whether your colors pass. Check your body text, your buttons and your links in particular.

Never rely on color alone to carry meaning. If completed lessons are shown in green and incomplete ones in red, a member with color blindness may not be able to tell them apart. Add a tick, a word such as “Completed,” or an icon as well. The same applies to form errors: a red border is not enough without a message saying what went wrong.

Make everything work with a keyboard

Some members cannot use a mouse and navigate with a keyboard, a switch device or voice commands. Try this yourself: put your mouse aside and use the Tab key to move through your home page, login form and a lesson. Ask yourself:

• Can you reach every link, button and menu item?
• Can you see where you are? There should be a visible outline or highlight on the item in focus.
• Can you open and close menus, pop-ups and video players?
• Does the order of movement make sense, following the page from top to bottom?

Pop-ups are frequent offenders. If a keyboard user cannot close one, they are simply stuck.

Write links, forms and buttons that make sense on their own

Screen reader users can pull up a list of all the links on a page. A list of “click here” and “read more” tells them nothing. Write link text that describes the destination, such as “download the family tree worksheet.”

Forms need visible labels that stay in place. Placeholder text inside a box that disappears as soon as you start typing leaves people unsure what the field was for. Error messages should appear next to the field concerned and explain how to fix the problem. Buttons should say what they do: “Save my profile” is clearer than “Submit.”

Caption video and offer transcripts

Video lessons need captions for members who are deaf or hard of hearing, and captions help many others too, from people watching on a quiet train to members whose first language is not yours. Automatic captions are a useful start but often misspell names and specialist terms, so review them before publishing. A transcript, the full text of the video on the page, helps members who prefer reading and makes it easy to find a passage later. Audio lessons and podcasts benefit from transcripts in the same way.

A fifteen-minute accessibility check

You can test the basics yourself without special tools. Here is a quick check for a hypothetical genealogy society's site, which you can adapt to your own:

1. Zoom your browser to twice the normal size. Does the page still work without sideways scrolling or overlapping text?
2. Tab through the login page and a lesson without a mouse. Can you see and use everything?
3. Run your text and button colors through a free contrast checker.
4. Check the five most-used images for meaningful alt text.
5. Look at one lesson's headings. Are they real headings, in a sensible order?
6. Search one page for “click here” and rewrite each instance.
7. Play one video with captions on and read along for errors.

Phones add their own challenges, from small tap targets to pages that block zooming. The practices in making your membership site work on every phone overlap heavily with accessibility and are worth tackling together.

Where to begin

• Run the fifteen-minute check and write down every problem you find.
• Fix contrast and link text first; they are quick and affect every page.
• Add alt text to new images as you upload them, and work backward through older ones.
• Caption every new video, then caption your most-watched older lessons.
• Add a line to your site inviting members to tell you about any barriers they meet, and respond when they do.

Accessibility is never finished, but each fix removes a barrier for someone who is paying to be there.