Website accessibility is a commitment. Every new post or page made to a website needs to consider it. This article is a guide to help content publishers.
November 30th, 2020
By Seth Giammanco
Website accessibility is a value and a commitment. This rings particularly true for your website content. Every new post/page made to a website needs to consider accessibility.
The following details best practices to help content publishers create more accessible content.
Make sure page titles are unique from each other. These help visitors reinforce where they are on your website.
Use headers to separate text into meaningful sections. Headers mark a change of topic and set context for the reader.
Headers have numbers to define hierarchical levels.
Use levels to convey meaning.
A Header 3 under a Header 2 communicates a relationship. It is part of the Header 2 section that precedes in. This hierarchy is important for readers as it serves as a table of contents in code.
It is common for publishers to choose headers based on how they look rather than by the hierarchical meaning they represent.
Content publishers may opt for a header 3 because it looks smaller for example. This can lead to accessibility challenges. It is important to use headers for meaning. Style needs to be handled uniquely with the help of site designers.
We've all seen, used, and likely created links in content that say "click here".
While a sentence helps to explain what you are "clicking here" for, these links are not accessible.
An accessible link includes text that describes what to expected upon a click.
So instead of using "Click here to download our latest guide!" you should use something like "Download our latest guide about creating accessible web content!".
It is common to want to create links that open in a new tab/window to websites that are not your own. The thinking is that you want to try and keep visitors on your site as much as possible.
Opening a link in a new tab can create a disconnected or disorienting experience for users. It can impede navigation to the previous page for example.
It is recommended to not open links in a new tab/window. It should only be used when absolutely necessary. One example might be if you are navigating to a long survey where navigating away from it might lead to data loss.
If you must use this technique, communicating that the link will open in a new tab is helpful — "Please complete our 10min survey (opens in a new tab)".
To reach the widest audience possible, keep your writing concise and clear.
Consider using lists.
Make sure to expand acronyms on first expression of them.
Avoid complexity of word choice and phrases when not needed.
All images that convey meaning need to have text-based alternatives. Images have an alt parameter in their code that includes text to describe the image. It looks something like this.
`<img src="image.jpg" alt="Text describing the image">`
The alt text appears on screen when an image can’t load or when read by a screen reader or other assistive device.
It is very common that when adding an image to your CMS you can provide an alt tag along with it.
Avoid creating images that contain text. If you have no choice, say for example you are including a logo with text, include the exact text in the alt.
Images help convey meaning on your webpages. They enhance the written text with a visual. Good alt text is human and describes the image in sufficient detail to convey its meaning.
Using the image below as an example.
Bad alt text: “Books”
Better alt text: “Charming book store with wood railing, stained glass window, and shelves full of books”
Remember that “good” alt text is about expressing the meaning the image intends to convey.
There are a variety of ways to make video content accessible to a wider audience. The following are are a few options.
You can add captions and subtitles to your videos on YouTube. Unfortunately, Audio descriptions are not yet supported on YouTube. This said, there seem to be third-party solutions that can help upon a search.
Review your video creation and publication tools for their accessibility options.
Color is often used to convey information. A classic example is using red to express something "not good" while green for "good". For people with color blindness or other visual impairments, the desired meaning is lost. It is best to use icons and/or text alongside or in place of color to express meaning.
A commitment to accessibility starts with learning. You need to learn about the standards and practices to make accessible content. Employing your learning takes care and time until it becomes more automatic.
The tips in this article should help.
If you have any questions about this article please don't hesitate to reach out to us on Twitter or contact us via our website.
Sign up for our occasional newsletter highlighting recent articles to the Mightier Blog, Minds on Design Lab news, and other resources.
Minds On Design Lab is a strategic design studio with digital expertise. We’re passionate about elevating small and mighty teams in the social sector. We connect people to mission through beautifully designed branding, web, and print.
