- Expand your Marketing and Outreach
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.
Text should have markers to help readers know where they are, to convey a hierarchy, and express an action
Page titles should be unique
Make sure page titles are unique from each other. These help visitors reinforce where they are on your website.
Use headers to create a meaningful hierarchy to your page content
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.
- Header 1 - Note: there should only be one of these per page and it is often the page title
- Header 2
- Header 3
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.
Create links with meaningful context
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!".
Avoid links opening in a new tab or window
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)".
Keep writing and language clear
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.
Images that convey meaning need alt text
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.
What is good alt text for accessibility?
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.
Making video and audio content accessible
There are a variety of ways to make video content accessible to a wider audience. The following are are a few options.
- Use captioning to provide in time text alternatives to spoken language
- Offer a transcript alternative to a posted video or podcast
- Audio descriptions offers an enhanced experience for a person with a visual impairment. It describes the visual action on screen along with the spoken audio.
YouTube provides automated captioning for all videos on demand. It is even rolling out captions for many live-streamed videos. You can replace the automated captions with more accurate human created ones. 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.
Be careful when using colors to convey information
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.
Making a commitment to accessibility
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.
- Expand your Marketing and Outreach
Your website's sponsor/supporter logo grid should look good
- Need-to-Know Technology
Website Privacy and Cookie Policies - A look at iubenda.com
Sign up for our occassional newsletter highlighting recent articles and Minds on Design Lab news.
Mightier is brought to you by Minds On Design Lab
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.