For members of the TU Freiberg the software "Siteimprove" is available, which can be used to implement accessibility on the web. By means of "Siteimprove" all (Drupal) websites of the TU Freiberg can be examined for possible barriers. Siteimprove also contributes to the general improvement of the quality of the web presence as well as its content.
If you do not yet have access to "Siteimprove" for the TU Freiberg websites you manage, you can apply for it at the University Computer Center using the adjacent contact information.
Alternative texts
A central element in accessible web design is the handling of images and graphics. Any visual element that conveys information must provide an alternative text description to be considered accessible.
To add text information to an image on a web page, there are two simple ways to do so on the web, the "alt tag" (named "description field" in Drupal) and the "title tag" (named "title" in Drupal). When inserting or modifying an image in Drupal, there is an option to fill these tags. Both fields should always be filled in.
.The "Description" field is of utmost importance for the accessibility of an image. The text entered here is used in the case when the corresponding image cannot be displayed or perceived. This may be due to technical reasons (image cannot be loaded at the moment) or due to user limitations (use of assistive technologies).
In such a case, the description text must be chosen in such a way that it also contains all the relevant information that the image would actually represent. To find a good description text it is helpful to ask yourself the following questions:
- What do I actually want to achieve through the use of the image with the reader?
- What are relevant elements of the image and what only "accessories"?
- What information would I lose if I omitted the image?
It may happen that graphics have no actual information content and are used only for the visual design of the website. In this case, the graphic can receive the description text "decorative graphics", or no description at all.
If the image contains information in text form, these are to be incorporated in any case in the description text again with.
Note: Design description texts not unnecessarily long and focus on the essential statements of the image. For example, the description text: "Student presents red electric car", contains the superfluous information of the color of the car. The color is irrelevant in this example because it does not convey any information itself. Also, people who are visually impaired from birth can for the most part do nothing with color information.
The image title appears whenever you move the mouse pointer over the corresponding graphic element. The text layer that is then displayed is also referred to as a "tooltip". In the Drupal system used, the image title is used as a caption when a caption is desired.
Fundamental difference from the description text is that the title contains additional information about the image. The title should be chosen short and to the point. Additional information can be, for example, copyright information, names of people depicted, or purpose of the image (e.g. if the image is used as a link to an article or blog entry).
Example 1
Description: "A cup of steaming coffee stands in the middle of coffee beans."
Title: "Coffee cup © Max Mustermann"
Example 2
Description: "Laptop, on whose screen the computer game Pac-Man can be seen."
Title: "To the article about computer games"
Browser extension: Siteimprove Accessibility Checker
With the help of a plugin for the browser, individual web pages can be checked for accessibility. Siteimprove offers the free plugin "Accessibility Checker" for all common browsers (Firefox, Chrome, Edge, Opera). The plugin checks any web page for possible barriers that is currently open in the browser.
Note: A check regarding Quality Assurance of the web pages (broken links, spelling etc. ) is not possible through the plugin.
.Step 1
- Log in to Siteimprove.
- Select the menu item "Accessibility".
- Select "Browser Extension".
Step 2
- Click on the link for your corresponding browser and follow the installation instructions.
- The installation will then run automatically.
- Note: Make sure you are using the latest version of this browser.
After the successful installation of the plugin, the Siteimprove logo will appear as a new button in the upper right corner of your web browser.
Click this button to perform an accessibility test of the currently open website. When using it for the first time, you will also need to log in with your Siteimprove login details.
The results of the test will be displayed in the usual way in a new window.
.
Meaningful link texts: Designing links correctly
Weblinks should always have link text and not just consist of the plain web address the link points to.
Bad: URL linked to itself
Good: Meaningful description text linked
.Links should always be formulated clearly and "speaking". This means that link names convey their concrete goal even without the context of the web page. This is particularly relevant for users of assistance systems (such as screen readers), since they usually navigate directly from link to link and thus cannot perceive possible continuous text.
Bad: only the word "here" linked
You can find the speech from 11/21/2011 here.
Good: meaningful description text linked
Note:
The WCAG guideline also allows the purpose of the link to be identifiable "together with its link context determined by software". Some screen readers are able to recognize punctuation marks and thus output a link within a sentence, bullet point, or table cell along with its surrounding context. However, this capability is not yet supported by all assistance technologies. Therefore, it should not be relied upon.
Frequently on websites so-called "Anrisstexte" are used, which then lead over links such as more... or weiterlesen... lead to the actual article. These links appear several times on a web page and are therefore no longer unique and thus contradict the WCAG guideline 2.4.4.
One way to fix this is to use the title attribute for link texts. To use this attribute, specify a title for the link in the General dialog box when creating a link. This will be recognized by all assistance systems and made available to the respective user.
The easiest way to check whether the title attribute is set and used is to hover the mouse pointer over the link. If a title attribute is available, it will be displayed to you as mouse-over text.
Bad: Mouse-over text not available
Good: Mouse-over text differs
Guidelines for websites
We currently have two general policies active. That is once "Postal code 09596". Please use this postal code only in direct connection with the TU Freiberg mailbox.
On the other hand, there is the guideline for the correct spelling of "Welcome". Here, the correct capitalization and lower case must be ensured. A common mistake is the capitalized "Welcome"
.Also media guidelines contribute to the quality assurance of the website, e.g. "Check images larger than 1 MB". Images should only be embedded optimized for the web, otherwise the load times are unnecessarily high. (Mobile devices, volume rates, SEO criteria)
."PDFs older than 3 years". There is a risk that the documents are no longer up to date, contain outdated references or no longer correspond to the desired design.
Generally, the guidelines for websites are a tool to optimize the quality of the content. If you are shown a "violation" of the existing guidelines, it is sufficient for the time being to take a brief look at it and assess whether a change is necessary.
We are happy to accept further suggestions for guidelines.