Accessible content works for everyone who reads your help center: people who use a screen reader or a keyboard, people with low vision, color blindness or cognitive disabilities, people reading in a second language, and anyone squinting at a phone in bright sunlight. Your help center's design handles part of it. The words, images and structure you write handle the rest.
Most of these practices come from the Web Content Accessibility Guidelines (WCAG), the standard that most accessibility requirements refer to.
Use headings in order
Screen reader users often jump from heading to heading to find the section they need, so your headings should form a clear outline.
Use H2 for main sections and H3 for sections inside them. Don't skip a level.
Make each heading describe its section: "Change your password", not "Step 2".
Don't use bold text as a heading, and don't pick a heading level for its size.
Write link text that says where it goes
Screen reader users can pull up a list of every link on a page, out of context. "Click here" and "read more" tell them nothing.
Instead of "To change your plan, click here", write "See Change your plan".
Avoid bare web addresses as link text.
If a link downloads a file, say so: "Download the price list (PDF)".
Give every meaningful image alt text
Alt text is what a screen reader reads in place of an image. Describe what the image shows that matters for the task, in a sentence or less.
Useful: "The Billing page, with Change plan in the top-right corner."
Not useful: "Screenshot", "Image of the app" or a file name.
For a GIF, describe the sequence it shows. Help articles rarely need decorative images: if an image adds nothing to the task, remove it.
Don't rely on color, shape or position alone
"Click the green button" doesn't help someone who can't tell green apart, and "the icon on the right" may move on a phone. Name things by their label instead: "Click Save". When a color carries meaning, such as a status, add the word too: "Active (shown in green)".
Caption your videos
Add captions to every video with speech, and put the key steps in text below it. Captions help people who are deaf or hard of hearing, and anyone watching with the sound off. The written steps help people who can't play video at all, and search can read them.
Write in plain language
Keep sentences short, with one idea each.
Choose common words, and explain a technical term the first time you use it.
Use the active voice and talk to the reader: "You can…", not "It is possible for users to…".
Break up long paragraphs, and turn a series of three or more items into a list.
Plain language helps people with cognitive disabilities and people reading in a second language, and it translates better too.
Use real lists and tables
Use a numbered list for steps. Screen readers announce how many items a list has, so readers know how long the task is.
Use tables for data only, never for layout, and give each table a header row.
Keep tables simple. Merged cells and tables inside tables are hard to follow with a screen reader.
Keep text out of images
Text inside an image can't be resized, read aloud, translated or searched. Write instructions, error messages and tables as real text. If a screenshot contains words readers need, repeat them in the article.
A few more details
Use emoji sparingly. Screen readers read out their full names.
Don't write whole sentences in capital letters. They're harder to read, and screen readers may spell some capitalized words out letter by letter.
Tell readers when a link opens a new window or starts a download.
A quick checklist
Headings are in order and describe their sections.
Every link says where it goes.
Every meaningful image has alt text.
No instruction depends on color, shape or position alone.
Videos have captions and the steps in text.
Sentences are short and words are plain.
Steps are numbered lists, and tables have a header row.
No important text lives only inside an image.
How HelpCenter.io helps
HelpCenter.io's help center themes take care of much of the design side, including a skip link, clear page landmarks, visible keyboard focus, color contrast that adjusts automatically, and layouts that work on small screens. Your content is the other half. In the editor, you set an image's alt text from its image controls, or let AI writing help (Catalyst, or the AI add-on) draft it for you to review, and new tables start with a header row. If you add custom CSS or HTML, check that text stays readable and keyboard focus stays visible. See How accessible is my help center? and Resize images and add alt text.
Comments
Be the first to comment.