Content Style Guide

Introduction

Website accessibility means making your website usable for as many people as possible. This includes people with visual, mobility, cognitive, physical, psychological and medical challenges, and can be extended to include people with limited access to technology. So when we talk about accessibility, we’re taking into consideration software like screen readers, appropriate reading levels and older technologies with slower Internet speeds.

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 A](https://accessly.io/business-ontario-make-website-wcag-2-0-compliant-what-does-that-mean/#what-is-wcag) standards. We’ve put together some guidelines to help you make the content accessible as well.

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](https://hemingwayapp.com/), including the plugin Yoast SEO, which is 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”).

![http://staging.projectseahorse.org/wp-content/uploads/2021/04/Screen-Shot-2021-04-26-at-10.57.23-AM-768×316.png](http://staging.projectseahorse.org/wp-content/uploads/2021/04/Screen-Shot-2021-04-26-at-10.57.23-AM-768×316.png)

Screenshot of WordPress text editor showing where to select the Headings, which are listed in a drop down menu at the beginning of the control menu for the text editor.

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.

If changing permalinks after a post has been published, remember to create a redirection in the Redirections plugin (under settings/redirection), or the post can go to a 404 page (i.e. a page that doesn’t exist or can’t be found).

![http://staging.projectseahorse.org/wp-content/uploads/2021/04/Screen-Shot-2021-04-26-at-10.58.34-AM-768×85.png](http://staging.projectseahorse.org/wp-content/uploads/2021/04/Screen-Shot-2021-04-26-at-10.58.34-AM-768×85.png)

Screenshot of the title field with the permalink written underneath, and an edit button beside it.

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).

Further reading on links: [https://moz.com/learn/seo/url](https://moz.com/learn/seo/url)

Best practice is to have all links open within the same window (including any links going offsite). This is so all users still have access to the back button (especially visitors using tabbing instead of a mouse). If you choose to make a link open in a new window, make sure you add rel=”noopener” or rel=”noreferrer” to your target=”_blank” in the HTML code. [More info about cross-origin destination anchors](https://web.dev/external-anchors-use-rel-noopener/?utm_source=lighthouse&utm_medium=devtools).

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: [https://rogerwilliamsmedia.com/styling-ordered-lists-with-letters-in-wordpress/](https://rogerwilliamsmedia.com/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.

![http://staging.projectseahorse.org/wp-content/uploads/2021/04/Screen-Shot-2021-04-26-at-11.11.55-AM-768×329.png](http://staging.projectseahorse.org/wp-content/uploads/2021/04/Screen-Shot-2021-04-26-at-11.11.55-AM-768×329.png)

Screenshot of WordPress text editor with two areas highlighted. The first area is the toggle switching between visual and text editor. This can be found after all the menu items in the editor field. The second is the “paste as text” button, which is near the end of menu items in the text editor.

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

There is a plugin called Perfect Images + Retina that automatically serves up the image the device will load (regular or retina sized).

Image sizes will be listed in the documentation that will come with your website, when it’s ready for content input.

You can upload one image and WordPress will automatically resize it to all the image sizes listed. However, it will choose the crop, which might not be where the eye would like it to be. It’s best to resize images and upload the correct size for optimal design.

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](https://en-ca.wordpress.org/plugins/wp-smushit/) 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.](https://compressor.io/)

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.

[https://twitter.com/vavroom/status/1067581427359744005](https://twitter.com/vavroom/status/1067581427359744005)

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:

[https://www.a11yproject.com/posts/2013-01-14-alt-text/](https://www.a11yproject.com/posts/2013-01-14-alt-text/)
[https://axesslab.com/alt-texts/](https://axesslab.com/alt-texts/)
[https://www.w3.org/WAI/tutorials/images/tips/](https://www.w3.org/WAI/tutorials/images/tips/)

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).