Skip to Content
Last modified by Carina Enke on 12.11.2024
From version 191.9
edited by Carina Enke
on 15.01.2024
Change comment: Update document after refactoring.
To version 191.10
edited by Carina Enke
on 19.01.2024
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,8 +1,4 @@
1 1  {{layout}}
2 -{{layout-section ac:type="single"}}
3 -{{layout-cell}}{{/layout-cell}}
4 -{{/layout-section}}
5 -
6 6  {{layout-section ac:type="two_right_sidebar"}}
7 7  {{layout-cell}}
8 8  Webseiten müssen heute zahlreichen Anforderungen gerecht werden. Jede Person möchte mit jedem Gerät, an jedem Ort Informationen abrufen - ohne Einschränkungen, ohne Barrieren. Das Verwenden von mobilen Geräten mit kleineren Bildschirmen und ggf. langsamer Internetverbindung ist inzwischen selbstverständlich. Aber auch die Bedienbarkeit mit alternativen Technologien, z.B. Screenreadern, die mit Sprachausgabe und Tastaturbedienung funktionieren, muss gewährleistet sein.
... ... @@ -9,9 +9,8 @@
9 9  
10 10  Um diesen vielseitigen Anforderungen gerecht zu werden und Informationen somit zugänglich für alle Menschen anzubieten, gibt es einiges zu beachten. Die grundlegenden Richtlinien zu den Themen Usability und Barrierefreiheit geben wichtige Orientierung.
11 11  
12 -\\
13 -
14 -{{info title="Usability"}}
8 +{{info title="
9 +Usability"}}
15 15  Usability, Benutzerfreundlichkeit oder auch Gebrauchstauglichkeit wird in der Norm DIN EN ISO 9241-11 definiert. Ein System muss von bestimmten Benutzer*innen in einem bestimmten Nutzungskontext verwendet werden können, um Arbeitsaufgaben effektiv, effizient und zufriedenstellend zu erledigen und somit bestimmte Ziele zu erreichen.
16 16  
17 17  Eine Einführung sowie viele weitere Informationen bietet die [[Webseite der Nielsen Norman Group (EN)>>url:https://www.nngroup.com/articles/usability-101-introduction-to-usability/||shape="rect"]].
... ... @@ -23,15 +23,14 @@
23 23  Wichtig für das Verständnis des Bedarfs ist auch eine Übersicht über vorhandene Einschränkungen von Fähigkeiten und Behinderungen. [[Die W3C Web Accessibility Initiative (WAI) hat eine gute englischsprachige Übersicht über die vielfältigen Fähigkeiten und Barrieren.>>url:https://www.w3.org/WAI/people-use-web/abilities-barriers/||shape="rect"]] Bei Aktion Mensch gibt es einen kurzen [[Überblick über Behinderungsformen in deutscher Sprache>>url:https://www.aktion-mensch.de/inklusion/arbeit/fachkraefte-mit-behinderung-gewinnen/behinderungsformen||shape="rect"]].
24 24  {{/info}}
25 25  
26 -\\
27 27  
28 28  In OPAL und ONYX können Sie als Autor*in verschiedene Inhalte erstellen und gestalten. Unter anderem besteht die Möglichkeit, über den Texteditor Beschreibungen und Seiteninhalte im Kurs mit Informationen zu füllen. Wir haben einige Tipps und weiterführende Inhalte für Sie vorbereitet.
29 29  
30 -\\
24 +
31 31  {{/layout-cell}}
32 32  
33 33  {{layout-cell}}
34 -{{scroll-ignore}}
28 +
35 35  {{panel title="Inhalt"}}
36 36  
37 37  
... ... @@ -42,7 +42,7 @@
42 42  * [[doc:Texteditor]]
43 43  * [[Kurslayout in OPAL>>doc:Kurslayout]]
44 44  {{/panel}}
45 -{{/scroll-ignore}}
39 +
46 46  {{/layout-cell}}
47 47  {{/layout-section}}
48 48  
... ... @@ -64,8 +64,6 @@
64 64  
65 65  Überschriften sollten nicht über die Schriftgröße sowie z.B. über die Formatierung Fett/Bold gestaltet werden, sondern über die HTML-Elemente <h1>, <h2>, <h3> bis <h6>. Die Hierarchie der Elemente (z.B. <h2> folgt auf <h1>) muss dabei eingehalten werden.
66 66  
67 -\\
68 -
69 69  {{section}}
70 70  {{column}}
71 71  ==== Formate im Texteditor Tiny MCE nutzen ====
... ... @@ -91,8 +91,6 @@
91 91  
92 92  Absätze, Gestaltung von Zitaten oder Hervorhebungen durch umrahmte Textabschnitte helfen, einen Text aufzulockern und bei Bedarf zu den relevanten Informationen zu springen.
93 93  
94 -\\
95 -
96 96  {{section}}
97 97  {{column}}
98 98  ==== Formate im Texteditor Tiny MCE nutzen ====
... ... @@ -110,7 +110,7 @@
110 110  {{/code}}
111 111  
112 112  {{error}}
113 -(% style="color: rgb(51,51,51);" %)Die Elemente <div> und <span> haben keine Bedeutung (Semantik) und sollten nur verwendet werden, um z.B. die Gestaltung per CSS oder dynamische Anpassungen per JavaScript zu realisieren.
103 +(% style="color:#333333" %)Die Elemente <div> und <span> haben keine Bedeutung (Semantik) und sollten nur verwendet werden, um z.B. die Gestaltung per CSS oder dynamische Anpassungen per JavaScript zu realisieren.
114 114  {{/error}}
115 115  {{/column}}
116 116  {{/section}}
... ... @@ -117,7 +117,7 @@
117 117  
118 118  === Listen ===
119 119  
120 -(% style="color: rgb(51,51,51);" %)Listen können verwendet werden, um Informationen übersichtlich, kurz und knapp darzustellen. Wählen Sie zwischen ungeordneten und geordneten bzw. nummerierten Aufzählungen.
110 +(% style="color:#333333" %)Listen können verwendet werden, um Informationen übersichtlich, kurz und knapp darzustellen. Wählen Sie zwischen ungeordneten und geordneten bzw. nummerierten Aufzählungen.
121 121  
122 122  {{section}}
123 123  {{column}}
... ... @@ -131,9 +131,9 @@
131 131  
132 132  {{code language="xml" title="Ungeordnete Liste (unordered list <ul>)"}}
133 133  <ul>
134 - <li>Listeneintrag</li>
135 - <li>Listeneintrag</li>
136 - <li>Listeneintrag</li>
124 + <li>Listeneintrag</li>
125 + <li>Listeneintrag</li>
126 + <li>Listeneintrag</li>
137 137  </ul>
138 138  
139 139  {{/code}}
... ... @@ -140,9 +140,9 @@
140 140  
141 141  {{code language="xml" title="Geordnete Liste (ordered list <ol>)"}}
142 142  <ol>
143 - <li>Listeneintrag</li>
144 - <li>Listeneintrag</li>
145 - <li>Listeneintrag</li>
133 + <li>Listeneintrag</li>
134 + <li>Listeneintrag</li>
135 + <li>Listeneintrag</li>
146 146  </ol>
147 147  
148 148  {{/code}}
... ... @@ -149,9 +149,8 @@
149 149  {{/column}}
150 150  {{/section}}
151 151  
152 -\\
153 153  
154 -\\
143 +
155 155  {{/layout-cell}}
156 156  
157 157  {{layout-cell}}
... ... @@ -196,7 +196,7 @@
196 196  {{layout-cell}}
197 197  == Wie sollten Links gesetzt werden? ==
198 198  
199 -(% style="color: rgb(51,51,51);" %)Texte für Verlinkungen brauchen eine aussagekräftige Bezeichnung und sollten den Zweck bzw. das Ziel des Links beschreiben. Mehrdeutige Link-Texte wie "mehr", "hier" oder "weiter lesen" sollten vermieden werden. Relevante Informationen über das Format oder die Größe einer Datei (z.B. bei einem Download-Link) sollten ebenfalls im verlinkten Text berücksichtigt werden.
188 +(% style="color:#333333" %)Texte für Verlinkungen brauchen eine aussagekräftige Bezeichnung und sollten den Zweck bzw. das Ziel des Links beschreiben. Mehrdeutige Link-Texte wie "mehr", "hier" oder "weiter lesen" sollten vermieden werden. Relevante Informationen über das Format oder die Größe einer Datei (z.B. bei einem Download-Link) sollten ebenfalls im verlinkten Text berücksichtigt werden.
200 200  
201 201  {{info}}
202 202  Tipp: Ein Link muss für sich alleine stehen können und das Ziel oder den Zweck trotzdem ausreichend beschreiben.
... ... @@ -231,8 +231,8 @@
231 231  
232 232  {{code language="xml" title="Bildunterschrift mit den HTML-Elementen figure und figcaption"}}
233 233  <figure>
234 - <img src="" alt="Alternativtext">
235 - <figcaption>Bildtitel / Bildunterschrift</figcaption>
223 + <img data-cke-saved-src="" src="" alt="Alternativtext">
224 + <figcaption>Bildtitel / Bildunterschrift</figcaption>
236 236  </figure>
237 237  {{/code}}
238 238  {{/layout-cell}}
... ... @@ -250,13 +250,12 @@
250 250  * Informationen beschreiben: Nur die für den Kontext (z.B. den Text) relevanten Informationen, die das Bild übermitteln soll, beschreiben.
251 251  * Bilder, die nur der Gestaltung dienen, sollten keinen Alternativtext (leeres alt-Attribut) haben und idealerweise als Hintergrundbilder via CSS eingebunden werden.
252 252  
253 -\\
254 -
255 255  {{info}}
256 256  Tipp: Stellen Sie sich vor, Sie würden das Bild einer Person am Telefon beschreiben. Welche Details erwähnen Sie, welche lassen Sie aus, da sie im Kontext nicht relevant sind?
257 257  {{/info}}
258 258  
259 -{{section}}{{column}}
246 +{{section}}
247 +{{column}}
260 260  ==== Alternativtext im Texteditor Tiny MCE hinterlegen ====
261 261  
262 262  [[image:attach:Texteditor-Bildbeschreibung.png]]
... ... @@ -266,13 +266,14 @@
266 266  ==== HTML-Code nutzen ====
267 267  
268 268  {{code language="xml" title="Alternativtext mit dem Attribut alt"}}
269 -<img src="coffee-smile.jpg" alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
257 +<img data-cke-saved-src="coffee-smile.jpg" src="coffee-smile.jpg" alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." />
270 270  {{/code}}
271 271  
272 272  {{code language="xml" title="Leeres alt-Attribut für Bilder ohne relevante Informationen"}}
273 -<img src="banner.jpg" alt=" " />
261 +<img data-cke-saved-src="banner.jpg" src="banner.jpg" alt=" " />
274 274  {{/code}}
275 -{{/column}}{{/section}}\\
263 +{{/column}}
264 +{{/section}}
276 276  
277 277  {{info}}
278 278  Für Bilder sollte auch der Kontrast geprüft werden. Das Hauptobjekt im Bild sollte sich ausreichend vom Hintergrund abheben. Tipps erhalten Sie bei [[leserlich.info>>url:https://www.leserlich.info/kapitel/bilder.php||shape="rect"]].
... ... @@ -295,7 +295,7 @@
295 295  Damit Bilder auf Geräten mit kleineren Bildschirmen vollständig dargestellt werden, ohne das Nutzer*innen horizontal scrollen müssen, sollte die maximale Breite im HTML auf 100% begrenzt werden. Dadurch wird das Bild nur so lange in der gewählten Größe dargestellt, bis es breiter ist, als der verfügbare Platz auf dem Bildschirm. Danach wird es dynamisch an die verfügbare Breite angepasst.
296 296  
297 297  {{code language="xml" title="Mit max-width eine maximale Breite für Bilder setzen"}}
298 -<img src="coffee-smile.jpg" alt="..." style="max-width: 100%" />
287 +<img data-cke-saved-src="coffee-smile.jpg" src="coffee-smile.jpg" alt="..." style="max-width: 100%" />
299 299  {{/code}}
300 300  {{/layout-cell}}
301 301  {{/layout-section}}
... ... @@ -302,7 +302,7 @@
302 302  
303 303  {{layout-section ac:type="two_right_sidebar"}}
304 304  {{layout-cell}}
305 -(% class="auto-cursor-target" %)
294 +(% id="HAlternativenfFCrVideosundAudio-Dateienbereitstellen" class="auto-cursor-target" %)
306 306  === Alternativen für Videos und Audio-Dateien bereitstellen ===
307 307  
308 308  Beim Einsatz von Medien sollten die Informationen stets auch in einer alternativen Form angeboten werden. Neben der Bildbeschreibung (Alternativtext) für Bilder sollte an reine Audio-Inhalte (z.B. Podcasts) und Video-Inhalte mit Bild und Ton gedacht werden.
... ... @@ -311,8 +311,6 @@
311 311  * Stellen Sie Untertitel und eine Übersetzung in Gebärdensprache für Video-Inhalte bereit.
312 312  * Binden Sie Medien von externen Plattformen, wie z.B. YouTube oder [[Videocampus Sachsen>>url:https://videocampus.sachsen.de/||shape="rect"]] ein.
313 313  
314 -\\
315 -
316 316  {{info}}
317 317  Auf Videoplattformen wie YouTube und Vimeo werden Untertitel automatisch erzeugt. Diese können bei Bedarf korrigiert werden.
318 318  {{/info}}
... ... @@ -336,8 +336,7 @@
336 336  Achten sie bei der Auswahl von Farben auf **ausreichend Kontrast zwischen Hintergrund- und Textfarbe**. Grundsätzlich hat Schwarz auf Weiß das beste Kontrastverhältnis, generell sollte das **Verhältnis mindestens 4,5:1** betragen ([[WCAG 2.1 - Contrast>>url:https://www.w3.org/TR/WCAG21/#contrast-minimum||shape="rect"]]).
337 337  
338 338  {{error}}
339 -(% style="color: rgb(51,51,51);" %)Vermeiden Sie kritische Farbkombinationen wie z. B. Rot auf Grün oder Schwarz, da diese von manchen Menschen schlecht wahrgenommen werden können. Auch grelle Farben und blinkende Elemente sollen vermieden werden.
340 -
326 +(% style="color:#333333" %)Vermeiden Sie kritische Farbkombinationen wie z. B. Rot auf Grün oder Schwarz, da diese von manchen Menschen schlecht wahrgenommen werden können. Auch grelle Farben und blinkende Elemente sollen vermieden werden.
341 341  {{/error}}
342 342  
343 343  (% class="auto-cursor-target" %)
... ... @@ -366,8 +366,3 @@
366 366  {{/layout-section}}
367 367  {{/layout}}
368 368  
369 -
370 -
371 -
372 -
373 -{{includeplus spaceKey="LMS" scrollPageId="8AC9158F0169E71FC07AAFD92398FD30"/}}