What is it about?
Participation is a human right and therefore the accessibility of websites is not only a necessity but has long been a quality feature and competitive factor.
In 2019, the proportion of severely disabled people in the total population in Germany was 9.5%. This includes all people who have been officially recognized as having a degree of disability of at least 50%. We are legally obliged to provide accessible websites for these people!
But the number of people who benefit from accessibility is far greater, e.g. people
- whose degree of impairment is not quite as severe,
- whose impairment is temporary (e.g. due to an accident or illness) or
- who are in a situation that affects them (e.g. noisy environment)
This simply means: we all benefit from accessibility!
Examples of impairments
unaihuiziphotography
RioPatuca
Legal basis
This applies to every single website/web presence/web application of the university!
- The website/application must meet the requirements of the European standard EN 301 549. These correspond to the "Web Content Accessibility Guidelines (WCAG) 2.1" at level AA.
- Each website/app requires its own declaration of accessibility with the result of the test and contact to the enforcement body.
- Accessible contact option on every page
Give each page a structure with headings
The structure is read out to screen reader users together with the headings. This makes it easier for them to understand the layout of the page and the structure of the content. In addition, the clear structure of a page is helpful for the machine evaluation of the content, e.g. by search engines or AI.
- Give each page a page heading in layout 1 (H1).
- Organize sections of the entire page hierarchically with headings in layouts 2-4 (H2-H5), similar to how a book is divided into chapters and sub-chapters.
- Do not skip any heading levels
- Do not select headings based on their appearance
Meaningful links
Formulate meaningful link texts that provide information about the linked action or linked page.
Also assign the title attribute for links if the link text itself is not detailed enough. The title of the link should clearly state which action is being carried out or where the link points to.
Link text and link title are similar. The title is usually a little more detailed.
Example for link texts:
- Good
- "Seminar registration"
- "Website at RPTU"
- Bad
"Click here"
Examples for the title attribute:
- "To the website with the seminar registration"
- "To the website at RPTU"
Provide alternative text and captions for all images and graphics if necessary
An image without alternative text is simply announced as an "image" by a screen reader. In this case, the screen reader user is missing important information that you as the editor must provide.
It is essential that you formulate an alternative text for each image and graphic . The text should not exceed 80 characters.
The following applies:
- Detailed description without interpretation
- From important to secondary
- Decorative graphics that do not contribute to the content can be named as such.
A caption is not mandatory. However, it helps all site visitors with orientation and understanding of what is shown. The caption only briefly describes the content of the image.
Example of the alternative text for the adjacent image:
A man sits on a bench and hands a can of beer to another man in a wheelchair.
No text in the picture!
Text in images isnot recognized by screen readers. Neither are search engines or current AI tools. If you do not want to avoid text in images for design reasons, write the complete text in an understandable alternative text. This is the only way your page can pass an accessibility check.
Additional text alternatives for complex graphics
Particularly complex graphics may require an additional text alternative.
Examples:
- Schematic drawing of cell respiration (biology)
- Overview of modules of a degree program
- Organizational chart
Offer an additional text alternative if the content of the graphic is only incompletely explained by the page text.
The alternative text for the image could be: "Complex schematic representation of cell respiration. Description after the image." Below the image, explain the complete information and correlations from the graphic, e.g. in a single accordion element with the title "Description".
Understandable even without colors
Colors should not be necessary to understand the content. For example, don't just highlight warnings with a red info box. Add a help symbol.
Do not use one of the RPTU colors for one target group and another color for another target group without making this clear in the text.
Offer subtitles, transcription and description for videos
People with a hearing impairment need a transcription of the video and subtitles in the video to be able to follow a video in the best possible way. These also benefit all people who are, for example, in an environment where they cannot hear the sound of the video.
A transcription is the transcription of the spoken word. An accordion element is particularly suitable for integrating a transcript below the video.
Subtitles are displayed in the video itself at the time when the words are spoken in the video.
People with visual impairments need a description of the visual content of the video. If an audio description (audible description) is not possible, the description can be combined with the transcription.
Aktion Mensch shows how it works on the website "Barrier-free videos explained in an understandable way"!
Practical approaches to achieving basic accessibility
Use HTML semantically correctly
Semantically correctly labeled HTML helps screen reader users to understand the structure of the content and gives it meaning. Screen readers read out these structural elements! Ask yourself "What is this?" when writing HTML. Use a logical order of headings and structuring elements such as header, footer, nav, ul, p ...
Choose high-contrast colors
Depending on the size of the font or graphic element, different contrast ratios must be achieved between adjacent colors.
Large text means at least 18 pt for normal font weight and at least 14 pt for bold font weight. For AAA (WCAG 2.1 level), the contrast ratio is 4.5:1. For AA, the contrast ratio is 3:1.
Normal text means a maximum of 17 pt for normal font weight and a maximum of 13 pt for bold font weight. With AAA, the contrast ratio is 7:1. With AA, the contrast ratio is 4.5:1.
Adobe's color contrast analysis tool helps you to check and find the right color combinations.
Use WAI-ARIA for dynamic websites
Dynamic websites are often complicated in terms of accessibility. The WAI-ARIA standard provides tools to ensure accessibility in dynamic applications: https://www.w3.org/TR/wai-aria/
Recommended ARIA roles and attributes that work stably in browsers.