Content checklist: is your content digitally accessible?
Content is the content of a website and can take many different forms. In this article, content consists mainly of text, but content also includes, for example, videos, animations, podcasts, infographics and more. You obviously want to reach as many people as possible with your content, which is why it is important that the content is accessible. With this content checklist, you can check your content!
Content versus technology
With a website, we can distinguish between the content and the technology. The technical part of the website is often created by a web developer, for example, think about the operation of the website. The technique can also be the same for several websites. The content of the website is often placed by web editors and can therefore consist of all kinds of forms, such as text, images and audio or video.
An accessibility study is done using the Web Content Accessibility Guidelines (WCAG). A partial survey can also be done on the website's content or technology. It then looks at a part of the WCAG success criteria that applies to the content or to the technology. This can be useful, for example, if several websites have the same technique but different content.
Content-checklist
With this content checklist, you can check for yourself whether your content is accessible. A WCAG assessment will look at even more points than those listed here, but this content checklist will get you a long way towards accessible content!
Images
Give informative images a text alternative that describes the image
Give interactive images a text alternative that describes the purpose of the image
For complex images, place both a short text alternative and an extended text alternative
Don't use images of text
Make sure that decorative images can be ignored by auxiliary software
.
Audio Video.
For videos, ensure good subtitling
For videos, ensure audio descriptive narration that tells the visual information
For audio clips, provide a transcript that spells out the information
Formatting of text
Create headers as headers in the HTML code
Use strong and em elements only to give emphasis to text
Create lists as lists in the HTML code
Create tables as tables and specify what table headers are
In the case of a piece of text in another language, specify a language change
Contrast and colour
Give text sufficient contrast: the contrast requirement is 4.5:1 for normal text and 3.0:1 for large text
Give non-textual content a contrast of at least 3.0:1
Make sure that information is not dependent on colour alone
Describe the subject or purpose
Describe the purpose or topic of the page in the page title and make sure it is distinctive
Make sure it is clear where a link goes
Place headings that describe the content underneath
Make sure texts on buttons are also clear
Formulate
If a user makes a mistake in a form, indicate what went wrong and where
Make sure that for each input field it is clear what needs to be entered and place clear instructions
Give the document a title and set the correct language
Make sure the PDF document is tagged
Use the right tags in the right places
Place alternative text to informative images and format decorative images as artefacts
Give text and non-text sufficient contrast and make sure that information does not depend only on colour
Explanation of the content checklist
Images
The content checklist lists different types of images:
Informative
If an image conveys information, a text alternative is needed. Auxiliary software can then read out what is in the image to people who cannot see (well). For example, think of a logo, the text alternative should be able to read out which logo it is.Interactive
Some images are interactive, they work as buttons or links. A text alternative is then needed so that auxiliary software can read out what the link or button does. Consider, for example, social media icons that work as links. The text alternative should then indicate where the link goes.Complex
Complex graphics are, for example, infographics or graphs and diagrams. A short text alternative is then needed, which is the title of the image. A long text alternative is also needed that conveys the same information as the complex image. This could be a written-out text or, in the case of a graph, a table, for example. From the short text alternative, reference can then be made to the long text alternative.Images of text
Do not use images of text where possible. For example, do not post an image with scanned text, but turn this into "real" text. Someone can then use their own style sheet to make the text more readable, e.g. in a different font. There are exceptions; in the case of a logo, for example, text may be included in the image.Decorative
Decorative images should be able to be ignored by auxiliary software. An image is decorative if it does not convey information but is purely for decoration. In this article, there is an image at the top that is only there because it looks nice (I think). Auxiliary software does not need to be able to read that this image is there. This can be done by giving the image an empty alt attribute or by using CSS to place it as a background image, for example.
Audio video
Videos also fall under content. Videos should have good subtitles for people who cannot hear the sound in the video (properly), so they still get the information from the video. The subtitles should be in the same language as the language spoken in the video. Learn more about subtitles.
Audio description is also needed. This is a voice-over that tells what is on screen if it is not already clear from the audio of the video. This is intended for people who cannot see what is happening in the video, for example if there is text on screen. Read more about audio description here.
If there is an audio file on the website, there should be an alternative for people who cannot hear it. This can be done by offering a transcript. This is a transcribed text of what can be heard. This can be done with a podcast, for example. The transcribed text is then a kind of script showing who says what in the podcast.
Formatting text
Cups
When posting text, you need to make sure it is formatted properly. Auxiliary software can then determine the structure and relationships of the page. A header says something about the text below it. If this is formatted as a header, help software can read out that this is a heading. It can then also list headings on the page. For example, the text "Headings" above is formatted with an h4 element in the HTML code (this is a level 4 header). Also make sure that the correct levels of headings are used and that there is always content below a heading.
Strong and em
What frequently goes wrong is the use of strong- and em-elements. These elements are meant to give emphasis to a piece of text. The text can therefore be read with emphasis by auxiliary software. However, these elements are not intended to style test, this can be done with CSS.
Frames
If you use a list, format this as a list. Auxiliary software can then:
determine that this is a list
predict how many items the list has
predict which item of the list someone is at
Tables
Tables should also be properly formatted as tables. This can be done with the table element. It is important to indicate what the table headings are, both in the columns and in the rows. This can be done with th elements. This is important because software can then determine the relationships. If someone with auxiliary software is in a table cell, the corresponding table headings can be read out immediately.
Content | Techniek | |
|---|---|---|
Aantal onderzochte succescriteria van WCAG 2.1 | 30 | 43 |
Other language
And now for something completely different. Sometimes text can be in a different language. When this is the case, you have to set a change of language in the HTML code. Screenreaders can read the text in the right language if you do this. Otherwise it will not be understandable.
Contrast and colour
Text should have sufficient contrast. If the contrast is too low, some people may have trouble reading the text. Non-text elements should also have sufficient contrast. Think, for example, of informative icons. This also applies, for example, to lines in graphs. Read more about good colour contrast here.
Also make sure that information does not depend only on colour, for example in a graph. In addition to colour, use different shapes or text. People who are colour-blind will not get the information otherwise.
Describe the subject or purpose
The page title indicates what the page is about. The title should also indicate the difference between pages. If you have several tabs open, you can quickly see which page you want to go to by the page title. Auxiliary software also reads the page title first.
If you post a link, make it clear where the link goes. A link like "Read more" is not clear if it is read out by auxiliary software. Therefore, make sure to provide more information visually (or hidden in the code) about where the link goes. Read more about "read more" links.
Headings should describe what the content below them is about and buttons should also make it clear what they do.
Formulate
Have you ever tried to submit a form and it didn't work? Sometimes you keep seeing the form but have no idea what you did wrong. This is, of course, very inconvenient. Therefore, make sure there are error messages describing what went wrong and where.
Even better is to avoid errors. This can be done by indicating for each field what should be filled in with a visible label outside the field. And if, for example, a date has to be entered in a certain way (e.g. dd-mm-yyyy), indicate this in advance as well.
PDF documents also fall under the content of a website, and some of the same WCAG success criteria apply to them as to HTML pages. So the same kinds of things need to be considered, although the application is sometimes different. In PDF documents, tags can be used to indicate structure. For example, there are tags for headings and lists and the like. This can be compared to HTML elements for headings and lists on an HTML page. Auxiliary software can read out what a header is by the tags, for example.
In PDF documents, images should also be given alternative text. If an image is decorative, it can be formatted as an artefact in a PDF. This means that auxiliary software can ignore the image. Furthermore, pay attention to contrast and use of colour in a PDF as well.
Learn more about making PDF accessible here.
Content with your content!
With this content checklist, you can get started so that you and your website's visitors are completely content! Want to know more about accessible content?
