Wiki source code of Erstellung barrierefreier Inhalte

Last modified by Carina Enke on 20.02.2026

version	line-number	content
235.5	1	{{section}}
	2	{{column width="60%"}}
264.1	3	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.
62.1	4
264.1	5	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.
62.1	6
204.1	7	{{info title="Usability"}}
264.1	8	Usability is defined in the DIN EN ISO 9241-11 standard. A system must be able to be used by certain users in a certain context of use in order to complete work tasks effectively, efficiently and satisfactorily, and thus achieve certain goals.
62.1	9
264.1	10	The [[Website of the Nielsen Norman Group (EN)>>url:https://www.nngroup.com/articles/usability-101-introduction-to-usability/\|\|shape="rect"]] provides an introduction and more information.
62.1	11	{{/info}}
	12
264.1	13	{{info title="Accessibility"}}
	14	The guidelines for fulfilling accessibility requirements can be found in the [[Web Content Accessibility Guidelines (WCAG 2.2)>>url:https://www.w3.org/TR/WCAG22/\|\|shape="rect"]]. A German-language introduction to the topic of accessibility can be found on the website [["Einfach für alle">>url:https://www.einfach-fuer-alle.de/artikel/einfuehrung-barrierefreiheit/\|\|shape="rect"]].
186.1	15
264.1	16	It is important to have an overview of the existing limitations of abilities and disabilities in order to understand the requirements. The[[ W3C Web Accessibility Initiative (WAI) >>url:https://www.w3.org/WAI/people-use-web/abilities-barriers/\|\|shape="rect"]] website has a good English-language overview of the various abilities and barriers. Aktion Mensch provides a brief overview of forms of disability in German: [[Überblick über Behinderungsformen in deutscher Sprache>>url:https://www.aktion-mensch.de/inklusion/arbeit/fachkraefte-mit-behinderung-gewinnen/behinderungsformen\|\|shape="rect"]].
62.1	17	{{/info}}
	18
264.1	19	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.
62.1	20
236.6	21
235.2	22	{{/column}}
62.1	23
235.2	24	{{column width="30%"}}
264.1	25	{{panel title="Content"}}
236.6	26	{{toc start="2" depth="3"/}}
236.5	27	{{/panel}}
	28
264.1	29	{{panel title="Related Topics"}}
	30	* [[Text editor>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Weitere Funktionen.Texteditor.WebHome]]
	31	* [[Use your own course layout in OPAL>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Kurs.Kurseinstellungen.Kurslayout.WebHome]]
236.5	32	{{/panel}}
235.5	33	{{/column}}
	34	{{/section}}
236.3	35
203.1	36
264.1	37	== Course-related accessibility statement ==
258.2	38
264.1	39	Public bodies, including state universities and schools, are legally obliged to produce an accessibility statement for their digital offerings. This statement describes the extent to which accessibility requirements are met and, where applicable, identifies areas that are not accessible. Further information can be found on the official website for the accessibility statement for web and app applications of the Federal Government.
258.2	40
264.1	41	A declaration at the software level covers the functions of the learning platform, but not the content of individual courses. However, since an OPAL course consists mainly of learning materials for which the course coordinators are responsible, it makes sense to provide a course-related accessibility statement.
258.2	42
	43
264.1	44	To make it easier for teachers to create such a statement, TU Dresden provides the LMS Check Generator for accessibility. The tool enables course administrators to:
258.2	45
264.1	46	* create a course-specific accessibility statement,
	47	* identify potential barriers in texts, media and interactive content,
	48	* provide support for the accessible design of teaching materials.
258.2	49
264.1	50
	51
	52	The tool guides you step by step through the creation of the declaration. The person responsible selects the course modules used in the course and then receives a checklist for the content. The generated declaration is provided as an accessible HTML file and can be embedded in the course as a page using the ‘Single Page’ course module. This means that the declaration is directly available in the course and easy for learners to find.
	53
	54	{{panel title="Further information"}}
	55	* LMS Check Generator tool for accessibility from TU Dresden: [[https:~~/~~/lms-check.inf.tu-dresden.de/checklist?lang=en>>url:https://lms-check.inf.tu-dresden.de/checklist?lang=en]]
	56	* Federal government information on accessibility declarations for web and app applications: [[https:~~/~~/www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/barrierefreie_it>>https://www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/barrierefreie_it/uebergreifende-anforderungen-web-und-app/erklaerung-zur-barrierefreiheit/erklaerung-zur-barrierefreiheit-node.html]]
261.1	57	{{/panel}}
258.2	58
	59
264.1	60	== Tips for designing content ==
261.1	61
264.1	62	=== How do I structure content? ===
258.2	63
264.1	64	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.
258.2	65
203.1	66	{{info}}
264.1	67	OPAL's integrated [[Text editor Tiny MCE>>doc:LMS.Benutzerhandbuch OPAL.Lehren.Weitere Funktionen.Texteditor.WebHome]] helps you to structure your content correctly without having to learn HTML.
62.1	68	{{/info}}
	69
264.1	70	=== Headings ===
62.1	71
264.1	72	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.
258.2	73
203.1	74
264.1	75	==== Formats in the Tiny MCE text editor ====
209.1	76
241.2	77	[[image:attach:Texteditor-Formate-Überschriften_de.png\|\|data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
62.1	78
209.1	79
264.1	80	==== HTML code for headings ====
62.1	81
	82	{{code language="xml"}}
264.1	83	<h1>heading 1. hierarchy</h1>
	84	<h2>heading 2. hierarchy</h2>
	85	<h3>heading 3. hierarchy</h3>
	86	<h4>heading 4. hierarchy</h4>
	87	<h5>heading 5. hierarchy</h5>
	88	<h6>heading 6. hierarchy</h6>
62.1	89	{{/code}}
	90
264.1	91	=== Paragraphs and highlighting ===
62.1	92
264.1	93	Paragraphs, quotations or highlighted text in boxes help to break up a text and allow readers to jump to the relevant information if necessary.
258.2	94
	95
264.1	96	==== Formats in the Tiny MCE text editor ====
203.1	97
264.1	98	[[image:attach:Texteditor-Formate-Absätze-Hervorhebungen_de.png\|\|data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
62.1	99
264.1	100	==== ====
258.2	101
264.1	102	==== HTML code for paragraphs ====
258.2	103
62.1	104	{{code language="xml"}}
264.1	105	<p>paragraph</p>
	106	<blockquote>quote</blockquote>
62.1	107
	108	{{/code}}
	109
219.1	110	{{warning}}
264.1	111	The elements <div> and <span> have no meaning (semantics) and should only be used, for example, to realize the design via CSS or dynamic adjustments via JavaScript.
219.1	112	{{/warning}}
62.1	113
264.1	114	=== Lists ===
62.1	115
264.1	116	Lists can be used to present information clearly, briefly and concisely. Choose between unordered and ordered or numbered lists.
258.2	117
62.1	118	{{column}}
264.1	119	==== Lists in the Tiny MCE text editor ====
62.1	120
248.1	121	[[image:attach:Texteditor-Listen.png\|\|data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
62.1	122	{{/column}}
	123
	124	{{column}}
264.1	125	==== HTML code for lists ====
62.1	126
264.1	127	{{code language="xml" title="unordered list"}}
62.1	128	<ul>
264.1	129	<li>list entry</li>
	130	<li>list entry</li>
	131	<li>list entry</li>
62.1	132	</ul>
	133
	134	{{/code}}
	135
264.1	136	{{code language="xml" title="ordered list"}}
62.1	137	<ol>
264.1	138	<li>list entry</li>
	139	<li>list entry</li>
	140	<li>list entry</li>
62.1	141	</ol>
	142
	143	{{/code}}
	144	{{/column}}
214.1	145
203.1	146
264.1	147	=== Tables ===
203.1	148
264.1	149	==== Using tables ====
214.1	150
264.1	151	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).
214.1	152
264.1	153	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.
214.1	154
	155	{{info}}
264.1	156	On small screen devices (e.g. smartphones) and when zoomed in (e.g. 300%), tables are often not displayed in full. As a rule, content should not be cut off. Therefore, check the display on different devices and different zoom levels, and never assign tables an absolute width (e.g. 700px).
214.1	157	{{/info}}
	158
264.1	159	==== Table headings (Caption) ====
214.1	160
264.1	161	Each table should have a heading that provides a brief summary of its content. You can use the HTML element <caption> for this purpose.
214.1	162
264.1	163	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.
214.1	164
264.1	165	===== =====
214.1	166
264.1	167	===== How to activate table captions in the Tiny MCE text editor =====
258.2	168
253.2	169	[[image:Texteditor-Tabellen-Beschriftung_de.png\|\|alt="Beschriftung für Tabellen aktivieren im Dialog Tabelleneigenschaften im Texteditor (Screenshot)" data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
214.1	170
264.1	171	===== =====
214.1	172
264.1	173	===== HTML code for captions =====
	174
214.1	175	{{code language="html" layout="LINENUMBERS"}}
	176	<table>
264.1	177	<caption>presentations on group work</caption>
214.1	178	...
	179	</table>
	180	{{/code}}
215.1	181
	182
264.1	183	==== Column and row headings ====
215.1	184
264.1	185	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>.
215.1	186
264.1	187	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.
215.1	188
264.1	189	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.
215.1	190
264.1	191	* To do this, select your preferred cells and open the cell properties via the menu (Table > Cell > Cell Properties).
	192	* Now select ‘Header cell’ in the dialogue box under ‘Cell type’.
	193	* Select ‘Column’ from the ‘Scope’ option.
	194	* Repeat this action if you use row headings in addition to column headings. In this case, select ‘Line’ under the ‘Scope’ option.
215.1	195
218.1	196	{{warning}}
264.1	197	Please do not leave your header cells empty.
218.1	198	{{/warning}}
	199
264.1	200	===== How to define header cells in the Tiny MCE text editor =====
215.1	201
264.1	202	[[image:Texteditor-Tabellen-Zelleneigenschaften_de.png\|\|alt="Screenshot einer Seite mit einer Tabelle im Texteditor Tiny MCE. Die Kopfzeilen der Tabelle sind markiert und der Weg zu den Zelleneigenschaften ist hervorgehoben." data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="320" width="660"]] [[image:Texteditor-Tabellen-Zelleneigenschaften-Typ-Gültigkeitsbereich_de.png\|\|alt="Screenshot des Dialogs Zelleneigenschaften. Hervorgehoben sind die Optionen Zellentyp und Gültigkeitsbereich." data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="320" width="323"]]
258.2	203
	204
264.1	205	===== How to mark header cells in HTML =====
215.1	206
	207	{{code language="html" layout="LINENUMBERS"}}
	208	<table>
264.1	209	<caption>presentations on group work</caption>
215.1	210	<thead>
	211	<tr>
264.1	212	<th scope="col">date</th>
	213	<th scope="col">time</th>
	214	<th scope="col">topic</th>
	215	<th scope="col">place</th>
215.1	216	</tr>
	217	</thead>
	218	<tbody>
	219	<tr>
	220	<td>04.03.</td>
264.1	221	<td>10 - 11 a.m.</td>
	222	<td>sustainability<td>
	223	<td>room3b</td>
215.1	224	</tr>
	225
	226	...
	227
	228	</tbody>
	229	</table>
	230	{{/code}}
218.1	231
264.1	232	{{panel title="Further information"}}
	233	* [[Steps towards an inclusive communication design (legibility.info)>>url:https://www.leserlich.info/\|\|shape="rect"]]
257.1	234	* [[HTML als Auszeichnungssprache / Semantik (SELFHTML-Wiki)>>https://wiki.selfhtml.org/wiki/HTML/Tutorials/Entstehung_und_Entwicklung#HTML_als_Auszeichnungssprache\|\|shape="rect"]]
203.1	235	{{/panel}}
	236
258.2	237
	238
264.1	239	=== How can texts be made easy to read? ===
203.1	240
264.1	241	Font, font size, character and word spacing, line length and many other factors influence the readability of texts.
203.1	242
264.1	243	* Make sure to use common fonts (like Arial) and avoid fancy or hard-to-read ones.
	244	* 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.
	245	* The line spacing should be at least 120% of the font size, preferably 150%.
	246	* The line length should be between 45 and 80 characters per line, including punctuation and spaces.
186.1	247
264.1	248	Please keep in mind that font size, line spacing, and line length depend on both the font and the device you're using.
203.1	249
255.2	250	{{info}}
264.1	251	Check the readability of your texts on various devices and have them evaluated by other people. Ideally, by your users. Involve people with visual impairments or cognitive impairments as well as those with learning disabilities.
203.1	252	{{/info}}
186.1	253
264.1	254	{{panel title="Further information"}}
	255	* [[Steps towards an inclusive communication design (legibility.info)>>url:https://www.leserlich.info/\|\|shape="rect"]]
	256	* [[Font size calculator (legibility.info)>>url:https://www.leserlich.info/werkzeuge/schriftgroessenrechner/index.php\|\|shape="rect"]]
203.1	257	{{/panel}}
	258
235.3	259
203.1	260
264.1	261	=== How should links be set? ===
203.1	262
264.1	263	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.
	264
62.1	265	{{info}}
264.1	266	A link has to stand on its own and still describe the destination or purpose well enough.
203.1	267	{{/info}}
62.1	268
235.3	269
203.1	270
264.1	271	=== What should be considered when using media? ===
203.1	272
264.1	273	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.
203.1	274
264.1	275	Here are some tips you might find useful regarding accessibility and mobile compatibility.
186.1	276
264.1	277	==== File size ====
186.1	278
264.1	279	* For photos, JPEG format should be preferred and medium to high quality should be selected depending on the image content.
	280	* Images should not exceed a file size of 100-200kB.
	281	* Save the images directly in the required image size (width x height) with a resolution of 72 dpi.
	282	* For very large files, such as videos, we recommend embedding them via an external tool (e.g. Videocampus Sachsen, YouTube, Vimeo, etc.).
	283
186.1	284	{{info}}
264.1	285	Common image editing programmes and online tools can help to compress images without any visible loss of quality.
186.1	286	{{/info}}
	287
264.1	288	==== Captions ====
186.1	289
264.1	290	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.
203.1	291
264.1	292	Use the following HTML code to make the image and image title accessible:
203.1	293
264.1	294	Caption with the HTML elements figure and figcaption
203.1	295
221.1	296	{{code language="html" layout="LINENUMBERS"}}
186.1	297	<figure>
264.1	298	<img src="..." alt="alternative text">
	299	<figcaption>title / caption</figcaption>
186.1	300	</figure>
203.1	301	{{/code}}
62.1	302
258.2	303
	304
264.1	305	==== Alternative text (alt text) ====
203.1	306
264.1	307	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.
203.1	308
264.1	309	The following should be kept in mind when providing alt text for images:
203.1	310
264.1	311	* Keep it short: The alternative text should only contain the most important information. A useful guideline is 125 characters.
	312	* Describing information: Only describe information that is relevant to the context (e.g. the text) and that the image is intended to convey.
	313	* 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.
62.1	314
	315	{{info}}
264.1	316	Imagine you are describing a picture of a person on the phone. Which details would you mention, and which would you leave out because they are not relevant in this context?
62.1	317	{{/info}}
	318
208.1	319
264.1	320	===== How to store alternative text in the Tiny MCE text editor =====
62.1	321
234.1	322	[[image:Texteditor-Bilder-Alternativtext.png\|\|data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
62.1	323
208.1	324
264.1	325	===== HTML code for alt text =====
208.1	326
196.1	327	{{code}}
197.1	328	<img ... alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
62.1	329	{{/code}}
	330
264.1	331	===== How to mark an image as decorative =====
196.1	332
234.1	333	[[image:Texteditor-Bilder-dekorativ.png\|\|data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="224" width="300"]]
	334
235.5	335
264.1	336	How to empty the alt attribute for images without relevant information in HTML
235.5	337
198.1	338	{{code}}
235.4	339	<img src="..." alt=" " />
198.1	340	{{/code}}
62.1	341
	342	{{info}}
264.1	343	The contrast should also be checked for images. The main subject in the image should stand out sufficiently from the background. Tips can be found at [[leserlich.info>>url:https://www.leserlich.info/kapitel/bilder.php\|\|shape="rect"]].
203.1	344	{{/info}}
	345
264.1	346	{{panel title="Further information"}}
	347	* Tips on how to write good alternative texts and image descriptions: [[Broschüre "Gut Fürs Image" (PDF)>>url:https://weiterbildung.dvbs-online.de/files/ibob-daten/Inhalt/Infothek/Brosch%C3%BCren/bf_Gut%20f%C3%BCrs%20Image%20-%20Praxisleitfaden%20zur%20Erstellung%20textbasierter%20Alternativen%20f%C3%BCr%20Grafiken.pdf\|\|rel="nofollow" shape="rect" class="external-link"]]
62.1	348	* [[How to write better alt-text descriptions for accessibility>>url:https://bighack.org/how-to-write-better-alt-text-descriptions-for-accessibility/\|\|shape="rect"]]
203.1	349	* [[Five golden rules for compliant alt text>>url:https://abilitynet.org.uk/news-blogs/five-golden-rules-compliant-alt-text\|\|shape="rect"]]
	350	{{/panel}}
62.1	351
258.2	352
	353
264.1	354	=== Optimizing images for smartphones and tablets ===
203.1	355
264.1	356	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.
203.1	357
264.1	358	HTML code for max-width
203.1	359
198.1	360	{{code language="html"}}
235.4	361	<img src="..." style="max-width: 100%" />
203.1	362	{{/code}}
186.1	363
258.2	364
	365
264.1	366	=== Providing alternatives for videos and audio files ===
231.1	367
264.1	368	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.
203.1	369
264.1	370	* Provide alternative content or a transcript if you use audio files such as podcasts.
	371	* Provide subtitles and sign language translation for video content.
	372	* Integrate media from external platforms, such as YouTube or[[ Videocampus Sachsen>>url:https://videocampus.sachsen.de/\|\|shape="rect"]]
186.1	373
	374	{{info}}
264.1	375	On video platforms such as YouTube and Vimeo, subtitles are generated automatically. You can edit them if you need to.
203.1	376	{{/info}}
	377
264.1	378	{{panel title="Further information"}}
203.1	379	[[Videocampus Sachsen: Erstellung von Untertiteln für Videos (TU Chemnitz)>>url:https://blog.hrz.tu-chemnitz.de/urzcommunity/2021/06/16/erstellung-von-untertiteln-fuer-videos/\|\|shape="rect"]]
	380	{{/panel}}
	381
235.3	382
203.1	383
264.1	384	== Colours & contrasts ==
203.1	385
264.1	386	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>>url:https://www.w3.org/TR/WCAG21/#contrast-minimum\|\|shape="rect"]]).
	387
203.1	388	{{error}}
264.1	389	Avoid challenging colour combinations such as red on green or black, as these can be difficult for some people to see. Bright colours and flashing elements should also be avoided.
203.1	390	{{/error}}
	391
264.1	392	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’.
203.1	393
264.1	394	{{panel title="Further information"}}
	395	* [[Contrast calculator from leserlich.info>>url:https://www.leserlich.info/werkzeuge/kontrastrechner/index.php\|\|shape="rect"]]
	396	* [[Choose your colours with color.review (EN)>>url:https://color.review/\|\|shape="rect"]]
	397	* [[Check your contrasts with the WCAG contrast checker (EN)>>url:https://contrastchecker.com/\|\|shape="rect"]]
203.1	398	{{/panel}}
62.1	399
235.3	400
264.1	401	== Useful tools ==
203.1	402
264.1	403	* Check websites with [[WAVE Toolbar>>url:https://wave.webaim.org/\|\|shape="rect"]].
	404	** [[WAVE für Google Chrome>>url:https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh\|\|shape="rect"]] (browser extension)
	405	** [[WAVE für Firefox>>url:https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/\|\|shape="rect"]] (browser extension)
	406	* Free open source screen reader for Windows: [[NVDA download>>url:https://www.nvaccess.org/download/\|\|shape="rect"]]
	407	* [[Checkliste: barrierefreie PDF-Dokumente>>url:https://www.einfach-fuer-alle.de/artikel/checkliste-barrierefreie-pdf/\|\|shape="rect"]] from Einfach für alle

Wiki source code of Erstellung barrierefreier Inhalte

Search

OPALGlobal

OPALMenü

Recently Visited