skip to content

Regional Computing Centre (RRZK)

Accessibility on the Internet

Accessible Internet serves to make web services available to as many people as possible - regardless of their limitations or technical capabilities. In addition, various disabilities lead to unequal conditions when using the Internet.

 

Blind people, for example, have the option of using a screen reader program. These programs read the web pagesand output the content via voice output or a Braille display. Braille displays display text in Braille.

Public institutions are legally obliged to make their websites accessible. The "Disability Equality Act - BGG" has formed the legal basis for this since 2002.

Accessibility tips for websites

Layout notes

  • Make sure your websitehas a valid code.
  • Your page should be readable by all browsers even ifJavaScript or CSS is switched off.
  • Create a sitemap, a table of contents for the page and abreadcrumb navigation.
  • Create a coherent order of hyperlinks, form elements and others to allow easy tabbed navigation.
  • Do not use flashing and moving elements.
  • Make the buttons large enough.
  • Make it possible to navigate using both the mouse and the keyboard. Keyboard operation and navigation is particularly important for users with motor impairments.
  • Choose high-contrast colors for the font and background. For example: Light text on a light background or dark text on a dark background are difficult to read for people with visual impairments.
  • Structure your web pagesclearly. This makes it easier for people with disabilities to understand the content. Visually impaired people often use an enlarged view. A good page structure also enables good legibility in this case.
  • Do not use tables for the layout. Screen readers can misinterpret tables as data tables, which impairs comprehension and readability.
  • Do not use framesets.

Notes for headings and content

  • Use meaningful, short and descriptive headings.

  • Headings should be clearly hierarchically structured with

    to

    (from the largest title heading H1 to the smallest H5) .

  • Use

    only once per page.

  • This is also important for search engines.
  • Explanation: Screen readers often navigate or "jump" through pages using headings. If the hierarchy is inconsistent, the reading order gets mixed up.
  • Use simple and appropriate language.
  • Use short text passages.
  • If possible, set meaningful paragraphs. Clear delimitations and division of the text make it much easier to read on the screen.
  • Avoid mixed content, i.e. a mixture of German and English content, as this can lead to incorrect pronunciation in screen readers.
  • If you do mix languages, mark foreign language words as such(e.g. Website ).
  • A German translation should be provided for English content. Not all users are proficient in English, so this can become a barrier.
  • Mark out abbreviations in the text. Abbreviations are sometimes interpreted and read out differently by screen readers, e.g. "PLZ" as an abbreviation for "Please".(e.g. i.e.) or use the function provided by your CMS.
  • Set meaningful links (instead of "here", for example, "More information").
  • Do not link URLs (web addresses) with the address as text. Negative example: "Further information: https://irgendeinedomain.de/~dlsd1288532/umgr/tss.html".
  • "Speaking paths" have meaningful readable elements in the address, e.g. https://portal.uni-koeln.de/studium-lehre.
  • Double linking, e.g. to an image and an adjacent text with the same link destination, should be avoided.
  • Clear designations are important for the screen reader and navigation with the keyboard, as people often jump from link to link.
  • If possible, do not use tables with many columns. If tables are necessary, make sure that the row and column headings are correct. Tables are structurally recorded by screen readers in rows and columns. If this structure of a table is incorrect, rows and columns cannot be correctly assigned and read aloud.
  • If possible, replace tables with lists.
Hierarchische Darstellung der Überschriften.

Notes on media

  • Use graphical representations and images in addition to the text - these can have an explanatory effect and thus facilitate understanding.
  • Avoid using images exclusively as information-bearing content elements.
  • Use a descriptive title for graphics, videos and tables(HTML attribute"title").
  • Set a descriptive alternative text(HTML attribute"alt") for graphics, videos and tables - but only if the title is not already sufficient.
  • Notes on alternative text (ALT attribute): The "ALT" text should present the image concisely and only in as much detail as necessary. Purely decorative images can safely have an empty "ALT" text.
  • Do not use purely visual instructions ("More information in the image", "Click on the green button on the left"). Complex information that is only displayed in the image would not be available to users with visual impairments.
  • If possible, use audio descriptions for videos or offer an alternative text to the video.
  • Do not use IFRAMES.
  • If possible, do not use image maps. Imagemaps are graphic content elements that offer users additional information by means of tooltips (info window when hovering the mouse pointer) or clicking. People who rely on keyboard navigation are at a disadvantage here. Interactive image elements must be correctly labeled.

Tips for websites with TYPO3

For TYPO3, we have compiled further tips and instructions for creating accessible websites.

 

Further information on accessibility and legal matters

Further information on accessibility:

 

Legal information and guidelines on accessibility:

Contact
If you have any questions or problems, please contact the RRZK-Helpdesk