Wiki source code of Erstellung barrierefreier Inhalte
Last modified by Anna Paul-Hasenfuss on 19.06.2025
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
235.5 | 1 | {{section}} |
| 2 | {{column width="60%"}} | ||
| |
257.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 | |
| |
257.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**"}} |
| |
257.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 | |
| |
257.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 | |||
| |
257.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 | |
| |
257.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 | |||
| |
257.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%"}} |
| |
257.1 | 25 | {{panel title="Content"}} |
| |
236.6 | 26 | {{toc start="2" depth="3"/}} |
| |
236.5 | 27 | {{/panel}} |
| 28 | |||
| |
257.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 | |
| |
257.1 | 36 | == How do I structure content? == |
| |
203.1 | 37 | |
| |
257.1 | 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. |
| |
203.1 | 39 | |
| 40 | {{info}} | ||
| |
257.1 | 41 | 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 | 42 | {{/info}} |
| 43 | |||
| |
257.1 | 44 | === Headings === |
| |
62.1 | 45 | |
| |
257.1 | 46 | 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. |
| |
203.1 | 47 | |
| |
209.1 | 48 | |
| |
257.1 | 49 | ==== Formats in the Tiny MCE text editor ==== |
| |
62.1 | 50 | |
| |
241.2 | 51 | [[image:attach:Texteditor-Formate-Überschriften_de.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]] |
| |
62.1 | 52 | |
| |
209.1 | 53 | |
| |
257.1 | 54 | ==== HTML code for headings ==== |
| |
62.1 | 55 | |
| 56 | {{code language="xml"}} | ||
| |
257.1 | 57 | <h1>heading 1. hierarchy</h1> |
| 58 | <h2>heading 2. hierarchy</h2> | ||
| 59 | <h3>heading 3. hierarchy</h3> | ||
| 60 | <h4>heading 4. hierarchy</h4> | ||
| 61 | <h5>heading 5. hierarchy</h5> | ||
| 62 | <h6>heading 6. hierarchy</h6> | ||
| |
62.1 | 63 | {{/code}} |
| 64 | |||
| |
257.1 | 65 | === Paragraphs and highlighting === |
| |
62.1 | 66 | |
| |
257.1 | 67 | Paragraphs, quotations or highlighted text in boxes help to break up a text and allow readers to jump to the relevant information if necessary. |
| |
203.1 | 68 | |
| |
62.1 | 69 | |
| |
257.1 | 70 | ==== Formats in the Tiny MCE text editor ==== |
| 71 | |||
| |
241.2 | 72 | [[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 | 73 | |
| |
257.1 | 74 | ==== ==== |
| |
62.1 | 75 | |
| |
257.1 | 76 | ==== HTML code for paragraphs ==== |
| 77 | |||
| |
62.1 | 78 | {{code language="xml"}} |
| |
257.1 | 79 | <p>paragraph</p> |
| 80 | <blockquote>quote</blockquote> | ||
| |
62.1 | 81 | |
| 82 | {{/code}} | ||
| 83 | |||
| |
219.1 | 84 | {{warning}} |
| |
257.1 | 85 | 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 | 86 | {{/warning}} |
| |
62.1 | 87 | |
| |
257.1 | 88 | === Lists === |
| |
62.1 | 89 | |
| |
257.1 | 90 | Lists can be used to present information clearly, briefly and concisely. Choose between unordered and ordered or numbered lists. |
| |
203.1 | 91 | |
| |
62.1 | 92 | {{column}} |
| |
257.1 | 93 | ==== Lists in the Tiny MCE text editor ==== |
| |
62.1 | 94 | |
| |
248.1 | 95 | [[image:attach:Texteditor-Listen.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]] |
| |
62.1 | 96 | {{/column}} |
| 97 | |||
| 98 | {{column}} | ||
| |
257.1 | 99 | ==== HTML code for lists ==== |
| |
62.1 | 100 | |
| |
257.1 | 101 | {{code language="xml" title="unordered list"}} |
| |
62.1 | 102 | <ul> |
| |
257.1 | 103 | <li>list entry</li> |
| 104 | <li>list entry</li> | ||
| 105 | <li>list entry</li> | ||
| |
62.1 | 106 | </ul> |
| 107 | |||
| 108 | {{/code}} | ||
| 109 | |||
| |
257.1 | 110 | {{code language="xml" title="ordered list"}} |
| |
62.1 | 111 | <ol> |
| |
257.1 | 112 | <li>list entry</li> |
| 113 | <li>list entry</li> | ||
| 114 | <li>list entry</li> | ||
| |
62.1 | 115 | </ol> |
| 116 | |||
| 117 | {{/code}} | ||
| 118 | {{/column}} | ||
| |
214.1 | 119 | |
| |
203.1 | 120 | |
| |
257.1 | 121 | === Tables === |
| |
203.1 | 122 | |
| |
257.1 | 123 | ==== Using tables ==== |
| |
214.1 | 124 | |
| |
257.1 | 125 | 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 | 126 | |
| |
257.1 | 127 | 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 | 128 | |
| 129 | {{info}} | ||
| |
257.1 | 130 | 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 | 131 | {{/info}} |
| 132 | |||
| |
257.1 | 133 | ==== Table headings (Caption) ==== |
| |
214.1 | 134 | |
| |
257.1 | 135 | 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 | 136 | |
| |
257.1 | 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. |
| |
214.1 | 138 | |
| |
257.1 | 139 | ===== ===== |
| |
214.1 | 140 | |
| |
257.1 | 141 | ===== **How to activate table captions in the Tiny MCE text editor** ===== |
| 142 | |||
| |
253.2 | 143 | [[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 | 144 | |
| |
257.1 | 145 | ===== ===== |
| |
214.1 | 146 | |
| |
257.1 | 147 | ===== **HTML code for captions** ===== |
| 148 | |||
| |
214.1 | 149 | {{code language="html" layout="LINENUMBERS"}} |
| 150 | <table> | ||
| |
257.1 | 151 | <caption>presentations on group work</caption> |
| |
214.1 | 152 | ... |
| 153 | </table> | ||
| 154 | {{/code}} | ||
| |
215.1 | 155 | |
| 156 | |||
| |
257.1 | 157 | ==== Column and row headings ==== |
| |
215.1 | 158 | |
| |
257.1 | 159 | 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 | 160 | |
| |
257.1 | 161 | 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 | 162 | |
| |
257.1 | 163 | 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 | 164 | |
| |
257.1 | 165 | * To do this, select your preferred cells and open the **cell properties** via the menu (Table > Cell > Cell Properties). |
| 166 | * Now select ‘Header cell’ in the dialogue box under ‘Cell type’. | ||
| 167 | * Select ‘Column’ from the ‘Scope’ option. | ||
| 168 | * Repeat this action if you use row headings in addition to column headings. In this case, select ‘Line’ under the ‘Scope’ option. | ||
| |
215.1 | 169 | |
| |
218.1 | 170 | {{warning}} |
| |
257.1 | 171 | Please do not leave your header cells empty. |
| |
218.1 | 172 | {{/warning}} |
| 173 | |||
| |
257.1 | 174 | ===== **How to define header cells in the Tiny MCE text editor** ===== |
| |
215.1 | 175 | |
| |
252.1 | 176 | [[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"]] |
| |
215.1 | 177 | |
| |
250.2 | 178 | |
| |
257.1 | 179 | ===== **How to mark header cells in HTML** ===== |
| |
215.1 | 180 | |
| 181 | {{code language="html" layout="LINENUMBERS"}} | ||
| 182 | <table> | ||
| |
257.1 | 183 | <caption>presentations on group work</caption> |
| |
215.1 | 184 | <thead> |
| 185 | <tr> | ||
| |
257.1 | 186 | <th scope="col">date</th> |
| 187 | <th scope="col">time</th> | ||
| 188 | <th scope="col">topic</th> | ||
| 189 | <th scope="col">place</th> | ||
| |
215.1 | 190 | </tr> |
| 191 | </thead> | ||
| 192 | <tbody> | ||
| 193 | <tr> | ||
| 194 | <td>04.03.</td> | ||
| |
257.1 | 195 | <td>10 - 11 a.m.</td> |
| 196 | <td>sustainability<td> | ||
| 197 | <td>room3b</td> | ||
| |
215.1 | 198 | </tr> |
| 199 | |||
| 200 | ... | ||
| 201 | |||
| 202 | </tbody> | ||
| 203 | </table> | ||
| 204 | {{/code}} | ||
| |
218.1 | 205 | |
| |
257.1 | 206 | {{panel title="Further information"}} |
| 207 | * [[Steps towards an inclusive communication design (legibility.info)>>url:https://www.leserlich.info/||shape="rect"]] | ||
| 208 | * [[HTML als Auszeichnungssprache / Semantik (SELFHTML-Wiki)>>https://wiki.selfhtml.org/wiki/HTML/Tutorials/Entstehung_und_Entwicklung#HTML_als_Auszeichnungssprache||shape="rect"]] | ||
| |
203.1 | 209 | {{/panel}} |
| 210 | |||
| |
257.1 | 211 | == How can texts be made easy to read? == |
| |
203.1 | 212 | |
| |
257.1 | 213 | Font, font size, character and word spacing, line length and many other factors influence the readability of texts. |
| |
203.1 | 214 | |
| |
257.1 | 215 | * Make sure to use **common fonts** (like Arial) and avoid fancy or hard-to-read ones. |
| 216 | * 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. | ||
| 217 | * The **line spacing** should be at least 120% of the font size, preferably 150%. | ||
| 218 | * The **line length** should be between 45 and 80 characters per line, including punctuation and spaces. | ||
| |
186.1 | 219 | |
| |
257.1 | 220 | 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 | 221 | |
| |
255.2 | 222 | {{info}} |
| |
257.1 | 223 | 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 | 224 | {{/info}} |
| |
186.1 | 225 | |
| |
257.1 | 226 | {{panel title="Further information"}} |
| 227 | * [[Steps towards an inclusive communication design (legibility.info)>>url:https://www.leserlich.info/||shape="rect"]] | ||
| 228 | * [[Font size calculator (legibility.info)>>url:https://www.leserlich.info/werkzeuge/schriftgroessenrechner/index.php||shape="rect"]] | ||
| |
203.1 | 229 | {{/panel}} |
| 230 | |||
| |
235.3 | 231 | |
| |
257.1 | 232 | == How should links be set? == |
| |
203.1 | 233 | |
| |
257.1 | 234 | 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. |
| |
203.1 | 235 | |
| |
62.1 | 236 | {{info}} |
| |
257.1 | 237 | A link has to stand on its own and still describe the destination or purpose well enough. |
| |
203.1 | 238 | {{/info}} |
| |
62.1 | 239 | |
| |
235.3 | 240 | |
| |
257.1 | 241 | == What should be considered when using media? == |
| |
203.1 | 242 | |
| |
257.1 | 243 | 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 | 244 | |
| |
257.1 | 245 | Here are some tips you might find useful regarding accessibility and mobile compatibility. |
| |
203.1 | 246 | |
| |
257.1 | 247 | === File size === |
| |
186.1 | 248 | |
| |
257.1 | 249 | * For photos, JPEG format should be preferred and medium to high quality should be selected depending on the image content. |
| 250 | * Images should not exceed a file size of 100-200kB. | ||
| 251 | * Save the images directly in the required image size (width x height) with a resolution of 72 dpi. | ||
| 252 | * For very large files, such as videos, we recommend embedding them via an external tool (e.g. Videocampus Sachsen, YouTube, Vimeo, etc.). | ||
| |
186.1 | 253 | |
| 254 | {{info}} | ||
| |
257.1 | 255 | Common image editing programmes and online tools can help to compress images without any visible loss of quality. |
| |
186.1 | 256 | {{/info}} |
| 257 | |||
| |
257.1 | 258 | === Captions === |
| |
186.1 | 259 | |
| |
257.1 | 260 | 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 | 261 | |
| |
257.1 | 262 | Use the following HTML code to make the image and image title accessible: |
| |
203.1 | 263 | |
| |
257.1 | 264 | **Caption with the HTML elements figure and figcaption** |
| |
203.1 | 265 | |
| |
221.1 | 266 | {{code language="html" layout="LINENUMBERS"}} |
| |
186.1 | 267 | <figure> |
| |
257.1 | 268 | <img src="..." alt="alternative text"> |
| 269 | <figcaption>title / caption</figcaption> | ||
| |
186.1 | 270 | </figure> |
| |
203.1 | 271 | {{/code}} |
| |
62.1 | 272 | |
| |
257.1 | 273 | === Alternative text (alt text) === |
| |
203.1 | 274 | |
| |
257.1 | 275 | 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 | 276 | |
| |
257.1 | 277 | **The following should be kept in mind when providing alt text for images:** |
| |
203.1 | 278 | |
| |
257.1 | 279 | * Keep it short: The alternative text should only contain the most important information. A useful guideline is 125 characters. |
| 280 | * Describing information: Only describe information that is relevant to the context (e.g. the text) and that the image is intended to convey. | ||
| 281 | * 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 | 282 | |
| 283 | {{info}} | ||
| |
257.1 | 284 | 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 | 285 | {{/info}} |
| 286 | |||
| |
208.1 | 287 | |
| |
257.1 | 288 | ==== How to store alternative text in the Tiny MCE text editor ==== |
| |
62.1 | 289 | |
| |
234.1 | 290 | [[image:Texteditor-Bilder-Alternativtext.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" width="500"]] |
| |
62.1 | 291 | |
| |
208.1 | 292 | |
| |
257.1 | 293 | ==== HTML code for alt text ==== |
| |
208.1 | 294 | |
| |
196.1 | 295 | {{code}} |
| |
197.1 | 296 | <img ... alt="Der Schaum auf einem Kaffee bildet ein schreiendes Gesicht." /> |
| |
62.1 | 297 | {{/code}} |
| 298 | |||
| |
257.1 | 299 | ==== How to mark an image as decorative ==== |
| |
196.1 | 300 | |
| |
234.1 | 301 | [[image:Texteditor-Bilder-dekorativ.png||data-xwiki-image-style="img-screen" data-xwiki-image-style-border="true" height="224" width="300"]] |
| 302 | |||
| |
235.5 | 303 | |
| |
257.1 | 304 | **How to empty the alt attribute for images without relevant information in HTML** |
| |
235.5 | 305 | |
| |
198.1 | 306 | {{code}} |
| |
235.4 | 307 | <img src="..." alt=" " /> |
| |
198.1 | 308 | {{/code}} |
| |
62.1 | 309 | |
| 310 | {{info}} | ||
| |
257.1 | 311 | 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 | 312 | {{/info}} |
| 313 | |||
| |
257.1 | 314 | {{panel title="Further information"}} |
| 315 | * 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 | 316 | * [[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 | 317 | * [[Five golden rules for compliant alt text>>url:https://abilitynet.org.uk/news-blogs/five-golden-rules-compliant-alt-text||shape="rect"]] |
| 318 | {{/panel}} | ||
| |
62.1 | 319 | |
| |
257.1 | 320 | === Optimizing images for smartphones and tablets === |
| |
203.1 | 321 | |
| |
257.1 | 322 | 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 | 323 | |
| |
257.1 | 324 | HTML code for max-width |
| |
203.1 | 325 | |
| |
198.1 | 326 | {{code language="html"}} |
| |
235.4 | 327 | <img src="..." style="max-width: 100%" /> |
| |
203.1 | 328 | {{/code}} |
| |
186.1 | 329 | |
| |
257.1 | 330 | === Providing alternatives for videos and audio files === |
| |
231.1 | 331 | |
| |
257.1 | 332 | 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 | 333 | |
| |
257.1 | 334 | * Provide alternative content or a transcript if you use audio files such as podcasts. |
| 335 | * Provide subtitles and sign language translation for video content. | ||
| 336 | * Integrate media from external platforms, such as YouTube or[[ Videocampus Sachsen>>url:https://videocampus.sachsen.de/||shape="rect"]] | ||
| |
186.1 | 337 | |
| 338 | {{info}} | ||
| |
257.1 | 339 | On video platforms such as YouTube and Vimeo, subtitles are generated automatically. You can edit them if you need to. |
| |
203.1 | 340 | {{/info}} |
| 341 | |||
| |
257.1 | 342 | {{panel title="Further information"}} |
| |
203.1 | 343 | [[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"]] |
| 344 | {{/panel}} | ||
| 345 | |||
| |
235.3 | 346 | |
| |
257.1 | 347 | == Colours & contrasts == |
| |
203.1 | 348 | |
| |
257.1 | 349 | 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"]]). |
| |
203.1 | 350 | |
| 351 | {{error}} | ||
| |
257.1 | 352 | 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 | 353 | {{/error}} |
| 354 | |||
| |
257.1 | 355 | **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 | 356 | |
| |
257.1 | 357 | {{panel title="Further information"}} |
| 358 | * [[Contrast calculator from leserlich.info>>url:https://www.leserlich.info/werkzeuge/kontrastrechner/index.php||shape="rect"]] | ||
| 359 | * [[Choose your colours with color.review (EN)>>url:https://color.review/||shape="rect"]] | ||
| 360 | * [[Check your contrasts with the WCAG contrast checker (EN)>>url:https://contrastchecker.com/||shape="rect"]] | ||
| |
203.1 | 361 | {{/panel}} |
| |
62.1 | 362 | |
| |
235.3 | 363 | |
| |
257.1 | 364 | == Useful tools == |
| |
203.1 | 365 | |
| |
257.1 | 366 | * Check websites with [[WAVE Toolbar>>url:https://wave.webaim.org/||shape="rect"]]. |
| 367 | ** [[WAVE für Google Chrome>>url:https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh||shape="rect"]] (browser extension) | ||
| 368 | ** [[WAVE für Firefox>>url:https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/||shape="rect"]] (browser extension) | ||
| 369 | * Free open source screen reader for Windows: [[NVDA download>>url:https://www.nvaccess.org/download/||shape="rect"]] | ||
| 370 | * [[Checkliste: barrierefreie PDF-Dokumente>>url:https://www.einfach-fuer-alle.de/artikel/checkliste-barrierefreie-pdf/||shape="rect"]] from Einfach für alle |