Accessible Content – A Quick Introduction
“Not everyone has a disability… but almost everyone benefits from accessibility.”
(Domingos de Oliveira - Consultant and Instructor for Digital Accessibility)
“Accessibility is a fundamental right”
(Charter of Fundamental Rights of the European Union, Art. 21 and 26)
For people with disabilities, digital accessibility means a better quality of life, social participation, and a “normal” life that is taken for granted by many people without limitations.
On one hand, it helps every user when they can quickly find the information they are looking for, and when this information is presented in a clear, organized, and understandable manner (accessibility = maximum user-friendliness). On the other hand, accessible internet offerings should be usable by all people—regardless of their limitations or the technical requirements. The following forms of limitations should be considered:
- Sensory and physical disabilities: Blind or visually impaired individuals may struggle to perceive visual content and require assistive tools such as screen readers, magnification software, or text-to-speech software. Hard of hearing and deaf individuals face challenges with audio content, while those with motor disabilities may have difficulty using a mouse and keyboard.
- Perceiving or processing information: People with Down syndrome may feel overwhelmed by complex content. Individuals with autism and epilepsy can be sensitive to strong stimuli.
- Understanding and retention: In Germany, as of 2019, there were approximately 6.2 million people with reading difficulties, and many, often older, individuals may be entirely unfamiliar with navigating websites.
The Web Content Accessibility Guidelines (WCAG) is a globally recognized standard for accessible web content. WCAG 2.1 has been in effect since June 2018. The foundation of the guidelines consists of four principles:
The four principles of accessibility:
- Principle 1: Perceivable - The website follows the two-sense principle.
- Principle 2: Operable - Users can reach their goals without relying solely on a mouse, typing, or swiping.
- Principle 3: Understandable - Information and the user interface must be understandable.
- Principle 4: Robust - Ensure compatibility with as many user agents as possible, including assistive technologies.
Advantages of an Accessible Website
Why should your website be accessible?
- You expand your target audience: Accessible websites are open to everyone, regardless of individual abilities or disabilities. This allows you to reach a broader audience.
- You gain advantages in search engine optimization: Accessible websites are well-structured, which improves their discoverability by search engines, potentially leading to a higher ranking.
- You strengthen your image and demonstrate social responsibility: An inclusive website can enhance user trust and increase brand value.
How can you proceed editorially to make websites accessible!
The goal should be to ensure that your web presence provides information equally for both disabled and non-disabled individuals and is equally usable for them.
The Page Title provides the first important overview of what content to expect, both in the frontend (user view) and in the backend as a menu item (TYPO3 editorial view). Please note:
- The Page Title is read by screen readers and displayed in search engines.
- Therefore, it should be chosen to be as concise and appropriate as possible.
In addition to the Page Title, you can add a description (Description) in the SEO tab, which is also read out. Put yourself in the visitor's shoes. What information would they expect on the topic? Give them a brief overview.
Tip!
The Description is also displayed by search engines. The length should be a maximum of 160 characters; otherwise, the description will be cut off.
The simpler the page design, the more accessible it is:
- Write short sentences and avoid nested sentences and filler words.
- It's best to spell out abbreviations (whenever possible).
- In a scientific context, it's certainly challenging to avoid technical terms and foreign words, but may be the text can be expressed here and there in simpler terms.
Your website should be clear and well-organized, as this makes it appealing:
- The most important information always comes first.
- Use headings, lists, and dividers for structure.
- Our template is responsive. However, be sure to check how your website appears on mobile devices. Is everything logically organized and easy to navigate despite the different layout? Many people with disabilities primarily access the internet on smartphones, which often come with built-in assistive technologies.
Headings (H1 - H6) structure your website and have a logical order. The H1 heading should only be used once on a webpage.
Inconsistent heading hierarchies can be confusing. Screen reader users and search engines may not be able to properly categorize the content. Additionally, bolded text areas are not perceivable to screen reader users. Therefore, please keep in mind:
- A good heading hierarchy works like a table of contents in a book.
- Do not insert empty paragraphs to create spacing.
- Highlight quotes using block quotes.
- Use bullet points or numbered lists (use the buttons provided, do not create a list by typing in dashes).
- Do not style the text yourself; instead, use the formatting templates.
For detailed information on headings, please refer to our guide.
Blind users access tables structurally – they navigate through the columns and rows using the keyboard. It is therefore important to:
- Design tables to be as simple as possible
- Only provide data in the cells
- Avoid inserting empty cells for additional spacing
- Define column headers
The use of the content element type "Table" is only recommended for usability and accessibility reasons if you want to fill your table with images. In all other cases, please use RTE tables.
Screen readers are unable to convey what is depicted in images or graphics. Therefore, as an editor, you need to think about why this image is being included and what it is meant to convey. You can also describe the mood conveyed by the image. Use a descriptive filename and include a description in the "Alternative Text" field in the image metadata. Please adhere to the following rules:
- Be concise and meaningful (max 80 characters)
- Do not include introductions like “The image shows...” or copyright notices
- An image that represents a link needs alternative text but does not require link text
Dive deeper into the topic and read more about it in our guide.
Create descriptive links that allow users to quickly decide whether to follow them.
- For internal links, TYPO3 automatically uses the page title as the link text.
- If a link points to a file instead of a page, it should include a note about the file format, e.g., brochure (PDF). Why? Because a screen reader requires a program/plugin to open a file. Additionally, this way:
- The user knows what to expect.
- They won’t be surprised or confused when browser functions are no longer available or when another program is launched.