Accessibility

We would like to provide accessibility guidelines to ensure that everyone can access the content on the TU Dresden websites. Below you will find information on what needs to be considered when creating accessible content. The examples are intended to help you with the correct editorial implementation.

Headlines

Headlines are used to structure texts and improve readability. Please use the format templates provided in the editor so that users, who have the screen contents read to them by screen readers, can recognise headlines as such. When formatting, avoid writing with UPPER CASE letters or bold text to make it look like a headline. In addition, the order of the header hierarchies must be observed. A heading H2 is the first followed by headings in H3 and headings in H4.

Wrong:

Headline (bold)

Right:

Headline (format headline 4)

Accessible headlines are intended to provide an overview of the subsequent content and facilitate the comprehension of the text. Therefore, it is advisable to write meaningful and descriptive texts. They help users who can only read slowly or require the pages to be read aloud.

Poor wording:

Welcome to our pages

Good wording:

Counselling services for students

In addition, the creation of a table of contents is helpful to organise long pages with a lot of content and many headlines. This allows for an overview of the contents and fast navigation of the page. Therefore, make sure to adhere to the predefined headline guidelines.

Links

Links must be meaningful and context-related. Users should be able to see what they can expect from the link description. Ask yourself the following questions: Where does the link lead to? What does it communicate?

Poor wording:

Latest information can be found here.

Good wording:

The latest information can be found in the WebCMS news overview.

Lists and enumerations

For lists to be recognised as such by screen readers, it is important to format them accordingly. Please use the appropriate formatting in the editor (using the list buttons) and do not use hyphens in combination with line breaks. This is also important for the correct indentation of longer texts or when accessing these on narrow displays (e.g. smartphones).

Wrong:

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
- At vero eos et accusam et justo duo dolores et ea rebum

Right:

• Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
• At vero eos et accusam et justo duo dolores et ea rebum

Charts

Charts should only be used to display suitable data. Their use for layout purposes should be avoided. Data that is suitable for charts can be assigned to a column and/or line header. Therefore, charts should always have column and/or line headings that are formatted as such. Only then, are they read out in a meaningful way by screen readers. Users can also process the data and better understand it. Each entry should be assigned to a separate cell. Avoid line breaks to separate information and insert new cells instead. Please also avoid empty cells. These can interfere with comprehension and the overall look.

Wrong:

Example of chart for layout purposes without chart header:

Max Mustermann Musterstr. 15 00000 Musterhausen Tel.: xxxxxx

Erika Mustermann Musterstr. 25 00000 Musterhausen Tel.: xxxxxx

Right:

Example of a data chart with a correctly formatted chart header:

Year	Employees	Change compared to previous year
2016	3.000	200
2017	3.320	320

You should also note that charts on mobile devices can quickly become confusing. Due to the limited space available, the scrolling effort can increase. Horizontal scrolling is often necessary. Therefore, it should be determined whether display the content in a table is necessary.

Wrong:

Example of a chart with an incorrectly formatted chart header:

Project	Target	Duration	responsible Chair
Project A	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.	2 years	Chair A
Project B	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.	2 years	Chair B
Project C	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.	3 years	Chair A

Right:

Example of split data charts with correctly formatted chart header:

Projects of Chair A

Project	Target	Duration
Project A	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.	2 years
Project C	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.	3 years

Projects of Chair B

Project	Target	Duration
Project B	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.	2 years

Images

In order to make images such as pictures and graphics accessible to visually impaired persons, it is mandatory to indicate an alternative text. This is read out by screen readers and should describe what can be seen in the image. The text should be short and concise. Please always indicate at the beginning what kind of picture (photo, illustration, diagram, etc.) it is. Descriptions such as "This is an image that ..." should be avoided. Name the objects and characteristics of the situation depicted so that users can get an idea of its content. For logos and text graphics, the terms should be reproduced in the alternative text. More complex representations such as route sketches or diagrams should also have a more precise description as continuous text, in addition to a concise alternative text (Guideline value: from 80 - 100 characters).

Wrong:

Alternative text: Laboratory scene

Right:

Alternative text: Photo of a woman in the lab. She sits at a table and works at the microscope.

Accessible documents

Accessibility should also be considered when creating documents. For people with disabilities, PDF files and Office documents often pose major hurdles. For example, if content is scanned or graphics without alternative texts are used, these cannot be read out by screen readers.

In order to make content in documents accessible to a broad group of users, you should also consider the aspects already explained for headlines, links, images, listings and charts. In addition, colour plays an important role when creating documents. Since you yourself decide on the colour design, it is important to use accessible text colours and sufficient contrasts. In addition, information should not only be conveyed via the colour scheme. Furthermore, there are other means of increasing accessibility, such as the use of bookmarks. In order to facilitate the creation of accessible documents, the working group Studies for the Blind and Visually Impaired (AG SBS) at TU Dresden offers helpful guidelines on the subject. The software providers also provide detailed instructions and tools to ensure accessibility.