Changes for page Erstellung barrierefreier Inhalte

Summary

• Page properties (2 modified, 0 added, 0 removed)

Details

Page properties

Author

...	...	@@ -1,1 +1,1 @@
1		-XWiki.anna
	1	+XWiki.carina

Content

...	...	@@ -33,8 +33,29 @@
33	33	{{/column}}
34	34	{{/section}}
35	35
36		-== How do I structure content? ==
37	37
	37	+== Course-related accessibility statement ==
	38	+
	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, accessible via the link https:~/~/www.barrierefreiheit-dienstekonsolidierung.bund.de/Webs/PB/DE/ barrierefreie_it/uebergreifende-anforderungen-web-und-app/erklaerung-zur-barrierefreiheit/erklaerung-zur-barrierefreiheit-node.html.
	40	+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.
	41	+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:
	42	+ create a course-specific accessibility statement,
	43	+ identify potential barriers in texts, media and interactive content,
	44	+ provide support for the accessible design of teaching materials.
	45	+
	46	+
	47	+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.
	48	+
	49	+{{panel title="Further information"}}
	50	+* 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]]
	51	+* 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]]
	52	+{{/panel}}
	53	+
	54	+
	55	+== Tips for designing content ==
	56	+
	57	+=== How do I structure content? ===
	58	+
38	38	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.
39	39
40	40	{{info}}
...	...	@@ -136,10 +136,14 @@
136	136
137	137	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.
138	138
	160	+===== =====
	161	+
139	139	===== **How to activate table captions in the Tiny MCE text editor** =====
140	140
141	141	[[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"]]
142	142
	166	+===== =====
	167	+
143	143	===== **HTML code for captions** =====
144	144
145	145	{{code language="html" layout="LINENUMBERS"}}
...	...	@@ -201,11 +201,14 @@
201	201
202	202	{{panel title="Further information"}}
203	203	* [[Steps towards an inclusive communication design (legibility.info)>>url:https://www.leserlich.info/||shape="rect"]]
204		-* [[HTML als Auszeichnungssprache / Semantik (SELFHTML-Wiki)>>url:https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Entstehung_und_Entwicklung#HTML_als_Auszeichnungssprache||shape="rect"]]
	229	+* [[HTML als Auszeichnungssprache / Semantik (SELFHTML-Wiki)>>https://wiki.selfhtml.org/wiki/HTML/Tutorials/Entstehung_und_Entwicklung#HTML_als_Auszeichnungssprache||shape="rect"]]
205	205	{{/panel}}
206	206
207		-== How can texts be made easy to read? ==
	232	+(% class="wikigeneratedid" %)
208	208
	234	+
	235	+=== How can texts be made easy to read? ===
	236	+
209	209	Font, font size, character and word spacing, line length and many other factors influence the readability of texts.
210	210
211	211	* Make sure to use **common fonts** (like Arial) and avoid fancy or hard-to-read ones.
...	...	@@ -225,8 +225,9 @@
225	225	{{/panel}}
226	226
227	227
228		-== How should links be set? ==
229	229
	257	+=== How should links be set? ===
	258	+
230	230	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.
231	231
232	232	{{info}}
...	...	@@ -234,13 +234,14 @@
234	234	{{/info}}
235	235
236	236
237		-== What should be considered when using media? ==
238	238
	267	+=== What should be considered when using media? ===
	268	+
239	239	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.
240	240
241	241	Here are some tips you might find useful regarding accessibility and mobile compatibility.
242	242
243		-=== File size ===
	273	+==== File size ====
244	244
245	245	* For photos, JPEG format should be preferred and medium to high quality should be selected depending on the image content.
246	246	* Images should not exceed a file size of 100-200kB.
...	...	@@ -251,7 +251,7 @@
251	251	Common image editing programmes and online tools can help to compress images without any visible loss of quality.
252	252	{{/info}}
253	253
254		-=== Captions ===
	284	+==== Captions ====
255	255
256	256	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.
257	257
...	...	@@ -266,8 +266,11 @@
266	266	</figure>
267	267	{{/code}}
268	268
269		-=== Alternative text (alt text) ===
	299	+(% class="wikigeneratedid" %)
270	270
	301	+
	302	+==== Alternative text (alt text) ====
	303	+
271	271	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.
272	272
273	273	**The following should be kept in mind when providing alt text for images:**
...	...	@@ -281,18 +281,18 @@
281	281	{{/info}}
282	282
283	283
284		-==== How to store alternative text in the Tiny MCE text editor ====
	317	+===== How to store alternative text in the Tiny MCE text editor =====
285	285
286	286	[[image:Texteditor-Bilder-Alternativtext.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]]
287	287
288	288
289		-==== HTML code for alternative text ====
	322	+===== HTML code for alt text =====
290	290
291	291	{{code}}
292	292	<img ... alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
293	293	{{/code}}
294	294
295		-==== How to mark an image as decorative ====
	328	+===== How to mark an image as decorative =====
296	296
297	297	[[image:Texteditor-Bilder-dekorativ.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="224" width="300"]]
298	298
...	...	@@ -313,6 +313,9 @@
313	313	* [[Five golden rules for compliant alt text>>url:https://abilitynet.org.uk/news-blogs/five-golden-rules-compliant-alt-text||shape="rect"]]
314	314	{{/panel}}
315	315
	349	+(% class="wikigeneratedid" %)
	350	+
	351	+
316	316	=== Optimizing images for smartphones and tablets ===
317	317
318	318	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.
...	...	@@ -323,6 +323,9 @@
323	323	<img src="..." style="max-width: 100%" />
324	324	{{/code}}
325	325
	362	+(% class="wikigeneratedid" %)
	363	+
	364	+
326	326	=== Providing alternatives for videos and audio files ===
327	327
328	328	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.
...	...	@@ -340,6 +340,7 @@
340	340	{{/panel}}
341	341
342	342
	382	+
343	343	== Colours & contrasts ==
344	344
345	345	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"]]).