Creating Accessible Content
Websites today have to meet numerous requirements. Everyone wants to be able to access information on any device, anywhere, without restrictions or barriers. The use of mobile devices with smaller screens and sometimes slow internet connections is now commonplace. However, usability with alternative technologies, such as screen readers that work with voice output and keyboard operation, must also be ensured.
To meet all these requirements and make information accessible to everyone, there are a number of things to consider. The basic guidelines on usability and accessibility provide important orientation.
In OPAL and ONYX, authors can create and design various types of content. Among other things, you can use the text editor to provide descriptions and page content in the course. We have prepared some tips and further content for you.
How do I structure content?
When structuring texts on websites or in documents, it makes sense to use books or articles as a guideline. The headlines, bulleted lists, table of contents and visual highlighting used there help to improve readability, skimming or scanning with the eyes, and, therefore, make it easier to find relevant information quickly. These elements also help users to find their way around the site. In addition to visual structuring through design, technically correct structuring by means of suitable HTML elements is also necessary. This is particularly relevant for accessibility, as screen readers and other assistive technologies transmit information based on HTML code and provide various functions.
Headings
Headings should not be created by changing the font size or using formatting such as bold, but rather using the HTML elements <h1>, <h2>, <h3> to <h6>. The element hierarchy (e.g. <h2> follows <h1>) must be maintained.
Formats in the Tiny MCE text editor
HTML code for headings
<h2>heading 2. hierarchy</h2>
<h3>heading 3. hierarchy</h3>
<h4>heading 4. hierarchy</h4>
<h5>heading 5. hierarchy</h5>
<h6>heading 6. hierarchy</h6>
Paragraphs and highlighting
Paragraphs, quotations or highlighted text in boxes help to break up a text and allow readers to jump to the relevant information if necessary.
Formats in the Tiny MCE text editor
HTML code for paragraphs
<blockquote>quote</blockquote>
Lists
Lists can be used to present information clearly, briefly and concisely. Choose between unordered and ordered or numbered lists.
Lists in the Tiny MCE text editor
HTML code for lists
<li>list entry</li>
<li>list entry</li>
<li>list entry</li>
</ul>
<li>list entry</li>
<li>list entry</li>
<li>list entry</li>
</ol>
Tables
Using tables
Please use tables only to present data in tabular form. Tables should not be used to display text or other content side by side or in “columns” for visual reasons (layout tables).
It is worth considering whether a table is necessary or whether the content could be presented more simply, e.g. by means of a list.
Table headings (Caption)
Each table should have a heading that provides a brief summary of its content. You can use the HTML element <caption> for this purpose.
In the Tiny MCE text editor, you can activate the table caption in the table properties. When you do this, some text will appear above the table, which you can change to match your content.
How to activate table captions in the Tiny MCE text editor
HTML code for captions
2
3
4
<caption>presentations on group work</caption>
...
</table>
Column and row headings
Cells for headings (header cells) should be distinguished from data cells not only by design, but also by HTML. Header cells in tables are therefore marked with the HTML tag <th>, data cells with <td>.
You can additionally link the header cells to the data cells via the ‘scope’ attribute. This ensures that your headings are assigned to the rows or columns and that the output via screen readers is correct.
In the Tiny MCE text editor, you can use the cell properties to define your selected cells as headings and assign them to columns or rows.
- To do this, select your preferred cells and open the cell properties via the menu (Table > Cell > Cell Properties).
- Now select ‘Header cell’ in the dialogue box under ‘Cell type’.
- Select ‘Column’ from the ‘Scope’ option.
- Repeat this action if you use row headings in addition to column headings. In this case, select ‘Line’ under the ‘Scope’ option.
How to define header cells in the Tiny MCE text editor
How to mark header cells in HTML
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<caption>presentations on group work</caption>
<thead>
<tr>
<th scope="col">date</th>
<th scope="col">time</th>
<th scope="col">topic</th>
<th scope="col">place</th>
</tr>
</thead>
<tbody>
<tr>
<td>04.03.</td>
<td>10 - 11 a.m.</td>
<td>sustainability<td>
<td>room3b</td>
</tr>
...
</tbody>
</table>
Further information
How can texts be made easy to read?
Font, font size, character and word spacing, line length and many other factors influence the readability of texts.
- Make sure to use common fonts (like Arial) and avoid fancy or hard-to-read ones.
- The font size for large screens should be between 18px and 26px. For small devices, such as smartphones, you should use smaller font sizes because the device is usually closer to the eye.
- The line spacing should be at least 120% of the font size, preferably 150%.
- The line length should be between 45 and 80 characters per line, including punctuation and spaces.
Please keep in mind that font size, line spacing, and line length depend on both the font and the device you're using.
Further information
How should links be set?
Links need meaningful titles and should describe the purpose or destination of the link. Ambiguous link texts such as ‘more’, “here” or ‘read more’ should be avoided. Relevant information about the format or size of a file (e.g. for a download link) should also be included in the linked text.
What should be considered when using media?
When using media, consider not only storage consumption and loading times, but also its accessibility on the go, e.g. on a smartphone with a poor internet connection. Ensure that information is always available via a second channel, such as text.
Here are some tips you might find useful regarding accessibility and mobile compatibility.
File size
- For photos, JPEG format should be preferred and medium to high quality should be selected depending on the image content.
- Images should not exceed a file size of 100-200kB.
- Save the images directly in the required image size (width x height) with a resolution of 72 dpi.
- For very large files, such as videos, we recommend embedding them via an external tool (e.g. Videocampus Sachsen, YouTube, Vimeo, etc.).
Captions
Captions or titles provide additional information about images. A title is necessary if important information about the image needs to be conveyed. Unlike image descriptions (alternative text), titles are also accessible to sighted users.
Use the following HTML code to make the image and image title accessible:
Caption with the HTML elements figure and figcaption
2
3
4
<img src="..." alt="alternative text">
<figcaption>title / caption</figcaption>
</figure>
Alternative text (alt text)
You should always provide alternative text for images that are relevant to the content of a page. Alt text is read out by screen readers and, therefore, accessible to blind people. Even if the images on the page are disabled or cannot be loaded due to a slow internet connection, the information can still be conveyed despite the missing image.
The following should be kept in mind when providing alt text for images:
- Keep it short: The alternative text should only contain the most important information. A useful guideline is 125 characters.
- Describing information: Only describe information that is relevant to the context (e.g. the text) and that the image is intended to convey.
- Images that are used primarily for design purposes should not be given alt text (empty alt attribute). In the text editor, you can mark these images as decorative.
How to store alternative text in the Tiny MCE text editor
HTML code for alt text
How to mark an image as decorative
How to empty the alt attribute for images without relevant information in HTML
Further information
- Tips on how to write good alternative texts and image descriptions: Broschüre "Gut Fürs Image" (PDF)
- How to write better alt-text descriptions for accessibility
- Five golden rules for compliant alt text
Optimizing images for smartphones and tablets
For images to be displayed in full on small-screen devices and without users having to scroll horizontally, the maximum width in HTML should be limited to 100%. This ensures that the image is only displayed in the selected size until it is wider than the available space on the screen.
HTML code for max-width
Providing alternatives for videos and audio files
When using media, make sure to always offer the info in an alternative format. In addition to image descriptions (alternative text) for images, think about pure audio content (e.g. podcasts) and video content with images and sound.
- Provide alternative content or a transcript if you use audio files such as podcasts.
- Provide subtitles and sign language translation for video content.
- Integrate media from external platforms, such as YouTube or Videocampus Sachsen
Further information
Colours & contrasts
When selecting colours, make sure there is sufficient contrast between the background and text colours. Black on white generally offers the best contrast ratio, which should be at least 4.5:1 (WCAG 2.1 - Contrast).
Colour should never be used as the only means of highlighting information. Instead, supplement information such as notices or error messages with a clearly recognisable icon and additional text. Avoid instructions or descriptions that refer only to a colour or other visual cues, e.g. ‘Click on the green button’.
Further information
Useful tools
- Check websites with WAVE Toolbar.
- WAVE für Google Chrome (browser extension)
- WAVE für Firefox (browser extension)
- Free open source screen reader for Windows: NVDA download
- Checkliste: barrierefreie PDF-Dokumente from Einfach für alle