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!
However, 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)
Give each page a structure with headings
- Give each page a page heading in layout 1 (H1).
- Organize sections of the page hierarchically with headings in layout 2-4 (H2-H4)
This structure is read out to screen reader users in addition to the actual headings. This makes it easier for them to understand the layout of the page and the structure of the content.
Provide alternative text and caption for all images and graphics
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 imperative that you formulate an alternative text for each image and graphic .
The following applies:
- Detailed description without interpretation
- From important to secondary
- Decorative graphics without a substantive contribution can be named as such and only briefly described.
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 sitting on the back of a bench hands a second man a can of beer. Both men are wearing casual clothes and a cool box can be seen in the background. The second man is sitting in a wheelchair.
Offer additional 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.
When is what needed? Subtitles are particularly suitable for videos in which the action and what is said are best captured at the same time (e.g. movies). A transcript makes it possible to capture what is said in the video as a whole. This is because it is often difficult to follow the course of the movie and the subtitles at the same time. (e.g. instruction video)
If you upload your videos to http://vcm.uni-kl.de, you can have them subtitled automatically. The speech recognition is quite good, but still requires slight manual corrections.
Videos on YouTube are automatically subtitled and the content is very good.
Unfortunately, it is not so easy to create a transcription. The easiest way is to copy it from the automatically generated subtitles.
Example transcription of the sample video with description of the visual content
[Kathrin Kunert]
Welcome to the Technical University of Kaiserslautern. My name is Kathrin Kunert and I run the Student Service Center on campus.
[In the Student Service Center. 2 workstations with employees.]
My team and I will be happy to answer any questions you may have about your studies.
[Music, camera flight with drone over the campus and around the round administration building 47]
First and foremost, you can expect a campus university at RPTU. This means that everything you need for your studies is just a few minutes' walk away. [...]
The handling of the new content elements and a different approach to the
0:01
old content elements here in our training system.
0:07
You can always achieve this. You can do that at t3coach.rhrk.uni-kl.de
0:12
And there is a page there.
0:19
First of all, there's an overview of our training courses, but there's also a page called Sandbox, which I've called up here.
0:21
We have provided you with a backend user account here in this system, which you can use to try things out as you wish.
0:27
The system is reset every night so that you have a fresh system every day.
0:36
And that also means that you can't keep your changes for long.
0:42
The backend URL is also displayed here on the Sandbox page.
0:47
This is T3 Coach aka UNIQA, Oldesloe, TYPO3 and the username is T3 Sandbox and the password Sandbox underlined T3 is there,
0:51
can log in and that's what we're doing now or what I've already done.
1:02
I go to the backend and have created a subpage under the Sandbox page.
1:07
It's called VB in the test a little bit bigger for them and we're going to deal with the Rasta elements first of all.
1:13
I'm going to create a new element here on the page and we want to have a grid element.
1:21
And you can see here already from this overview that we have a lot of new column sizes that are significant column sizes,
1:30
which in my opinion are the ones with 33 33 33 percent, with 66 33 reversed, the 50 50 and the 80 percent wide.
1:42
Why not the ones with the 25 percent size?
1:58
We have a much larger font size than in our last layout.
2:03
The largest width in the desktop view is not that much larger anyway, depending on how long the words are that we have.
2:10
And some of them are really long here at the university.
2:22
And how much text is in there, the 25 percent column size is simply too narrow for content.
2:25
They'll see that too when they look at their pages. It's worth switching to the 33 percent, i.e. with the richness principle.
2:33
What do you use the 80 percent for?
2:42
Sometimes you want to display an element across the entire width of the page, but not quite so oversized.
2:46
Then you put it in an 80 percent column.
2:54
I think that's exactly what we're doing here. I'll take 80 percent width.
2:58
We can continue to give headings here.
3:05
A small error that is still in the template, but has already been reported and should be fixed.
3:08
Even if there is no signature here, the spacing is not quite right in the grid element.
3:15
But you will see that and I hope it will be fixed soon.
3:26
80 percent column width and we have already selected that.
3:35
You can see here in the grid layout you can also select something else.
3:40
We save and close and now let's just take a moment here and just take a picture.
3:45
Just three columns.
3:59
I have to be careful, if in the text and media I don't write any text, but I put in the picture, which add the file for example.
4:01
We have pictures here.
4:14
We could have newer ones and bigger ones.
4:18
I'm trying to find it big. I'll take that and save it and display it.
4:24
We always have this jumping from the template, we'll switch that off as soon as possible.
4:33
So I go to the top again.
4:40
We're always talking about different widths here with this template, namely window width.
4:42
This also applies to this frame on the very outside, where normally there's also no can.
4:50
Then we have the content width, which goes like this here.
4:55
So on this. Line here vertically downwards. Now you can see that this image here has 80 percent column width.
4:59
I have now called up a page here on which all the new grid element sizes are visible.
5:08
We have here a column 100 percent, 80 percent twice 50 percent 75 25 and the whole thing also reversed.
5:16
I really missed that. Previously a 66 33 and vice versa.
5:26
Then the 3rd column with 50 25 already 20 percent reversed 25 25 50 percent, 3 times 33 percent, 4 times 25 percent.
5:33
I think there's something in there for everyone. That's what the elements are.
Attention website operators
Legal requirements
This applies to each individual university website/web application!
- Compliant with BITV 2.0 at least AA
- BITV (self-)testing of the website
- Declaration of accessibility with result of the test and contact to the enforcement body
- Accessible contact option on every page
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.