As a web editor you are responsible for the content you publish on the website and it’s accessibility. Do you know how to support accessibility when you write texts and add images and links on a web page?

This is the final blog post in a series of 3 that cover websites and accessibility with a role-based approach. This post is meant for web editors. The previous was intended for web designers and for web developers. I will give concrete tips on how to create an accessible web site.

Include the remaining 20% of users

Surveys show that up to 20% of web users are affected by accessibility issues when surfing the web. By following the principles of the Web Content Accessibility Guidelines you ensure that as many people as possible can use a website. In the following paragraphs I will give tips on which criteria are relevant for you as a web editor.

Page titles

In a CMS, you give a web page a title or name when you create it. In some systems there is also a specific field for this called "Title." It's important that this title is descriptive of what the page is about, because it's shown in the top of your browser and is the first thing on a web page to be read by a screen reader.

Text

When writing text for web pages, consider the fact that some users can't get an overview of a page visually, as opposed to structurally. Make sure that pages are divided into logical sections, each given a heading that is descriptive of the section. You can use several levels of headings: heading 1, heading 2, etc. (in the code <h1>, <h2> etc., so that assistive technologies can render them as headings).

Because of low vision, some users will perceive a web page very differently from the way other users would visually perceive it. Make sure to not give important information solely by the use of color or with an instruction requiring sensory skills. As an example, avoid writing things like: "… you can read more about the event in the blue box to the right."

It's fine to write something like this if you supplement it with something that all users can find, such as an additional text: "… you can read more about the event in the blue box to the right by the heading 'Events in March." This way you're also giving details that all users will be able to find.

If you change the language in the text, make sure you state the language of that piece of text. In the code this is done with the attribute lang="" for the text unit. A good CMS will allow you to highlight the piece of text and choose language from a drop down menu.

Links

When you add links on a page, write link texts that make sense when read out of context. For instance, avoid using link texts such as "Read more," "here," "Click here," "publication," etc. An example could be: "You can read more about the Assistive Technologies event here." Another example could be writing: "You can read more about the Assistive Technologies event here." It would be better to write "You can read more about the Assistive Technologies event here" for example. This way you are giving a link text that in itself is a good indicator of what the destination page is about.

Images

When you add images to a web page, consider the fact that some users cannot see images and need a text alternative. In most CMSs this is stated as "alternative text" or "alt text." The text given here is not visually displayed on the page, but is hidden in the code to be accessed by screen readers. (The alternative text is not the same as a tooltip: The text displayed when you hover over the image called "title").

Try to close your eyes and visualise what information you need if you cannot see the image. Describe the purpose of the image and not necessarily what the image is of. If the image is linking it is important to describe where the link goes to/what happens when clicking on the image. If the image is solely used for decorative purposes, creating an ambience or a visual context, it should have no alternative text. If the image contains information, that information should be given in the alternative text.

Avoid using images of text. This means that you should avoid, for instance, writing a text in an image editing program and save it as an image. Many of the types of software that reads text aloud (for instance those used by dyslexics) cannot read images of text. This is because you can't highlight text within an image to have it read out loud to you. (Some of these types of software can read alternative texts but far from all. They should not be confused with screen reader software used by the visually impaired. These are much more advanced).

Video and audio

If you are using video or audio clips on a web page there are several criteria to consider, such as captioning and audio description on video. Audio description is an extra track that lets a visually impaired user know what's happening on the screen. If you are not able to provide your videos with audio description, give an alternative in the form of a transcript that is uploaded or linked to from the page. But be aware that without audio description you cannot be AA compliant but only A-compliant.

If the content is solely visual (no sound) or only audio (no visual) then a text version is an accepted alternative on both levels.

Tables

When using data tables with information, it's important to indicate headings for rows and/or columns. The way to do this is very CMS specific. In some cases the editor provides an accessibility tab where this information can be entered when using data tables.

Lists

When using a list of items make sure to use the function for this that is built into the editor in the CMS. This will ensure that the right and accessible code is entered for lists. Avoid just making dots that looks like a list (such as asterisk, dash etc.).

If you would like to know what web designers and web developers as well as web owners should focus on, you can read my whitepaper  'How to ensure website accessibility'.