Accessible Content Style Guide for WordPress

January 24, 2022 by KunStudios

Introduction

Making your site as user-friendly as possible extends to the content, which is where you come in. We’ve tested the design and the development of your website to meet WCAG 2.1 AA standards. We’ve put together some guidelines to help you make the content accessible as well.

This is a guide I give to content writers and staff for all websites I build. It is updated regularly.

Text Content

Reading Level

Try not to exceed a seventh grade reading level. Avoid unnecessary jargon and extended metaphors. There are resources that can help you calculate how complex your writing is, including the plugin Yoast SEO, which might be installed on your website.

Visually Separate Text

It’s much easier for viewers to read text that’s visually separated into chunks. Create hierarchies within the content, and make subheadings for each section.

Subheadings are great for a number of reasons:

Allow visitors to quickly scan a page to find what they’re looking for.
Allow assistive technologies and users who navigate websites with a keyboard to jump to the content they want easily.
Better for Search Engines: words within a heading are considered more important than words in paragraphs. If you consistently use headings with words that people are searching for, you’ll show up higher in search engine results.
They bring elements of the design onto the page, since headers are styled by the theme.

Headers

Always uses Headers in descending/nested order. H1, H2, H3, H4, H5, H6.

There should only ever be one H1 on a page. On the homepage, it’s the logo in the top corner. On every other page in the site, it’s the page title.

When creating content, use headers starting with H2 and moving down. This can be selected in the Visual Editor using the drop down menu on the top left (that shows “Paragraph”).

Page Titles

The best title length is less than 60 characters. Around 40 characters seems to work best. When creating new pages, posts or resources, double-check the permalink that’s automatically created when you save the page. If it’s very long or too wordy, change it by clicking “edit” beside the permalink.

Links

Always describe where the link is going. Don’t use terms like “click here”, since they aren’t accessible or effective for Search Engine Optimization (SEO).

See my post about links opening in new windows for tips on how to do that accessibly.

Bold / Italics / Underlines

“Use bold and italic text styling sparingly, and when semantically appropriate. Long sections of text set with these text styles have been known to be a Dyslexia trigger. Do not underline text. Underlined text should be reserved for link.”

—taken from the A11Y Project Style Guide

In many cases, you can use a header instead of bold, and testimonial style instead of italics. These two approaches have many advantages:

Keep the text labelled properly in the code
Allow the site to behave properly with assistive technologies
Keep the content hierarchy intact
Follow best practice for Search Engine Optimization

Testimonials

Highlight the text you’d like to be a testimonial and select the block quotes button in the visual editor. This ensures that the testimonial is properly labelled in HTML, and properly styled by the CSS in the theme.

All Caps

Never write anything in all capital letters. All caps don’t work well with screen readers, which sometimes read each letter out separately.

Your theme might include a style that looks like all caps, but it’s rendering the letters in that style—they aren’t actually capitals.

Bulleted Lists

Always select bulleted lists / numbered lists, instead of importing lists from Word or manually putting in dashes. This practice keeps the accessibility of the page intact.

If you need to use a different kind of ordered list beyond numbers, some extra HTML code must be added to the text editor screen. Please follow the instructions outlined in this article: Styling ordered lists with letters in WordPress

Importing Styles from Word / Websites

When manually cutting and pasting text, make sure to strip out any styles from other text editors or websites. You can do this by either pasting directly into the text field (instead of the visual text editor), or by selecting paste as text from the top.

You can check if extra styles have been imported by toggling the text editor and looking for any code wrapping around your text (there shouldn’t be any, unless there are links or images).

Images

Image Best Practices

When uploading images, there are a number of factors that are important for speed, accessibility and SEO (search engine optimization).

Size of image in KB

Always try to keep this around 150kb. Never upload images that are in the MB; that’s much too big, and impacts the speed of your site.
The plugin Smush will automatically resize images as they’re uploaded, but it can only do so much. It’s a better practice to export for web using your image software (Photoshop, GIMP), or using an online image compressor

Alt Text

Alt text describes images for users who can’t see them.
People who can’t see it include: users with visual impairments and search engines. Screen readers will read the alt text and search engines will use the alt text to list your images on the image searches.
All images that are not purely decoration need alt text.
All images that have links attached need alt text.
Images that are decoration should have a blank alt text so that screen readers skip them.
Use periods to end sentences in the alt text field, this will help screen readers read it better.

More resources on how to write good Alt Text:

Image titles

You can use descriptive titles here. Image titles are indexed for search engines so rewriting titles with appropriate content will help your site come up in image searches.

Image Captions

Fill out image captions to give the image creator/photographer credit, or provide more details about what’s in the image (again, great for SEO).